vue openlayer创建地图弹框overlay

背景：

地图上展示一个overlay，使用的技术框架是vue+openlayer

效果展示：

主要是这个地图弹框：

核心代码：

<template>
<!-- overlay --><div id="overlay" class="ol-popup" @click="closePop_prediction"><div class="pop_titleBox"><img alt="" src="../assets/img/port.png"><h1>{{ routeState.endPoint }}</h1></div><div class="content_prediction"><p><span class="label">船舶名称：</span><span v-if="checkboxState.shipName" class="text">{{ checkboxState.shipName.cnName || checkboxState.shipName.names || "--" }}/{{ checkboxState.shipName.mmsi || "--" }}</span></p><p><span class="label">总里程：</span><span class="text">{{ state2.show_l_data.totalDistance || "--" }}nm</span></p><p><span class="label">已行驶里程/时长：</span><span class="text">{{ state2.show_l_data.traveledDistance || "--" }}nm/{{ state2.show_l_data.traveledTime || "--" }}h</span></p><p><span class="label">剩余里程/时长：</span><span class="text">{{ state2.show_l_data.remainingDistance || "--" }}nm/{{ state2.show_l_data.remainingTime || "--" }}h</span></p><p><span class="label">进度百分比：</span><span class="text" style="color: #1FC37F">{{ Math.ceil(state2.show_l_data.progress * 100) || "--" }}%</span></p><p><span class="label">预抵时间：</span><span class="text">{{ state2.show_l_data.eta || "--" }}</span></p></div></div>
</template>

核心代码逻辑：

<script setup>
import { nearestPointOnLine } from "@turf/nearest-point-on-line";
import { parse } from 'wellknown';
import * as turf from "@turf/turf";
import Overlay from 'ol/Overlay';
import { fromLonLat, transform, toLonLat } from "ol/proj";// 3.overlay
const getOverlay = (data) => {const map = getMap.mapData.GlobalMap;state.overlay = new Overlay({element: document.getElementById("overlay"),positioning: "bottom-center",stopEvent: false,offset: [0, -40],autoPan: false,autoPanAnimation: {duration: 0}});map.addOverlay(state.overlay);const geoJsonFromWKT_point = parse(data.geom);const coordinate = geoJsonFromWKT_point.coordinates;const transformCoordinate = transform(coordinate, 'EPSG:4326', 'EPSG:3857');state.overlay.setPosition(transformCoordinate);// map.on("singleclick", (evt) => {//   console.log('ddd', evt.coordinate);//   const coordinate = evt.coordinate // 获取坐标//   state.overlay.setPosition(coordinate)// })
}
</script>

写到这儿功能基本就实现了。。。