使用百度地圖API按照分類扎不同顏色的點

最近接手一個任務，要求對不同分類的元素以不同的顏色呈現在地圖上。

一開始思考通過熱力圖的形式。

通過設置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
		}
	}

可以實現目標，不過這個圖片行政目前不支持水滴樣式。需要注意。