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

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

npm install vue@next ol

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

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

<script setup>
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';

// 创建地图对象
const map = new Map({
  // 指定地图渲染的目标 DOM 元素的 ID
  target: 'ap',
  // 定义地图的图层
  layers: [
    // 创建一个瓦片图层
    new TileLayer({
      // 设置图层的数据源
      source: new XYZ({
        // 自定义背景图层的 URL
        url: 'https://{a-c}.tile.openstreetmap.org/{z}/{x}/{y}.png',
      }),
    }),
  ],
  // 定义地图的视图
  view: new View({
    // 地图的初始中心坐标
    center: fromLonLat([0, 0]),
    // 初始缩放级别
    zoom: 2,
  }),
});

// 用于存储标记点的数组
const markerFeatures = [];

// 添加标记点的函数
function addMarkers() {
  // 创建第一个标记点的特征
  const marker1 = new Feature({
    // 定义标记点的几何位置
    geometry: new Point(fromLonLat([10, 20])),
  });
  // 设置标记点的样式
  marker1.setStyle(new Style({
    // 使用自定义图标
    image: new Icon({
      // 自定义图标路径
      src: 'custom-icon.png',
      // 图标的锚点
      anchor: [0.5, 1],
    }),
  }));

  // 创建第二个标记点的特征
  const marker2 = new Feature({
    geometry: new Point(fromLonLat([30, 40])),
  });
  marker2.setStyle(new Style({
    image: new Icon({
      src: 'another-custom-icon.png',
      anchor: [0.5, 1],
    }),
  }));

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

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

  // 创建标记点图层
  const vectorLayer = new VectorLayer({
    source: vectorSource,
  });

  // 将标记点图层添加到地图
  map.addLayer(vectorLayer);
}

// 处理地图点击事件
map.on('click', (event) => {
  // 获取点击位置处的特征（如果有）
  const feature = map.forEachFeatureAtPixel(event.pixel, (feature) => feature);

  if (feature) {
    // 如果点击到了标记点，显示悬浮框
    showOverlay(feature);
  }
});

// 显示悬浮框的函数
function showOverlay(feature) {
  // 悬浮框的内容
  const content = `<div>
    <h2>标记点详细信息</h2>
    <button @click="handleViewTrajectory">查看轨迹</button>
    <button @click="handleCloseTrajectory">关闭轨迹</button>
  </div>`;

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

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

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

  // 设置悬浮框的位置
  overlay.setPosition(map.getCoordinateFromPixel(event.pixel));
}

// 处理查看轨迹的点击事件
function handleViewTrajectory() {
  console.log('查看轨迹');
}

// 处理关闭轨迹的点击事件
function handleCloseTrajectory() {
  console.log('关闭轨迹');
}
</script>

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

总结

上述代码是一个使用 Vue 3 和 OpenLayers 实现添加自定义背景图层、自定义图标标记点，并在点击标记点时显示带有查看轨迹和关闭轨迹按钮的悬浮框的示例。
首先，导入了 OpenLayers 所需的模块和样式。
创建了地图对象 map ，设置了背景图层的 URL 、初始中心坐标和缩放级别。
markerFeatures 数组用于存储标记点的特征。
addMarkers 函数用于创建标记点特征，设置样式，并将其添加到图层中。
通过 map.on(‘click’) 监听地图的点击事件。在事件处理函数中，如果点击到了标记点，调用 showOverlay 函数显示悬浮框。
showOverlay 函数创建了悬浮框的内容，包括标题和查看轨迹、关闭轨迹的按钮。然后创建悬浮框对象，设置内容、添加到地图并确定位置。
handleViewTrajectory 和 handleCloseTrajectory 函数分别处理查看轨迹和关闭轨迹按钮的点击事件，目前只是简单地打印日志。。