由于公司是做醫(yī)療方面護(hù)心儀設(shè)備這方面的右犹，有個(gè)需求是統(tǒng)計(jì)中國各個(gè)地區(qū)佩戴護(hù)心儀的人募壕，之前頁面效果如圖：
微信圖片_20181029144123.png
之前的效果圖 用戶有7000多個(gè)
image
顏色分別代表健康狀態(tài) 跟人頭顏色相對(duì)應(yīng)
后來用戶漲到7000多的時(shí)候绽昼，頁面打開就特別的卡了芭商，縮放更別說了派草，老大讓我優(yōu)化，得保證到10幾萬用戶時(shí)不卡頓蓉坎，能正嘲木欤縮放。那段時(shí)間真的是愁死蛉艾，根本不知道怎么下手钳踊，研究了一下代碼：之前的人像圖片都是一個(gè)一個(gè)的div定位出來的，不卡才怪..... 看了下加載數(shù)據(jù) ：首先頁面加載粗來就得7s左右勿侯，數(shù)據(jù)加載粗來其實(shí)只要1~2s左右拓瞪，我覺得還是跟高德地圖的模板有關(guān)系吧 總不可能去改高德地圖api
image
第一個(gè)接口數(shù)據(jù)主要是經(jīng)緯度
又去找了找高德地圖關(guān)于海量點(diǎn)的東西，最后經(jīng)過研究助琐，終于給搞出來了 祭埂，賊不卡，廢話不多說兵钮，直接上代碼吧!
setMap中的參數(shù)data的是請求的第一個(gè)接口的數(shù)據(jù)：數(shù)據(jù)為：
image
image
數(shù)據(jù)長這樣子
html：
<div id="container"></div>
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, //是否監(jiān)控地圖容器尺寸變化
keyboardEnable:false, //鍵盤控制'↑' '→' '↓' '←'
doubleClickZoom:false, //地圖是否可通過雙擊鼠標(biāo)放大地圖
});
/*根據(jù)健康狀態(tài)展示不同的圖片*/
var style = [
{ //健康green01
url:'../../imgs/mapImages/green01.png',
anchor:new AMap.Pixel(6, 6),
size:new AMap.Size(8, 8)
}, { //亞健康orange01
url:'../../imgs/mapImages/orange01.png',
anchor:new AMap.Pixel(4, 4),
size:new AMap.Size(8, 8)
}, { //疾病red01
url:'../../imgs/mapImages/red01.png',
anchor:new AMap.Pixel(3, 3),
size:new AMap.Size(8, 8)
}, { //正在救助nowHelper
url:'../../imgs/mapImages/nowHelpYellow.png',
anchor:new AMap.Pixel(3, 3),
size:new AMap.Size(8, 8)
}, { //未知狀態(tài)blue01
url:'../../imgs/mapImages/blue01.png',
anchor:new AMap.Pixel(3, 3),
size:new AMap.Size(8, 8)
}
];
var locationData = []; //存放經(jīng)緯度的數(shù)組
var status =''; //下表對(duì)應(yīng)的樣式
for (var i =0; i < data.length; i++) {
var str2 = data[i].location;
str2 = str2.split(','); //把經(jīng)緯度轉(zhuǎn)讓數(shù)組
/*判斷健康狀態(tài)*/
if(data[i].healthLevel ==1){//健康
status =0; //根據(jù)下標(biāo)來相對(duì)應(yīng)樣式 例如：健康對(duì)應(yīng)style數(shù)組中的第0個(gè)樣式
}else if (data[i].healthLevel ==2) {//亞健康
status =1;
}else if (data[i].healthLevel ==3) {//疾病
status =2;
}else if(data[i].healthLevel ==4){//正在救助nowHelper
status =3;
}else{//未知狀態(tài)
status =4;
}
/*{lnglat: Array(2), style: 2} 所需要的數(shù)據(jù)格式 */
locationData.push({
lnglat: str2,
style: status//對(duì)應(yīng)的status相對(duì)應(yīng)的樣式style
})
}
/* 大量點(diǎn)所對(duì)應(yīng)的方法*/
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); //用戶相對(duì)應(yīng)的經(jīng)緯度
marker.setLabel({content: e.data.name})//用戶相對(duì)應(yīng)的名字
});
mass.setMap(map);
}
微信圖片_20181029151201.png
最后在請求接口數(shù)據(jù)方法中調(diào)用setMap方法即可!
希望對(duì)你們有幫助蛆橡，歡迎前來討論。
