高德地图加载海量点

在实现效果的时候主要参考了两个例子：

1、点击打开链接

2、官方API列子

需求：本来我做的是加载点然后点击弹窗，但是由于数量多加载速度太慢，同事建议我换成海量点

参考例子1时，其他的都很好理解，就是

数据集格式为：, data: Array 坐标数据集. 例：data: [{lnglat: [116.405285, 39.904989], name: i,id:1},{}, …],{}, …]} 

首先我照着格式拼凑data

$.ajax( {
	        type : "post",
	        url : "simple.do?action=conditionQuery",
	        data:{
	        	'type':ss,
	            'province': provinceValue,
	            'city' : city,
	            'month':month,
	        },
	      	error:function () {
	           alert('服务器请求失败,请重新请求')
	        }, 
	        success : function(data){
	            var dt = JSON.parse(data.resultData);	
	            if(dt.length>0){
	            	  var style = [{
	                      url: 'resource/img/7.png',
	                      anchor: new AMap.Pixel(6, 6),
	                      size: new AMap.Size(8, 8)
	                    },{
	                      url: 'resource/img/9.png',
	                      anchor: new AMap.Pixel(3, 3),
	                      size: new AMap.Size(8, 8)
	                    },{
	                      url: 'resource/img/8.png',
	                      anchor: new AMap.Pixel(4, 4),
	                      size: new AMap.Size(8, 8)
	                    }
	                  ];
	            	 var massMarks = [];
		            for(var i=0;i<dt.length;i++){
		            	      
		            	var point={'lnglat':[dt[i].LNG,dt[i].LAT],'name':dt[i].CT,'id':dt[i].ID};
		            	massMarks.push(point);
		            }
		            var mass = new AMap.MassMarks(massMarks, {
				           opacity:0.8,
				           zIndex: 111,
				           cursor:'pointer',
				           style:style
				     });
		                                  
		            var marker = new AMap.Marker({content:' ',map:map});
				     mass.on('mouseover',function(e){
				       marker.setPosition(e.data.lnglat);
				       marker.setLabel({content:e.data.name})
				     })
				     mass.setMap(map); 
	            }else{
	            	alert('周边扩容小区未查询到相关数据');
	            }
	
	        }
 });

因为是筛选查询还有一个需求：按照不同分类加载的点的图标做区分

网上能够参考的例子也很少，我原来想着总共分为三类点，难道要做三个海量点的图层，再给每个图层的mark添加mouseover事件，但是不可能这么笨拙吧，于是我又去查了官网的参考文档，还真得找到了符合我需求的解释：

原有代码照着官方说明改进了一下

 $.ajax( {
	        type : "post",
	        url : "simple.do?action=conditionQuery",
	        data:{
	        	'type':ss,
	            'province': provinceValue,
	            'city' : city,
	            'month':month,
	        },
	      	error:function () {
	           alert('服务器请求失败,请重新请求')
	        }, 
	        success : function(data){
	            var dt = JSON.parse(data.resultData);	
	            if(dt.length>0){
	            	  var style = [{
	                      url: 'resource/img/7.png',
	                      anchor: new AMap.Pixel(6, 6),
	                      size: new AMap.Size(8, 8)
	                    },{
	                      url: 'resource/img/9.png',
	                      anchor: new AMap.Pixel(3, 3),
	                      size: new AMap.Size(8, 8)
	                    },{
	                      url: 'resource/img/8.png',
	                      anchor: new AMap.Pixel(4, 4),
	                      size: new AMap.Size(8, 8)
	                    }
	                  ];
	            	 var massMarks = [];
		            for(var i=0;i<dt.length;i++){
		            	var sn;
		            	if(dt[i].CT.indexOf("RRC") != -1){
			                sn=0;
		                }else if(dt[i].CT.indexOf("空口下行") != -1){
		                	sn=1;
		                }else{              
		                	sn=2;
		                }		       
		            	var point={'lnglat':[dt[i].LNG,dt[i].LAT],'name':dt[i].CT,'id':dt[i].ID,'style':sn};
		            	massMarks.push(point);
		            }
		            var mass = new AMap.MassMarks(massMarks, {
				           opacity:0.8,
				           zIndex: 111,
				           cursor:'pointer',
				           style:style
				     });
		                                  
		            var marker = new AMap.Marker({content:' ',map:map});
				     mass.on('mouseover',function(e){
				       marker.setPosition(e.data.lnglat);
				       marker.setLabel({content:e.data.name})
				     })
				     mass.setMap(map); 
	            }else{
	            	alert('周边扩容小区未查询到相关数据');
	            }
	
	        }
});

后记：加载速度确实比原先快了很多