vue2使用openlayers然后添加自定义背景图层和标记点，标记点使用自定义图标以及点击标记点悬浮详细内容

在Vue中使用OpenLayers，首先需要安装OpenLayers库

npm install ol

然后，在Vue组件中引入OpenLayers并使用它创建一个地图示例

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

<script>
import 'ol/ol.css';
import Map from 'ol/Map';
import View from 'ol/View';
import TileLayer from 'ol/layer/Tile';
import XYZ from 'ol/source/XYZ';
import { fromLonLat } from 'ol/proj';
import Feature from 'ol/Feature';
import Point from 'ol/geom/Point';
import Icon from 'ol/style/Icon';
import Style from 'ol/style/Style';
import Overlay from 'ol/Overlay';  // 引入 Overlay 用于创建悬浮框

export default {
  name: 'MapComponent',
  data() {
    return {
      map: null,
      markerFeatures: [],
      overlay: null,  // 用于存储悬浮框对象
    };
  },
  mounted() {
    // 创建地图对象
    this.map = new Map({
      target:'map',  // 地图渲染的目标 DOM 元素的 ID
      layers: [
        new TileLayer({
          source: new XYZ({
            url: 'https://{a-c}.tile.openstreetmap.org/{z}/{x}/{y}.png',  // 自定义背景图层的 URL
          }),
        }),
      ],
      view: new View({
        center: fromLonLat([0, 0]),  // 地图的初始中心坐标
        zoom: 2,  // 初始缩放级别
      }),
    });

    // 添加标记点
    this.addMarkers();

    // 监听地图的点击事件
    this.map.on('click', this.handleMapClick);
  },
  methods: {
    addMarkers() {
      const marker1 = new Feature({
        geometry: new Point(fromLonLat([10, 20])),  // 创建标记点 1 的几何位置
      });
      marker1.setStyle(new Style({
        image: new Icon({
          src: 'custom-icon.png',  // 标记点 1 的自定义图标路径
          anchor: [0.5, 1],  // 图标的锚点
        }),
      }));

      const marker2 = new Feature({
        geometry: new Point(fromLonLat([30, 40])),  // 创建标记点 2 的几何位置
      });
      marker2.setStyle(new Style({
        image: new Icon({
          src: 'another-custom-icon.png',  // 标记点 2 的自定义图标路径
          anchor: [0.5, 1],  // 图标的锚点
        }),
      }));

      this.markerFeatures.push(marker1, marker2);  // 将标记点特征添加到数组

      const vectorSource = new VectorSource({
        features: this.markerFeatures,  // 标记点的数据源
      });

      const vectorLayer = new VectorLayer({
        source: vectorSource,  // 为标记点图层设置数据源
      });

      this.map.addLayer(vectorLayer);  // 将标记点图层添加到地图
    },
    handleMapClick(event) {
      const feature = this.map.forEachFeatureAtPixel(event.pixel, (feature) => feature);  // 获取点击位置的特征（如果有）

      if (feature) {  // 如果点击到了标记点
        this.showOverlay(feature);  // 显示悬浮框
      } else {  // 否则
        this.hideOverlay();  // 隐藏悬浮框
      }
    },
    showOverlay(feature) {
      // 创建悬浮框的内容
      const content = `<div>
        <h2>标记点详细信息</h2>
        <button οnclick="handleViewTrajectory()">查看轨迹</button>
        <button οnclick="handleCloseTrajectory()">关闭轨迹</button>
      </div>`;

      // 创建悬浮框对象
      this.overlay = new Overlay({
        element: document.createElement('div'),  // 创建 DOM 元素
        positioning: 'bottom-center',  // 悬浮框的定位方式
      });

      // 设置悬浮框的内容
      this.overlay.getElement().innerHTML = content;

      // 将悬浮框添加到地图
      this.map.addOverlay(this.overlay);

      // 设置悬浮框的位置
      this.overlay.setPosition(this.map.getCoordinateFromPixel(event.pixel));
    },
    hideOverlay() {
      if (this.overlay) {  // 如果存在悬浮框
        this.map.removeOverlay(this.overlay);  // 从地图中移除悬浮框
        this.overlay = null;  // 重置悬浮框对象为 null
      }
    },
    handleViewTrajectory() {
      // 处理查看轨迹的逻辑（这里仅为示例，实际需根据需求实现）
      console.log('查看轨迹');
    },
    handleCloseTrajectory() {
      // 处理关闭轨迹的逻辑（这里仅为示例，实际需根据需求实现）
      console.log('关闭轨迹');
    },
  },
  beforeDestroy() {
    this.map.un('click', this.handleMapClick);  // 在组件销毁前取消点击事件的监听
  },
};
</script>

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

总结

上述代码实现了在 Vue2 中使用 OpenLayers 创建地图，并添加自定义背景图层、自定义图标的标记点，同时实现了点击标记点显示悬浮框，悬浮框中包含查看轨迹和关闭查看轨迹的按钮。
在 mounted 钩子中，首先创建了地图对象，设置了背景图层和初始视图。然后调用 addMarkers 方法添加标记点，并监听地图的点击事件。
addMarkers 方法中，创建了两个标记点的特征对象，并为它们设置了自定义图标和位置。将这些标记点特征添加到一个数组，创建数据源和图层，最终将图层添加到地图中。
handleMapClick 方法根据点击位置获取是否命中标记点，如果命中则调用 showOverlay 显示悬浮框，否则调用 hideOverlay 隐藏悬浮框。
showOverlay 方法创建了悬浮框的内容，包括标记点的详细信息和操作按钮。创建悬浮框对象，设置其内容、添加到地图并设置位置。
hideOverlay 方法用于在需要时移除悬浮框。
handleViewTrajectory 和 handleCloseTrajectory 方法目前仅作为示例，实际应用中需要根据具体的轨迹数据和需求来实现查看和关闭轨迹的功能。