高德地图加载海量点

来源:互联网 发布:淘宝促销管理在哪里 编辑:程序博客网 时间:2024/05/18 00:02

项目中需要加载的点标记过多(3000+),加载速度特别慢,所以为了解决此问题特别查阅了一下高德的API,发现在其对图层的介绍时有一个为加载海量麻点的图层可以解决此问题,故将此段代码拿出来以供查阅。注:建议在加载点至少在1000以上时再使用,亲测数据较少时,单个标记要更合适。

MassMarks 类
【常用属性】
zIndex【Number】: 图层叠加的顺序值,0表示最底层。默认zIndex:5 ;
zooms【Array】:支持的缩放级别范围,默认范围[3-18],在PC上,取值范围为[3-18];在移动设备上,取值范围为[3-19] ;
anchor【Pixel】:必填参数,图标显示位置偏移量,以图标的左上角为基准点(0,0)点;
url【String】:必填参数,图标的地址 ;
size【Size】:必填参数,图标的尺寸;
【常用方法】
set/getMap(map:Map) :设置/获取显示MassMark的地图对象;
set/getStyle(style:Object):设置/获取MassMark的显示样式,style里面包含图标的anchor、url和size ;
set/getData(data:Object) :设置/输出MassMark展现的数据集,数据集格式为:, data: Array 坐标数据集. 例:data: [{lnglat: [116.405285, 39.904989], name: i,id:1},{}, …],{}, …]}
【例】项目中需要更换数据集,所以就需要判断该图层是否存在

var mapLayers=map.getLayers(),//获取地图的所有图层    mass;if(mapLayers.length=="4"){//已包含批量麻点图层(根据情况而定,在我的项目中图层个数为4)    $.each(mapLayers, function(index,item) {        if(item.CLASS_NAME=="AMap.MassMarks"){            mass=mapLayers[index];        }    });//获取批量麻点图层    mass.setData(markers);//更换数据集}else{mass = new AMap.MassMarks(markers, {//创建一个海量麻点图层    url: '/images/result/icon-map-pos.png',    anchor: new AMap.Pixel(12, 29),    size: new AMap.Size(23, 32),    opacity:1,    cursor:'pointer',    zIndex: 1    }); }
0 0
原创粉丝点击