vue openlayer创建地图弹框overlay

背景：

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

效果展示：

主要是这个地图弹框：

核心代码：

html 复制代码

<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>

核心代码逻辑：

javascript 复制代码

<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>

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