vue openlayers 点击点位自义弹框

要在 Vue 中实现点击点位弹出自定义弹框，可以按照以下步骤操作：

1. 在 Vue 组件中引入所需库：

import 'ol/ol.css';
import Overlay from 'ol/Overlay';
import { Map, View } from 'ol';
import { Tile as TileLayer, Vector as VectorLayer } from 'ol/layer';
import { OSM, Vector as VectorSource } from 'ol/source';
import { Icon, Style } from 'ol/style';
import { fromLonLat } from 'ol/proj';

2. 在 Vue 组件的 `mounted` 钩子中创建地图、图层、数据源、样式和弹框：

mounted() {
  // 创建地图
  this.map = new Map({
    target: 'map',
    layers: [
      new TileLayer({
        source: new OSM()
      }),
      this.vectorLayer
    ],
    view: new View({
      center: fromLonLat([116.38, 39.9]),
      zoom: 10
    })
  });

  // 创建矢量图层和数据源
  this.vectorSource = new VectorSource();
  this.vectorLayer = new VectorLayer({
    source: this.vectorSource,
    style: new Style({
      image: new Icon({
        src: require('@/assets/marker.png'),
        anchor: [0.5, 1]
      })
    })
  });

  // 创建弹框
  this.popup = new Overlay({
    element: document.getElementById('popup'),
    positioning: 'bottom-center',
    stopEvent: false,
    offset: [0, -50]
  });
  this.map.addOverlay(this.popup);
},

3. 在 Vue 组件的模板中创建地图容器和弹框容器：

<template>
  <div>
    <div id="map"></div>
    <div id="popup" class="ol-popup">
      <a href="#" id="popup-closer" class="ol-popup-closer"></a>
      <div id="popup-content"></div>
    </div>
  </div>
</template>

4. 监听地图的 `singleclick` 事件，根据点击位置获取点位信息，然后在弹框中显示：

this.map.on('singleclick', (event) => {
  this.map.forEachFeatureAtPixel(event.pixel, (feature) => {
    const coordinates = feature.getGeometry().getCoordinates();
    const content = `<p>${feature.get('name')}</p>`;
    document.getElementById('popup-content').innerHTML = content;
    this.popup.setPosition(coordinates);
    return true;
  });
});

5. 在弹框容器中添加关闭按钮的点击事件：

document.getElementById('popup-closer').addEventListener('click', () => {
  this.popup.setPosition(undefined);
});

6. 根据需要自定义弹框的样式和内容。

注意：在使用自定义弹框时，需要注意弹框的位置和内容，避免重叠和遮挡。