Vue使用高德地图实现点聚合+点击点坐标显示点信息的功能
业务场景
拿目前做的这个项目来说，需要完成这样的一个场景：读取数据库将树木的位置标在地图上，由于点比较多，要用点聚合的形式，点击地图上的点，会在右侧的信息栏中获取该树木的所有信息。demo图如下（接口数据因为是真实数据，遂隐藏）：
demo.png
分析
这里先简单列一下实现的思路：
- 初始化地图
- 访问接口拿到点的数据
- 用点聚合的形式将数据渲染在地图上
- 给每个点绑定点击事件
- 点击地图上点的时候拿到里面的key值，查该点的信息
- 用vue的双向绑定，将信息渲染到右边的单元格中
- 在使用筛选功能时，先重置数据，删除聚合点，然后重新再调用查询接口并重新绘制聚合点
解决思路有了之后，那么开始coding
实现
1.初始化地图
initMap () {
map = new AMap.Map('map', {
// 放大级别
zoom: 13,
// 放大缩小
resizeEnable: true,
// 位置
center: [117.094923,36.246692],
// 是否显示地图文字标记
showLabel: false,
ayers: [
// 卫星图
new AMap.TileLayer.Satellite(),
// 路书
new AMap.TileLayer.RoadNet()
]
})
}
2.访问业务接口拿到点的经纬度信息坐标
由于这里要查询点的所有相关信息，这里接口设计时，不仅只拿到lng，lat的值，还要有个数据的key值，这里的接口返回格式为：
data: [
{
keyid: '1001',
lnglat: [117.21564564, 36.3145486]
},{
keyid: '1002',
lnglat: [117.21564564, 36.3145486]
},{
keyid: '1003',
lnglat: [117.21564564, 36.3145486]
},
......
]
查询该数据接口，在查询成功后调用初始化点聚合的功能，具体实现如下：
// 获取点聚合数据
getPoints () {
axios.get(apiurl.getPointsList, {
// 这里是查询参数
starttime: this.searchForm.starttime,
endtime: this.searchForm.endtime,
worked: this.searchForm.worked
}).then(({data}) => {
// 解构赋值
this.pointsList = data
// 在查询成功后，调用点聚合的初始化功能
this.initMarkers()
}).catch((error) => {
console.log(error)
})
}
3.实现点聚合功能
调用initMarkers()函数，将数据点以点聚合的形式渲染在地图上，在添加点的同时，给每个点赋予新的属性，及前面提到的keyid值，以便点击该点时，将该keyid值传入接口来实现查询功能。在这里，使用marker.setExtData()函数来实现添加额外属性的功能，这里需要传入需要添加的属性和属性值，使用marker.on()来绑定点击事件。这里圈一下是重点，具体实现如下：
// 添加点聚合
initMarkers () {
// 初始化聚合列表和点的列表
let cluster, markers = [];
// 循环读取每一个点的经纬度信息
for (let i = 0; i < this.pointsList.length; i += 1) {
// 添加点坐标
let marker = new AMap.Marker({
position: this.pointsList[i]['lnglat'],
content: '<div style="background-color: hsla(180, 100%, 50%, 0.7); height: 24px; width: 24px; border: 1px solid hsl(180, 100%, 40%); border-radius: 12px; box-shadow: hsl(180, 100%, 50%) 0px 0px 1px;"></div>',
offset: new AMap.Pixel(-15, -15)
})
// 给marker点坐标添加额外的属性和对应的属性值，圈重点这里是关键
marker.setExtData(this.pointsList[i]['treeId'])
// 给每个点坐标绑定click事件，这里是实现点击功能的重点
marker.on('click', this.markerClick)
markers.push(marker)
}
let count = markers.length;
// 设置聚合样式，这里都是聚合样式的配置
let _renderClusterMarker = function (context) {
let factor = Math.pow(context.count / count, 1 / 18);
let div = document.createElement('div');
let Hue = 180 - factor * 180;
let bgColor = 'hsla(' + Hue + ',100%,50%,0.7)';
let fontColor = 'hsla(' + Hue + ',100%,20%,1)';
let borderColor = 'hsla(' + Hue + ',100%,40%,1)';
let shadowColor = 'hsla(' + Hue + ',100%,50%,1)';
div.style.backgroundColor = bgColor;
let size = Math.round(30 + Math.pow(context.count / count, 1 / 5) * 20);
div.style.width = div.style.height = size + 'px';
div.style.border = 'solid 1px ' + borderColor;
div.style.borderRadius = size / 2 + 'px';
div.style.boxShadow = '0 0 1px ' + shadowColor;
div.innerHTML = context.count;
div.style.lineHeight = size + 'px';
div.style.color = fontColor;
div.style.fontSize = '14px';
div.style.textAlign = 'center';
context.marker.setOffset(new AMap.Pixel(-size / 2, -size / 2));
context.marker.setContent(div)
};
// 调用函数添加点聚合功能
addCluster();
function addCluster() {
if (cluster) {
cluster.setMap(null);
} else {
// 如果不设置renderClusterMarker，聚合点为默认样式
cluster = new AMap.MarkerClusterer(map, markers, {
gridSize: 50,
// 使用上面设置的点聚合样式
renderClusterMarker: _renderClusterMarker
});
}
}
}
这里提一下，在使用点聚合功能时，在html页面上添加地图key值的地方，需要引入点聚合的插件：&plugin=AMap.MarkerClusterer 。
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=你的key值&plugin=AMap.MarkerClusterer"></script>
4.实现点坐标的点击事件
在前面已经给每个marker点绑定点击事件了，这里需要我们写个函数加以实现。
// 点坐标点击事件，在点聚合功能中以完成绑定
markerClick (e) {
console.log(e.target.getExtData())
// 拿到之前赋予的keyid值，将该值传入获取详细信息的函数
const keyId = e.target.getExtData()
// 调用获取详细信息的函数
this.getDesMessage(keyId)
}
5.根据keyId获取该点的详细信息并渲染
这里就没啥好说的了，前面拿到了keyId值，用此值查询数据库，将返回结果在页面上进行渲染。
// 获取列表值
getDesMessage (keyId) {
axios.get(apiurl.desMessage, {
// 查询需要传入的参数
keyId: keyId,
}).then(({data}) => {
// 将查询结果赋值给desMessage，然后利用vue的双向绑定渲染到页面上
this.desMessage = data
}).catch((error) => {
console.log(error)
})
}
6.完善
由于上面有筛选重置按钮，这里需要完善这两个功能，在提交查询时，先重置下页面数据再调用点聚合的功能，重置也亦如此。
// 提交查询
onSubmit () {
// 重置页面数据
// 删除所有的聚合点
this.removeMarkers()
// 将点的结果集置空
this.pointsList = []
// 重新调用接口获取数据
this.getPoints()
},
// 重置
resetForm () {
// 重置页面数据
// 删除所有的聚合点
this.removeMarkers()
// 查询表单置空
this.searchForm = {}
// 将点的结果集置空
this.pointsList = []
// 重新调用接口获取数据
this.getPoints()
},
// 删除点聚合
removeMarkers () {
map.clearMap()
}
到这里，点的聚合效果和点击效果就全部完成。
所有代码都为部分代码，这里只是提供一个实现的思路。
如需转载，请加上本文的链接并标明出处
一条爱吃屎的狗的博客
