100 lines
3.4 KiB
JavaScript
100 lines
3.4 KiB
JavaScript
|
|
var cluster, markers = [];
|
|
var map = new AMap.Map("container", {
|
|
resizeEnable: true,
|
|
center:[113,23],
|
|
zoom: 6,
|
|
mapStyle: 'amap://styles/68c7a2be097cdc12d0a824916cabd401', //设置地图的显示样式
|
|
|
|
});
|
|
/*ui控件*/
|
|
AMapUI.loadUI(['control/BasicControl'], function(BasicControl) {
|
|
|
|
//添加一个缩放控件
|
|
// map.addControl(new BasicControl.Zoom({
|
|
// position: 'lt'
|
|
// }));
|
|
|
|
//缩放控件，显示Zoom值
|
|
// map.addControl(new BasicControl.Zoom({
|
|
// position: 'rt',
|
|
// showZoomNum: true
|
|
// }));
|
|
|
|
//图层切换控件
|
|
// map.addControl(new BasicControl.LayerSwitcher({
|
|
// position: 'rt'
|
|
// }));
|
|
});
|
|
|
|
for(var i=0;i<points.length;i+=1){
|
|
markers.push(new AMap.Marker({
|
|
position:points[i]['lnglat'],
|
|
content: '<div style="background-color: hsla(180, 100%, 50%, 0.7); height: 24px; width: 24px; border: 1px solid hsl(180, 100%, 40%); border-radius: 12px; box-shadow: hsl(180, 100%, 50%) 0px 0px 1px;"></div>',
|
|
offset: new AMap.Pixel(-15,-15)
|
|
}))
|
|
}
|
|
var count = markers.length;
|
|
var _renderCluserMarker = function (context) {
|
|
var factor = Math.pow(context.count/count,1/18)
|
|
var div = document.createElement('div');
|
|
var Hue = 180 - factor* 180;
|
|
var bgColor = 'hsla('+Hue+',100%,50%,0.7)';
|
|
var fontColor = 'hsla('+Hue+',100%,20%,1)';
|
|
var borderColor = 'hsla('+Hue+',100%,40%,1)';
|
|
var shadowColor = 'hsla('+Hue+',100%,50%,1)';
|
|
div.style.backgroundColor = bgColor
|
|
var size = Math.round(30 + Math.pow(context.count/count,1/5) * 20);
|
|
div.style.width = div.style.height = size+'px';
|
|
div.style.border = 'solid 1px '+ borderColor;
|
|
div.style.borderRadius = size/2 + 'px';
|
|
div.style.boxShadow = '0 0 1px '+ shadowColor;
|
|
div.innerHTML = context.count;
|
|
div.style.lineHeight = size+'px';
|
|
div.style.color = fontColor;
|
|
div.style.fontSize = '14px';
|
|
div.style.textAlign = 'center';
|
|
context.marker.setOffset(new AMap.Pixel(-size/2,-size/2));
|
|
context.marker.setContent(div)
|
|
}
|
|
addCluster(0);
|
|
|
|
function addCluster(tag) {
|
|
if (cluster) {
|
|
cluster.setMap(null);
|
|
}
|
|
if (tag == 2) {//完全自定义
|
|
cluster = new AMap.MarkerClusterer(map,markers,{
|
|
gridSize:80,
|
|
renderCluserMarker:_renderCluserMarker
|
|
});
|
|
} else if (tag == 1) {//自定义图标
|
|
var sts = [{
|
|
url: "http://a.amap.com/jsapi_demos/static/images/blue.png",
|
|
size: new AMap.Size(32, 32),
|
|
offset: new AMap.Pixel(-16, -16)
|
|
}, {
|
|
url: "http://a.amap.com/jsapi_demos/static/images/green.png",
|
|
size: new AMap.Size(32, 32),
|
|
offset: new AMap.Pixel(-16, -16)
|
|
}, {
|
|
url: "http://a.amap.com/jsapi_demos/static/images/orange.png",
|
|
size: new AMap.Size(36, 36),
|
|
offset: new AMap.Pixel(-18, -18)
|
|
},{
|
|
url: "http://a.amap.com/jsapi_demos/static/images/red.png",
|
|
size: new AMap.Size(48, 48),
|
|
offset: new AMap.Pixel(-24, -24)
|
|
},{
|
|
url: "http://a.amap.com/jsapi_demos/static/images/darkRed.png",
|
|
size: new AMap.Size(48, 48),
|
|
offset: new AMap.Pixel(-24, -24)
|
|
}];
|
|
cluster = new AMap.MarkerClusterer(map, markers, {
|
|
styles: sts,
|
|
gridSize:80
|
|
});
|
|
} else {//默认样式
|
|
cluster = new AMap.MarkerClusterer(map, markers,{gridSize:80});
|
|
}
|
|
} |