vue使用高德地图点聚合展示海量数据并生成信息窗口
·
initMap() {
// 初始化地图
const map = new AMap.Map("mapContainer", { resizeEnable: true, viewMode: '2D', lang: 'zh_cn' });
// 信息窗口实例
const infoWindow = new AMap.InfoWindow({ offset: new AMap.Pixel(6, -32) });
var cluster; var markers = []
// 遍历生成多个标记点
for (let i = 0, marker; i < this.lnglats.length; i++) {
marker = new AMap.Marker({
position: this.lnglats[i], // 不同标记点的经纬度
map: map,
icon: this.flag ? this.img.point : this.img.device
});
if (this.flag) {
marker.content = `
<div class="infoWindow">
<div class="infoTitle">点位信息</div>
<div class="infoContent">
<div class="viewImg">
<img src=${this.config.cadActionUrl + this.dataList[i].photoUrl} alt="">
</div>
<div class="detailsBox">
<div class="detailsBar">
<span class="detailContent">点位名称:</span>
<span class="detailContent">${this.dataList[i].name}</span>
</div>
<div class="detailsBar">
<span class="detailContent">点位类型:</span>
<span class="detailContent">${this.dataList[i].typeName ?this.dataList[i].typeName : '暂无'}</span>
</div>
<div class="detailsBar">
<span class="detailContent detailsClick" onclick="detailClick(${this.dataList[i].id ? this.dataList[i].id : '暂无'})">点位详情></span>
</div>
</div>
</div>
</div>
`
} else {
marker.content = `
<div class="infoWindow">
<div class="infoTitle">设备信息</div>
<div class="infoContent">
<viewer class="viewImg">
<img src=${config.cadActionUrl + this.dataList[i].photo} alt="">
</viewer>
<div class="detailsBox">
<div class="detailsBar">
<span class="detailContent">设备名称:</span>
<span class="detailContent">${this.dataList[i].name}</span>
</div>
<div class="detailsBar">
<span class="detailContent">设备类型:</span>
<span class="detailContent">${this.dataList[i].typeName ? this.dataList[i].typeName : '暂无'}</span>
</div>
<div class="detailsBar">
<span class="detailContent">IP地址:</span>
<span class="detailContent">${this.dataList[i].ip ? this.dataList[i].ip : '暂无'}</span>
</div>
<div class="detailsBar">
<span class="detailContent">杆件编号:</span>
<span class="detailContent">${this.dataList[i].rodCode ? this.dataList[i].rodCode : '暂无'}</span>
</div>
<div class="detailsBar">
<span class="detailContent">设备状态:</span>
<span class="detailContent">${this.onlineChange(this.dataList[i].online)}</span>
</div>
<div class="detailsBar">
<span class="detailContent detailsClick" onclick="detailClick(${this.dataList[i].id},${this.dataList[i].pointId})">设备详情></span>
</div>
</div>
</div>
</div>
`
}
marker.on('click', markerClick);
// marker.emit('click', { target: marker })// 默认初始化出现最后一条信息窗体
markers.push(marker)
}
map.plugin(["AMap.MarkerClusterer"], function () {
if (cluster) {
cluster.setMap(null)
}
cluster = new AMap.MarkerClusterer(map, markers);
});
function markerClick(e) {
infoWindow.setContent(e.target.content)
infoWindow.open(map, e.target.getPosition())
}
map.setFitView()
}
lnglats数组是所有经纬度集合,dataList是所有数据集合
魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。
更多推荐


所有评论(0)