最近接手一个任务，要求对不同分类的元素以不同的颜色呈现在地图上。
一开始思考通过热力图的形式。
通过设置MAX和 区间颜色来进行。
heatmapOverlay = new BMapLib.HeatmapOverlay({"radius": 5, "opacity": 0});
map.addOverlay(heatmapOverlay);
heatmapOverlay.setDataSet({data: points, max: 2});
heatmapOverlay.setOptions({
"gradient": {
0:"rgb(255,0,0,)"
1: "rgb(0,128,0)"
}
});
heatmapOverlay.show();但通过上述方式，当进行缩放时，颜色也随之变化；方案不可取；
第二种，通过marker方式：
var redIcon = new BMap.Icon("img/marker_red_sprite.png",new BMap.Size(25,10));
var greenIcon = new BMap.Icon("img/marker_green_sprite.png",new BMap.Size(25,10));
var yellowIcon = new BMap.Icon("img/marker_yellow_sprite.png",new BMap.Size(25,10));
var qingluIcon = new BMap.Icon("img/marker_qinglu_sprite.png",new BMap.Size(25,10));
var goldIcon = new BMap.Icon("img/marker_gold_sprite.png",new BMap.Size(25,10));
var ziIcon = new BMap.Icon("img/marker_zi_sprite.png",new BMap.Size(25,10));
var points = datapoints;
var map = new BMap.Map("container"); // 创建地图实例
map.centerAndZoom('大连市', 12);
var point = map.getCenter();
map.centerAndZoom(point, 12);
map.enableScrollWheelZoom(); // 允许滚轮缩放
var points = points;
if(points.length == 0 ){
return ;
}
for(var i = 0;i< points.length;i++){
var point = new BMap.Point(points[i].lng, points[i].lat);
var marker;
switch(points[i].count){
case 1:
marker = new BMap.Marker(point,{'icon':redIcon});
break;
case 2:
marker = new BMap.Marker(point,{'icon':greenIcon});
break;
case 3:
marker = new BMap.Marker(point,{'icon':yellowIcon});
break;
case 4:
marker = new BMap.Marker(point,{'icon':qingluIcon});
break;
case 5:
marker = new BMap.Marker(point,{'icon':goldIcon});
break;
case 6:
marker = new BMap.Marker(point,{'icon':ziIcon});
break;
}
//var marker = new BMap.Marker(point);
map.addOverlay(marker);可以实现，当时当数据超过2000时，加载时间过长。体验不好；放弃
第三种，通过PointCollection
var points1 = [],points2 = [],points3 = [],points4 = [],points5 = [],points6 = []; // 添加海量点数据
for (var i = 0; i < points.length; i++) {
switch(points[i].count){
case 1:
points1.push(new BMap.Point(points[i].lng, points[i].lat));
break;
case 2:
points2.push(new BMap.Point(points[i].lng, points[i].lat));
break;
case 3:
points3.push(new BMap.Point(points[i].lng, points[i].lat));
break;
case 4:
points4.push(new BMap.Point(points[i].lng, points[i].lat));
break;
case 5:
points5.push(new BMap.Point(points[i].lng, points[i].lat));
break;
case 6:
points6.push(new BMap.Point(points[i].lng, points[i].lat));
break;
}
}
var options = {
size: BMAP_POINT_SIZE_SMALL,
shape: BMAP_POINT_SHAPE_RHOMBUS,
}
switch(type){
case 1:
addCollection(map,points1,options,'#ED2D2D');
break;
case 2:
addCollection(map,points2,options,'#FFC80C');
break;
case 3:
addCollection(map,points3,options,'#22B110');
break;
case 4:
addCollection(map,points4,options,'#00A2E8');
break;
case 5:
addCollection(map,points5,options,'#FFF200');
break;
case 6:
addCollection(map,points6,options,'#A349A4');
break;
default:
addCollection(map,points1,options,'#ED2D2D');
addCollection(map,points2,options,'#FFC80C');
addCollection(map,points3,options,'#22B110');
addCollection(map,points4,options,'#00A2E8');
addCollection(map,points5,options,'FFF200');
addCollection(map,points6,options,'#A349A4');
break;
}
});
function addCollection(map,points,options,color){
options.color =color;
if(points.length >0){
var pointCollection = new BMap.PointCollection(points, options); // 初始化PointCollection
map.addOverlay(pointCollection); // 添加Overlay
}
}可以实现目标，不过这个图片行政目前不支持水滴样式。需要注意。
