天地图实现点聚合(vue)

在Vue中使用天地图点聚合功能可以借助第三方库 leaflet.markercluster。以下是使用步骤：

1. 安装 leaflet.markercluster 库。可以通过 npm 安装：
   github地址

npm install leaflet.markercluster

2. 在 Vue 组件中引入 leaflet 和leaflet.markercluster

<template>
  <div id="map"></div>
</template>

<script>
import L from 'leaflet';
import 'leaflet.markercluster';

export default {
  mounted() {
    this.initMap();
  },
  methods: {
    initMap() {
      const map = L.map('map').setView([latitude, longitude], zoomLevel);

      // 添加天地图底图
      L.tileLayer('http://t{s}.tianditu.gov.cn/DataServer?T=vec_w&X={x}&Y={y}&L={z}', {
        subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
        attribution: '&copy; <a href="http://www.tianditu.gov.cn">天地图</a>',
        tms: true
      }).addTo(map);

      // 创建聚合图层
      const markers = L.markerClusterGroup();

      // 添加点标记
      for (const point of points) {
        const marker = L.marker([point.latitude, point.longitude]);
        markers.addLayer(marker);
      }

      // 将聚合图层添加到地图上
      map.addLayer(markers);
      
      // 如果需要清楚聚合图层
      // markers.clearLayers();
    }
  }
}
</script>

<style>
@import '~leaflet/dist/leaflet.css';
@import '~leaflet.markercluster/dist/MarkerCluster.css';
@import '~leaflet.markercluster/dist/MarkerCluster.Default.css';
#map {
  height: 400px;
}
</style>

上面的代码中，latitude 和 longitude 是地图的中心点坐标，zoomLevel 是缩放级别，points 是需要聚合的点的数据集合。你可以根据自己的需求修改这些参数。

在 Vue 组件中使用上述组件。

<template>
  <div>
    <MapComponent />
  </div>
</template>

<script>
import MapComponent from './MapComponent.vue';

export default {
  components: {
    MapComponent
  }
}
</script>

通过上述步骤，你就可以在 Vue 中使用天地图的点聚合功能了。请确保在使用前正确引入所需的库文件，并根据自己的需求进行参数配置和样式调整。