高德地图加载海量点

来源：互联网发布：东北大学软件学院宿舍编辑：程序博客网时间：2024/05/21 11:24

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

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('周边扩容小区未查询到相关数据');            }        }});

即实现了想要的效果

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

阅读全文

0 0