zhihao-ui 1.3.9 → 1.3.10

package/dist/es/{Map-CCtm5zBi.js → Map-Dw2qcOkb.js}

@@ -1,7 +1,7 @@
-import { ref, computed, watch, onMounted, onBeforeUnmount, h, nextTick, createVNode, render as render$1, defineComponent, openBlock, createElementBlock, inject, createElementVNode, Fragment } from "vue";
-import { h as hooks, p as fromLonLat, t as transformExtent, T as Text, F as Fill, S as Style, q as getLength, O as Overlay, P as Polyline, L as LineString, r as Feature, s as Point, V as VectorLayer, u as VectorSource, i as cloneDeep, v as buffer, w as Stroke, C as CircleStyle, x as transform, y as getVectorContext, z as debounce, R as RBush$1, I as Icon, D as DoubleClickZoom, A as Draw, B as unByKey, G as getUid, M as Map$2, H as TileLayer, X as XYZ, J as View, K as defaults, N as toLonLat, Q as ScaleLine$1, U as getArea, W as getCenter$1, Y as MultiPoint } from "./vendor-Cc_TVxUO.js";
-import { _ as _export_sfc } from "./Button-NgQ5sHIG.js";
-import { w as withInstall } from "./utils-DSw1USoH.js";
+import { ref, computed, watch, onMounted, onBeforeUnmount, h, nextTick, createVNode, render as render$1, defineComponent, openBlock, createElementBlock, createElementVNode } from "vue";
+import { h as hooks, p as fromLonLat, t as transformExtent, q as getLength, T as Text, F as Fill, S as Style, O as Overlay, r as debounce, P as Polyline, L as LineString, s as Feature, u as Point, V as VectorLayer, v as VectorSource, i as cloneDeep, w as buffer, x as Stroke, y as transform, C as CircleStyle, z as getVectorContext, R as RBush$1, I as Icon, D as DoubleClickZoom, A as Draw, B as unByKey, G as getUid, M as Map$2, H as TileLayer, X as XYZ, J as View, K as defaults, N as toLonLat, Q as ScaleLine$1, U as getArea, W as getCenter$1, Y as MultiPoint } from "./vendor-CINc7P9P.js";
+import { _ as _export_sfc } from "./Button-DdMNoo0g.js";
+import { w as withInstall } from "./utils-pSjFFegY.js";
 const TIAN_DI_TU_KEY = "a6e8f78974f2581f2ca00485b40c948f", MAP_ZOOM = {
   // 地图默认层级
   default: 13,
@@ -93,7 +93,7 @@ const popupEle = document.createElement("div"), popupOverlay = new Overlay({
   stopEvent: !1,
   className: "track-label-popup"
 });
-let polyline, linePath, startMarker, position$1, geoMarker, trackAnimating = !1, lastTime = Date.now(), vectorLayer$4, distance = 0, routeFeature = null, thresholdNum = 20;
+let polyline, linePath, startMarker, position$1, geoMarker, trackAnimating = !1, lastTime = Date.now(), vectorLayer$4, distance = 0, routeFeature = null;
 const MAX_CACHED_LAYERS = 5, usedIds = [], manageLayerCache = (e) => {
   var n;
   const t = getInstall();
@@ -103,27 +103,27 @@ const MAX_CACHED_LAYERS = 5, usedIds = [], manageLayerCache = (e) => {
   }
 };
 let trackColor = "";
-const colors = ["#ff0000", "#00ff00", "#0079ff", "#ffa500", "#800080", "#008080", "#ffc0cb", "#800000", "#000080", "#808000"], reRenderTrackLine = () => {
-  var e;
-  activeTrackId && ((e = trackLayers.get(activeTrackId)) != null && e.getVisible()) && debounce(() => {
-    handlerRenderLine();
-  }, 300);
-}, preprocessTrackData = (e, t) => {
+const colors = ["#ff0000", "#00ff00", "#0079ff", "#ffa500", "#800080", "#008080", "#ffc0cb", "#800000", "#000080", "#808000"], reRenderTrackLine = debounce(() => {
+  if (console.log("reRenderTrackLine------------"), activeTrackId && allTracks[activeTrackId] && trackLayers.get(activeTrackId).getVisible()) {
+    const e = cloneDeep(preprocessTrackData(activeTrackId, allTracks[activeTrackId]));
+    createPointFeature(activeTrackId, e);
+  }
+}, 300), preprocessTrackData = (e, t) => {
   let n = [];
   return n = t.map((o, r) => {
     if (Number(o.lon) > 180 || Number(o.lat) > 180) {
       const [l, a] = convertSixHundredThousandToLatLng(o.lon, o.lat);
       o.lon = l, o.lat = a;
     }
-    return o.center = [o.lon, o.lat], o.centerPoint = lonLatToMercator(o.center), o.time = hooks(o.createdAt).format("YYYY-MM-DD HH:mm:ss"), o.id = e, o.index = r, o.bounds = [], o;
+    return o.center = [o.lon, o.lat], o.centerPoint = lonLatToMercator(o.center), o.time = hooks(o.createdAt).format("YYYY-MM-DD HH:mm:ss"), o.id = e, o.index = r, o;
   }), n;
-}, renderTrackLine = async (e, t, n, o = "ship", r = 200) => {
-  const l = getInstall();
-  if (!l || (t = t == null ? void 0 : t.reverse(), popupOverlay && o === "ship" && (l != null && l.getOverlays().getArray().includes(popupOverlay) || l.addOverlay(popupOverlay)), (t == null ? void 0 : t.length) < 2))
+}, renderTrackLine = async (e, t, n, o = "ship") => {
+  const r = getInstall();
+  if (!r || (t = t == null ? void 0 : t.reverse(), popupOverlay && o === "ship" && (r != null && r.getOverlays().getArray().includes(popupOverlay) || r.addOverlay(popupOverlay)), (t == null ? void 0 : t.length) < 2))
     return;
   manageLayerCache(e), activeTrackId = e, allTracks[e] = t;
-  const a = Object.keys(allTracks).findIndex((s) => s === e) || 0;
-  trackColor = n || colors[a > 10 ? 10 : a], thresholdNum = r, await handlerRenderLine(), await setTrackViewCenter(activeTrackId);
+  const l = Object.keys(allTracks).findIndex((a) => a === e) || 0;
+  trackColor = n || colors[l > 10 ? 10 : l], await handlerRenderLine(), await setTrackViewCenter(activeTrackId);
 }, createTrackLayer = (e) => {
   const t = new VectorSource();
   return new VectorLayer({
@@ -144,19 +144,16 @@ const colors = ["#ff0000", "#00ff00", "#0079ff", "#ffa500", "#800080", "#008080"
 }, handlerRenderLine = async () => {
   const e = activeTrackId;
   if (!trackLayers.has(e)) {
-    const c = createTrackLayer(e);
-    trackLayers.set(e, c);
+    const l = createTrackLayer(e);
+    trackLayers.set(e, l);
   }
-  setActiveLayer(e);
-  const t = trackLayers.get(e).getSource();
-  t == null || t.clear();
-  const n = trackColor || "", o = allTracks[e] || [];
-  if (!(o && o.length > 1)) return [];
-  const r = Math.max(1, Math.floor(o.length / thresholdNum)), l = o.filter((c, d) => d % r === 0);
-  let a = [];
-  a = preprocessTrackData(e, l);
-  const s = a.map((c) => c.centerPoint);
-  console.log("processedList", a.length), removeAllLabel(), a.length >= 2 && (await createTrackLineFeature(e, s, n), await createPointFeature(e, a, n));
+  await setActiveLayer(e);
+  const t = trackColor || "", n = allTracks[e] || [];
+  if (!(n && n.length > 1)) return [];
+  let o = [];
+  o = cloneDeep(preprocessTrackData(e, n));
+  const r = o.map((l) => l.centerPoint);
+  o.length >= 2 && await createTrackLineFeature(e, r, t);
 }, createTrackLineFeature = (e, t, n) => {
   const o = new LineString(t), r = trackLayers.get(e).getSource(), l = r.getFeatureById(e);
   if (l)
@@ -219,83 +216,83 @@ const colors = ["#ff0000", "#00ff00", "#0079ff", "#ffa500", "#800080", "#008080"
             </div>
             ${t ?? t}
         </div>`;
-}, createPointFeature = (e, t, n) => {
-  const o = getInstall(), r = o.getView().getZoom() || 10, l = {
-    10: 4,
-    11: 6,
-    12: 8,
-    13: 12,
-    14: 16,
-    15: 20,
-    16: 24,
-    17: 30,
-    default: 4
-  }, a = l[r] || l.default, s = t.filter((i) => i.index === 0 || i.index === t.length - 1 || i.state !== "0");
-  if (t.length <= a) {
-    const i = t.map((m) => createPointFeatureWithStyle(m));
-    trackLayers.get(e).getSource().addFeatures(i), createArrowFetaure(e, t, t, n), t.forEach((m) => {
-      const g = createPointLabelOverlay(e, n, m);
-      o.addOverlay(g);
-    });
-    return;
+}, filterPoints = (e) => {
+  const t = getInstall(), n = 100, o = e.map((i) => {
+    const d = t.getPixelFromCoordinate(fromLonLat(i.center));
+    return {
+      ...i,
+      original: i,
+      pixel: d,
+      distance: 0
+      // 先初始化，后续计算
+    };
+  });
+  let r = 0;
+  o[0].distance = 0;
+  for (let i = 1; i < o.length; i++) {
+    const d = o[i - 1].pixel, u = o[i].pixel, c = u[0] - d[0], p = u[1] - d[1];
+    r += Math.sqrt(c * c + p * p), o[i].distance = r;
   }
-  const c = douglasPeuckerSimplify(t, s, a);
-  if (s.forEach((i) => {
-    c.some((u) => u.index === i.index) || c.push(i);
-  }), c.length > a) {
-    const i = Math.floor(c.length / a), u = [];
-    for (let m = 0; m < c.length; m += i)
-      u.push(c[m]);
-    c.splice(1, c.length - 2, ...u.slice(1, u.length - 1));
+  const l = o.filter(
+    (i, d) => d === 0 || d === o.length - 1
+    // || point.state
+  ), a = [];
+  for (let i = 0; i < l.length; i++) {
+    const d = l[i];
+    if (a.push(d), i < l.length - 1) {
+      const u = l[i + 1], c = u.distance - d.distance, p = Math.floor(c / n);
+      for (let m = 1; m <= p; m++) {
+        const g = d.distance + m * n;
+        if (g >= u.distance) break;
+        const f = interpolateBetweenPoints(
+          o,
+          g
+        );
+        f && a.push(f);
+      }
+    }
   }
-  console.log("pointList------", c);
-  const d = c.map((i) => createPointFeatureWithStyle(i));
-  trackLayers.get(e).getSource().addFeatures(d), createArrowFetaure(e, c, t, n), c.forEach((i) => {
-    const u = createPointLabelOverlay(e, n, i);
-    o.addOverlay(u);
-  });
+  return Array.from(
+    new Map(a.map((i) => [i.distance.toFixed(2), i])).values()
+  ).map((i) => ({
+    ...i.original,
+    // 优先保留原始数据
+    ...i,
+    // 覆盖坐标等计算属性
+    coord: i.coord,
+    // 确保使用插值后的坐标
+    pixel: i.pixel,
+    distance: i.distance
+  }));
 };
-function douglasPeuckerSimplify(e, t, n) {
-  if (e.length <= n) return [...e];
-  const o = e.map((a) => fromLonLat(a.centerPoint)), l = douglasPeuckerIndex(o, 0, o.length - 1).map((a) => e[a]);
-  if (t.forEach((a) => {
-    l.some((s) => s.index === a.index) || l.push(a);
-  }), l.length > n) {
-    const a = Math.floor(l.length / n), s = [];
-    for (let c = 0; c < l.length; c += a)
-      s.push(l[c]);
-    l.splice(1, l.length - 2, ...s.slice(1, s.length - 1));
-  }
-  return l;
-}
-function douglasPeuckerIndex(e, t, n) {
-  const o = [t];
-  let r = 0;
-  if (t < n) {
-    const l = e[t], a = e[n];
-    let s = 0;
-    for (let c = t + 1; c < n; c++) {
-      const d = pointToLineDistance(e[c], l, a);
-      d > s && (s = d, r = c);
+function interpolateBetweenPoints(e, t) {
+  const n = getInstall();
+  for (let o = 1; o < e.length; o++) {
+    const r = e[o - 1], l = e[o];
+    if (t >= r.distance && t <= l.distance) {
+      const a = (t - r.distance) / (l.distance - r.distance), s = r.pixel[0] + a * (l.pixel[0] - r.pixel[0]), i = r.pixel[1] + a * (l.pixel[1] - r.pixel[1]), d = n.getCoordinateFromPixel([s, i]);
+      return {
+        ...r,
+        // 继承前一个点的属性（可调整）
+        coord: d,
+        pixel: [s, i],
+        distance: t,
+        original: void 0
+        // 明确标记为插值生成点
+      };
     }
-    if (s > 1e-4) {
-      const c = douglasPeuckerIndex(e, t, r), d = douglasPeuckerIndex(e, r, n);
-      o.push(...c.slice(1), ...d.slice(1));
-    } else
-      o.push(n);
   }
-  return o;
+  return null;
 }
-function pointToLineDistance(e, t, n) {
-  const o = e[0] - t[0], r = e[1] - t[1], l = n[0] - t[0], a = n[1] - t[1], s = o * l + r * a, c = l * l + a * a;
-  let d = -1;
-  c !== 0 && (d = s / c);
-  let p, i;
-  d < 0 ? (p = t[0], i = t[1]) : d > 1 ? (p = n[0], i = n[1]) : (p = t[0] + d * l, i = t[1] + d * a);
-  const u = e[0] - p, m = e[1] - i;
-  return Math.sqrt(u * u + m * m);
-}
-const createPointFeatureWithStyle = (e) => {
+const createPointFeature = async (e, t) => {
+  const n = getInstall();
+  await removeAllLabel(), await removeAllFetaure(e);
+  const o = filterPoints(t), r = o.map((a) => createPointFeatureWithStyle(a));
+  trackLayers.get(e).getSource().addFeatures(r), createArrowFetaure(e, o, t, trackColor), o.forEach((a) => {
+    const s = createPointLabelOverlay(e, trackColor, a);
+    n.addOverlay(s);
+  });
+}, createPointFeatureWithStyle = (e) => {
   const t = new Feature({
     geometry: new Point(e.centerPoint),
     data: e
@@ -334,6 +331,11 @@ const createPointFeatureWithStyle = (e) => {
   n && n.length > 0 && n.forEach((o) => {
     o.setPosition(void 0), e.removeOverlay(o), o.dispose();
   });
+}, removeAllFetaure = (e) => {
+  const t = trackLayers.get(e).getSource();
+  t.forEachFeature((n) => {
+    n.get("type") !== "line" && t.removeFeature(n);
+  });
 }, createPointStyle = (e) => [
   new Style({
     // 扩大交互热区
@@ -361,29 +363,29 @@ const createPointFeatureWithStyle = (e) => {
       })
     }),
     zIndex: 99
-  }), a = getIconStyle("&#xe6e2;"), c = getIconStyle("&#xe703;"), d = [];
-  return Number(e.state) === 0 ? d.push(a) : Number(e.state) === 1 && d.push(c), d.push(r), d;
+  }), a = getIconStyle("&#xe6e2;"), i = getIconStyle("&#xe703;"), d = [];
+  return Number(e.state) === 0 ? d.push(a) : Number(e.state) === 1 && d.push(i), d.push(r), d;
 }, createArrowFetaure = (e, t, n, o) => {
   const r = t || [], l = t.length;
   l || (r.push(n[0]), r.push(n[n.length - 1]));
   const a = [];
-  for (let c = 0; c < l - 1; c++) {
+  for (let i = 0; i < l - 1; i++) {
     let d;
-    const p = t[c], i = (t[c + 1].index + p.index) / 2;
-    if (i % 2 === 0)
-      d = n[i].centerPoint;
+    const u = t[i], c = (t[i + 1].index + u.index) / 2;
+    if (c % 2 === 0)
+      d = n[c].centerPoint;
     else {
-      const u = n[Math.floor(i)], m = n[Math.ceil(i)];
-      if (u && m) {
-        const [g, f] = u.centerPoint, [y, v] = m.centerPoint;
+      const p = n[Math.floor(c)], m = n[Math.ceil(c)];
+      if (p && m) {
+        const [g, f] = p.centerPoint, [y, v] = m.centerPoint;
         d = [(g + y) / 2, (f + v) / 2];
       }
     }
     if (d) {
-      const u = new Feature({
+      const p = new Feature({
         geometry: new Point(d)
       });
-      u.set("type", "track_arrow"), u.setStyle(
+      p.set("type", "track_arrow"), p.setStyle(
         new Style({
           text: new Text({
             font: "700 12px map-iconfont",
@@ -391,12 +393,12 @@ const createPointFeatureWithStyle = (e) => {
             fill: new Fill({ color: o }),
             // 设置箭头旋转 角度转为弧度
             rotation: getRotation(
-              t[c].center,
-              t[c + 1].center
+              t[i].center,
+              t[i + 1].center
             ) * (Math.PI / 180)
           })
         })
-      ), a.push(u);
+      ), a.push(p);
     }
   }
   const s = trackLayers.get(e).getSource();
@@ -444,7 +446,7 @@ const createPointFeatureWithStyle = (e) => {
   }, r = (allTracks[e] || []).map(
     (a) => transform([a.lon, a.lat], projection.data, projection.mercator)
   ), l = new LineString(r);
-  return n.length = formatLength(l, t) || "--", console.log("showTracks", n), n;
+  return n.length = formatLength(l, t) || "--", n;
 }, playShipTrack = (e, t) => {
   handlePlay(String(e), t);
 }, handlePlay = (e, t) => {
@@ -459,8 +461,8 @@ const createPointFeatureWithStyle = (e) => {
     // 初始旋转角度
   })
 }), moveFeature = (e, t) => {
-  var u, m;
-  const n = getInstall(), o = Number(50 * t), r = ((u = e.frameState) == null ? void 0 : u.time) ?? Date.now(), l = r - lastTime;
+  var p, m;
+  const n = getInstall(), o = Number(50 * t), r = ((p = e.frameState) == null ? void 0 : p.time) ?? Date.now(), l = r - lastTime;
   if (distance = (distance + o * l / 1e6) % 2, lastTime = r, distance >= 1) {
     stopAnimation();
     return;
@@ -469,15 +471,15 @@ const createPointFeatureWithStyle = (e) => {
     distance > 1 ? 2 - distance : distance
   ), s = linePath.getCoordinateAt(
     distance > 1 ? distance - 0.01 : distance
-  ), c = linePath.getCoordinateAt(
+  ), i = linePath.getCoordinateAt(
     distance > 1 ? 2 - distance : distance + 0.01
-  ), p = getRotation(
+  ), u = getRotation(
     mercatorToLonLat(s, "array"),
-    mercatorToLonLat(c, "array")
+    mercatorToLonLat(i, "array")
   ) * Math.PI / 180;
-  (m = geoMarkerStyle.getText()) == null || m.setRotation(p), position$1.setCoordinates(a);
-  const i = getVectorContext(e);
-  i.setStyle(geoMarkerStyle), i.drawGeometry(position$1), n == null || n.render();
+  (m = geoMarkerStyle.getText()) == null || m.setRotation(u), position$1.setCoordinates(a);
+  const c = getVectorContext(e);
+  c.setStyle(geoMarkerStyle), c.drawGeometry(position$1), n == null || n.render();
 }, startAnimation = () => {
   var e;
   trackAnimating = !0, lastTime = Date.now(), distance = 0, position$1 = ((e = startMarker.getGeometry()) == null ? void 0 : e.clone()) || new Point([0, 0]), moveFeatureHandler && (vectorLayer$4 == null || vectorLayer$4.on("postrender", moveFeatureHandler)), geoMarker == null || geoMarker.setGeometry(void 0);
@@ -509,41 +511,41 @@ const createPointFeatureWithStyle = (e) => {
   const o = getInstall();
   o == null || o.addLayer(vectorLayer$4), moveFeatureHandler = (r) => moveFeature(r, t), startAnimation();
 }, getRotation = (e, t, n) => {
-  function o(i) {
-    return 180 * (i % (2 * Math.PI)) / Math.PI;
+  function o(c) {
+    return 180 * (c % (2 * Math.PI)) / Math.PI;
   }
-  function r(i) {
-    return i % 360 * Math.PI / 180;
+  function r(c) {
+    return c % 360 * Math.PI / 180;
   }
-  function l(i) {
-    var u;
-    if (!i) throw new Error("Coordinate is required");
-    if (!Array.isArray(i)) {
-      if ((i == null ? void 0 : i.type) === "Feature" && (i == null ? void 0 : i.geometry) !== null && ((u = i == null ? void 0 : i.geometry) == null ? void 0 : u.type) === "Point")
-        return i == null ? void 0 : i.geometry.coordinates;
-      if (i.type === "Point") return (i == null ? void 0 : i.coordinates) || [];
+  function l(c) {
+    var p;
+    if (!c) throw new Error("Coordinate is required");
+    if (!Array.isArray(c)) {
+      if ((c == null ? void 0 : c.type) === "Feature" && (c == null ? void 0 : c.geometry) !== null && ((p = c == null ? void 0 : c.geometry) == null ? void 0 : p.type) === "Point")
+        return c == null ? void 0 : c.geometry.coordinates;
+      if (c.type === "Point") return (c == null ? void 0 : c.coordinates) || [];
     }
-    if (Array.isArray(i) && i.length >= 2 && !Array.isArray(i[0]) && !Array.isArray(i[1]))
-      return i;
+    if (Array.isArray(c) && c.length >= 2 && !Array.isArray(c[0]) && !Array.isArray(c[1]))
+      return c;
     throw new Error(
       "Coordinate must be GeoJSON Point or an Array of numbers"
     );
   }
-  function a(i, u, m = {}) {
+  function a(c, p, m = {}) {
     if (m.final)
       return function(S, k) {
         return (a(k, S) + 180) % 360;
-      }(i, u);
-    const g = l(i), f = l(u), y = r(g[0]), v = r(f[0]), T = r(g[1]), L = r(f[1]), w = Math.sin(v - y) * Math.cos(L), E = Math.cos(T) * Math.sin(L) - Math.sin(T) * Math.cos(L) * Math.cos(v - y);
+      }(c, p);
+    const g = l(c), f = l(p), y = r(g[0]), v = r(f[0]), L = r(g[1]), T = r(f[1]), w = Math.sin(v - y) * Math.cos(T), E = Math.cos(L) * Math.sin(T) - Math.sin(L) * Math.cos(T) * Math.cos(v - y);
     return o(Math.atan2(w, E));
   }
-  function s(i) {
-    return !isNaN(i) && i !== null && !Array.isArray(i);
+  function s(c) {
+    return !isNaN(c) && c !== null && !Array.isArray(c);
   }
-  function c(i, u = {}, m = {}) {
-    return i || console.log("Coordinates are required"), Array.isArray(i) || console.log("Coordinates must be an Array"), i.length < 2 && console.log("Coordinates must be at least 2 numbers long"), (!s(i[0]) || !s(i[1])) && console.log("Coordinates must contain numbers"), d({ type: "Point", coordinates: i }, u, m);
+  function i(c, p = {}, m = {}) {
+    return c || console.log("Coordinates are required"), Array.isArray(c) || console.log("Coordinates must be an Array"), c.length < 2 && console.log("Coordinates must be at least 2 numbers long"), (!s(c[0]) || !s(c[1])) && console.log("Coordinates must contain numbers"), d({ type: "Point", coordinates: c }, p, m);
   }
-  function d(i, u = {}, m = {}) {
+  function d(c, p = {}, m = {}) {
     const g = {
       type: "Feature",
       id: "",
@@ -551,10 +553,10 @@ const createPointFeatureWithStyle = (e) => {
       bbox: {},
       geometry: {}
     };
-    return m.id !== void 0 && (g.id = m.id), m.bbox && (g.bbox = m.bbox), g.properties = u, g.geometry = i, g;
+    return m.id !== void 0 && (g.id = m.id), m.bbox && (g.bbox = m.bbox), g.properties = p, g.geometry = c, g;
   }
-  const p = a(c(e), c(t), n);
-  return p < 0 ? 360 + p : p;
+  const u = a(i(e), i(t), n);
+  return u < 0 ? 360 + u : u;
 }, getRightIcons = (e) => {
   const t = [];
   return e.existDevice && t.push("&#xe687;"), e.existMobile && t.push("&#xe688;"), e.existWaterGauge && t.push("&#xe686;"), t;
@@ -598,24 +600,24 @@ function useShipOverlay(e) {
     overflow: "visible"
   }));
   let s = null;
-  const c = () => {
+  const i = () => {
     d(), s = window.setInterval(() => {
       if (t.value) {
-        const i = t.value.querySelector(".ship-overlay-content");
-        i && i.style && (i.style.backgroundColor = e.color, i.style.color = "#FFF", setTimeout(() => {
-          i && i.style && (i.style.backgroundColor = "#ffffff", i.style.color = "#000");
+        const c = t.value.querySelector(".ship-overlay-content");
+        c && c.style && (c.style.backgroundColor = e.color, c.style.color = "#FFF", setTimeout(() => {
+          c && c.style && (c.style.backgroundColor = "#ffffff", c.style.color = "#000");
         }, 500));
       }
     }, 1e3);
   }, d = () => {
     s && (clearInterval(s), s = null);
-  }, p = () => {
+  }, u = () => {
     n.value && n.value.setPosition(fromLonLat(e.position));
   };
-  return watch(() => e.selected, (i) => {
-    i ? c() : d();
+  return watch(() => e.selected, (c) => {
+    c ? i() : d();
   }, { immediate: !0 }), watch(() => e.position, () => {
-    p();
+    u();
   }, { deep: !0 }), onMounted(() => {
   }), onBeforeUnmount(() => {
     d();
@@ -751,12 +753,14 @@ function setLinePath(e) {
   n && o === "top-right" && (n.style.right = "-20px"), n && o === "top-left" && (n.style.left = "-20px");
   const l = POSITION_PRIORITY.filter((s) => s.positioning === o && s.offset === r), a = t == null ? void 0 : t.querySelector(".ship-overlay-line line");
   if (l.length > 0) {
-    const { x1: s, y1: c, x2: d, y2: p } = l[0].line;
-    a && (a.setAttribute("x1", s), a.setAttribute("y1", c), a.setAttribute("x2", d), a.setAttribute("y2", p));
+    const { x1: s, y1: i, x2: d, y2: u } = l[0].line;
+    a && (a.setAttribute("x1", s), a.setAttribute("y1", i), a.setAttribute("x2", d), a.setAttribute("y2", u));
   }
 }
 function removeLabelOverlay(e) {
-  existingOverlays.value = [], e.getOverlays().getArray().filter((o) => o.get("class") === "zh-map-ship-overlay").forEach((o) => {
+  existingOverlays.value = [];
+  const n = e.getOverlays().getArray().filter((o) => o.get("class") === "zh-map-ship-overlay");
+  console.log("labelOverlays--------", n), n.forEach((o) => {
     o.setPosition(void 0), o.setElement(void 0), e.removeOverlay(o), o.dispose();
   });
 }
@@ -771,22 +775,22 @@ const getShipDirectPath = (e) => {
   return e <= MAP_ZOOM.shipModelMax && e >= MAP_ZOOM.shipTriggleMin ? "ship" : "triangle";
 }, getShipScale = (e, t) => {
   if (t === "ship") {
-    const { len: n, wid: o } = e, r = 97, l = 20, s = 1 / getView().getResolution(), c = n * s / r, d = o * s / l;
-    return Math.max(c, d);
+    const { len: n, wid: o } = e, r = 97, l = 20, s = 1 / getView().getResolution(), i = n * s / r, d = o * s / l;
+    return Math.max(i, d);
   }
   return MAP_ZOOM.scaleNum;
 }, initShipStyle = (e, t, n) => {
   const { color: o, direct: r, isHighlight: l, shipData: a } = e.getProperties(), s = (a.cog - 90 + 360) % 360;
   return new Style({
     image: new Icon({
-      src: c(),
+      src: i(),
       scale: t || MAP_ZOOM.scaleNum,
       anchor: [0.5, 0.5],
       rotation: s * Math.PI / 180,
       rotateWithView: !1
     })
   });
-  function c() {
+  function i() {
     return `data:image/svg+xml;utf8,${encodeURIComponent(d())}`;
   }
   function d() {
@@ -840,10 +844,10 @@ const getShipDirectPath = (e) => {
 }, createLabelElement = (e) => {
   const t = document.createElement("div");
   t.className = "ship-overlay-box", t.style.position = "relative";
-  const n = e.getProperties(), { shipData: o, blinking: r, blinkingColor: l, name: a } = n, { lon: s, lat: c } = o, d = createVNode({
+  const n = e.getProperties(), { shipData: o, blinking: r, blinkingColor: l, name: a } = n, { lon: s, lat: i } = o, d = createVNode({
     setup() {
       return useShipOverlay({
-        position: [s + 2e-3, c + 2e-3],
+        position: [s + 2e-3, i + 2e-3],
         selected: r,
         name: a,
         color: l,
@@ -866,12 +870,11 @@ const shipsSource = new VectorSource(), shipsLayer = new VectorLayer({
 });
 let hoveredShipId = "", attentionShips = {}, attentionShipsColor = {};
 const renderShipList = (e) => {
-  console.log("renderShipList", e);
   const t = getInstall();
   if (!e || !t) return;
-  removeSelectedOverlay(), t.getLayers().getArray().includes(shipsLayer) || t.addLayer(shipsLayer);
+  removeSelectedOverlay(), removeLabelOverlay(t), t.getLayers().getArray().includes(shipsLayer) || t.addLayer(shipsLayer);
   const n = (selectedShip == null ? void 0 : selectedShip.id) || (selectedShipFeature == null ? void 0 : selectedShipFeature.get("id"));
-  removeLabelOverlay(t), shipsSource && shipsSource.clear();
+  shipsSource && shipsSource.clear();
   const o = [];
   if (selectedShip) {
     const l = e.filter((a) => a.id === n);
@@ -906,18 +909,20 @@ const renderShipList = (e) => {
     isHighlight: !1
   });
   return o.setStyle(createShipStyle(o)), o;
-}, handleChangeSelected = () => {
-  var r;
+}, handleChangeSelected = async () => {
   if (!selectedShip) return;
   const e = getInstall();
   if (!e) return;
-  let o = cloneDeep(e.getOverlays().getArray()).find((l) => l.get("class") == "ship-overlay-selected");
-  if (o) {
-    const l = selectedShipElement(selectedShip);
-    o.setElement(l), o.setPosition(fromLonLat([selectedShip.lon, selectedShip.lat]));
+  let o = cloneDeep(e.getOverlays().getArray()).find((r) => r.get("class") == "ship-overlay-selected");
+  if (console.log("selected----------", o), o) {
+    const r = selectedShipElement(selectedShip);
+    await o.setElement(r), await o.setPosition(fromLonLat([selectedShip.lon, selectedShip.lat]));
   } else
     o = selectedShipStyle(selectedShip), e.addOverlay(o);
-  o && ((r = o.get("element")) != null && r.parentElement) && (o.get("element").parentElement.style.display = "block");
+  setTimeout(() => {
+    var r;
+    o && ((r = o.get("element")) != null && r.parentElement) && (o.get("element").parentElement.style.display = "block");
+  }, 20);
 }, clearShipList = () => {
   const e = getInstall();
   if (!e || !shipsSource) return;
@@ -934,11 +939,11 @@ const renderShipList = (e) => {
   attentionShips = e, attentionShipsColor = t;
   const o = cloneDeep(n.getOverlays().getArray()), r = cloneDeep(shipsSource.getFeatures());
   for (const l in attentionShips) {
-    const a = attentionShips[l], s = o.find((d) => d.getId() === "label-" + l), c = r.find((d) => l === d.get("id"));
-    if (s && c) {
-      c.set("blinking", a), c.set("blinkingColor", attentionShipsColor[l] || "");
-      const d = s.getElement(), p = createLabelElement(c), i = p.querySelector(".ship-overlay-line"), u = d == null ? void 0 : d.querySelector(".ship-overlay-line");
-      d && d !== p && (u && i && i.replaceWith(u), s.setElement(p));
+    const a = attentionShips[l], s = o.find((d) => d.getId() === "label-" + l), i = r.find((d) => l === d.get("id"));
+    if (s && i) {
+      i.set("blinking", a), i.set("blinkingColor", attentionShipsColor[l] || "");
+      const d = s.getElement(), u = createLabelElement(i), c = u.querySelector(".ship-overlay-line"), p = d == null ? void 0 : d.querySelector(".ship-overlay-line");
+      d && d !== u && (p && c && c.replaceWith(p), s.setElement(u));
     }
   }
 }, filterShipShow = (e) => {
@@ -950,13 +955,13 @@ const renderShipList = (e) => {
   });
   const a = cloneDeep(t.getOverlays().getArray());
   r.forEach((s) => {
-    const c = s.get("id"), d = a.find((p) => p.getId() === "label-" + c);
-    if (!l.has(c))
+    const i = s.get("id"), d = a.find((u) => u.getId() === "label-" + i);
+    if (!l.has(i))
       s.setStyle([]), d && (d.get("element").style.visibility = "hidden");
     else {
       d && (d.get("element").style.visibility = "visible");
-      const p = s.getStyle();
-      (p == null ? void 0 : p.length) == 0 && s.setStyle(createShipStyle(s));
+      const u = s.getStyle();
+      (u == null ? void 0 : u.length) == 0 && s.setStyle(createShipStyle(s));
     }
   });
 }, renderShipSelected = (e) => {
@@ -981,6 +986,7 @@ const renderShipList = (e) => {
   const e = hoveredShipId ? shipsSource.getFeatures().find((t) => t.get("id") === hoveredShipId) : null;
   hoveredShipId = null, e == null || e.set("isHighlight", !1), e == null || e.setStyle(createShipStyle(e));
 }, removeSelectedOverlay = () => {
+  console.log("removeSelectedOverlay-------");
   try {
     const e = getInstall(), n = cloneDeep(e.getOverlays().getArray()).find((o) => o.get("class") == "ship-overlay-selected");
     n && n.setPosition(void 0);
@@ -1049,8 +1055,8 @@ const renderPortList = (e) => {
   } else
     console.log("清除所有港口"), vectorSource$3.clear();
 }, clearSelectedPort$1 = () => {
-  const e = selectedPortFeature$1.get("portData"), t = getZoom();
-  vectorSource$3.getFeatures().forEach((o) => {
+  const e = selectedPortFeature$1 == null ? void 0 : selectedPortFeature$1.get("portData"), t = getZoom();
+  e && vectorSource$3.getFeatures().forEach((o) => {
     o.get("portData").id === e.id && (o == null || o.setStyle(setPortStyle$1(e, t, !1)));
   }), selectedPortData = null, selectedPortFeature$1 = null;
 };
@@ -1059,7 +1065,7 @@ const selectedPort = (e) => {
   e ? (clearPrevSelectedPort$1(), addSelectedPortStyle$1(e)) : clearSelectedPort$1();
 }, clearPrevSelectedPort$1 = () => {
   if (selectedPortFeature$1) {
-    const e = selectedPortFeature$1.get("portData"), t = getZoom();
+    const e = selectedPortFeature$1 == null ? void 0 : selectedPortFeature$1.get("portData"), t = getZoom();
     selectedPortFeature$1.setStyle(setPortStyle$1(e, t, !1));
   }
 }, addSelectedPortStyle$1 = (e) => {
@@ -1327,7 +1333,7 @@ const createMeasureTooltip$1 = () => {
       }
     }
   }, 150));
-}, _hoisted_1$1 = { id: "scale-line-container" }, _sfc_main$2 = /* @__PURE__ */ defineComponent({
+}, _hoisted_1$2 = { id: "scale-line-container" }, _sfc_main$2 = /* @__PURE__ */ defineComponent({
   __name: "scaleLine",
   setup(e, { expose: t }) {
     return t({
@@ -1338,36 +1344,32 @@ const createMeasureTooltip$1 = () => {
         }), l = document.getElementById("scale-line-container");
         l && (r.setTarget(l), getInstall().addControl(r));
       }
-    }), (o, r) => (openBlock(), createElementBlock("div", _hoisted_1$1));
+    }), (o, r) => (openBlock(), createElementBlock("div", _hoisted_1$2));
   }
-}), ScaleLine = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-31ff8293"]]), _hoisted_1 = { class: "zoom" }, _sfc_main$1 = /* @__PURE__ */ defineComponent({
+}), ScaleLine = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-31ff8293"]]), _hoisted_1$1 = { class: "zoom" }, _sfc_main$1 = /* @__PURE__ */ defineComponent({
   __name: "zoomControl",
   setup(e) {
-    const t = inject("mapInstance"), n = () => {
-      if (t != null && t.value) {
-        const r = getZoom();
-        if (!r) return;
-        setZoom(r + 1);
-      }
-    }, o = () => {
-      if (t != null && t.value) {
-        const r = getZoom();
-        if (!r) return;
-        setZoom(r - 1);
-      }
+    const t = () => {
+      if (!getInstall()) return;
+      const r = getZoom();
+      r && setZoom(r + 1);
+    }, n = () => {
+      if (!getInstall()) return;
+      const r = getZoom();
+      r && setZoom(r - 1);
     };
-    return (r, l) => (openBlock(), createElementBlock("div", _hoisted_1, [
+    return (o, r) => (openBlock(), createElementBlock("div", _hoisted_1$1, [
       createElementVNode("div", {
         class: "button big-button",
-        onClick: n
+        onClick: t
       }, " + "),
       createElementVNode("div", {
         class: "button small-button",
-        onClick: o
+        onClick: n
       }, " - ")
     ]));
   }
-}), ZoomControl = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-37968fef"]]), getLayers = () => {
+}), ZoomControl = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-2b7e25f2"]]), getLayers = () => {
   var e;
   return (e = getInstall()) == null ? void 0 : e.getLayers();
 }, layerType = ref("vector"), getShowLayerType = () => layerType.value, setShowLayerType = (e) => {
@@ -1482,13 +1484,13 @@ const initDraw = () => {
   draw.on("drawstart", (t) => {
     var n;
     sketch = t.feature, e = (n = sketch.getGeometry()) == null ? void 0 : n.on("change", (o) => {
-      const r = o.target, l = computedArea(r, "nm"), s = r.getCoordinates()[0], c = new LineString([s[s.length - 2], s[s.length - 1]]), d = computedDistance(c, "nm");
-      if (lineLimitError = Number(getLength(c) / 1e3) > 150, !l) return;
-      const p = '<span class="error pl-4">超出可以绘画的距离</span>';
+      const r = o.target, l = computedArea(r, "nm"), s = r.getCoordinates()[0], i = new LineString([s[s.length - 2], s[s.length - 1]]), d = computedDistance(i, "nm");
+      if (lineLimitError = Number(getLength(i) / 1e3) > 150, !l) return;
+      const u = '<span class="error pl-4">超出可以绘画的距离</span>';
       measureTooltipElement && (measureTooltipElement.innerHTML = `
                     <div class="text">
                         面积：${l} 
-                        ${lineLimitError ? p : ""}
+                        ${lineLimitError ? u : ""}
                     </div>
                 `), helpTooltipElement && (helpTooltipElement.innerHTML = `
                     <div class="text">
@@ -1496,7 +1498,7 @@ const initDraw = () => {
                     </div>
                     <div class="text ${lineLimitError ? "error" : ""}">
                         线段 ${s.length - 2}: ${d} 
-                        ${lineLimitError ? p : ""}
+                        ${lineLimitError ? u : ""}
                       
                     </div>
                       <div>
@@ -1511,14 +1513,14 @@ const initDraw = () => {
     const n = t.feature.getGeometry(), o = n.getCoordinates(), r = o[0][o[0].length - 2];
     if (measureTooltip.setPosition(r), helpTooltipElement != null && helpTooltipElement.parentNode && helpTooltipElement.parentNode.removeChild(helpTooltipElement), (l = getProps()) != null && l.areaDrawEnd) {
       n.getInteriorPoint().getCoordinates();
-      const c = o[0].map((d) => transform(d, projection.mercator, projection.data));
-      (a = getProps()) == null || a.areaDrawEnd(c);
+      const i = o[0].map((d) => transform(d, projection.mercator, projection.data));
+      (a = getProps()) == null || a.areaDrawEnd(i);
     }
     draw && (draw.setActive(!1), getInstall().removeInteraction(draw), getInstall().getInteractions().forEach((d) => {
       d instanceof Draw && (d.setActive(!1), getInstall().removeInteraction(d));
     })), e && unByKey(e), (s = document.querySelector(".delete-icon")) == null || s.addEventListener("click", () => {
-      var c;
-      reset(), (c = getProps()) == null || c.areaDrawEnd([]);
+      var i;
+      reset(), (i = getProps()) == null || i.areaDrawEnd([]);
     });
   });
 }, computedArea = (e, t) => {
@@ -1580,7 +1582,7 @@ const locationTruck = async (e) => {
   const l = (e == null ? void 0 : e.drc) || "";
   r.style.transform = `rotate(${l}deg)`, r.style.backgroundSize = "cover", currentTruckOverlay == null || currentTruckOverlay.setPosition(t);
 }, renderTruckTrack = (e, t, n, o = 1e3) => {
-  renderTrackLine(e, t, n, LENGTH_UNIT.KM, "truck");
+  renderTrackLine(e, t, n, LENGTH_UNIT.KM);
 }, closeTruckTrack = () => {
   closeTrack();
 }, removeTruckIcon = () => {
@@ -1658,7 +1660,7 @@ const render = (e) => {
   selected: selectedLocation,
   clearSelected,
   clear: clearList
-}, _sfc_main = /* @__PURE__ */ defineComponent({
+}, _hoisted_1 = { class: "zh-map-box" }, _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "Map",
   props: {
     zoom: { default: MAP_ZOOM.default },
@@ -1679,7 +1681,7 @@ const render = (e) => {
   },
   setup(e, { expose: t }) {
     const n = ref(), o = ref(), r = e;
-    return console.log(r), onMounted(() => {
+    return onMounted(() => {
       var a;
       initMap(r), setProps(r), setShowLayerType(r.layerType), setGreenTileVisible(r.showGreenLayer), (a = o.value) == null || a.setScaleLine(r.scaleLineUnit);
     }), t({
@@ -1729,13 +1731,13 @@ const render = (e) => {
       },
       utils: {
         getCalculateExtent: () => {
-          const a = getView().calculateExtent(getSize()), s = transform([a[0], a[1]], projection.mercator, projection.data), c = transform([a[2], a[3]], projection.mercator, projection.data);
-          return [s[0], s[1], c[0], c[1]];
+          const a = getView().calculateExtent(getSize()), s = transform([a[0], a[1]], projection.mercator, projection.data), i = transform([a[2], a[3]], projection.mercator, projection.data);
+          return [s[0], s[1], i[0], i[1]];
         },
         convertSixHundredThousandToLatLng,
         calculateCirclePoints
       }
-    }), (a, s) => (openBlock(), createElementBlock(Fragment, null, [
+    }), (a, s) => (openBlock(), createElementBlock("div", _hoisted_1, [
       createElementVNode("div", {
         id: "map",
         ref_key: "zhMapRef",
@@ -1747,9 +1749,9 @@ const render = (e) => {
         ref: o
       }, null, 512),
       createVNode(ZoomControl, { ref: "zoomControlRef" }, null, 512)
-    ], 64));
+    ]));
   }
-}), Map$1 = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-da85b816"]]), ZhMap = withInstall(Map$1);
+}), Map$1 = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-d813907c"]]), ZhMap = withInstall(Map$1);
 export {
   ZhMap as Z
 };