Vue使用百度地图实现聚合的效果(vue-baidu-map)
Vue使用百度地图实现聚合的效果(vue-baidu-map)
·
Vue使用百度地图实现聚合的效果(vue-baidu-map)
- 安装插件:
yarn add vue-baidu-map
- 在
main.js
中全局引入密钥(在百度开发者中心注册):import BaiduMap from 'vue-baidu-map' Vue.use(BaiduMap, { ak: 'your_app_key' // 百度地图秘钥 })
- 代码实现:
<template>
<baidu-map id="allmap" :zoom="mapZoom" :center="mapCenter" class="allmap" :scroll-wheel-zoom="true">
</baidu-map>
</template>
<script type="text/javascript">
export default{
data() {
return {
map: null,
mapCenter:{ lng: 121.508483, lat: 31.289045 },
mapZoom:13,
},
}
mounted(){
this.getList()
this.initMap()
},
methods: {
// 初始化地图
initMap() {
const that = this
// GL版命名空间为BMapGL 创建Map实例
that.map = new BMapGL.Map("allmap");
// 初始化地图,设置中心点坐标和地图级别
that.map.centerAndZoom(new BMapGL.Point(that.mapCenter.lng, that.mapCenter.lat), 5);
//开启鼠标滚轮缩放
that.map.enableScrollWheelZoom(true);
// 设置地图类型为地球模式
that.map.setMapType(BMAP_EARTH_MAP);
// 监听地图层级
that.map.addEventListener("zoomend", function(e) {
var ZoomNum = that.map.getZoom();
if (ZoomNum <= 6) {
that.getqingdanList(30)
} else if (ZoomNum > 6 && ZoomNum < 10) {
that.getList(50) // 设置像素聚合的距离阈值为 50 像素
} else {
that.getList(100) // 设置像素聚合的距离阈值为 50 像素
}
});
},
pixelCluster(markers, distance) {
// 先清除之前的详细点位信息
// if (this.map != null && this.map.getOverlays() != null && this.map.getOverlays().length > 0) {
// this.map.clearOverlays()
// }
let clusters = []
for (let i = 0; i < markers.length; i++) {
let cluster = [markers[i]]
for (let j = i + 1; j < markers.length; j++) {
const pixel1 = this.map.pointToPixel(new BMapGL.Point(markers[i].lng, markers[i].lat))
const pixel2 = this.map.pointToPixel(new BMapGL.Point(markers[j].lng, markers[j].lat))
const pixelDistance = Math.sqrt(Math.pow(pixel1.x - pixel2.x, 2) + Math.pow(pixel1.y - pixel2.y, 2))
if (pixelDistance < distance) {
cluster.push(markers[j])
markers.splice(j, 1)
j--
}
}
clusters.push(cluster)
}
// 创建自定义图标,本地的图片
var myIcon = new BMapGL.Icon('src/assets/img/biaoqian.png', new BMapGL.Size(23, 25), {
anchor: new BMapGL.Size(10, 25),
});
// 在地图上显示聚合后的数据
clusters.forEach(cluster => {
const center = this.getClusterCenter(cluster)
// 获取对一个的qingdanId
const qingdanId = this.getClusterQingdanId(cluster)
const label = new BMapGL.Label(cluster.length, {offset: new BMapGL.Size(15, -30)})
//文本标注样式,transform为X轴平移,即文本居中显示
label.setStyle({
color: "#fff",
//backgroundColor: "rgba(0, 0, 0, 0.5)",
backgroundColor: "rgba(0, 0, 0, 0.3)",
borderRadius: "10px",
padding: "0 10px",
fontSize: "14px",
lineHeight: "20px",
border :"0",
transform:'translateX(-50%)'
});
const marker = new BMapGL.Marker(center, {icon: myIcon})
// 这里用于其它方法
marker.qingdanId = {
qingdanId: qingdanId
}
// 主要用于清除数据:根据id清除
marker.myId = "shouyetubiao";
marker.setLabel(label)
this.map.addOverlay(marker)
})
},
getClusterCenter(cluster) {
let totalLng = 0
let totalLat = 0
cluster.forEach(marker => {
totalLng += parseFloat(marker.lng)
totalLat += parseFloat(marker.lat)
})
const centerLng = totalLng / cluster.length
const centerLat = totalLat / cluster.length
return new BMapGL.Point(centerLng, centerLat)
},
getClusterQingdanId(cluster) {
let qingdanId = null;
cluster.forEach(marker => {
qingdanId = marker.qingdanId
})
return qingdanId
},
getqingdanList(xiangsu) {
// 根据名称移除指定覆盖物
if (this.map != null && this.map.getOverlays() != null && this.map.getOverlays().length > 0) {
this.removeOverlayById("shouyetubiao")
}
this.$http({
url: this.$http.adornUrl('/qingdan/list'),
method: 'get',
}).then(({data}) => {
if (data.code === 0) {
this.qingdanList = data.qingdanList
}
})
this.pixelCluster(this.qingdanList, xiangsu)
},
// 根据id删除覆盖物
removeOverlayById(id) {
var overlays = this.map.getOverlays();
overlays.forEach(overlay => {
if(overlay.myId === id) {
this.map.removeOverlay(overlay)
}
});
},
}
}
</script>
更多推荐
所有评论(0)