高德地图海量点加载2种方式
Posted 云胡不喜
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了高德地图海量点加载2种方式相关的知识，希望对你有一定的参考价值。
1、普通maker创建，然后添加到地图上，页面会出现卡顿，甚至有可能卡死，页面崩溃。。。
async initMark() {
var map = this.map
this.removeMarkers()
this.map.setZoom(7)
this.map.setCenter([108.907295, 35.601474])
this.infoWindow = new AMap.InfoWindow({ offset: new AMap.Pixel(-3, -16) })
let infoWindow = this.infoWindow
let list = this.list
let category = this.mapDataType ? \'\' : this.category
for (var i = 0; i < list.length; i++) {
let iconType =
list[i] && list[i].index ? list[i].index.split(\'_data\')[0] : \'\'
let icon = iconType ? this.newIcon(iconType) : this.icon
let lon = list[i].lon || list[i].end_lon
let lat = list[i].lat || list[i].end_lat
// console.log(i, lon, lat)
if (lon && lat) {
let marker = new AMap.Marker({
position: [lon, lat],
data: list[i],
map: map,
offset: new AMap.Pixel(-11, -11),
icon: icon
})
let that = this
marker.on(\'click\', function(e) {
let myRow = \'\'
let showItem = []
let shwoTitlekey = \'\'
let data =e.target.w.data || e.target.Ce.data
let trueKey = data && data.index ? data.index.split(\'_data\')[0] : \'\'
if (data.index) {
shwoTitlekey = getKeyByCategory(trueKey).nameKey
detailByIndexAndIdApi({ index: data.index, id: data.id }).then(
res => {
data = res.data
showItem = formItem[trueKey]
myRow =
\'<div class="info_title">\' + data[shwoTitlekey] + \'</div>\'
if (showItem && showItem.length) {
for (let i = 0; i < showItem.length; i++) {
if (showItem[i].type === \'objArray\') {
let val = \'\'
for (let j = 0; j < showItem[i].name.length; j++) {
val +=
data[showItem[i].name[j].value] +
showItem[i].name[j].label
}
myRow +=
\'<div class="info_row"><span class="info_lable">\' +
showItem[i].label +
\'：</span>\' +
val +
\'</div>\'
} else if (showItem[i].type === \'array\') {
let val = \'\'
for (let j = 0; j < showItem[i].name.length; j++) {
if (data[showItem[i].name[j]]) {
val +=
j > 0
? \'、\' + data[showItem[i].name[j]]
: data[showItem[i].name[j]]
}
}
myRow +=
\'<div class="info_row"><span class="info_lable">\' +
showItem[i].label +
\'：</span>\' +
val +
\'</div>\'
} else {
let currentVal = data[showItem[i].name]
? data[showItem[i].name]
: \'无\'
myRow +=
\'<div class="info_row"><span class="info_lable">\' +
showItem[i].label +
\'：</span>\' +
currentVal +
\'</div>\'
}
}
}
let html = myRow
infoWindow.setContent(html)
infoWindow.open(map, e.target.getPosition())
}
)
}
})
}
// marker.emit(\'click\', { target: marker })
}
}2、 通过new AMap.MassMarks实现，页面可以很好的渲染，不会出现卡死。
async initMark() {
var map = this.map
this.resetMap()
this.infoWindow = new AMap.InfoWindow({ offset: new AMap.Pixel(-3, -16) })
let infoWindow = this.infoWindow
let list = this.list
let category = this.mapDataType ? \'\' : this.category
let style = []
list.forEach((item, ind) => {
let lon = item.lon || item.end_lon
let lat = item.lat || item.end_lat
item.lnglat = [lon, lat]
let iconType = item && item.index ? item.index.split(\'_data\')[0] : \'\'
let icon = iconType ? this.newIcon2(iconType) : this.icon
style.push(icon)
item.style = ind
})
var mass = new AMap.MassMarks(list, {
opacity: 1,
zIndex: 111,
cursor: \'pointer\',
style: style
})
var marker = new AMap.Marker({ content: \' \', map: map })
mass.on(\'click\', function(e) {
let myRow = \'\'
let showItem = []
let shwoTitlekey = \'\'
let data = e.data || e.target.w.data || e.target.Ce.data
let trueKey = data && data.index ? data.index.split(\'_data\')[0] : \'\'
if (data.index) {
shwoTitlekey = getKeyByCategory(trueKey).nameKey
detailByIndexAndIdApi({ index: data.index, id: data.id }).then(
res => {
data = res.data
showItem = formItem[trueKey]
myRow = \'<div class="info_title">\' + data[shwoTitlekey] + \'</div>\'
if (showItem && showItem.length) {
for (let i = 0; i < showItem.length; i++) {
if (showItem[i].type === \'objArray\') {
let val = \'\'
for (let j = 0; j < showItem[i].name.length; j++) {
val +=
data[showItem[i].name[j].value] +
showItem[i].name[j].label
}
myRow +=
\'<div class="info_row"><span class="info_lable">\' +
showItem[i].label +
\'：</span>\' +
val +
\'</div>\'
} else if (showItem[i].type === \'array\') {
let val = \'\'
for (let j = 0; j < showItem[i].name.length; j++) {
if (data[showItem[i].name[j]]) {
val +=
j > 0
? \'、\' + data[showItem[i].name[j]]
: data[showItem[i].name[j]]
}
}
myRow +=
\'<div class="info_row"><span class="info_lable">\' +
showItem[i].label +
\'：</span>\' +
val +
\'</div>\'
} else {
let currentVal = data[showItem[i].name]
? data[showItem[i].name]
: \'无\'
myRow +=
\'<div class="info_row"><span class="info_lable">\' +
showItem[i].label +
\'：</span>\' +
currentVal +
\'</div>\'
}
}
}
let html = myRow
infoWindow.setContent(html)
infoWindow.open(map, e.data.lnglat)
}
)
}
})
this.mass= mass
mass.setMap(map)
}
3、关于地图重绘
普通maker可以通过重绘地图的方式： this.map.clearMap()
海量点重绘可以通过清除海量点重绘： this.mass.clear()以上是关于高德地图海量点加载2种方式的主要内容，如果未能解决你的问题，请参考以下文章