vue2 openlayers 廊坊市中添加标注、聚合点 点击标注信息弹窗的代码

以下是基于 Vue2 和 OpenLayers 的添加标注、聚合点和点击标注信息弹窗的代码示例：

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

<script>
import 'ol/ol.css';
import olMap from 'ol/Map';
import olView from 'ol/View';
import olFeature from 'ol/Feature';
import olPoint from 'ol/geom/Point';
import olLayerVector from 'ol/layer/Vector';
import olSourceVector from 'ol/source/Vector';
import olStyle from 'ol/style/Style';
import olIcon from 'ol/style/Icon';
import olCluster from 'ol/source/Cluster';
import { fromLonLat } from 'ol/proj';

export default {
  data() {
    return {
      map: null,
      vectorLayer: null,
      clusterLayer: null,
      markers: [
        { id: 1, name: 'Marker 1', lat: 39.536, lon: 116.681 },
        { id: 2, name: 'Marker 2', lat: 39.543, lon: 116.676 },
        { id: 3, name: 'Marker 3', lat: 39.547, lon: 116.684 },
        { id: 4, name: 'Marker 4', lat: 39.554, lon: 116.682 },
        { id: 5, name: 'Marker 5', lat: 39.552, lon: 116.69 },
        { id: 6, name: 'Marker 6', lat: 39.546, lon: 116.694 },
      ],
    };
  },
  mounted() {
    this.initMap();
    this.addMarkers();
  },
  methods: {
    initMap() {
      this.map = new olMap({
        target: 'map',
        view: new olView({
          center: fromLonLat([116.681, 39.536]),
          zoom: 13,
        }),
      });
    },
    addMarkers() {
      const features = [];
      this.markers.forEach((marker) => {
        const feature = new olFeature({
          geometry: new olPoint(fromLonLat([marker.lon, marker.lat])),
          name: marker.name,
        });
        feature.setId(marker.id);
        feature.setStyle(this.createMarkerStyle());
        features.push(feature);
      });
      const vectorSource = new olSourceVector({
        features,
      });
      this.vectorLayer = new olLayerVector({
        source: vectorSource,
      });
      this.clusterLayer = new olLayerVector({
        source: new olCluster({
          distance: 40,
          source: vectorSource,
        }),
        style: this.createClusterStyle(),
      });
      this.map.addLayer(this.clusterLayer);
      this.map.addLayer(this.vectorLayer);
      this.map.on('click', (event) => {
        this.showMarkerInfo(event.coordinate);
      });
    },
    createMarkerStyle() {
      return new olStyle({
        image: new olIcon({
          src: 'https://openlayers.org/en/latest/examples/data/icon.png',
          scale: 0.5,
        }),
      });
    },
    createClusterStyle() {
      return new olStyle({
        image: new olIcon({
          src: 'https://openlayers.org/en/latest/examples/data/icon.png',
          scale: 0.5,
        }),
        text: new olStyle.Text({
          text: '{count}',
          font: 'bold 14px sans-serif',
          fill: new olStyle.Fill({
            color: '#fff',
          }),
        }),
      });
    },
    showMarkerInfo(coordinate) {
      const feature = this.map.getClosestFeatureToCoordinate(coordinate);
      if (feature) {
        const id = feature.getId();
        const name = feature.get('name');
        alert(`ID: ${id}\nName: ${name}`);
      }
    },
  },
};
</script>

<style>
#map {
  width: 100%;
  height: 500px;
}
</style>

代码说明：

1. 在 `data` 中定义了地图对象和标注数据。
2. 在 `mounted` 钩子中调用 `initMap` 方法初始化地图，调用 `addMarkers` 方法添加标注和聚合点，并绑定地图的 `click` 事件。
3. `initMap` 方法创建地图对象，并设置中心点和缩放等级。
4. `addMarkers` 方法循环标注数据，创建标注的 `Feature`，设置标注的样式和 ID，将所有标注 `Feature` 添加到矢量数据源中，创建标注图层和聚合图层，并将聚合图层和标注图层添加到地图中。
5. `createMarkerStyle` 方法创建标注样式，使用 `olIcon` 设置标注图标的图片地址和缩放比例。
6. `createClusterStyle` 方法创建聚合点样式，使用 `olIcon` 设置聚合点图标的图片地址和缩放比例，使用 `olStyle.Text` 设置聚合点文本的样式和内容，使用 `{count}` 表示聚合点内标注的数量。
7. `showMarkerInfo` 方法根据点击的坐标获取最近的标注，获取标注的 ID 和名称，并弹出信息框显示。

注意：以上示例代码仅为参考，具体实现需要根据实际情况进行调整。