2018-10-29|2018-10-29 解决高德地图海量点卡顿的问题 2018-10-29解决高德地图海量点卡

由于公司是做医疗方面护心仪设备这方面的，有个需求是统计中国各个地区佩戴护心仪的人，之前页面效果如图：

文章图片
微信图片_20181029144123.png 之前的效果图用户有7000多个

文章图片
image 颜色分别代表健康状态跟人头颜色相对应
后来用户涨到7000多的时候，页面打开就特别的卡了，缩放更别说了，老大让我优化，得保证到10几万用户时不卡顿，能正常缩放。那段时间真的是愁死，根本不知道怎么下手，研究了一下代码：之前的人像图片都是一个一个的div定位出来的，不卡才怪..... 看了下加载数据：首先页面加载粗来就得7s左右，数据加载粗来其实只要1~2s左右，我觉得还是跟高德地图的模板有关系吧总不可能去改高德地图api

文章图片
image 第一个接口数据主要是经纬度
又去找了找高德地图关于海量点的东西，最后经过研究，终于给搞出来了，贼不卡，废话不多说，直接上代码吧!
setMap中的参数data的是请求的第一个接口的数据：数据为：

文章图片
image
文章图片
image 数据长这样子
html：

js：

setMap:function(zoom,center,data){ var _this =this; var map =new AMap.Map('container', { zoom:5, center: center, zoomEnable:true,//是否可滚轮缩放 dragEnable:true,//是否可拖拽 resizeEnable:true,//是否监控地图容器尺寸变化 keyboardEnable:false,//键盘控制'↑' '→' '↓' '←' doubleClickZoom:false,//地图是否可通过双击鼠标放大地图}); /*根据健康状态展示不同的图片*/var style = [ {//健康green01url:'../../imgs/mapImages/green01.png',anchor:new AMap.Pixel(6, 6),size:new AMap.Size(8, 8)}, {//亚健康orange01url:'../../imgs/mapImages/orange01.png',anchor:new AMap.Pixel(4, 4),size:new AMap.Size(8, 8)}, {//疾病red01url:'../../imgs/mapImages/red01.png',anchor:new AMap.Pixel(3, 3),size:new AMap.Size(8, 8)}, {//正在救助nowHelperurl:'../../imgs/mapImages/nowHelpYellow.png',anchor:new AMap.Pixel(3, 3),size:new AMap.Size(8, 8)}, {//未知状态blue01url:'../../imgs/mapImages/blue01.png',anchor:new AMap.Pixel(3, 3),size:new AMap.Size(8, 8) } ]; var locationData = https://www.it610.com/article/[]; //存放经纬度的数组var status =''; //下表对应的样式for (var i =0; i < data.length; i++) {var str2 = data[i].location; str2 = str2.split(','); //把经纬度转让数组/*判断健康状态*/if(data[i].healthLevel ==1){//健康status =0; //根据下标来相对应样式例如：健康对应style数组中的第0个样式}else if (data[i].healthLevel ==2) {//亚健康status =1; }else if (data[i].healthLevel ==3) {//疾病status =2; }else if(data[i].healthLevel ==4){//正在救助nowHelperstatus =3; }else{//未知状态status =4; }/*{lnglat: Array(2),style: 2}所需要的数据格式 */locationData.push({ lnglat: str2, style: status//对应的status相对应的样式style }) }/* 大量点所对应的方法*/ var mass =new AMap.MassMarks(locationData, {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); }

补充：localtionData的格式数据必须是这种