Vue使用百度地图实现聚合的效果(vue-baidu-map)

Vue使用百度地图实现聚合的效果(vue-baidu-map)

1. 安装插件：yarn add vue-baidu-map
2. 在main.js中全局引入密钥（在百度开发者中心注册）：

   import BaiduMap from 'vue-baidu-map'
   Vue.use(BaiduMap, {
     ak: 'your_app_key' // 百度地图秘钥
   })
   

3. 代码实现：

<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>