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' // 百度地图秘钥
   })
   1
   2
   3
   4

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139