vue2 openlearys 添加聚合点并且在添加聚合点前清楚页面的聚合点的代码

在 Vue2 中使用 OpenLayers 添加聚合点，可以使用以下步骤：

1. 安装 OpenLayers：

npm install ol

2. 在 Vue 组件中引入 OpenLayers：

import 'ol/ol.css';
import Map from 'ol/Map';
import View from 'ol/View';
import VectorLayer from 'ol/layer/Vector';
import VectorSource from 'ol/source/Vector';
import Feature from 'ol/Feature';
import Point from 'ol/geom/Point';
import {Icon, Style} from 'ol/style';
import Cluster from 'ol/source/Cluster';
import {fromLonLat} from 'ol/proj';

3. 在 Vue 组件中定义地图容器和图层：

<template>
  <div class="map" ref="map"></div>
</template>

<script>
export default {
  name: 'Map',
  data() {
    return {
      map: null,
      vectorLayer: null,
    };
  },
  mounted() {
    this.initializeMap();
  },
  methods: {
    initializeMap() {
      // 创建地图容器
      const map = new Map({
        target: this.$refs.map,
        view: new View({
          center: fromLonLat([118.78, 32.04]), // 坐标转换
          zoom: 10,
        }),
      });

      // 创建矢量图层和矢量数据源
      const vectorSource = new VectorSource();
      const vectorLayer = new VectorLayer({
        source: vectorSource,
        style: this.getClusterStyle, // 聚合点样式
      });

      // 将图层添加到地图中
      map.addLayer(vectorLayer);

      // 保存地图和图层到 data 中
      this.map = map;
      this.vectorLayer = vectorLayer;

      // 添加点数据
      const features = [];
      for (let i = 0; i < 100; i++) {
        const feature = new Feature({
          geometry: new Point(fromLonLat([118.78 + Math.random(), 32.04 + Math.random()])),
        });
        features.push(feature);
      }
      vectorSource.addFeatures(features);
    },
    getClusterStyle(feature) {
      // 聚合点样式
      const size = feature.get('features').length;
      const style = new Style({
        image: new Icon({
          src: 'https://openlayers.org/en/latest/examples/data/dot.png',
          scale: 0.6 + 0.4 * (size / 10),
        }),
        text: new Text({
          text: size.toString(),
          fill: new Fill({
            color: '#fff',
          }),
        }),
      });
      return style;
    },
    clearCluster() {
      // 清除图层中的聚合点
      const vectorSource = this.vectorLayer.getSource();
      vectorSource.clear();
    },
    addCluster() {
      // 添加聚合点
      const vectorSource = this.vectorLayer.getSource();
      const clusterSource = new Cluster({
        distance: 40,
        source: vectorSource,
      });
      vectorSource.clear();
      vectorSource.addFeatures(clusterSource.getFeatures());
    },
  },
};
</script>

4. 在 Vue 组件中添加清除聚合点和添加聚合点的方法，并在需要的时候调用：

<template>
  <div>
    <div class="map" ref="map"></div>
    <button @click="clearCluster">清除聚合点</button>
    <button @click="addCluster">添加聚合点</button>
  </div>
</template>

<script>
// ...
export default {
  // ...
  methods: {
    // ...
    clearCluster() {
      // 清除图层中的聚合点
      const vectorSource = this.vectorLayer.getSource();
      vectorSource.clear();
    },
    addCluster() {
      // 添加聚合点
      const vectorSource = this.vectorLayer.getSource();
      const clusterSource = new Cluster({
        distance: 40,
        source: vectorSource,
      });
      vectorSource.clear();
      vectorSource.addFeatures(clusterSource.getFeatures());
    },
  },
};
</script>