vue-amap配置方法:https://blog.csdn.net/qq_40716778/article/details/105505163
高德地图海量点组件:PointSimplifier,详情参考:https://lbs.amap.com/api/javascript-api/reference-amap-ui/mass-data/pointsimplifier#render
代码:
<template>
<div id="test-map" />
</template>
<script>
import { lazyAMapApiLoaderInstance } from 'vue-amap'
export default {
data() {
return {
map: '' // 地图
}
},
mounted() {
lazyAMapApiLoaderInstance.load().then(() => {
this.map = new AMap.Map('test-map', {
zooms: [3, 18], // 地图缩放范围
center: new AMap.LngLat(116.397428, 39.90923)
})
// 加载海量点组件
AMapUI.loadUI(['misc/PointSimplifier'], PointSimplifier => {
if (!PointSimplifier.supportCanvas) {
alert('当前环境不支持 Canvas!')
return
}
// 创建组件实例
new PointSimplifier({
map: this.map,
// data是海量点的坐标,下面是随机产生点坐标的方法
data: (() => {
var data = []
for (var i = 0, len = 5000; i < len; i++) {
data.push({
position: [
this.map.getCenter().getLng() + (Math.random() > 0.5 ? 2 : -2) * Math.random(),
this.map.getCenter().getLat() + (Math.random() > 0.5 ? 2 : -2) * Math.random()
]
})
}
return data
})(),
// 返回要显示的点坐标
getPosition: (dataItem) => {
return dataItem.position
}
})
})
})
}
}
</script>
<style scoped>
#test-map{
height:670px;
}
</style>
效果如下图: