zhihao-ui 1.2.36 → 1.2.37

package/dist/es/{Map-DngWgfIX.js → Map-BLVl3XBl.js}

@@ -1,14 +1,14 @@
-var B = Object.defineProperty;
-var _ = (e, t, o) => t in e ? B(e, t, { enumerable: !0, configurable: !0, writable: !0, value: o }) : e[t] = o;
-var I = (e, t, o) => _(e, typeof t != "symbol" ? t + "" : t, o);
+var U = Object.defineProperty;
+var z = (e, t, o) => t in e ? U(e, t, { enumerable: !0, configurable: !0, writable: !0, value: o }) : e[t] = o;
+var I = (e, t, o) => z(e, typeof t != "symbol" ? t + "" : t, o);
 import { defineComponent, inject, useModel, ref, watch, openBlock, createElementBlock, createElementVNode, createVNode, unref, withCtx, Fragment, renderList, toDisplayString, createCommentVNode, mergeModels, nextTick, onMounted, normalizeClass, renderSlot, createBlock, useCssVars, computed, provide } from "vue";
-import { p as getArea, q as getLength, V as VectorSource, r as VectorLayer, S as Style, C as CircleStyle, F as Fill, s as Stroke, D as Draw, O as Overlay, u as unByKey, t as ElSelect, v as ElOption, w as fromLonLat, P as Point, x as transform, y as Feature, T as Text, I as Icon, z as Translate, A as toLonLat, B as transformExtent, h as hooks, L as LineString, G as Polyline, H as getVectorContext, i as cloneDeep, J as GeoJSON, W as WebGLPointsLayer, K as Circle, M as buffer, N as ScaleLine$1, Q as MultiPoint, R as getCenter, U as TileLayer, X as XYZ, Y as Map$1, Z as View } from "./vendor-Bonn9k5m.js";
-import { _ as _export_sfc } from "./Button-BbUxF68h.js";
-import { g as getForegroundColor } from "./DatePicker-BkfvEDok.js";
-import { w as withInstall } from "./utils-hD_p7bGY.js";
+import { p as getArea, q as getLength, V as VectorSource, r as VectorLayer, S as Style, C as CircleStyle, F as Fill, s as Stroke, D as Draw, O as Overlay, u as unByKey, t as ElSelect, v as ElOption, w as fromLonLat, P as Point, x as transform, y as Feature, T as Text, I as Icon, z as Translate, A as toLonLat, i as cloneDeep, G as GeoJSON, W as WebGLPointsLayer, B as Circle, H as transformExtent, h as hooks, L as LineString, J as Polyline, K as getVectorContext, M as buffer, N as ScaleLine$1, Q as MultiPoint, R as getUid, U as getCenter, X as TileLayer, Y as XYZ, Z as Map$1, _ as View } from "./vendor-B7FHttiN.js";
+import { _ as _export_sfc } from "./Button-CKHqdHWj.js";
+import { g as getForegroundColor } from "./DatePicker-BOkpRWph.js";
+import { w as withInstall } from "./utils-DUHqvTHl.js";
 var BaseMapType = /* @__PURE__ */ ((e) => (e[e.vector = 0] = "vector", e[e.satellite = 1] = "satellite", e))(BaseMapType || {}), SEARCH_TYPE = /* @__PURE__ */ ((e) => (e[e.SEARCH_SHIP = 0] = "SEARCH_SHIP", e[e.SEARCH_PORT = 1] = "SEARCH_PORT", e[e.SEARCH_CUSTOM = 2] = "SEARCH_CUSTOM", e))(SEARCH_TYPE || {}), COPY_RIGHT_TYPE = /* @__PURE__ */ ((e) => (e[e.HORIZONTAL = 0] = "HORIZONTAL", e[e.VERTICAL = 1] = "VERTICAL", e))(COPY_RIGHT_TYPE || {}), CAR_COLOR = /* @__PURE__ */ ((e) => (e[e.BLUE = 1] = "BLUE", e[e.YELLOW = 2] = "YELLOW", e[e.Y_GREEN = 3] = "Y_GREEN", e))(CAR_COLOR || {}), DEVICE_TYPE = /* @__PURE__ */ ((e) => (e[e.HOST = 1] = "HOST", e[e.TALK = 2] = "TALK", e[e.STORAGE = 3] = "STORAGE", e[e.INTERNET = 4] = "INTERNET", e[e.CAMERA = 5] = "CAMERA", e[e.LOAD = 6] = "LOAD", e))(DEVICE_TYPE || {}), LENGTH_UNIT = /* @__PURE__ */ ((e) => (e[e.M = 1] = "M", e[e.KM = 2] = "KM", e[e.NM = 3] = "NM", e))(LENGTH_UNIT || {}), SWITCH_BTN = /* @__PURE__ */ ((e) => (e.Camera = "camera", e.Mobile = "mobile", e.WaterGauge = "waterGauge", e))(SWITCH_BTN || {}), SHIP_SAIL_STATUS = /* @__PURE__ */ ((e) => (e[e.发动机使用中 = 0] = "发动机使用中", e[e.锚泊 = 1] = "锚泊", e[e.未操作 = 2] = "未操作", e[e.操纵能力受限 = 3] = "操纵能力受限", e[e.吃水受限 = 4] = "吃水受限", e[e.系泊 = 5] = "系泊", e[e.搁浅 = 6] = "搁浅", e[e.从事捕捞 = 7] = "从事捕捞", e[e.航行中 = 8] = "航行中", e[e.留作将来修正导航状态 = 9] = "留作将来修正导航状态", e[e.高速船留用 = 10] = "高速船留用", e[e.机动船尾推作业 = 11] = "机动船尾推作业", e[e.机动船顶推或侧推作业 = 12] = "机动船顶推或侧推作业", e[e.飞翼船留用 = 13] = "飞翼船留用", e[e.现行的 = 14] = "现行的", e[e.未定义 = 15] = "未定义", e))(SHIP_SAIL_STATUS || {});
 class ShipMapData {
-  constructor(t, o, n, l, r, i, c, s, d, m, u, f, p, w, h, g, T, M, b, V, P, x, v, y) {
+  constructor(t, o, n, r, i, l, s, c, d, m, u, f, p, y, h, g, k, M, b, F, V, P, v, L) {
     I(this, "id");
     // mmsi
     I(this, "mmsi");
@@ -50,40 +50,40 @@ class ShipMapData {
     I(this, "existWaterGauge");
     I(this, "selected");
     I(this, "blinkColors");
-    this.id = t, this.mmsi = o, this.fill = n, this.shipType = l, this.name = r, this.length = i, this.breadth = c, this.lon = s, this.lat = d, this.createdAt = m, this.speed = u, this.from = f, this.sailStatus = p, this.hdg = w, this.cog = h, this.posType = g, this.type = T, this.angle = M, this.leftIconColor = b, this.existDevice = V, this.existMobile = P, this.existWaterGauge = x, this.selected = v, this.blinkColors = y;
+    this.id = t, this.mmsi = o, this.fill = n, this.shipType = r, this.name = i, this.length = l, this.breadth = s, this.lon = c, this.lat = d, this.createdAt = m, this.speed = u, this.from = f, this.sailStatus = p, this.hdg = y, this.cog = h, this.posType = g, this.type = k, this.angle = M, this.leftIconColor = b, this.existDevice = F, this.existMobile = V, this.existWaterGauge = P, this.selected = v, this.blinkColors = L;
   }
 }
 const formatLength = function(e, t) {
   const n = getLength(e);
-  let l = "";
+  let r = "";
   switch (t) {
     case LENGTH_UNIT.M:
-      l = Math.round(n * 100) / 100 + " m";
+      r = Math.round(n * 100) / 100 + " m";
       break;
     case LENGTH_UNIT.KM:
-      l = Math.round(n / 1e3 * 100) / 100 + " km";
+      r = Math.round(n / 1e3 * 100) / 100 + " km";
       break;
     case LENGTH_UNIT.NM:
-      l = (Math.round(n / 1e3 * 100) / 100 / 1.852).toFixed(2) + " nm";
+      r = (Math.round(n / 1e3 * 100) / 100 / 1.852).toFixed(2) + " nm";
       break;
   }
-  return l;
+  return r;
 }, convertSixHundredThousandToLatLng = function(e, t) {
   const o = Number(t) / 6e5;
   return [Number(e) / 6e5, o];
 }, formatArea = (e, t) => {
   const n = getArea(e);
-  let l;
+  let r;
   switch (t) {
     case LENGTH_UNIT.KM:
-      n > 1e4 ? l = Math.round(n / 1e6 * 100) / 100 + " km<sup>2</sup>" : l = Math.round(n * 100) / 100 + " m<sup>2</sup>";
+      n > 1e4 ? r = Math.round(n / 1e6 * 100) / 100 + " km<sup>2</sup>" : r = Math.round(n * 100) / 100 + " m<sup>2</sup>";
       break;
     case LENGTH_UNIT.NM:
-      const r = Math.pow(1.852, 2);
-      n > 1e4 ? l = Math.round(n / 1e6 / r * 100) / 100 + " nm<sup>2</sup>" : l = Math.round(n * 100) / 100 + " m<sup>2</sup>";
+      const i = Math.pow(1.852, 2);
+      n > 1e4 ? r = Math.round(n / 1e6 / i * 100) / 100 + " nm<sup>2</sup>" : r = Math.round(n * 100) / 100 + " m<sup>2</sup>";
       break;
   }
-  return l;
+  return r;
 }, convertShipMapData = (e) => {
   const t = (o) => new ShipMapData(
     o.id,
@@ -130,8 +130,8 @@ const formatLength = function(e, t) {
   }),
   emits: /* @__PURE__ */ mergeModels(["close"], ["update:visible"]),
   setup(e, { expose: t, emit: o }) {
-    const n = inject("mapInstance"), l = o, r = useModel(e, "visible"), i = ref("3"), c = ref([]), s = ref(!1), d = new VectorSource();
-    let m, u, f, p, w;
+    const n = inject("mapInstance"), r = o, i = useModel(e, "visible"), l = ref("3"), s = ref([]), c = ref(!1), d = new VectorSource();
+    let m, u, f, p, y;
     const h = new VectorLayer({
       source: d,
       style: {
@@ -141,16 +141,16 @@ const formatLength = function(e, t) {
         "circle-radius": 7,
         "circle-fill-color": "#ffcc33"
       }
-    }), g = function(k) {
-      if (k.dragging)
+    }), g = function(S) {
+      if (S.dragging)
         return;
-      let S = "点击选择起点";
-      m && (S = "单击继续，双击结束"), u && (u.innerHTML = S, f.setPosition(k.coordinate), u.classList.remove("hidden"));
-    }, T = () => {
+      let T = "点击选择起点";
+      m && (T = "单击继续，双击结束"), u && (u.innerHTML = T, f.setPosition(S.coordinate), u.classList.remove("hidden"));
+    }, k = () => {
       n.value && (n.value.on("pointermove", g), n.value.getViewport().addEventListener("mouseout", function() {
-        var k;
-        (k = u == null ? void 0 : u.classList) == null || k.add("hidden");
-      }), s.value = !0);
+        var S;
+        (S = u == null ? void 0 : u.classList) == null || S.add("hidden");
+      }), c.value = !0);
     };
     let M;
     const b = new Style({
@@ -172,95 +172,95 @@ const formatLength = function(e, t) {
         })
       })
     });
-    function V() {
-      var k, S;
+    function F() {
+      var S, T;
       if (n.value) {
-        if (c.value = [], document.querySelectorAll(".ol-tooltip.ol-tooltip-static").forEach((E) => {
-          var C;
-          (C = E == null ? void 0 : E.parentNode) == null || C.removeChild(E);
+        if (s.value = [], document.querySelectorAll(".ol-tooltip.ol-tooltip-static").forEach((C) => {
+          var E;
+          (E = C == null ? void 0 : C.parentNode) == null || E.removeChild(C);
         }), d.clear(), M) {
-          const E = n.value.getInteractions().getArray().find((C) => C.ol_uid === M.ol_uid);
-          E && ((k = n.value) == null || k.removeInteraction(E));
+          const C = n.value.getInteractions().getArray().find((E) => E.ol_uid === M.ol_uid);
+          C && ((S = n.value) == null || S.removeInteraction(C));
         }
-        (S = n.value) == null || S.removeLayer(h), u != null && u.parentNode && u.parentNode.removeChild(u), p != null && p.parentNode && p.parentNode.removeChild(p);
+        (T = n.value) == null || T.removeLayer(h), u != null && u.parentNode && u.parentNode.removeChild(u), p != null && p.parentNode && p.parentNode.removeChild(p);
       }
     }
-    function P() {
-      var S, E;
-      V(), (S = n.value) == null || S.addLayer(h), M = new Draw({
+    function V() {
+      var T, C;
+      F(), (T = n.value) == null || T.addLayer(h), M = new Draw({
         source: d,
         type: "LineString",
         style: function() {
           return b;
         }
-      }), (E = n.value) == null || E.addInteraction(M), v(), x();
-      let k;
-      M.on("drawstart", function(C) {
-        var $;
-        m = C.feature;
-        let F;
-        k = ($ = m.getGeometry()) == null ? void 0 : $.on("change", function(R) {
-          const A = R.target;
-          let N = formatUtils.formatLength(A, Number(i.value));
-          F = A.getLastCoordinate(), p && N && (p.innerHTML = N), w.setPosition(F);
+      }), (C = n.value) == null || C.addInteraction(M), v(), P();
+      let S;
+      M.on("drawstart", function(E) {
+        var N;
+        m = E.feature;
+        let x;
+        S = (N = m.getGeometry()) == null ? void 0 : N.on("change", function(A) {
+          const $ = A.target;
+          let R = formatUtils.formatLength($, Number(l.value));
+          x = $.getLastCoordinate(), p && R && (p.innerHTML = R), y.setPosition(x);
         });
       }), M.on("drawend", function() {
-        var C, F;
-        p && (p.className = "ol-tooltip ol-tooltip-static ol-tooltip-measure"), p != null && p.innerHTML && (c.value.push(p == null ? void 0 : p.innerHTML), p.innerHTML = `${p.innerHTML}<div class="ol-tooltip-delete-button" data-index="${((C = c.value) == null ? void 0 : C.length) - 1}"><i class="map-iconfont icon-delete"></i></div>`), (F = document.querySelector(".ol-selectable:has(.ol-tooltip-delete-button):last-child .ol-tooltip-delete-button")) == null || F.addEventListener("click", ($) => {
-          var A;
-          $.preventDefault(), $.stopPropagation();
-          const R = (A = $.target) == null ? void 0 : A.getAttribute("data-index");
-          R && y(Number(R));
-        }), w.setOffset([0, -7]), m = null, p = null, v(), k && unByKey(k);
+        var E, x;
+        p && (p.className = "ol-tooltip ol-tooltip-static ol-tooltip-measure"), p != null && p.innerHTML && (s.value.push(p == null ? void 0 : p.innerHTML), p.innerHTML = `${p.innerHTML}<div class="ol-tooltip-delete-button" data-index="${((E = s.value) == null ? void 0 : E.length) - 1}"><i class="map-iconfont icon-delete"></i></div>`), (x = document.querySelector(".ol-selectable:has(.ol-tooltip-delete-button):last-child .ol-tooltip-delete-button")) == null || x.addEventListener("click", (N) => {
+          var $;
+          N.preventDefault(), N.stopPropagation();
+          const A = ($ = N.target) == null ? void 0 : $.getAttribute("data-index");
+          A && L(Number(A));
+        }), y.setOffset([0, -7]), m = null, p = null, v(), S && unByKey(S);
       });
     }
-    function x() {
-      var k;
+    function P() {
+      var S;
       u != null && u.parentNode && u.parentNode.removeChild(u), u = document.createElement("div"), u.className = "ol-tooltip hidden", f = new Overlay({
         element: u,
         offset: [15, 0],
         positioning: "center-left"
-      }), (k = n.value) == null || k.addOverlay(f);
+      }), (S = n.value) == null || S.addOverlay(f);
     }
     function v() {
-      var k;
-      p != null && p.parentNode && p.parentNode.removeChild(p), p = document.createElement("div"), p.className = "ol-tooltip ol-tooltip-measure", w = new Overlay({
+      var S;
+      p != null && p.parentNode && p.parentNode.removeChild(p), p = document.createElement("div"), p.className = "ol-tooltip ol-tooltip-measure", y = new Overlay({
         element: p,
         offset: [0, -15],
         positioning: "bottom-center",
         stopEvent: !1,
         insertFirst: !1
-      }), (k = n.value) == null || k.addOverlay(w);
+      }), (S = n.value) == null || S.addOverlay(y);
     }
-    const y = (k) => {
-      var C, F;
-      c.value[k] && c.value.splice(k, 1);
-      const S = document.querySelectorAll(".ol-tooltip.ol-tooltip-static.ol-tooltip-measure");
-      S[k] && ((F = (C = S[k]) == null ? void 0 : C.parentNode) == null || F.removeChild(S[k]));
-      const E = d.getFeatures();
-      E[k] && d.removeFeature(E[k]);
-    }, L = () => {
-      l("close");
+    const L = (S) => {
+      var E, x;
+      s.value[S] && s.value.splice(S, 1);
+      const T = document.querySelectorAll(".ol-tooltip.ol-tooltip-static.ol-tooltip-measure");
+      T[S] && ((x = (E = T[S]) == null ? void 0 : E.parentNode) == null || x.removeChild(T[S]));
+      const C = d.getFeatures();
+      C[S] && d.removeFeature(C[S]);
+    }, w = () => {
+      r("close");
     };
-    return watch(() => r, () => {
-      r.value && !s.value && (T(), P());
+    return watch(() => i, () => {
+      i.value && !c.value && (k(), V());
     }, { deep: !0, immediate: !0 }), t({
-      addInteraction: P,
-      removeInteraction: V
-    }), (k, S) => r.value && k.viewMode !== "WxMiniprogram" ? (openBlock(), createElementBlock("div", _hoisted_1$4, [
+      addInteraction: V,
+      removeInteraction: F
+    }), (S, T) => i.value && S.viewMode !== "WxMiniprogram" ? (openBlock(), createElementBlock("div", _hoisted_1$4, [
       createElementVNode("div", { class: "header" }, [
-        S[1] || (S[1] = createElementVNode("div", { class: "title" }, "测量", -1)),
+        T[1] || (T[1] = createElementVNode("div", { class: "title" }, "测量", -1)),
         createElementVNode("i", {
-          onClick: L,
+          onClick: w,
           class: "map-iconfont icon-close"
         })
       ]),
       createElementVNode("div", _hoisted_2$2, [
-        S[2] || (S[2] = createElementVNode("div", { class: "tips" }, "在地图上点击多个点测量距离，距离单位", -1)),
+        T[2] || (T[2] = createElementVNode("div", { class: "tips" }, "在地图上点击多个点测量距离，距离单位", -1)),
         createVNode(unref(ElSelect), {
           class: "select-length-unit",
-          modelValue: i.value,
-          "onUpdate:modelValue": S[0] || (S[0] = (E) => i.value = E)
+          modelValue: l.value,
+          "onUpdate:modelValue": T[0] || (T[0] = (C) => l.value = C)
         }, {
           default: withCtx(() => [
             createVNode(unref(ElOption), {
@@ -280,19 +280,19 @@ const formatLength = function(e, t) {
         }, 8, ["modelValue"])
       ]),
       createElementVNode("div", _hoisted_3$1, [
-        (openBlock(!0), createElementBlock(Fragment, null, renderList(c.value, (E, C) => (openBlock(), createElementBlock("div", {
+        (openBlock(!0), createElementBlock(Fragment, null, renderList(s.value, (C, E) => (openBlock(), createElementBlock("div", {
           class: "measure-history-item",
-          key: C
+          key: E
         }, [
           createElementVNode("div", _hoisted_4, [
-            S[3] || (S[3] = createElementVNode("i", { class: "map-iconfont icon-line" }, null, -1)),
-            createElementVNode("span", _hoisted_5, "线段" + toDisplayString(C + 1), 1),
-            createElementVNode("span", _hoisted_6, toDisplayString(E), 1)
+            T[3] || (T[3] = createElementVNode("i", { class: "map-iconfont icon-line" }, null, -1)),
+            createElementVNode("span", _hoisted_5, "线段" + toDisplayString(E + 1), 1),
+            createElementVNode("span", _hoisted_6, toDisplayString(C), 1)
           ]),
           createElementVNode("div", {
             class: "delete-button",
-            onClick: (F) => y(C)
-          }, S[4] || (S[4] = [
+            onClick: (x) => L(E)
+          }, T[4] || (T[4] = [
             createElementVNode("i", { class: "map-iconfont icon-delete" }, null, -1)
           ]), 8, _hoisted_7)
         ]))), 128))
@@ -331,34 +331,34 @@ const formatLength = function(e, t) {
 }), renderMarker = (e, t = !0, o = !0) => {
   var m;
   if (!mapInstance$8.value || !e || e.split(",").length !== 2) return;
-  const [n, l] = e.split(",").map(Number);
+  const [n, r] = e.split(",").map(Number);
   marker.value = new Feature({
-    geometry: new Point(fromLonLat([n, l]))
+    geometry: new Point(fromLonLat([n, r]))
   });
-  const r = o ? `${n}, ${l}` : "";
-  (m = marker.value) == null || m.setStyle(createIconStyle(r));
-  const i = new VectorSource({
+  const i = o ? `${n}, ${r}` : "";
+  (m = marker.value) == null || m.setStyle(createIconStyle(i));
+  const l = new VectorSource({
     features: [marker.value]
-  }), c = new VectorLayer({
-    source: i
-  }), s = mapInstance$8.value.getView();
-  if (mapInstance$8.value.addLayer(c), t) {
+  }), s = new VectorLayer({
+    source: l
+  }), c = mapInstance$8.value.getView();
+  if (mapInstance$8.value.addLayer(s), t) {
     const u = new Translate({
-      layers: [c]
+      layers: [s]
     });
     u.on("translating", function(f) {
       var h;
-      const p = f.features.item(0).getGeometry().getCoordinates(), w = toLonLat(p);
-      markerPosition.value = `${w[0].toFixed(6)}, ${w[1].toFixed(6)}`, (h = marker.value) == null || h.setStyle(createIconStyle(markerPosition.value));
+      const p = f.features.item(0).getGeometry().getCoordinates(), y = toLonLat(p);
+      markerPosition.value = `${y[0].toFixed(6)}, ${y[1].toFixed(6)}`, (h = marker.value) == null || h.setStyle(createIconStyle(markerPosition.value));
     }), mapInstance$8.value.addInteraction(u);
   }
-  const d = new Point([n, l]);
-  s.setCenter(transform(d.getCoordinates(), projection.data, projection.mercator)), s.setZoom(mapZoom.findShip);
+  const d = new Point([n, r]);
+  c.setCenter(transform(d.getCoordinates(), projection.data, projection.mercator)), c.setZoom(mapZoom.findShip);
 }, setMarkerPosition = (e) => {
-  var l, r;
+  var r, i;
   if (!mapInstance$8.value) return;
   const t = mapInstance$8.value.getView(), o = e.split(",").map(Number);
-  (r = (l = marker.value) == null ? void 0 : l.getGeometry()) == null || r.setCoordinates(fromLonLat([o[0], o[1]]));
+  (i = (r = marker.value) == null ? void 0 : r.getGeometry()) == null || i.setCoordinates(fromLonLat([o[0], o[1]]));
   const n = new Point([o[0], o[1]]);
   t.setCenter(transform(n.getCoordinates(), projection.data, projection.mercator)), t.setZoom(mapZoom.markerPosition);
 }, CDN_URL = "https://static.zhihaoscm.cn/", tiandituKey = "a6e8f78974f2581f2ca00485b40c948f", zhongkeKey = "15c81cc0a191a232e0a0ca1a51c3ca81", baseMap = {
@@ -428,10 +428,10 @@ const multiplyPixelRatio = (e) => {
   function n(u) {
     return 180 * (u % (2 * Math.PI)) / Math.PI;
   }
-  function l(u) {
+  function r(u) {
     return u % 360 * Math.PI / 180;
   }
-  function r(u) {
+  function i(u) {
     if (!u) throw new Error("Coordinate is required");
     if (!Array.isArray(u)) {
       if (u.type === "Feature" && u.geometry !== null && u.geometry.type === "Point")
@@ -444,226 +444,602 @@ const multiplyPixelRatio = (e) => {
       "Coordinate must be GeoJSON Point or an Array of numbers"
     );
   }
-  function i(u, f, p = {}) {
+  function l(u, f, p = {}) {
     if (p.final)
-      return function(x, v) {
-        return (i(v, x) + 180) % 360;
+      return function(P, v) {
+        return (l(v, P) + 180) % 360;
       }(u, f);
-    const w = r(u), h = r(f), g = l(w[0]), T = l(h[0]), M = l(w[1]), b = l(h[1]), V = Math.sin(T - g) * Math.cos(b), P = Math.cos(M) * Math.sin(b) - Math.sin(M) * Math.cos(b) * Math.cos(T - g);
-    return n(Math.atan2(V, P));
+    const y = i(u), h = i(f), g = r(y[0]), k = r(h[0]), M = r(y[1]), b = r(h[1]), F = Math.sin(k - g) * Math.cos(b), V = Math.cos(M) * Math.sin(b) - Math.sin(M) * Math.cos(b) * Math.cos(k - g);
+    return n(Math.atan2(F, V));
   }
-  function c(u) {
+  function s(u) {
     return !isNaN(u) && u !== null && !Array.isArray(u);
   }
-  function s(u, f = {}, p = {}) {
-    return u || console.log("Coordinates are required"), Array.isArray(u) || console.log("Coordinates must be an Array"), u.length < 2 && console.log("Coordinates must be at least 2 numbers long"), (!c(u[0]) || !c(u[1])) && console.log("Coordinates must contain numbers"), d({ type: "Point", coordinates: u }, f, p);
+  function c(u, f = {}, p = {}) {
+    return u || console.log("Coordinates are required"), Array.isArray(u) || console.log("Coordinates must be an Array"), u.length < 2 && console.log("Coordinates must be at least 2 numbers long"), (!s(u[0]) || !s(u[1])) && console.log("Coordinates must contain numbers"), d({ type: "Point", coordinates: u }, f, p);
   }
   function d(u, f = {}, p = {}) {
-    const w = { type: "Feature" };
-    return p.id !== void 0 && (w.id = p.id), p.bbox && (w.bbox = p.bbox), w.properties = f || {}, w.geometry = u, w;
+    const y = { type: "Feature" };
+    return p.id !== void 0 && (y.id = p.id), p.bbox && (y.bbox = p.bbox), y.properties = f || {}, y.geometry = u, y;
   }
-  const m = i(s(e), s(t), o);
+  const m = l(c(e), c(t), o);
   return m < 0 ? 360 + m : m;
-}, labelAlpha = 0.8, pixelRatio = window.devicePixelRatio || 1, labelFont = `500 ${12 * pixelRatio}px Arial`, labelOutSize = 2 * pixelRatio, labelHeight = 10 * pixelRatio, fillRectRadius = (e, t, o, n, l, r, i = 4) => {
-  e.beginPath(), e.moveTo(t + i, o), e.arcTo(t + n, o, t + n, o + i, i), e.arcTo(t + n, o + l, t + n - i, o + l, i), e.arcTo(t, o + l, t, o + l - i, i), e.arcTo(t, o, t + i, o, i), e.closePath(), e.fillStyle = r, e.fill();
+}, triangleModel = multiplyPixelRatio([
+  [0, -8],
+  [5, 8],
+  [-5, 8]
+]), shipShapeModel = multiplyPixelRatio([
+  [0, -4.545],
+  [-0.56, -3.909],
+  [-1, -2.727],
+  [-1, 3.636],
+  [-0.8, 4.545],
+  [0.8, 4.545],
+  [1, 3.636],
+  [1, -2.727],
+  [0.56, -3.909],
+  [0, -4.545]
+]), shipDirectPath = {
+  left: {
+    0: [
+      [0, 0],
+      [0, -8],
+      [-4, -8]
+    ],
+    1: [
+      [0, 0],
+      [0, -16],
+      [-6, -16]
+    ],
+    2: [
+      [0, 0],
+      [0, -24],
+      [-8, -24]
+    ]
+  },
+  right: {
+    0: [
+      [0, 0],
+      [0, -8],
+      [-4, -8]
+    ],
+    1: [
+      [0, 0],
+      [0, -16],
+      [-6, -16]
+    ],
+    2: [
+      [0, 0],
+      [0, -24],
+      [-8, -24]
+    ]
+  },
+  front: {
+    0: [
+      [0, 0],
+      [0, -8]
+    ],
+    1: [
+      [0, 0],
+      [0, -16]
+    ],
+    2: [
+      [0, 0],
+      [0, -24]
+    ]
+  }
+}, setBlankStyle = () => new Style({
+  image: new CircleStyle({
+    radius: 0
+  })
+}), mapInstance$7 = ref(), renderShipStyleSetInstance = (e) => mapInstance$7.value = e, speedCondition = [[1, 10], [10, 20], [20, 1 / 0]], drawShipModelByZoom = { 14: [200, 30], 15: [115, 15], 16: [55, 8], 17: [25, 5], 18: [1, 1] }, setShipStyle = (e, t = !1) => new Style({
+  renderer: (o, n) => {
+    o = o;
+    const r = n.context, i = n.feature.get("data");
+    if (!i) return;
+    if (i != null && i.length) {
+      const s = i.length / 2;
+      r.beginPath(), r.arc(
+        o[0],
+        o[1],
+        s,
+        0,
+        2 * Math.PI
+      ), r.fillStyle = "rgba(0, 0, 0, 0.01)", r.fill();
+    }
+    n.feature.get("index") === 0 && (shipLabels.value = []);
+    try {
+      const s = drawShipBody(r, i, o, t);
+      s && (drawHeading(r, i, s, t), i.selected = e, e && setTimeout(() => {
+        drawSelectBounds(r, s);
+      }, 50)), drawShipLabel(r, i, o);
+    } catch {
+      return !1;
+    }
+  }
+}), drawShipBody = (e, t, o, n) => {
+  if (!mapInstance$7.value) return;
+  const r = Math.round(Number(mapInstance$7.value.getView().getZoom()));
+  if (!r) return;
+  let i = [];
+  const [l, s] = drawShipModelByZoom[r] || [0, 0], [c, d] = o;
+  if (r <= mapZoom.shipModelMax && r > mapZoom.shipModelMin && t.length >= l && t.breadth >= s)
+    i = rotateShapeModel(drawCurrentShipShapeModel(t, r), t.angle).map((u) => {
+      const [f, p] = u;
+      return [c + f, d + p];
+    });
+  else {
+    const m = rotateShapeModel(triangleModel, t.angle);
+    o.length === 2 && (i = m.map((u) => {
+      const [f, p] = u;
+      return [c + f, d + p];
+    }));
+  }
+  if (!(i.length > 2)) return !1;
+  e.save(), e.beginPath(), e.moveTo(i[0][0], i[0][1]);
+  for (let m = 1; m < i.length; m++)
+    e.lineTo(i[m][0], i[m][1]);
+  return e.closePath(), e.strokeStyle = n ? "#ff0000" : "#000", e.lineWidth = n ? 2 : 1, e.stroke(), e.fillStyle = t.fill, e.fill(), e.restore(), i;
+}, drawHeading = (e, t, o, n) => {
+  const [r, i] = o[0], l = getShipDirectPath(t);
+  if (l) {
+    const s = l.map(function(c) {
+      const [d, m] = c;
+      return [d + r, m + i];
+    });
+    if (e.save(), e.beginPath(), t.angle > 0) {
+      e.translate(r, i);
+      const c = t.angle * Math.PI / 180;
+      e.rotate(c), e.translate(-r, -i);
+    }
+    e.moveTo(r, i);
+    for (let c = 1; c < s.length; c++) {
+      const [d, m] = s[c];
+      e.lineTo(d, m);
+    }
+    e.strokeStyle = n ? "#ff0000" : "#000", e.lineWidth = n ? 2 : 1, e.stroke(), e.restore();
+  }
+}, drawSelectBounds = (e, t) => {
+  let [o, n, r, i] = getPixelFromCoordinate(t);
+  const l = 4;
+  o -= l, n -= l, r += l, i += l, e.save(), e.strokeStyle = "#ff0000", e.lineWidth = 4;
+  const s = 8;
+  e.beginPath(), e.moveTo(o + s, i), e.lineTo(o, i), e.lineTo(o, i - s), e.moveTo(o, n + s), e.lineTo(o, n), e.lineTo(o + s, n), e.moveTo(r - s, n), e.lineTo(r, n), e.lineTo(r, n + s), e.moveTo(r, i - s), e.lineTo(r, i), e.lineTo(r - s, i), e.stroke(), e.restore();
+}, drawShipLabel = (e, t, o) => {
+  if (!t.selected && shipLabels.value.find((u) => u.name === t.name)) return;
+  const [n, r] = o, i = n, l = r, s = t.name;
+  let c;
+  t.leftIconColor && (c = { color: t.leftIconColor, icon: "&#xe599;" });
+  const d = getShipCustomIcon(t), m = {
+    id: t.id,
+    center: [i, l],
+    text: s,
+    fill: t.fill,
+    color: "#fff",
+    textColor: "#000",
+    bgColor: "#fff",
+    leftIcon: c,
+    rightIcons: d,
+    selected: t.selected,
+    blinkColors: t.blinkColors,
+    type: "ShipName"
+  };
+  drawLabel(e, m, shipLabels.value);
+}, drawCurrentShipShapeModel = (e, t) => {
+  let o = 0;
+  t <= 14 ? o = 0.058 : t === 15 ? o = 0.12 : t === 16 ? o = 0.22 : t === 17 ? o = 0.435 : t === 18 && (o = 0.857);
+  const n = e.length / 4 * o, r = e.breadth * o;
+  let i = cloneDeep(shipShapeModel);
+  return i = i.map(([l, s]) => [l * r, s * n]), i;
+}, getShipDirectPath = (e) => {
+  const { speed: t, hdg: o, cog: n } = e;
+  let r = "", i = null;
+  if (t && t > 1 && (o !== null && o != 511 && n !== null ? n - o >= 3 ? r = "left" : n - o <= -3 ? r = "right" : r = "front" : r = "front", r && t))
+    for (let l = 0; l < speedCondition.length; l++) {
+      const s = speedCondition[l];
+      if (t >= s[0] && t < s[1]) {
+        i = shipDirectPath[r][l];
+        break;
+      }
+    }
+  return i;
+}, getShipCustomIcon = (e) => {
+  const t = [];
+  return e.existDevice && t.push("&#xe687;"), e.existMobile && t.push("&#xe688;"), e.existWaterGauge && t.push("&#xe686;"), t || [];
+}, mapInstance$6 = ref(), renderShipSetInstance = (e) => mapInstance$6.value = e;
+let shipsMarkerList = [], shipsVectorSource, largeAmountShipsSource;
+const selectedShipData = ref(null);
+let selectShipsVectorSource;
+const renderShips = (e) => {
+  var o, n, r, i;
+  if (!mapInstance$6.value || showTrackLayer.value) return;
+  const t = Math.round(Number(mapInstance$6.value.getView().getZoom()));
+  if (selectedShipData.value && nextTick(() => {
+    selectSingleShipMarker(selectedShipData.value);
+  }).then((l) => {
+  }), !(!t || t < mapZoom.shipGreenDotMax) && (allShips.value = e, !hiddenOrther.value))
+    return t >= mapZoom.shipGreenDotMax && t < mapZoom.shipModelMin ? ((o = shipsLayer.value) == null || o.setVisible(!1), (n = largeAmountShipsLayer.value) == null || n.setVisible(!0), renderLargeAmountShips(e)) : ((r = largeAmountShipsLayer.value) == null || r.setVisible(!1), (i = shipsLayer.value) == null || i.setVisible(!0), renderShipsMarker(e));
+}, renderLargeAmountShips = (e) => {
+  if (!mapInstance$6.value) return;
+  const t = e.map((o) => ({
+    type: "Feature",
+    geometry: {
+      type: "Point",
+      coordinates: [o.lon, o.lat]
+    },
+    properties: o
+  }));
+  return largeAmountShipsSource == null || largeAmountShipsSource.clear(), largeAmountShipsSource = new VectorSource({
+    features: new GeoJSON().readFeatures({
+      type: "FeatureCollection",
+      features: t
+    }, {
+      featureProjection: projection.mercator
+    })
+  }), largeAmountShipsLayer.value = new WebGLPointsLayer({
+    source: largeAmountShipsSource,
+    style: {
+      "shape-points": 3,
+      "shape-radius": 9,
+      "shape-fill-color": [
+        "case",
+        ["==", ["get", "fill"], "#D9001C"],
+        "#D9001C",
+        // 如果 fill 是 #D9001C，返回红色
+        ["==", ["get", "fill"], "#04C900"],
+        "#04C900",
+        // 如果 fill 是 #04C900，返回绿色
+        "#04C900"
+        // 默认颜色（绿色）
+      ],
+      "shape-rotate-with-view": !1,
+      "shape-rotation": [
+        "+",
+        ["get", "cog"],
+        // 获取 'cog' 属性值
+        180
+        // 将值旋转 180 度
+      ],
+      "shape-scale": [0.8, 1.2],
+      "shape-stroke-color": "#000000",
+      // 边框颜色为黑色
+      "shape-stroke-width": 0.5
+      // 边框宽度为0.5px
+    }
+  }), mapInstance$6.value.addLayer(largeAmountShipsLayer.value), largeAmountShipsLayer.value;
+}, renderShipsMarker = (e) => {
+  var o;
+  if (!mapInstance$6.value) return;
+  deleteAllShipMarkers();
+  let t = convertShipMapData(e);
+  if (t = customFilterShips(t), !!(t != null && t.length))
+    return t.forEach((n, r) => {
+      const i = [n.lon, n.lat], l = new Feature({
+        geometry: new Point(fromLonLat(i))
+      }), s = 1;
+      l.set("clickGeometry", new Circle(fromLonLat(i), s)), l.set("data", n), l.set("index", r), l.setStyle(
+        setShipStyle(!1)
+      ), shipsMarkerList.push({
+        ship: n,
+        lonlat: i,
+        feature: l
+      });
+    }), shipsVectorSource = new VectorSource({
+      features: shipsMarkerList.map((n) => n.feature)
+    }), shipsLayer.value = new VectorLayer({
+      source: shipsVectorSource,
+      zIndex: 100
+    }), (o = mapInstance$6.value) == null || o.addLayer(shipsLayer.value), shipsLayer.value;
+}, onShipsMarkerHover = () => {
+  var t;
+  let e = null;
+  (t = mapInstance$6.value) == null || t.on("pointermove", function(o) {
+    var r, i, l;
+    const n = (r = mapInstance$6.value) == null ? void 0 : r.forEachFeatureAtPixel(o.pixel, (s) => s);
+    if (mapInstance$6.value) {
+      const s = mapInstance$6.value.getTargetElement();
+      s.style.cursor = n ? "pointer" : "";
+    }
+    if (e) {
+      const s = e.get("data");
+      if (!(s != null && s.mmsi)) return;
+      e.setStyle(
+        setShipStyle(((i = selectedShipData.value) == null ? void 0 : i.id) === s.id, !1)
+      );
+    }
+    if (n) {
+      const s = n.get("data");
+      if (!(s != null && s.mmsi)) return;
+      e = n, n.setStyle(
+        setShipStyle(((l = selectedShipData.value) == null ? void 0 : l.id) === s.id, !0)
+      );
+    }
+  });
+}, customFilterShips = (e) => {
+  let t = cloneDeep(e);
+  return t = t.filter((o) => {
+    var r;
+    const n = getFilterItem(o).every(({ btnShow: i, value: l }) => i ? !!l : !0);
+    return (switchBtnShow.value.camera || switchBtnShow.value.mobile || switchBtnShow.value.waterGauge) && ((r = selectedShipData.value) == null ? void 0 : r.id) === o.id && clearSelectFeature(), n;
+  }), t;
+}, getFilterItem = (e) => [
+  { btnShow: switchBtnShow.value.camera, value: e == null ? void 0 : e.existDevice },
+  { btnShow: switchBtnShow.value.mobile, value: e == null ? void 0 : e.existMobile },
+  { btnShow: switchBtnShow.value.waterGauge, value: e == null ? void 0 : e.existWaterGauge }
+], deleteAllShipMarkers = () => {
+  shipsMarkerList.forEach((e) => {
+    e.feature && (shipsVectorSource == null || shipsVectorSource.removeFeature(e.feature));
+  }), clearAllInterval(), shipsMarkerList = [];
+}, selectSingleShipMarker = (e) => {
+  var i;
+  if (!mapInstance$6.value) return;
+  const t = cloneDeep(selectSingleShipData.value);
+  selectSingleShipData.value = convertShipMapData(e);
+  const o = [selectSingleShipData.value.lon, selectSingleShipData.value.lat], n = new Feature({
+    geometry: new Point(fromLonLat(o))
+  });
+  n.set("data", selectSingleShipData.value), n.setStyle(
+    setShipStyle(!0)
+  ), shipsMarkerList.push({
+    ship: selectSingleShipData.value,
+    lonlat: o,
+    feature: n
+  }), selectShipsVectorSource == null || selectShipsVectorSource.clear(), selectShipsVectorSource = new VectorSource({
+    features: [n]
+  }), selectShipsLayer.value = new VectorLayer({
+    source: selectShipsVectorSource
+  }), setVisibleFeatureById(shipsVectorSource, selectSingleShipData.value.id, !0);
+  const r = (i = shipsLayer.value) == null ? void 0 : i.getSource();
+  return r && (t && setVisibleFeatureById(r, t.id, !0), setVisibleFeatureById(r, selectSingleShipData.value.id, !1)), mapInstance$6.value.addLayer(selectShipsLayer.value), selectShipsLayer.value.setVisible(!0), selectShipsLayer.value;
+}, setVisibleFeatureById = (e, t, o) => {
+  e && e.forEachFeature((n) => {
+    const r = n.get("data");
+    r && r.id === t && n.setStyle(o ? setShipStyle(!1, r.id) : setBlankStyle());
+  });
+}, findShip = (e, t, o = !0) => {
+  var r, i, l, s, c;
+  if (!e || !mapInstance$6.value) return;
+  const n = (l = (i = (r = shipsLayer.value) == null ? void 0 : r.getSource()) == null ? void 0 : i.getFeatures()) == null ? void 0 : l.find((d) => {
+    var m;
+    return ((m = d.get("data")) == null ? void 0 : m.id) === e;
+  });
+  if (n ? selectedShipData.value = n.get("data") : t && (selectedShipData.value = t), !t) {
+    console.error("找不到船舶");
+    return;
+  }
+  if (o && ((s = selectedShipData.value) != null && s.lon) && ((c = selectedShipData.value) != null && c.lat)) {
+    const d = mapInstance$6.value.getView(), m = new Point([selectedShipData.value.lon, selectedShipData.value.lat]);
+    d.setCenter(transform(m.getCoordinates(), projection.data, projection.mercator));
+    const u = d.getZoom(), f = u < mapZoom.findShipMin ? mapZoom.findShip : u;
+    d.setZoom(f);
+  }
+  return setTimeout(() => {
+    selectSingleShipMarker(t);
+  }, 50), n;
+}, clearSelectFeature = () => {
+  var e;
+  if (selectedShipData.value) {
+    setVisibleFeatureById(shipsVectorSource, selectSingleShipData.value.id, !1);
+    const t = (e = shipsLayer.value) == null ? void 0 : e.getSource();
+    t && setVisibleFeatureById(t, selectSingleShipData.value.id, !0);
+  }
+  selectedShipData.value = null, mapInstance$6.value && (selectShipsVectorSource == null || selectShipsVectorSource.clear(), selectShipsLayer.value = new VectorLayer({
+    source: selectShipsVectorSource
+  }), mapInstance$6.value.addLayer(selectShipsLayer.value), selectShipsLayer.value.setVisible(!1));
+}, hiddenAllShips = () => {
+  var e, t;
+  (e = shipsLayer.value) == null || e.setVisible(!1), (t = largeAmountShipsLayer.value) == null || t.setVisible(!1);
+}, switchBtnShow = ref({
+  // 船舶摄像头过滤开关
+  [SWITCH_BTN.Camera]: !1,
+  // 船舶联系方式过滤开关
+  [SWITCH_BTN.Mobile]: !1,
+  // 船舶水尺过滤开关
+  [SWITCH_BTN.WaterGauge]: !1
+}), switchFilterItem = (e, t) => {
+  switchBtnShow.value[e] = t, renderShips(allShips.value);
+}, rerenderShip = () => {
+  renderShips(allShips.value);
+}, labelAlpha = 0.8, pixelRatio = window.devicePixelRatio || 1, labelFont = `500 ${12 * pixelRatio}px Arial`, labelOutSize = 2 * pixelRatio, labelHeight = 10 * pixelRatio, fillRectRadius = (e, t, o, n, r, i, l = 4) => {
+  e.beginPath(), e.moveTo(t + l, o), e.arcTo(t + n, o, t + n, o + l, l), e.arcTo(t + n, o + r, t + n - l, o + r, l), e.arcTo(t, o + r, t, o + r - l, l), e.arcTo(t, o, t + l, o, l), e.closePath(), e.fillStyle = i, e.fill();
 }, getPixelFromCoordinate = (e) => {
   if (!e || e.length === 0)
     throw new Error("Points array is empty or invalid.");
-  let t = 1 / 0, o = 1 / 0, n = -1 / 0, l = -1 / 0;
-  for (const [r, i] of e)
-    r < t && (t = r), i < o && (o = i), r > n && (n = r), i > l && (l = i);
-  return [t, o, n, l];
+  let t = 1 / 0, o = 1 / 0, n = -1 / 0, r = -1 / 0;
+  for (const [i, l] of e)
+    i < t && (t = i), l < o && (o = l), i > n && (n = i), l > r && (r = l);
+  return [t, o, n, r];
 }, calculatePolygonCentroid = (e) => {
   if (!Array.isArray(e) || e.length < 3)
     throw new Error("A polygon must have at least 3 coordinates.");
   let t = 0, o = 0, n = 0;
-  const l = e.length;
-  for (let c = 0; c < l - 1; c++) {
-    const [s, d] = e[c], [m, u] = e[c + 1], f = s * u - m * d;
-    n += f, t += (s + m) * f, o += (d + u) * f;
+  const r = e.length;
+  for (let s = 0; s < r - 1; s++) {
+    const [c, d] = e[s], [m, u] = e[s + 1], f = c * u - m * d;
+    n += f, t += (c + m) * f, o += (d + u) * f;
   }
   if (n *= 0.5, n === 0)
     throw new Error("多边形面积为零");
-  const r = t / (6 * n), i = o / (6 * n);
-  return [r, i];
+  const i = t / (6 * n), l = o / (6 * n);
+  return [i, l];
 }, rotateShapeModel = (e, t) => {
-  const [o, n] = calculatePolygonCentroid(e), l = t * Math.PI / 180, r = Math.cos(l), i = Math.sin(l);
-  return e.map(([c, s]) => {
-    const d = c - o, m = s - n, u = d * r - m * i + o, f = d * i + m * r + n;
+  const [o, n] = calculatePolygonCentroid(e), r = t * Math.PI / 180, i = Math.cos(r), l = Math.sin(r);
+  return e.map(([s, c]) => {
+    const d = s - o, m = c - n, u = d * i - m * l + o, f = d * l + m * i + n;
     return [u, f];
   });
 }, getTopLeftPoint = (e) => [e[0], e[3]], getBottomLeftPoint = (e) => [e[2], e[3]], getBottomRightPoint = (e) => [e[2], e[1]], getTopRighttPoint = (e) => [e[0], e[1]];
-function calculateBounds(e, t, o, n, l) {
-  let r, i, c, s;
+function calculateBounds(e, t, o, n, r) {
+  let i, l, s, c;
   const d = e[0], m = e[1];
   switch (t) {
     case 0:
-      r = d + l, i = r + o, s = m - l, c = s - n;
+      i = d + r, l = i + o, c = m - r, s = c - n;
       break;
     case 1:
-      r = d + l, i = r + o, s = m + n / 2, c = s - n;
+      i = d + r, l = i + o, c = m + n / 2, s = c - n;
       break;
     case 2:
-      r = d + l, i = r + o, s = m + l + n, c = s - n;
+      i = d + r, l = i + o, c = m + r + n, s = c - n;
       break;
     case 3:
-      r = d - o / 2, i = r + o, s = m + l + n, c = s - n;
+      i = d - o / 2, l = i + o, c = m + r + n, s = c - n;
       break;
     case 4:
-      i = d, r = i - o, s = m + l + n, c = s - n;
+      l = d, i = l - o, c = m + r + n, s = c - n;
       break;
     case 5:
-      i = d - l, r = i - o, s = m + n / 2, c = s - n;
+      l = d - r, i = l - o, c = m + n / 2, s = c - n;
       break;
     case 6:
-      i = d, r = i - o, s = m - l, c = s - n;
+      l = d, i = l - o, c = m - r, s = c - n;
       break;
     case 7:
-      r = d - o / 2, i = r + o, s = m - l, c = s - n;
+      i = d - o / 2, l = i + o, c = m - r, s = c - n;
   }
-  if (!(!r || !c || !i || !s))
-    return [Math.min(r, i), Math.min(c, s), Math.max(r, i), Math.max(c, s) + 1];
+  if (!(!i || !s || !l || !c))
+    return [Math.min(i, l), Math.min(s, c), Math.max(i, l), Math.max(s, c) + 1];
 }
-function calculateAnchorPoint(e, t, o = 70, n = 20, l = 20) {
-  const r = [0, 0];
+function calculateAnchorPoint(e, t, o = 70, n = 20, r = 20) {
+  const i = [0, 0];
   switch (t) {
     case 0:
-      r[0] = e[0] + l, r[1] = e[1] - l - n / 2;
+      i[0] = e[0] + r, i[1] = e[1] - r - n / 2;
       break;
     case 1:
-      r[0] = e[0] + l, r[1] = e[1];
+      i[0] = e[0] + r, i[1] = e[1];
       break;
     case 2:
-      r[0] = e[0] + l, r[1] = e[1] + l + n / 2;
+      i[0] = e[0] + r, i[1] = e[1] + r + n / 2;
       break;
     case 3:
-      r[0] = e[0], r[1] = e[1] + l + n / 4;
+      i[0] = e[0], i[1] = e[1] + r + n / 4;
       break;
     case 4:
-      r[0] = Math.max(e[0] - l, e[0] - o / 2), r[1] = e[1] + l + n / 4;
+      i[0] = Math.max(e[0] - r, e[0] - o / 2), i[1] = e[1] + r + n / 4;
       break;
     case 5:
-      r[0] = e[0] - l, r[1] = e[1];
+      i[0] = e[0] - r, i[1] = e[1];
       break;
     case 6:
-      r[0] = Math.max(e[0] - l, e[0] - o / 2), r[1] = e[1] - l - n / 4;
+      i[0] = Math.max(e[0] - r, e[0] - o / 2), i[1] = e[1] - r - n / 4;
       break;
     case 7:
-      r[0] = e[0], r[1] = e[1] - l - n / 4;
+      i[0] = e[0], i[1] = e[1] - r - n / 4;
   }
-  return r;
+  return i;
 }
 function drawLabelBody(e, t, o) {
   if (!e) return;
   const {
     font: n,
-    labelOutSize: l = 2,
-    labelHeight: r,
-    center: i,
-    text: c,
-    leftIcon: s,
+    labelOutSize: r = 2,
+    labelHeight: i,
+    center: l,
+    text: s,
+    leftIcon: c,
     shipColor: d,
     lineLength: m = 20,
     selected: u
   } = o;
   e.save(), n && (e.font = n);
-  let f = e.measureText(c).width + 4 * l;
-  (s || d) && (f += r + 6 * l), e.restore();
-  let p, w = 20, h = -1, g = r + 3 * l;
+  let f = e.measureText(s).width + 4 * r;
+  (c || d) && (f += i + 6 * r), e.restore();
+  let p, y = 20, h = -1, g = i + 3 * r;
   if (m)
-    for (let T = 0; T < 8; T++) {
-      p = calculateBounds(i, T, f, g, m);
+    for (let k = 0; k < 8; k++) {
+      p = calculateBounds(l, k, f, g, m);
       let M = !1;
       for (let b = 0; b < t.length; ++b) {
-        let V = t[b].bounds, P = [
-          V[0] - w,
-          V[1] - w,
-          V[2] + w,
-          V[3] + w
+        let F = t[b].bounds, V = [
+          F[0] - y,
+          F[1] - y,
+          F[2] + y,
+          F[3] + y
         ];
-        if (p && isOverlapping(p, P)) {
+        if (p && isOverlapping(p, V)) {
           M = !0;
           break;
         }
       }
       if (!M) {
-        h = T;
+        h = k;
         break;
       }
     }
   else
-    h = 0, p = calculateBounds(i, h, f, g, m);
+    h = 0, p = calculateBounds(l, h, f, g, m);
   if (u && h === -1 && (h = 0), p && h > -1) {
-    let T = getBottomLeftPoint(p), M = getTopRighttPoint(p);
+    let k = getBottomLeftPoint(p), M = getTopRighttPoint(p);
     return {
-      center: i,
-      x: calculateAnchorPoint(i, h, f, g, m),
+      center: l,
+      x: calculateAnchorPoint(l, h, f, g, m),
       l: M,
-      r: T,
+      r: k,
       bounds: p,
       position: h,
-      name: c
+      name: s
     };
   } else
     return null;
 }
 const drawText = (e, t) => {
   if (!e) return;
-  const { center: o, text: n, textColor: l, leftIcon: r, rightIcons: i, font: c } = t;
+  const { center: o, text: n, textColor: r, leftIcon: i, rightIcons: l, font: s } = t;
   e.save(), e.setTransform(1, 0, 0, 1, 0, 0);
-  let [s, d] = o;
-  if (r) {
+  let [c, d] = o;
+  if (i) {
     e.font = `${20 * pixelRatio}px map-iconfont`;
-    let m = getIconFont(r.icon);
-    e.fillStyle = r.color, e.fillText(m, s + labelOutSize - 3.2 * pixelRatio, d + 3.2 * pixelRatio), s += 23 * pixelRatio;
+    let m = getIconFont(i.icon);
+    e.fillStyle = i.color, e.fillText(m, c + labelOutSize - 3.2 * pixelRatio, d + 3.2 * pixelRatio), c += 23 * pixelRatio;
   }
-  if (i != null && i.length) {
+  if (l != null && l.length) {
     e.font = `${12 * pixelRatio}px map-iconfont`, e.fillStyle = "#3370ff";
     const m = e.measureText(n).width + 3 * pixelRatio;
-    i.forEach((u, f) => {
-      const p = getIconFont(u), w = 20 * pixelRatio * f;
-      e.fillText(p, s + m + w, d);
+    l.forEach((u, f) => {
+      const p = getIconFont(u), y = 20 * pixelRatio * f;
+      e.fillText(p, c + m + y, d);
     });
   }
-  e.font = c || labelFont, e.fillStyle = l, e.fillText(n, s + 2, d), e.restore();
+  e.font = s || labelFont, e.fillStyle = r, e.fillText(n, c + 2, d), e.restore();
 }, drawPolygon = (e, t) => {
   let {
     points: o,
     strokeColor: n,
-    fillColor: l,
-    shouldClosePath: r,
-    translation: i,
-    rotation: c,
-    rotationCenter: s,
+    fillColor: r,
+    shouldClosePath: i,
+    translation: l,
+    rotation: s,
+    rotationCenter: c,
     scale: d,
     globalAlpha: m
   } = t;
   if (m || (m = 1), o && e) {
-    e.save(), e.beginPath(), c && c !== 0 && s == null && e.rotate(c), i && e.translate(i[0], i[1]), c && (s != null && s.length) && e.rotate(c), d && e.scale(d, d), e.moveTo(o[0][0], o[0][1]);
+    e.save(), e.beginPath(), s && s !== 0 && c == null && e.rotate(s), l && e.translate(l[0], l[1]), s && (c != null && c.length) && e.rotate(s), d && e.scale(d, d), e.moveTo(o[0][0], o[0][1]);
     for (let u = 1; u < o.length; u++)
       e.lineTo(o[u][0], o[u][1]);
-    r && e.closePath(), n && (e.strokeStyle = n, e.stroke()), l && r && (m && (e.globalAlpha = m), e.fillStyle = l, e.fill()), e.restore();
+    i && e.closePath(), n && (e.strokeStyle = n, e.stroke()), r && i && (m && (e.globalAlpha = m), e.fillStyle = r, e.fill()), e.restore();
   }
-}, intervalId = [], drawLabel = (e, t, o) => {
-  var u, f, p, w, h, g, T, M;
-  let { center: n, text: l, color: r, textColor: i, bgColor: c, leftIcon: s, rightIcons: d, type: m } = t;
-  if (n && l) {
-    const b = {
+}, intervalIds = {}, drawLabel = (e, t, o) => {
+  var u, f, p, y, h, g, k;
+  let { center: n, text: r, color: i, textColor: l, bgColor: s, leftIcon: c, rightIcons: d, type: m } = t;
+  if (n && r) {
+    const M = {
       font: labelFont,
       labelOutSize,
       labelHeight,
       center: n,
-      text: l,
-      leftIcon: s,
+      text: r,
+      leftIcon: c,
       selected: t.selected
     };
-    (u = t.blinkColors) != null && u.length && (c = t.fill, i = getForegroundColor(t.fill));
-    const V = drawLabelBody(e, o, b);
-    if (V) {
-      const { x: P, bounds: x, l: v } = V, y = [getTopLeftPoint(x), getBottomLeftPoint(x), getBottomRightPoint(x), getTopRighttPoint(x)];
-      o.find((F) => F.name === l) || o.push(V), drawPolygon(e, {
-        points: [n, P],
-        strokeColor: r,
+    (u = t.blinkColors) != null && u.length && (s = t.fill, l = getForegroundColor(t.fill));
+    const b = drawLabelBody(e, o, M);
+    if (b) {
+      const { x: F, bounds: V, l: P } = b, v = [getTopLeftPoint(V), getBottomLeftPoint(V), getBottomRightPoint(V), getTopRighttPoint(V)];
+      o.find((E) => E.name === r) || o.push(b), drawPolygon(e, {
+        points: [n, F],
+        strokeColor: i,
         fillColor: "#000",
         shouldClosePath: !0,
         translation: void 0,
@@ -672,45 +1048,50 @@ const drawText = (e, t) => {
         scale: void 0,
         globalAlpha: labelAlpha
       }), d != null && d.length && d.forEach(() => {
-        y[1][0] += 20, y[2][0] += 20;
+        v[1][0] += 20, v[2][0] += 20;
       });
-      const k = {
-        points: y,
-        strokeColor: r,
-        fillColor: c,
+      const w = {
+        points: v,
+        strokeColor: i,
+        fillColor: s,
         shouldClosePath: !0
-      }, [S, E] = v, C = {
-        center: [S, E + labelOutSize + labelHeight + 1],
-        text: l,
-        textColor: i,
-        leftIcon: s,
+      }, [S, T] = P, C = {
+        center: [S, T + labelOutSize + labelHeight + 1],
+        text: r,
+        textColor: l,
+        leftIcon: c,
         rightIcons: d,
         blinkColors: t.blinkColors
       };
-      if (drawPolygon(e, k), drawText(e, C), ((f = t == null ? void 0 : t.blinkColors) == null ? void 0 : f.length) > 0) {
-        let F = Date.now(), $ = 0;
-        const R = [];
-        t.blinkColors.forEach((N) => {
-          R.push(N), R.push("white");
-        });
-        const A = !!((h = (w = (p = selectShipsLayer.value) == null ? void 0 : p.getSource()) == null ? void 0 : w.getFeatures()) != null && h.find((N) => {
-          var O;
-          return ((O = N.get("data")) == null ? void 0 : O.id) === t.id;
-        }) || (M = (T = (g = shipsLayer.value) == null ? void 0 : g.getSource()) == null ? void 0 : T.getFeatures()) != null && M.find((N) => {
-          var O;
-          return ((O = N.get("data")) == null ? void 0 : O.id) === t.id;
-        }));
-        !A || hiddenOrther.value ? (clearInterval(intervalId[t.id]), deleteLabelFromArray(o, l)) : (intervalId[t.id] && clearInterval(intervalId[t.id]), intervalId[t.id] = setInterval(() => {
-          const N = Date.now();
-          N - F >= 500 && ($ = ($ + 1) % R.length, F = N, k.fillColor = R[$], drawPolygon(e, k), C.textColor = getForegroundColor(k.fillColor), drawText(e, C), (!A || hiddenOrther.value) && (clearInterval(intervalId[t.id]), deleteLabelFromArray(o, l)));
+      if (drawPolygon(e, w), drawText(e, C), t != null && t.blinkColors && t.blinkColors.length > 0) {
+        let E = Date.now(), x = 0;
+        const N = t.blinkColors;
+        !!!((y = (p = (f = selectShipsLayer.value) == null ? void 0 : f.getSource()) == null ? void 0 : p.getFeatures()) != null && y.find(($) => {
+          var R;
+          return ((R = $.get("data")) == null ? void 0 : R.id) === t.id;
+        }) || (k = (g = (h = shipsLayer.value) == null ? void 0 : h.getSource()) == null ? void 0 : g.getFeatures()) != null && k.find(($) => {
+          var R;
+          return ((R = $.get("data")) == null ? void 0 : R.id) === t.id;
+        })) || hiddenOrther.value ? (clearInterval(intervalIds[t.id]), deleteLabelFromArray(o, r)) : (intervalIds[t.id] && clearInterval(intervalIds[t.id]), intervalIds[t.id] = window.setInterval(() => {
+          var D, G, _;
+          const $ = Date.now();
+          $ - E >= 500 && (x = (x + 1) % N.length, E = $, w.fillColor = N[x], drawPolygon(e, w), C.textColor = getForegroundColor(w.fillColor), drawText(e, C));
+          const R = shipsMarkerList == null ? void 0 : shipsMarkerList.some((O) => {
+            var B;
+            return ((B = O.ship) == null ? void 0 : B.id) === t.id;
+          }), Z = (_ = (G = (D = shipsLayer.value) == null ? void 0 : D.getSource()) == null ? void 0 : G.getFeatures()) == null ? void 0 : _.some((O) => {
+            const B = O.get("data");
+            return (B == null ? void 0 : B.id) === t.id;
+          });
+          !R && !Z && (clearInterval(intervalIds[t.id]), deleteLabelFromArray(o, r));
         }, 10));
       } else
-        shipLabels.value.find(($) => $.name === l) && (clearInterval(intervalId[t.id]), drawPolygon(e, k), drawText(e, C));
+        shipLabels.value.find((x) => x.name === r) && (clearInterval(intervalIds[t.id]), drawPolygon(e, w), drawText(e, C));
     }
   }
   return null;
 }, clearAllInterval = () => {
-  Object.keys(intervalId).forEach((e) => {
+  Object.keys(intervalIds).forEach((e) => {
     clearInterval(e);
   });
 }, deleteLabelFromArray = (e, t) => {
@@ -733,28 +1114,28 @@ function gcj02ToWgs84(e) {
   if (outOfChina(t, o))
     return `${t.toFixed(6)}, ${o.toFixed(6)}`;
   {
-    let n = transformLat(t - 105, o - 35), l = transformLng(t - 105, o - 35);
-    const r = o / 180 * PI;
-    let i = Math.sin(r);
-    i = 1 - ee * i * i;
-    const c = Math.sqrt(i);
-    n = n * 180 / (a * (1 - ee) / (i * c) * PI), l = l * 180 / (a / c * Math.cos(r) * PI);
-    const s = o + n, d = t + l;
-    return `${(t * 2 - d).toFixed(6)}, ${(o * 2 - s).toFixed(6)}`;
+    let n = transformLat(t - 105, o - 35), r = transformLng(t - 105, o - 35);
+    const i = o / 180 * PI;
+    let l = Math.sin(i);
+    l = 1 - ee * l * l;
+    const s = Math.sqrt(l);
+    n = n * 180 / (a * (1 - ee) / (l * s) * PI), r = r * 180 / (a / s * Math.cos(i) * PI);
+    const c = o + n, d = t + r;
+    return `${(t * 2 - d).toFixed(6)}, ${(o * 2 - c).toFixed(6)}`;
   }
 }
 function calculateCirclePoints(e, t) {
-  const o = fromLonLat(e), n = t * 1e3, l = [
+  const o = fromLonLat(e), n = t * 1e3, r = [
     o[0] - n,
     o[1] - n,
     o[0] + n,
     o[1] + n
-  ], r = transformExtent(l, projection.mercator, projection.data);
+  ], i = transformExtent(r, projection.mercator, projection.data);
   return {
-    leftTopPoint: { lng: r[0], lat: r[3] },
-    rightTopPoint: { lng: r[2], lat: r[3] },
-    rightBottomPoint: { lng: r[2], lat: r[1] },
-    leftBottomPoint: { lng: r[0], lat: r[1] }
+    leftTopPoint: { lng: i[0], lat: i[3] },
+    rightTopPoint: { lng: i[2], lat: i[3] },
+    rightBottomPoint: { lng: i[2], lat: i[1] },
+    leftBottomPoint: { lng: i[0], lat: i[1] }
   };
 }
 const equatorialCircumference = 2003750834e-2;
@@ -765,17 +1146,17 @@ function lonLatToMercator(e) {
 }
 function mercatorToLonLat(e, t = "lonlat") {
   const o = { lon: 0, lat: 0 }, n = e[0] / equatorialCircumference * 180;
-  let l = e[1] / equatorialCircumference * 180;
-  return l = 180 / Math.PI * (2 * Math.atan(Math.exp(l * Math.PI / 180)) - Math.PI / 2), o.lon = n, o.lat = l, t === "lonlat" ? o : [n, l];
+  let r = e[1] / equatorialCircumference * 180;
+  return r = 180 / Math.PI * (2 * Math.atan(Math.exp(r * Math.PI / 180)) - Math.PI / 2), o.lon = n, o.lat = r, t === "lonlat" ? o : [n, r];
 }
 function calculateBoundingBox(e) {
-  let t = 1 / 0, o = -1 / 0, n = 1 / 0, l = -1 / 0;
+  let t = 1 / 0, o = -1 / 0, n = 1 / 0, r = -1 / 0;
   e.forEach((h) => {
-    const [g, T] = h;
-    t = Math.min(t, T), o = Math.max(o, T), n = Math.min(n, g), l = Math.max(l, g);
+    const [g, k] = h;
+    t = Math.min(t, k), o = Math.max(o, k), n = Math.min(n, g), r = Math.max(r, g);
   });
-  const r = l - n, i = o - t, c = Math.max(r, i), s = (n + l) / 2, d = (t + o) / 2, m = c / 2, u = s - m, f = s + m, p = d - m, w = d + m;
-  return [f, p, u, w];
+  const i = r - n, l = o - t, s = Math.max(i, l), c = (n + r) / 2, d = (t + o) / 2, m = s / 2, u = c - m, f = c + m, p = d - m, y = d + m;
+  return [f, p, u, y];
 }
 const transformUtils = {
   gcj02ToWgs84,
@@ -783,14 +1164,16 @@ const transformUtils = {
   lonLatToMercator,
   mercatorToLonLat,
   calculateBoundingBox
-}, mapInstance$7 = ref(), renderTrackStyleSetInstance = (e) => mapInstance$7.value = e, stopIcon = "&#xe6e2;", stopColor = "#E31818", slowIcon = "&#xe703;", slowColor = "#1890FF", dropletsIcon = "&#xe6d2", trackList$1 = ref([]), renderTrackLine = (e, t, o) => {
-  var r, i, c;
+}, mapInstance$5 = ref(), renderTrackStyleSetInstance = (e) => mapInstance$5.value = e, stopIcon = "&#xe6e2;", stopColor = "#E31818", slowIcon = "&#xe703;", slowColor = "#1890FF", dropletsIcon = "&#xe6d2", trackList$1 = ref([]);
+let animationFeature;
+const renderTrackLine = (e, t, o) => {
+  var i, l, s;
   const n = e[t];
   if (!n) return;
-  allTracks.value[t] = n, trackList$1.value = [], trackList$1.value = n.map((s, d) => (s.center = [s.lon, s.lat], s.centerPoint = transformUtils.lonLatToMercator(s.center), s.id = t, s.index = d, s.time = hooks(s.createdAt).format("YYYY-MM-DD HH:mm:ss"), s));
-  const l = trackList$1.value.map((s) => s.centerPoint);
-  if (l.length >= 2) {
-    const s = new LineString(l), d = new Feature({ geometry: s });
+  allTracks.value[t] = n, trackList$1.value = [], trackList$1.value = n.map((c, d) => (c.center = [c.lon, c.lat], c.centerPoint = transformUtils.lonLatToMercator(c.center), c.id = t, c.index = d, c.time = hooks(c.createdAt).format("YYYY-MM-DD HH:mm:ss"), c));
+  const r = trackList$1.value.map((c) => c.centerPoint);
+  if (r.length >= 2) {
+    const c = new LineString(r), d = new Feature({ geometry: c });
     d.setStyle(
       new Style({
         stroke: new Stroke({
@@ -798,13 +1181,15 @@ const transformUtils = {
           width: 2
         })
       })
-    ), d.setId(t), d.set("type", "line"), (i = (r = shipTrackVectorLayer.value) == null ? void 0 : r.getSource()) == null || i.clear(), shipTrackLineFeatures.value = [];
-    const m = shipTrackLineFeatures.value.findIndex((u) => u.getId() === t);
-    m >= 0 ? shipTrackLineFeatures.value[m] = d : shipTrackLineFeatures.value.push(d), createAnimatedIconFeature(o, l), trackLineVectorSource.value = new VectorSource({
+    ), d.setId(t), d.set("type", "line"), (l = (i = shipTrackVectorLayer.value) == null ? void 0 : i.getSource()) == null || l.clear(), shipTrackLineFeatures.value = [];
+    const m = shipTrackLineFeatures.value.findIndex((f) => f.getId() === t);
+    m >= 0 ? shipTrackLineFeatures.value[m] = d : shipTrackLineFeatures.value.push(d);
+    const u = createAnimatedIconFeature(o, r);
+    trackLineVectorSource.value = new VectorSource({
       features: [...shipTrackLineFeatures.value]
-    }), shipTrackVectorLayer.value = new VectorLayer({
+    }), animationFeature = u, console.log(animationFeature), shipTrackVectorLayer.value = new VectorLayer({
       source: trackLineVectorSource.value
-    }), renderPoint(o), (c = mapInstance$7.value) == null || c.addLayer(shipTrackVectorLayer.value);
+    }), renderPoint(o), (s = mapInstance$5.value) == null || s.addLayer(shipTrackVectorLayer.value);
   }
 }, handlePlay = (e, t) => {
   const o = allTracks.value[String(e)];
@@ -838,27 +1223,31 @@ let polyline, linePath, startMarker, position, geoMarker, vectorLayer;
 const trackAnimating = ref(!1);
 let distance = 0, lastTime = Date.now(), moveFeatureHandler = null;
 const moveFeature = (e, t) => {
-  var u, f;
-  const o = Number(50 * t), n = e.frameState.time, l = n - lastTime;
-  if (distance = (distance + o * l / 1e6) % 2, lastTime = n, distance >= 1) {
+  var u, f, p;
+  const o = Number(50 * t), n = ((u = e.frameState) == null ? void 0 : u.time) ?? Date.now(), r = n - lastTime;
+  if (distance = (distance + o * r / 1e6) % 2, lastTime = n, distance >= 1) {
     stopAnimation();
     return;
   }
-  const r = linePath.getCoordinateAt(
+  const i = linePath.getCoordinateAt(
     distance > 1 ? 2 - distance : distance
-  ), i = linePath.getCoordinateAt(
+  ), l = linePath.getCoordinateAt(
     distance > 1 ? distance - 0.01 : distance
-  ), c = linePath.getCoordinateAt(
+  ), s = linePath.getCoordinateAt(
     distance > 1 ? 2 - distance : distance + 0.01
-  ), d = getRotation(transformUtils.mercatorToLonLat(i, "array"), transformUtils.mercatorToLonLat(c, "array")) * Math.PI / 180;
-  (u = geoMarkerStyle.getText()) == null || u.setRotation(d), position.setCoordinates(r);
+  ), d = getRotation(
+    transformUtils.mercatorToLonLat(l, "array"),
+    transformUtils.mercatorToLonLat(s, "array")
+  ) * Math.PI / 180;
+  (f = geoMarkerStyle.getText()) == null || f.setRotation(d), position.setCoordinates(i);
   const m = getVectorContext(e);
-  m.context_.save(), m.setStyle(geoMarkerStyle), m.drawGeometry(position), m.context_.restore(), (f = mapInstance$7.value) == null || f.render();
+  m.context_.save(), m.setStyle(geoMarkerStyle), m.drawGeometry(position), m.context_.restore(), (p = mapInstance$5.value) == null || p.render();
 }, startAnimation = () => {
-  trackAnimating.value = !0, showTrackAnimatMarker.value = !0, lastTime = Date.now(), distance = 0, position = startMarker.getGeometry().clone(), vectorLayer.on("postrender", moveFeatureHandler), geoMarker.setGeometry(null);
+  var e;
+  trackAnimating.value = !0, showTrackAnimatMarker.value = !0, lastTime = Date.now(), distance = 0, position = ((e = startMarker.getGeometry()) == null ? void 0 : e.clone()) || new Point([0, 0]), vectorLayer.on("postrender", moveFeatureHandler), geoMarker.setGeometry(void 0);
 }, stopAnimation = () => {
   var e;
-  trackAnimating.value && (trackAnimating.value = !1, geoMarker.setGeometry(null), vectorLayer.un("postrender", moveFeatureHandler), (e = mapInstance$7.value) == null || e.removeLayer(vectorLayer), vectorLayer = null, geoMarker = null);
+  trackAnimating.value && (trackAnimating.value = !1, geoMarker.setGeometry(void 0), vectorLayer.un("postrender", moveFeatureHandler), (e = mapInstance$5.value) == null || e.removeLayer(vectorLayer), vectorLayer = null, geoMarker = null);
 }, playAnimation = (e, t) => {
   var o;
   trackAnimating.value && stopAnimation(), polyline = new Polyline({
@@ -879,560 +1268,195 @@ const moveFeature = (e, t) => {
     source: new VectorSource({
       features: [geoMarker]
     })
-  }), (o = mapInstance$7.value) == null || o.addLayer(vectorLayer), moveFeatureHandler = (n) => moveFeature(n, t), startAnimation();
+  }), (o = mapInstance$5.value) == null || o.addLayer(vectorLayer), moveFeatureHandler = (n) => moveFeature(n, t), startAnimation();
 }, renderPoint = (e) => {
-  if (!mapInstance$7.value) return;
+  if (!mapInstance$5.value) return;
   const t = trackList$1.value || [];
   if (!(t && t.length > 1)) return [];
-  const o = { 16: 24, 17: 15, default: 4 }, n = [], l = t.length;
-  for (let c = 0; c < l; c++) {
-    t[c].index = c;
-    const s = mapInstance$7.value.getPixelFromCoordinate(t[c].centerPoint);
-    if (s) {
-      let d = s.concat(s);
+  const o = { 16: 24, 17: 15, default: 4 }, n = [], r = t.length;
+  for (let s = 0; s < r; s++) {
+    t[s].index = s;
+    const c = mapInstance$5.value.getPixelFromCoordinate(t[s].centerPoint);
+    if (c) {
+      let d = c.concat(c);
       d = adjustBounds(d, [20, 20]);
-      const m = mapInstance$7.value.getView().getZoom();
+      const m = mapInstance$5.value.getView().getZoom();
       if (!m) return;
       if (m > 15) {
         const f = o[m] || o.default;
         d = adjustBounds(d, [f, f]);
       }
       let u = !0;
-      if (t[c].state !== "0") {
+      if (t[s].state !== "0") {
         for (let f = 0; f < n.length; f++)
           if (isOverlapping(d, n[f].bounds)) {
             u = !1;
             break;
           }
       }
-      u && (t[c].bounds = d, n.push(t[c]));
+      u && (t[s].bounds = d, n.push(t[s]));
     }
   }
-  const r = getIconStyle(stopIcon), i = getIconStyle(slowIcon);
-  n.forEach((c, s) => {
+  const i = getIconStyle(stopIcon), l = getIconStyle(slowIcon);
+  n.forEach((s, c) => {
     var u, f;
     const d = new Feature({
-      geometry: new Point(c.centerPoint)
+      geometry: new Point(s.centerPoint)
     });
-    d.set("type", "track_point"), d.set("data", c), d.setStyle([
+    d.set("type", "track_point"), d.set("data", s), d.setStyle([
       new Style({
         // 扩大交互热区
         image: new CircleStyle({
-          stroke: new Stroke({ color: "rgba(0, 0, 0, 0.01)", width: 20 }),
-          radius: 3
-        })
-      }),
-      new Style({
-        // 轨迹点样式
-        image: new CircleStyle({
-          fill: new Fill({ color: e }),
-          stroke: new Stroke({ color: "#fff", width: 2 }),
-          radius: 3
-        })
-      })
-    ]), trackLineVectorSource.value.addFeature(d);
-    const m = new Feature({
-      geometry: new Point(fromLonLat(c.center))
-    });
-    if (m.set("type", "track_label"), m.set("track_label_index", s), m.setStyle(
-      setTrackLabelStyle(c, e)
-    ), trackLineVectorSource.value.addFeature(m), typeof c == "object" && c.hasOwnProperty("state")) {
-      const p = new Feature({
-        geometry: new Point(c.centerPoint)
-      });
-      p.set("type", "track_icon");
-      const w = new Style({
-        text: new Text({
-          font: "Normal 22px map-iconfont",
-          text: getIconFont(dropletsIcon),
-          offsetY: -10
-        }),
-        zIndex: 99
-      }), h = [];
-      Number(c.state) === 0 ? ((u = w.getText()) == null || u.setFill(new Fill({ color: stopColor })), h.push(r)) : Number(c.state) === 1 && ((f = w.getText()) == null || f.setFill(new Fill({ color: slowColor })), h.push(i)), h.push(w), p.setStyle(h), trackLineVectorSource.value.addFeature(p);
-    }
-  }), renderArrow(n, e), renderIconPoint();
-}, renderArrow = (e, t) => {
-  const o = e.length;
-  o || (e.push(trackList$1.value[0]), e.push(trackList$1.value[trackList$1.value.length - 1]));
-  for (let n = 0; n < o - 1; n++) {
-    let l;
-    const r = e[n], i = (e[n + 1].index + r.index) / 2;
-    if (i % 2 === 0)
-      l = trackList$1.value[i].centerPoint;
-    else {
-      const c = trackList$1.value[Math.floor(i)], s = trackList$1.value[Math.ceil(i)];
-      if (c && s) {
-        const [d, m] = c.centerPoint, [u, f] = s.centerPoint;
-        l = [(d + u) / 2, (m + f) / 2];
-      }
-    }
-    if (l) {
-      const c = new Feature({
-        geometry: new Point(l)
-      });
-      c.set("type", "track_arrow"), c.setStyle(
-        new Style({
-          text: new Text({
-            font: "700 14px map-iconfont",
-            text: getIconFont("&#xe6bc;"),
-            fill: new Fill({ color: t }),
-            // 设置箭头旋转 角度转为弧度
-            rotation: getRotation(
-              e[n].center,
-              e[n + 1].center
-            ) * (Math.PI / 180)
-          })
-        })
-      ), trackLineVectorSource.value.addFeature(c);
-    }
-  }
-}, renderIconPoint = () => {
-  const e = "&#xe69b;", t = "#fcdc3f", o = "#ff0000";
-  (trackList$1.value.length < 2 ? [trackList$1.value[0]] : [trackList$1.value[0], trackList$1.value[trackList$1.value.length - 1]]).forEach((l) => {
-    const r = new Feature({
-      geometry: new Point(l.centerPoint)
-    });
-    r.set("type", "track_begin"), r.set("data", l);
-    const i = l.index === 0 && trackList$1.value.length >= 2 ? t : o;
-    r.setStyle(
-      new Style({
-        text: new Text({
-          font: "Normal 14px map-iconfont",
-          text: getIconFont(e),
-          fill: new Fill({ color: i })
-        }),
-        zIndex: 101
-      })
-    ), trackLineVectorSource.value.addFeature(r);
-  });
-}, setTrackLabelStyle = (e, t) => new Style({
-  renderer: (o, n) => {
-    const l = n.context, c = {
-      center: o,
-      text: e.time,
-      color: t,
-      textColor: "#000",
-      bgColor: "rgba(255,255,255,.8)",
-      selected: !0,
-      type: "TrackTime"
-    };
-    drawLabel(l, c, trackLabels.value);
-  }
-}), triangleModel = multiplyPixelRatio([
-  [0, -8],
-  [5, 8],
-  [-5, 8]
-]), shipShapeModel = multiplyPixelRatio([
-  [0, -4.545],
-  [-0.56, -3.909],
-  [-1, -2.727],
-  [-1, 3.636],
-  [-0.8, 4.545],
-  [0.8, 4.545],
-  [1, 3.636],
-  [1, -2.727],
-  [0.56, -3.909],
-  [0, -4.545]
-]), shipDirectPath = {
-  left: {
-    0: [
-      [0, 0],
-      [0, -8],
-      [-4, -8]
-    ],
-    1: [
-      [0, 0],
-      [0, -16],
-      [-6, -16]
-    ],
-    2: [
-      [0, 0],
-      [0, -24],
-      [-8, -24]
-    ]
-  },
-  right: {
-    0: [
-      [0, 0],
-      [0, -8],
-      [-4, -8]
-    ],
-    1: [
-      [0, 0],
-      [0, -16],
-      [-6, -16]
-    ],
-    2: [
-      [0, 0],
-      [0, -24],
-      [-8, -24]
-    ]
-  },
-  front: {
-    0: [
-      [0, 0],
-      [0, -8]
-    ],
-    1: [
-      [0, 0],
-      [0, -16]
-    ],
-    2: [
-      [0, 0],
-      [0, -24]
-    ]
-  }
-}, setBlankStyle = () => new Style({
-  image: new CircleStyle({
-    radius: 0
-  })
-}), mapInstance$6 = ref(), renderShipStyleSetInstance = (e) => mapInstance$6.value = e, speedCondition = [[1, 10], [10, 20], [20, 1 / 0]], drawShipModelByZoom = { 14: [200, 30], 15: [115, 15], 16: [55, 8], 17: [25, 5], 18: [1, 1] }, setShipStyle = (e, t = !1) => new Style({
-  renderer: (o, n) => {
-    const l = n.context, r = n.feature.get("data");
-    if (!r) return;
-    if (r != null && r.length) {
-      const c = r.length / 2;
-      l.beginPath(), l.arc(
-        o[0],
-        o[1],
-        c,
-        0,
-        2 * Math.PI
-      ), l.fillStyle = "rgba(0, 0, 0, 0.01)", l.fill();
-    }
-    n.feature.get("index") === 0 && (shipLabels.value = []);
-    try {
-      const c = drawShipBody(l, r, o, t);
-      c && (drawHeading(l, r, c, t), r.selected = e, e && setTimeout(() => {
-        drawSelectBounds(l, c);
-      }, 50)), drawShipLabel(l, r, o);
-    } catch {
-      return !1;
-    }
-  }
-}), drawShipBody = (e, t, o, n) => {
-  if (!mapInstance$6.value) return;
-  const l = Math.round(Number(mapInstance$6.value.getView().getZoom()));
-  if (!l) return;
-  let r = [];
-  const [i, c] = drawShipModelByZoom[l] || [0, 0], [s, d] = o;
-  if (l <= mapZoom.shipModelMax && l > mapZoom.shipModelMin && t.length >= i && t.breadth >= c)
-    r = rotateShapeModel(drawCurrentShipShapeModel(t, l), t.angle).map((u) => {
-      const [f, p] = u;
-      return [s + f, d + p];
-    });
-  else {
-    const m = rotateShapeModel(triangleModel, t.angle);
-    o.length === 2 && (r = m.map((u) => {
-      const [f, p] = u;
-      return [s + f, d + p];
-    }));
-  }
-  if (!(r.length > 2)) return !1;
-  e.save(), e.beginPath(), e.moveTo(r[0][0], r[0][1]);
-  for (let m = 1; m < r.length; m++)
-    e.lineTo(r[m][0], r[m][1]);
-  return e.closePath(), e.strokeStyle = n ? "#ff0000" : "#000", e.lineWidth = n ? 2 : 1, e.stroke(), e.fillStyle = t.fill, e.fill(), e.restore(), r;
-}, drawHeading = (e, t, o, n) => {
-  const [l, r] = o[0], i = getShipDirectPath(t);
-  if (i) {
-    const c = i.map(function(s) {
-      const [d, m] = s;
-      return [d + l, m + r];
+          stroke: new Stroke({ color: "rgba(0, 0, 0, 0.01)", width: 20 }),
+          radius: 3
+        })
+      }),
+      new Style({
+        // 轨迹点样式
+        image: new CircleStyle({
+          fill: new Fill({ color: e }),
+          stroke: new Stroke({ color: "#fff", width: 2 }),
+          radius: 3
+        })
+      })
+    ]), trackLineVectorSource.value.addFeature(d);
+    const m = new Feature({
+      geometry: new Point(fromLonLat(s.center))
     });
-    if (e.save(), e.beginPath(), t.angle > 0) {
-      e.translate(l, r);
-      const s = t.angle * Math.PI / 180;
-      e.rotate(s), e.translate(-l, -r);
-    }
-    e.moveTo(l, r);
-    for (let s = 1; s < c.length; s++) {
-      const [d, m] = c[s];
-      e.lineTo(d, m);
+    if (m.set("type", "track_label"), m.set("track_label_index", c), m.setStyle(
+      setTrackLabelStyle(s, e)
+    ), trackLineVectorSource.value.addFeature(m), typeof s == "object" && s.hasOwnProperty("state")) {
+      const p = new Feature({
+        geometry: new Point(s.centerPoint)
+      });
+      p.set("type", "track_icon");
+      const y = new Style({
+        text: new Text({
+          font: "Normal 22px map-iconfont",
+          text: getIconFont(dropletsIcon),
+          offsetY: -10
+        }),
+        zIndex: 99
+      }), h = [];
+      Number(s.state) === 0 ? ((u = y.getText()) == null || u.setFill(new Fill({ color: stopColor })), h.push(i)) : Number(s.state) === 1 && ((f = y.getText()) == null || f.setFill(new Fill({ color: slowColor })), h.push(l)), h.push(y), p.setStyle(h), trackLineVectorSource.value.addFeature(p);
     }
-    e.strokeStyle = n ? "#ff0000" : "#000", e.lineWidth = n ? 2 : 1, e.stroke(), e.restore();
-  }
-}, drawSelectBounds = (e, t) => {
-  let [o, n, l, r] = getPixelFromCoordinate(t);
-  const i = 4;
-  o -= i, n -= i, l += i, r += i, e.save(), e.strokeStyle = "#ff0000", e.lineWidth = 4;
-  const c = 8;
-  e.beginPath(), e.moveTo(o + c, r), e.lineTo(o, r), e.lineTo(o, r - c), e.moveTo(o, n + c), e.lineTo(o, n), e.lineTo(o + c, n), e.moveTo(l - c, n), e.lineTo(l, n), e.lineTo(l, n + c), e.moveTo(l, r - c), e.lineTo(l, r), e.lineTo(l - c, r), e.stroke(), e.restore();
-}, drawShipLabel = (e, t, o) => {
-  if (!t.selected && shipLabels.value.find((u) => u.name === t.name)) return;
-  const [n, l] = o, r = n - 0, i = l - 0, c = t.name;
-  let s;
-  t.leftIconColor && (s = { color: t.leftIconColor, icon: "&#xe599;" });
-  const d = getShipCustomIcon(t), m = {
-    id: t.id,
-    center: [r, i],
-    text: c,
-    fill: t.fill,
-    color: "#fff",
-    textColor: "#000",
-    bgColor: "#fff",
-    leftIcon: s,
-    rightIcons: d,
-    selected: t.selected,
-    blinkColors: t.blinkColors,
-    type: "ShipName"
-  };
-  drawLabel(e, m, shipLabels.value);
-}, drawCurrentShipShapeModel = (e, t) => {
-  let o = 0;
-  t <= 14 ? o = 0.058 : t === 15 ? o = 0.12 : t === 16 ? o = 0.22 : t === 17 ? o = 0.435 : t === 18 && (o = 0.857);
-  const n = e.length / 4 * o, l = e.breadth * o;
-  let r = cloneDeep(shipShapeModel);
-  return r = r.map(([i, c]) => [i * l, c * n]), r;
-}, getShipDirectPath = (e) => {
-  const { speed: t, hdg: o, cog: n } = e;
-  let l = "", r = null;
-  if (t && t > 1 && (o !== null && o != 511 && n !== null ? n - o >= 3 ? l = "left" : n - o <= -3 ? l = "right" : l = "front" : l = "front", l && t))
-    for (const i in speedCondition) {
-      const c = speedCondition[i];
-      if (t >= c[0] && t < c[1]) {
-        r = shipDirectPath[l][i];
-        break;
+  }), renderArrow(n, e), renderIconPoint();
+}, renderArrow = (e, t) => {
+  const o = e.length;
+  o || (e.push(trackList$1.value[0]), e.push(trackList$1.value[trackList$1.value.length - 1]));
+  for (let n = 0; n < o - 1; n++) {
+    let r;
+    const i = e[n], l = (e[n + 1].index + i.index) / 2;
+    if (l % 2 === 0)
+      r = trackList$1.value[l].centerPoint;
+    else {
+      const s = trackList$1.value[Math.floor(l)], c = trackList$1.value[Math.ceil(l)];
+      if (s && c) {
+        const [d, m] = s.centerPoint, [u, f] = c.centerPoint;
+        r = [(d + u) / 2, (m + f) / 2];
       }
     }
-  return r;
-}, getShipCustomIcon = (e) => {
-  const t = [];
-  return e.existDevice && t.push("&#xe687;"), e.existMobile && t.push("&#xe688;"), e.existWaterGauge && t.push("&#xe686;"), t || [];
-}, mapInstance$5 = ref(), renderShipSetInstance = (e) => mapInstance$5.value = e;
-let shipsMarkerList = [], shipsVectorSource, largeAmountShipsSource;
-const selectedShipData = ref(null);
-let selectShipsVectorSource;
-const renderShips = (e) => {
-  var o, n, l, r;
-  if (!mapInstance$5.value || showTrackLayer.value) return;
-  const t = Math.round(Number(mapInstance$5.value.getView().getZoom()));
-  if (selectedShipData.value && nextTick(() => {
-    selectSingleShipMarker(selectedShipData.value);
-  }).then((i) => {
-  }), !(!t || t < mapZoom.shipGreenDotMax) && (allShips.value = e, !hiddenOrther.value))
-    return t >= mapZoom.shipGreenDotMax && t < mapZoom.shipModelMin ? ((o = shipsLayer.value) == null || o.setVisible(!1), (n = largeAmountShipsLayer.value) == null || n.setVisible(!0), renderLargeAmountShips(e)) : ((l = largeAmountShipsLayer.value) == null || l.setVisible(!1), (r = shipsLayer.value) == null || r.setVisible(!0), renderShipsMarker(e));
-}, renderLargeAmountShips = (e) => {
-  if (!mapInstance$5.value) return;
-  const t = e.map((o) => ({
-    type: "Feature",
-    geometry: {
-      type: "Point",
-      coordinates: [o.lon, o.lat]
-    },
-    properties: o
-  }));
-  return largeAmountShipsSource == null || largeAmountShipsSource.clear(), largeAmountShipsSource = new VectorSource({
-    features: new GeoJSON().readFeatures({
-      type: "FeatureCollection",
-      features: t
-    }, {
-      featureProjection: projection.mercator
-    })
-  }), largeAmountShipsLayer.value = new WebGLPointsLayer({
-    source: largeAmountShipsSource,
-    style: {
-      "shape-points": 3,
-      "shape-radius": 9,
-      "shape-fill-color": [
-        "case",
-        ["==", ["get", "fill"], "#D9001C"],
-        "#D9001C",
-        // 如果 fill 是 #D9001C，返回红色
-        ["==", ["get", "fill"], "#04C900"],
-        "#04C900",
-        // 如果 fill 是 #04C900，返回绿色
-        "#04C900"
-        // 默认颜色（绿色）
-      ],
-      "shape-rotate-with-view": !1,
-      "shape-rotation": [
-        "+",
-        ["get", "cog"],
-        // 获取 'cog' 属性值
-        180
-        // 将值旋转 180 度
-      ],
-      "shape-scale": [0.8, 1.2],
-      "shape-stroke-color": "#000000",
-      // 边框颜色为黑色
-      "shape-stroke-width": 0.5
-      // 边框宽度为0.5px
-    }
-  }), mapInstance$5.value.addLayer(largeAmountShipsLayer.value), largeAmountShipsLayer.value;
-}, renderShipsMarker = (e) => {
-  var o;
-  if (!mapInstance$5.value) return;
-  deleteAllShipMarkers();
-  let t = convertShipMapData(e);
-  if (t = customFilterShips(t), !!(t != null && t.length))
-    return t.forEach((n, l) => {
-      const r = [n.lon, n.lat], i = new Feature({
-        geometry: new Point(fromLonLat(r))
-      }), c = 1;
-      i.set("clickGeometry", new Circle(fromLonLat(r), c)), i.set("data", n), i.set("index", l), i.setStyle(
-        setShipStyle(!1)
-      ), shipsMarkerList.push({
-        ship: n,
-        lonlat: r,
-        feature: i
+    if (r) {
+      const s = new Feature({
+        geometry: new Point(r)
       });
-    }), shipsVectorSource = new VectorSource({
-      features: shipsMarkerList.map((n) => n.feature)
-    }), shipsLayer.value = new VectorLayer({
-      source: shipsVectorSource,
-      zIndex: 100
-    }), (o = mapInstance$5.value) == null || o.addLayer(shipsLayer.value), shipsLayer.value;
-}, onShipsMarkerHover = () => {
-  var t;
-  let e = null;
-  (t = mapInstance$5.value) == null || t.on("pointermove", function(o) {
-    var l;
-    const n = (l = mapInstance$5.value) == null ? void 0 : l.forEachFeatureAtPixel(o.pixel, (r) => r);
-    if (e) {
-      const r = e.get("data");
-      if (!(r != null && r.mmsi)) return;
-      e.setStyle(
-        setShipStyle(!1, !1)
-      );
-    }
-    if (n) {
-      const r = n.get("data");
-      if (!(r != null && r.mmsi)) return;
-      e = n, n.setStyle(
-        setShipStyle(!1, !0)
-      );
+      s.set("type", "track_arrow"), s.setStyle(
+        new Style({
+          text: new Text({
+            font: "700 14px map-iconfont",
+            text: getIconFont("&#xe6bc;"),
+            fill: new Fill({ color: t }),
+            // 设置箭头旋转 角度转为弧度
+            rotation: getRotation(
+              e[n].center,
+              e[n + 1].center
+            ) * (Math.PI / 180)
+          })
+        })
+      ), trackLineVectorSource.value.addFeature(s);
     }
-  });
-}, customFilterShips = (e) => {
-  let t = cloneDeep(e);
-  return t = t.filter((o) => {
-    var l;
-    const n = getFilterItem(o).every(({ btnShow: r, value: i }) => r ? !!i : !0);
-    return (switchBtnShow.value.camera || switchBtnShow.value.mobile || switchBtnShow.value.waterGauge) && ((l = selectedShipData.value) == null ? void 0 : l.id) === o.id && clearSelectFeature(), n;
-  }), t;
-}, getFilterItem = (e) => [
-  { btnShow: switchBtnShow.value.camera, value: e == null ? void 0 : e.existDevice },
-  { btnShow: switchBtnShow.value.mobile, value: e == null ? void 0 : e.existMobile },
-  { btnShow: switchBtnShow.value.waterGauge, value: e == null ? void 0 : e.existWaterGauge }
-], deleteAllShipMarkers = () => {
-  shipsMarkerList.forEach((e) => {
-    e.feature && (shipsVectorSource == null || shipsVectorSource.removeFeature(e.feature));
-  }), clearAllInterval(), shipsMarkerList = [];
-}, selectSingleShipMarker = (e) => {
-  var r;
-  if (!mapInstance$5.value) return;
-  const t = cloneDeep(selectSingleShipData.value);
-  selectSingleShipData.value = convertShipMapData(e);
-  const o = [selectSingleShipData.value.lon, selectSingleShipData.value.lat], n = new Feature({
-    geometry: new Point(fromLonLat(o))
-  });
-  n.set("data", selectSingleShipData.value), n.setStyle(
-    setShipStyle(!0)
-  ), shipsMarkerList.push({
-    ship: selectSingleShipData.value,
-    lonlat: o,
-    feature: n
-  }), selectShipsVectorSource == null || selectShipsVectorSource.clear(), selectShipsVectorSource = new VectorSource({
-    features: [n]
-  }), selectShipsLayer.value = new VectorLayer({
-    source: selectShipsVectorSource
-  }), setVisibleFeatureById(shipsVectorSource, selectSingleShipData.value.id, !0);
-  const l = (r = shipsLayer.value) == null ? void 0 : r.getSource();
-  return l && (t && setVisibleFeatureById(l, t.id, !0), setVisibleFeatureById(l, selectSingleShipData.value.id, !1)), mapInstance$5.value.addLayer(selectShipsLayer.value), selectShipsLayer.value.setVisible(!0), selectShipsLayer.value;
-}, setVisibleFeatureById = (e, t, o) => {
-  e && e.forEachFeature((n) => {
-    const l = n.get("data");
-    l && l.id === t && n.setStyle(o ? setShipStyle(!1, l.id) : setBlankStyle());
-  });
-}, findShip = (e, t, o = !0) => {
-  var l, r, i, c, s;
-  if (!e || !mapInstance$5.value) return;
-  const n = (i = (r = (l = shipsLayer.value) == null ? void 0 : l.getSource()) == null ? void 0 : r.getFeatures()) == null ? void 0 : i.find((d) => {
-    var m;
-    return ((m = d.get("data")) == null ? void 0 : m.id) === e;
-  });
-  if (n ? selectedShipData.value = n.get("data") : t && (selectedShipData.value = t), !t) {
-    console.error("找不到船舶");
-    return;
   }
-  if (o && ((c = selectedShipData.value) != null && c.lon) && ((s = selectedShipData.value) != null && s.lat)) {
-    const d = mapInstance$5.value.getView(), m = new Point([selectedShipData.value.lon, selectedShipData.value.lat]);
-    d.setCenter(transform(m.getCoordinates(), projection.data, projection.mercator));
-    const u = d.getZoom(), f = u < mapZoom.findShipMin ? mapZoom.findShip : u;
-    d.setZoom(f);
-  }
-  return setTimeout(() => {
-    selectSingleShipMarker(t);
-  }, 50), n;
-}, clearSelectFeature = () => {
-  var e;
-  if (selectedShipData.value) {
-    setVisibleFeatureById(shipsVectorSource, selectSingleShipData.value.id, !1);
-    const t = (e = shipsLayer.value) == null ? void 0 : e.getSource();
-    t && setVisibleFeatureById(t, selectSingleShipData.value.id, !0);
+}, renderIconPoint = () => {
+  const e = "&#xe69b;", t = "#fcdc3f", o = "#ff0000";
+  (trackList$1.value.length < 2 ? [trackList$1.value[0]] : [trackList$1.value[0], trackList$1.value[trackList$1.value.length - 1]]).forEach((r) => {
+    const i = new Feature({
+      geometry: new Point(r.centerPoint)
+    });
+    i.set("type", "track_begin"), i.set("data", r);
+    const l = r.index === 0 && trackList$1.value.length >= 2 ? t : o;
+    i.setStyle(
+      new Style({
+        text: new Text({
+          font: "Normal 14px map-iconfont",
+          text: getIconFont(e),
+          fill: new Fill({ color: l })
+        }),
+        zIndex: 101
+      })
+    ), trackLineVectorSource.value.addFeature(i);
+  });
+}, setTrackLabelStyle = (e, t) => new Style({
+  renderer: (o, n) => {
+    const r = n.context, s = {
+      id: e.id || "",
+      center: o,
+      text: e.time,
+      color: t,
+      textColor: "#000",
+      bgColor: "rgba(255,255,255,.8)",
+      selected: !0,
+      type: "TrackTime"
+    };
+    drawLabel(r, s, trackLabels.value);
   }
-  selectedShipData.value = null, mapInstance$5.value && (selectShipsVectorSource == null || selectShipsVectorSource.clear(), selectShipsLayer.value = new VectorLayer({
-    source: selectShipsVectorSource
-  }), mapInstance$5.value.addLayer(selectShipsLayer.value), selectShipsLayer.value.setVisible(!1));
-}, hiddenAllShips = () => {
-  var e, t;
-  (e = shipsLayer.value) == null || e.setVisible(!1), (t = largeAmountShipsLayer.value) == null || t.setVisible(!1);
-}, switchBtnShow = ref({
-  // 船舶摄像头过滤开关
-  [SWITCH_BTN.Camera]: !1,
-  // 船舶联系方式过滤开关
-  [SWITCH_BTN.Mobile]: !1,
-  // 船舶水尺过滤开关
-  [SWITCH_BTN.WaterGauge]: !1
-}), switchFilterItem = (e, t) => {
-  switchBtnShow.value[e] = t, renderShips(allShips.value);
-}, rerenderShip = () => {
-  renderShips(allShips.value);
-}, mapInstance$4 = ref(), renderCustomOverlaySetInstance = (e) => mapInstance$4.value = e, drawCustomContent = (e, t, o, n = "top-left", l = !1) => {
+}), mapInstance$4 = ref(), renderCustomOverlaySetInstance = (e) => mapInstance$4.value = e, drawCustomContent = (e, t, o, n = "top-left", r = !1) => {
   var m, u;
   if (!t || !mapInstance$4.value) return;
-  document.querySelectorAll(".truck-custom-content").forEach((f) => f.parentNode.removeChild(f));
-  const r = document.createElement("div");
-  r.innerHTML = o;
-  const i = new Overlay({
-    element: r,
+  document.querySelectorAll(".truck-custom-content").forEach((f) => {
+    var p;
+    return (p = f.parentNode) == null ? void 0 : p.removeChild(f);
+  });
+  const i = document.createElement("div");
+  i.innerHTML = o;
+  const l = new Overlay({
+    element: i,
     position: t,
     // 初始位置
     positioning: n,
-    stopEvent: l
+    stopEvent: r
     // 设置不阻拦事件
   });
-  if (l) {
-    let f = !1, p = [0, 0], w = [0, 0];
-    r.addEventListener("mousedown", function(h) {
-      var g;
-      f = !0, h.clientX, h.clientY, p = (g = mapInstance$4.value) == null ? void 0 : g.getCoordinateFromPixel([h.clientX - 200, h.clientY - 200]), w = [
-        h.clientX - r.getBoundingClientRect().left + 160,
-        h.clientY - r.getBoundingClientRect().top + 84
-      ], h.preventDefault();
-    }), document.addEventListener("mousemove", function(h) {
-      var g;
+  if (r) {
+    let f = !1, p = [0, 0], y = [0, 0], h = 0, g = 0;
+    i.addEventListener("mousedown", function(k) {
+      var b;
+      f = !0, h = k.clientX, g = k.clientY;
+      const M = (b = mapInstance$4.value) == null ? void 0 : b.getCoordinateFromPixel([k.clientX - 200, k.clientY - 200]);
+      M && (p = M), y = [
+        k.clientX - i.getBoundingClientRect().left + 160,
+        k.clientY - i.getBoundingClientRect().top + 84
+      ], k.preventDefault(), console.log(e, h, g);
+    }), document.addEventListener("mousemove", function(k) {
+      var M;
       if (f) {
-        const T = (g = mapInstance$4.value) == null ? void 0 : g.getCoordinateFromPixel([h.clientX - w[0], h.clientY - w[1]]), M = T[0] - p[0], b = T[1] - p[1];
-        i.setPosition([p[0] + M, p[1] + b]);
+        const b = (M = mapInstance$4.value) == null ? void 0 : M.getCoordinateFromPixel([k.clientX - y[0], k.clientY - y[1]]), F = b[0] - p[0], V = b[1] - p[1];
+        l.setPosition([p[0] + F, p[1] + V]);
       }
     }), document.addEventListener("mouseup", function() {
       f = !1;
     });
   }
-  (m = mapInstance$4.value) == null || m.addOverlay(i);
-  const c = r.querySelector(".close-button");
-  c && c.addEventListener("click", () => {
+  (m = mapInstance$4.value) == null || m.addOverlay(l);
+  const s = i.querySelector(".close-button");
+  s && s.addEventListener("click", () => {
     var f, p;
-    (f = mapInstance$4.value) == null || f.removeOverlay(i), (p = r.parentNode) == null || p.removeChild(r);
+    (f = mapInstance$4.value) == null || f.removeOverlay(l), (p = i.parentNode) == null || p.removeChild(i);
   });
-  const s = JSON.parse(JSON.stringify(t)), d = (u = mapInstance$4.value) == null ? void 0 : u.getCoordinateFromPixel(s);
-  return i.setPosition(d), i;
+  const c = JSON.parse(JSON.stringify(t)), d = (u = mapInstance$4.value) == null ? void 0 : u.getCoordinateFromPixel(c);
+  return l.setPosition(d), l;
 }, mapInstance$3 = ref(), renderTrackSetInstance = (e) => mapInstance$3.value = e, showTracks = ref([]), trackList = ref([]);
 ref(null);
-const trackId = ref(""), cursor = ref(0), renderTrack = (e, t, o, n, l = "ship") => {
+const trackId = ref(""), cursor = ref(0), renderTrack = (e, t, o, n, r = "ship") => {
   var m;
   if (nextTick(() => {
     hiddenAllShips();
@@ -1441,21 +1465,21 @@ const trackId = ref(""), cursor = ref(0), renderTrack = (e, t, o, n, l = "ship")
     ((m = showTracks.value) == null ? void 0 : m.findIndex((u) => u.id === e)) < 0 && showTracks.value.push({ id: e, length: "" });
     return;
   }
-  const r = {};
+  const i = {};
   t.forEach((u) => {
     u.state ? u.state = Number(u.state) : delete u.state;
-  }), trackId.value = e, r[e] = t, trackList.value = t;
-  const i = ["#ff0000", "#00ff00", "#0079ff", "#ffa500", "#800080", "#008080", "#ffc0cb", "#800000", "#000080", "#808000"], c = r[e].map(
+  }), trackId.value = e, i[e] = t, trackList.value = t;
+  const l = ["#ff0000", "#00ff00", "#0079ff", "#ffa500", "#800080", "#008080", "#ffc0cb", "#800000", "#000080", "#808000"], s = i[e].map(
     (u) => transform([u.lon, u.lat], projection.data, projection.mercator)
-  ), s = new LineString(c), d = formatUtils.formatLength(s, n) || "--";
+  ), c = new LineString(s), d = formatUtils.formatLength(c, n) || "--";
   nextTick(() => {
     var f, p;
-    const u = (f = showTracks.value) == null ? void 0 : f.findIndex((w) => w.id === e);
-    u < 0 ? showTracks.value.push({ id: e, length: d }) : showTracks.value[u].length = d, ++cursor.value, cursor.value > i.length && (cursor.value = 0), renderTrackLine(r, e, o), nextTick(() => {
+    const u = (f = showTracks.value) == null ? void 0 : f.findIndex((y) => y.id === e);
+    u < 0 ? showTracks.value.push({ id: e, length: d }) : showTracks.value[u].length = d, ++cursor.value, cursor.value > l.length && (cursor.value = 0), renderTrackLine(i, e, o), nextTick(() => {
       resetTrackView(e);
     }).then(() => {
     }), (p = mapInstance$3.value) == null || p.on("moveend", () => {
-      showTrackLayer.value && (trackLabels.value = [], renderTrackLine(r, e, o));
+      showTrackLayer.value && (trackLabels.value = [], renderTrackLine(i, e, o));
     }), renderTrackPointPopup();
   }).then(() => {
   });
@@ -1463,54 +1487,54 @@ const trackId = ref(""), cursor = ref(0), renderTrack = (e, t, o, n, l = "ship")
   var t;
   const e = ref(null);
   (t = mapInstance$3.value) == null || t.on("pointermove", (o) => {
-    var l, r, i, c;
-    e.value && ((l = mapInstance$3.value) == null || l.removeOverlay(e.value));
-    const n = (r = mapInstance$3.value) == null ? void 0 : r.forEachFeatureAtPixel(o.pixel, (s) => s);
+    var r, i, l, s;
+    e.value && ((r = mapInstance$3.value) == null || r.removeOverlay(e.value));
+    const n = (i = mapInstance$3.value) == null ? void 0 : i.forEachFeatureAtPixel(o.pixel, (c) => c);
     if (n) {
-      const s = n.get("data");
-      if (!(s != null && s.time)) return;
+      const c = n.get("data");
+      if (!(c != null && c.time)) return;
       let d = "";
-      s != null && s.stayTime && (d = `
+      c != null && c.stayTime && (d = `
                     <div class="item w-100">
                         <div class="item-label">停泊时间约</div>
-                        <div class="item-item">${formatMinutesToDDHHMM(Number(s.stayTime))}</div>
+                        <div class="item-item">${formatMinutesToDDHHMM(Number(c.stayTime))}</div>
                     </div>
                 `);
       const m = `
                 <div class="track-point-popup">
                     <div class="item">
                         <div class="item-label">状态</div>
-                        <div class="item-item">${s != null && s.sailStatus ? SHIP_SAIL_STATUS[String(s.sailStatus)] : DEFAULT_VALUE}</div>
+                        <div class="item-item">${c != null && c.sailStatus ? SHIP_SAIL_STATUS[String(c.sailStatus)] : DEFAULT_VALUE}</div>
                     </div>
                     <div class="item">
                         <div class="item-label">航速</div>
-                        <div class="item-item">${s.speed || DEFAULT_VALUE}</div>
+                        <div class="item-item">${c.speed || DEFAULT_VALUE}</div>
                     </div>
                     <div class="item">
                         <div class="item-label">艏向</div>
-                        <div class="item-item">${s.hdg || DEFAULT_VALUE}</div>
+                        <div class="item-item">${c.hdg || DEFAULT_VALUE}</div>
                     </div>
                     <div class="item">
                         <div class="item-label">航向</div>
-                        <div class="item-item">${s.cog || DEFAULT_VALUE}</div>
+                        <div class="item-item">${c.cog || DEFAULT_VALUE}</div>
                     </div>
                     <div class="item">
                         <div class="item-label">经度</div>
-                        <div class="item-item">${s.lon || DEFAULT_VALUE}</div>
+                        <div class="item-item">${c.lon || DEFAULT_VALUE}</div>
                     </div>
                     <div class="item">
                         <div class="item-label">纬度</div>
-                        <div class="item-item">${s.lat || DEFAULT_VALUE}</div>
+                        <div class="item-item">${c.lat || DEFAULT_VALUE}</div>
                     </div>
                     <div class="item w-100">
                         <div class="item-label">时间</div>
-                        <div class="item-item">${s.time}</div>
+                        <div class="item-item">${c.time}</div>
                     </div>
                     ${d ?? d}
-                </div>`, u = (i = mapInstance$3.value) == null ? void 0 : i.getPixelFromCoordinate(o.coordinate);
-      e.value = drawCustomContent(s.time, u, m, "left-top");
+                </div>`, u = (l = mapInstance$3.value) == null ? void 0 : l.getPixelFromCoordinate(o.coordinate);
+      e.value = drawCustomContent(c.time, u, m, "left-top");
     } else
-      (c = mapInstance$3.value) == null || c.removeOverlay(e.value);
+      (s = mapInstance$3.value) == null || s.removeOverlay(e.value);
   });
 }, removeAllTrackLayer = () => {
   var e;
@@ -1518,21 +1542,21 @@ const trackId = ref(""), cursor = ref(0), renderTrack = (e, t, o, n, l = "ship")
 }, playTrack = (e, t) => {
   handlePlay(String(e), t);
 }, resetTrackView = (e) => {
-  var l;
-  const t = mapInstance$3.value.getView(), o = e ? shipTrackLineFeatures.value.find((r) => r.getId() === e) : shipTrackLineFeatures.value[0];
+  var r;
+  const t = mapInstance$3.value.getView(), o = e ? shipTrackLineFeatures.value.find((i) => i.getId() === e) : shipTrackLineFeatures.value[0];
   if (!o) return;
-  const n = (l = o == null ? void 0 : o.getGeometry()) == null ? void 0 : l.getExtent();
+  const n = (r = o == null ? void 0 : o.getGeometry()) == null ? void 0 : r.getExtent();
   if (n != null && n.length)
     try {
-      const r = buffer(n, Math.max(n[2] - n[0], n[3] - n[1]) * 0.02);
-      t.fit(r);
-    } catch (r) {
-      console.log(r);
+      const i = buffer(n, Math.max(n[2] - n[0], n[3] - n[1]) * 0.02);
+      t.fit(i);
+    } catch (i) {
+      console.log(i);
     }
 }, formatMinutesToDDHHMM = (e) => {
-  const t = hooks.duration(e, "minutes"), o = Math.floor(t.asDays()), n = t.hours(), l = t.minutes();
-  let r = `${String(n).padStart(2, "0")}时${String(l).padStart(2, "0")}分`;
-  return o !== 0 && (r = `${String(o).padStart(2, "0")}天${r}`), r;
+  const t = hooks.duration(e, "minutes"), o = Math.floor(t.asDays()), n = t.hours(), r = t.minutes();
+  let i = `${String(n).padStart(2, "0")}时${String(r).padStart(2, "0")}分`;
+  return o !== 0 && (i = `${String(o).padStart(2, "0")}天${i}`), i;
 }, _hoisted_1$3 = {
   key: 0,
   class: "more-tool-panel"
@@ -1547,25 +1571,25 @@ const trackId = ref(""), cursor = ref(0), renderTrack = (e, t, o, n, l = "ship")
   },
   emits: ["switchGreenDot", "switchMapTile"],
   setup(e, { emit: t }) {
-    var p, w;
-    const o = inject("mapInstance"), n = e, l = t, r = ref(((w = (p = o.value) == null ? void 0 : p.getView()) == null ? void 0 : w.getZoom()) || mapZoom.default), i = ref(!1), c = ref(null), s = ref(!0), d = () => {
-      n.disableGreenDot || r.value >= mapZoom.shipGreenDotMax || (s.value = !s.value, l("switchGreenDot", s.value));
+    var p, y;
+    const o = inject("mapInstance"), n = e, r = t, i = ref(((y = (p = o.value) == null ? void 0 : p.getView()) == null ? void 0 : y.getZoom()) || mapZoom.default), l = ref(!1), s = ref(null), c = ref(!0), d = () => {
+      n.disableGreenDot || i.value >= mapZoom.shipGreenDotMax || (c.value = !c.value, r("switchGreenDot", c.value));
     }, m = () => {
-      l("switchMapTile", n.mapTileMode === BaseMapType.vector ? BaseMapType.satellite : BaseMapType.vector);
+      r("switchMapTile", n.mapTileMode === BaseMapType.vector ? BaseMapType.satellite : BaseMapType.vector);
     }, u = () => {
       var h, g;
-      i.value ? (h = c.value) == null || h.removeInteraction() : (g = c.value) == null || g.addInteraction(), i.value = !i.value;
+      l.value ? (h = s.value) == null || h.removeInteraction() : (g = s.value) == null || g.addInteraction(), l.value = !l.value;
     }, f = () => {
       var h;
-      (h = c.value) == null || h.removeInteraction(), i.value = !1;
+      (h = s.value) == null || h.removeInteraction(), l.value = !1;
     };
     return onMounted(() => {
       nextTick(() => {
         var h;
         (h = o.value) == null || h.on("moveend", () => {
-          var T, M;
-          const g = (M = (T = o.value) == null ? void 0 : T.getView()) == null ? void 0 : M.getZoom();
-          g && (r.value = g);
+          var k, M;
+          const g = (M = (k = o.value) == null ? void 0 : k.getView()) == null ? void 0 : M.getZoom();
+          g && (i.value = g);
         });
       });
     }), (h, g) => (openBlock(), createElementBlock(Fragment, null, [
@@ -1576,7 +1600,7 @@ const trackId = ref(""), cursor = ref(0), renderTrack = (e, t, o, n, l = "ship")
           createElementVNode("div", _hoisted_2$1, [
             h.vehicleMode === "ship" ? (openBlock(), createElementBlock("div", {
               key: 0,
-              class: normalizeClass(["switch-btn", `${i.value && "active"}`]),
+              class: normalizeClass(["switch-btn", `${l.value && "active"}`]),
               onClick: u
             }, g[5] || (g[5] = [
               createElementVNode("i", { class: "map-iconfont icon-measure" }, null, -1),
@@ -1584,7 +1608,7 @@ const trackId = ref(""), cursor = ref(0), renderTrack = (e, t, o, n, l = "ship")
             ]), 2)) : createCommentVNode("", !0),
             h.vehicleMode === "ship" ? (openBlock(), createElementBlock("div", {
               key: 1,
-              class: normalizeClass(`switch-btn ${s.value && "active"} ${(h.disableGreenDot || r.value >= unref(mapZoom).shipGreenDotMax) && "disabled"}`),
+              class: normalizeClass(`switch-btn ${c.value && "active"} ${(h.disableGreenDot || i.value >= unref(mapZoom).shipGreenDotMax) && "disabled"}`),
               onClick: d
             }, g[6] || (g[6] = [
               createElementVNode("i", { class: "map-iconfont icon-ship" }, null, -1),
@@ -1593,7 +1617,7 @@ const trackId = ref(""), cursor = ref(0), renderTrack = (e, t, o, n, l = "ship")
             h.vehicleMode === "ship" ? (openBlock(), createElementBlock("div", {
               key: 2,
               class: normalizeClass(`switch-btn ${h.mapTileMode === unref(BaseMapType).satellite && "active"}`),
-              onClick: g[0] || (g[0] = (T) => m())
+              onClick: g[0] || (g[0] = (k) => m())
             }, g[7] || (g[7] = [
               createElementVNode("i", { class: "map-iconfont icon-space" }, null, -1),
               createElementVNode("div", { class: "button-text" }, "图层", -1)
@@ -1601,7 +1625,7 @@ const trackId = ref(""), cursor = ref(0), renderTrack = (e, t, o, n, l = "ship")
             h.vehicleMode === "truck" ? (openBlock(), createElementBlock("div", {
               key: 3,
               class: normalizeClass(`switch-btn ${h.mapTileMode === unref(BaseMapType).satellite && "active"}`),
-              onClick: g[1] || (g[1] = (T) => m())
+              onClick: g[1] || (g[1] = (k) => m())
             }, g[8] || (g[8] = [
               createElementVNode("i", { class: "map-iconfont icon-space" }, null, -1),
               createElementVNode("div", { class: "button-text" }, "卫星", -1)
@@ -1609,14 +1633,14 @@ const trackId = ref(""), cursor = ref(0), renderTrack = (e, t, o, n, l = "ship")
             h.showTrackLayer ? (openBlock(), createElementBlock(Fragment, { key: 4 }, [
               createElementVNode("div", {
                 class: "switch-btn multiple",
-                onClick: g[2] || (g[2] = (T) => unref(playTrack)(unref(currentTrackId), 1))
+                onClick: g[2] || (g[2] = (k) => unref(playTrack)(unref(currentTrackId), 1))
               }, g[9] || (g[9] = [
                 createElementVNode("i", { class: "map-iconfont icon-play" }, null, -1),
                 createElementVNode("div", { class: "button-text" }, "播放轨迹", -1)
               ])),
               createElementVNode("div", {
                 class: "switch-btn multiple",
-                onClick: g[3] || (g[3] = (T) => unref(resetTrackView)())
+                onClick: g[3] || (g[3] = (k) => unref(resetTrackView)())
               }, g[10] || (g[10] = [
                 createElementVNode("i", { class: "map-iconfont icon-center" }, null, -1),
                 createElementVNode("div", { class: "button-text" }, "轨迹居中", -1)
@@ -1627,7 +1651,7 @@ const trackId = ref(""), cursor = ref(0), renderTrack = (e, t, o, n, l = "ship")
         ])) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
           h.vehicleMode === "ship" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
             createElementVNode("div", {
-              class: normalizeClass(["switch-btn", `${i.value && "active"}`]),
+              class: normalizeClass(["switch-btn", `${l.value && "active"}`]),
               onClick: u
             }, g[11] || (g[11] = [
               createElementVNode("i", { class: "map-iconfont icon-measure" }, null, -1),
@@ -1635,7 +1659,7 @@ const trackId = ref(""), cursor = ref(0), renderTrack = (e, t, o, n, l = "ship")
             ]), 2),
             h.vehicleMode === "ship" ? (openBlock(), createElementBlock("div", {
               key: 0,
-              class: normalizeClass(`switch-btn ${s.value && "active"} ${(h.disableGreenDot || r.value >= unref(mapZoom).shipGreenDotMax) && "disabled"}`),
+              class: normalizeClass(`switch-btn ${c.value && "active"} ${(h.disableGreenDot || i.value >= unref(mapZoom).shipGreenDotMax) && "disabled"}`),
               onClick: d
             }, g[12] || (g[12] = [
               createElementVNode("i", { class: "map-iconfont icon-ship" }, null, -1),
@@ -1652,33 +1676,34 @@ const trackId = ref(""), cursor = ref(0), renderTrack = (e, t, o, n, l = "ship")
         ], 64))
       ], 2),
       createElementVNode("div", _hoisted_3, [
-        i.value ? (openBlock(), createBlock(Measure, {
+        l.value ? (openBlock(), createBlock(Measure, {
           key: 0,
           ref_key: "measureRef",
-          ref: c,
-          visible: i.value,
-          "onUpdate:visible": g[4] || (g[4] = (T) => i.value = T),
+          ref: s,
+          visible: l.value,
+          "onUpdate:visible": g[4] || (g[4] = (k) => l.value = k),
           onClose: f,
           "view-mode": h.viewMode
         }, null, 8, ["visible", "view-mode"])) : createCommentVNode("", !0)
       ])
     ], 64));
   }
-}), ToolPanel = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["__scopeId", "data-v-ef931f65"]]), _hoisted_1$2 = { id: "scale-line-container" }, _sfc_main$3 = /* @__PURE__ */ defineComponent({
+}), ToolPanel = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["__scopeId", "data-v-458187f4"]]), _hoisted_1$2 = { id: "scale-line-container" }, _sfc_main$3 = /* @__PURE__ */ defineComponent({
   __name: "scaleLine",
   setup(e, { expose: t }) {
     const o = inject("mapInstance");
     return t({
-      setScaleLine: (l) => {
-        var c;
-        const r = new ScaleLine$1({
-          units: l || "metric"
-        }), i = document.getElementById("scale-line-container");
-        i && (r.setTarget(i), (c = o.value) == null || c.addControl(r));
+      setScaleLine: (r) => {
+        var s;
+        r || (r = "metric");
+        const i = new ScaleLine$1({
+          units: r
+        }), l = document.getElementById("scale-line-container");
+        l && (i.setTarget(l), (s = o == null ? void 0 : o.value) == null || s.addControl(i));
       }
-    }), (l, r) => (openBlock(), createElementBlock("div", _hoisted_1$2));
+    }), (r, i) => (openBlock(), createElementBlock("div", _hoisted_1$2));
   }
-}), ScaleLine = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["__scopeId", "data-v-8c27b246"]]), _hoisted_1$1 = { class: "zoom" }, _sfc_main$2 = /* @__PURE__ */ defineComponent({
+}), ScaleLine = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["__scopeId", "data-v-d666f80d"]]), _hoisted_1$1 = { class: "zoom" }, _sfc_main$2 = /* @__PURE__ */ defineComponent({
   __name: "zoomControl",
   props: {
     map: {
@@ -1688,14 +1713,14 @@ const trackId = ref(""), cursor = ref(0), renderTrack = (e, t, o, n, l = "ship")
   setup(e) {
     const t = inject("mapInstance"), o = () => {
       if (!t.value) return;
-      const l = t.value.getView(), r = l.getZoom();
-      r && l.setZoom(r + 1);
+      const r = t.value.getView(), i = r.getZoom();
+      i && r.setZoom(i + 1);
     }, n = () => {
       if (!t.value) return;
-      const l = t.value.getView(), r = l.getZoom();
-      r && l.setZoom(r - 1);
+      const r = t.value.getView(), i = r.getZoom();
+      i && r.setZoom(i - 1);
     };
-    return (l, r) => (openBlock(), createElementBlock("div", _hoisted_1$1, [
+    return (r, i) => (openBlock(), createElementBlock("div", _hoisted_1$1, [
       createElementVNode("div", {
         onClick: o,
         class: "button big-button"
@@ -1712,11 +1737,11 @@ const trackId = ref(""), cursor = ref(0), renderTrack = (e, t, o, n, l = "ship")
     type: { default: COPY_RIGHT_TYPE.HORIZONTAL }
   },
   setup(e) {
-    useCssVars((r) => ({
-      "4bfada56": l.value
+    useCssVars((i) => ({
+      "4bfada56": r.value
     }));
-    const t = e, o = computed(() => t.type === COPY_RIGHT_TYPE.HORIZONTAL ? "map/tdt-copyright-h.svg" : `map/tdt-copyright-v${mapTile === "satellite" ? "-w" : ""}.svg`), n = computed(() => t.type === COPY_RIGHT_TYPE.HORIZONTAL ? "400px" : "168px"), l = computed(() => t.type === COPY_RIGHT_TYPE.HORIZONTAL ? "auto auto 0 5px" : "0 auto auto 5px");
-    return (r, i) => (openBlock(), createElementBlock("div", _hoisted_1, [
+    const t = e, o = computed(() => t.type === COPY_RIGHT_TYPE.HORIZONTAL ? "map/tdt-copyright-h.svg" : `map/tdt-copyright-v${mapTile === "satellite" ? "-w" : ""}.svg`), n = computed(() => t.type === COPY_RIGHT_TYPE.HORIZONTAL ? "400px" : "168px"), r = computed(() => t.type === COPY_RIGHT_TYPE.HORIZONTAL ? "auto auto 0 5px" : "0 auto auto 5px");
+    return (i, l) => (openBlock(), createElementBlock("div", _hoisted_1, [
       createElementVNode("img", {
         src: unref(CDN_URL) + o.value,
         width: n.value,
@@ -1738,30 +1763,30 @@ const loadImage = new Image();
 loadImage.src = `${CDN_URL}/map/map-load.svg`;
 loadImage.crossOrigin = "anonymous";
 const setTruckStyle = (e, t, o, n) => new Style({
-  renderer: (l, r) => {
-    const i = r.context;
-    i.save();
-    let c = 1;
-    i.scale(c, c);
-    let [s, d] = l;
-    s = s / c - 20, d = d / c;
-    const m = s - 70, u = d - 68;
+  renderer: (r, i) => {
+    const l = i.context;
+    l.save();
+    let s = 1;
+    l.scale(s, s);
+    let [c, d] = r;
+    c = c / s - 20, d = d / s;
+    const m = c - 70, u = d - 68;
     let f = 180;
-    const p = 56, w = "#FFFFFF";
+    const p = 56, y = "#FFFFFF";
     let h = 176;
     const g = 52;
-    let T = "#164AFF", M = "#FFFFFF";
-    o === CAR_COLOR.YELLOW ? (h = 176, T = "#FFC81E", M = "rgba(0,0,0,0.88)") : o === CAR_COLOR.Y_GREEN && (f = 200, h = 196, T = "#8FED7C", M = "rgba(0,0,0,0.88)"), n != null && n.length && (f += n.length * 56), fillRectRadius(i, m, u, f, p, w), fillRectRadius(i, m + 2, u + 2, h, g, T), o === CAR_COLOR.Y_GREEN && fillRectRadius(i, m + 2, u + 2, 68, g, "#FFC81E"), i.save(), i.restore(), i.fillStyle = M, i.font = "bold 28px Arial", i.textAlign = "left", i.textBaseline = "middle";
+    let k = "#164AFF", M = "#FFFFFF";
+    o === CAR_COLOR.YELLOW ? (h = 176, k = "#FFC81E", M = "rgba(0,0,0,0.88)") : o === CAR_COLOR.Y_GREEN && (f = 200, h = 196, k = "#8FED7C", M = "rgba(0,0,0,0.88)"), n != null && n.length && (f += n.length * 56), fillRectRadius(l, m, u, f, p, y), fillRectRadius(l, m + 2, u + 2, h, g, k), o === CAR_COLOR.Y_GREEN && fillRectRadius(l, m + 2, u + 2, 68, g, "#FFC81E"), l.save(), l.restore(), l.fillStyle = M, l.font = "bold 28px Arial", l.textAlign = "left", l.textBaseline = "middle";
     const b = `${t.slice(0, 2) + " · " + t.slice(2)}`;
-    if (i.fillText(b, m + 12, u + 32), i.save(), i.restore(), n != null && n.length) {
-      const P = i.measureText(b).width + 12;
-      let x = 0;
+    if (l.fillText(b, m + 12, u + 32), l.save(), l.restore(), n != null && n.length) {
+      const V = l.measureText(b).width + 12;
+      let P = 0;
       n.forEach((v) => {
-        v === DEVICE_TYPE.CAMERA && (i.drawImage(cameraImage, s - 54 + P + x * 56, d - 64, 50, 50), ++x), v === DEVICE_TYPE.LOAD && (i.drawImage(loadImage, s - 54 + P + x * 56, d - 64, 50, 50), ++x);
+        v === DEVICE_TYPE.CAMERA && (l.drawImage(cameraImage, c - 54 + V + P * 56, d - 64, 50, 50), ++P), v === DEVICE_TYPE.LOAD && (l.drawImage(loadImage, c - 54 + V + P * 56, d - 64, 50, 50), ++P);
       });
     }
-    const V = dotImage$1;
-    i.drawImage(V, s + f / 2 - 90, d, 50 / c, 50 / c), i.restore();
+    const F = dotImage$1;
+    l.drawImage(F, c + f / 2 - 90, d, 50 / s, 50 / s), l.restore();
   }
 }), mapInstance$2 = ref(), renderDashboardSetInstance = (e) => mapInstance$2.value = e;
 ref([]);
@@ -1793,8 +1818,8 @@ const renderTrucksMarker = (e) => {
   focusShipData.value = e;
   const t = formatUtils.convertSixHundredThousandToLatLng(e.lon, e.lat), o = mapInstance$1.value.getPixelFromCoordinate(transform(t, projection.data, projection.mercator));
   currentTruckOverlay.value = drawTruckIcon(e.vno, o, e == null ? void 0 : e.drc);
-  const n = mapInstance$1.value.getView(), l = new Point(t);
-  n.setCenter(transform(l.getCoordinates(), projection.data, projection.mercator));
+  const n = mapInstance$1.value.getView(), r = new Point(t);
+  n.setCenter(transform(r.getCoordinates(), projection.data, projection.mercator));
 }, clearAllTruck = () => {
   vehicle.value.clearAllShip();
 }, drawTruckIcon = (e, t, o) => {
@@ -1807,15 +1832,15 @@ const renderTrucksMarker = (e) => {
   const e = (t = currentTruckOverlay.value) == null ? void 0 : t.getElement();
   e && (e.innerHTML = "");
 }, zoomTruckIcon = () => {
-  var r;
+  var i;
   if (!mapInstance$1.value) return;
   const e = mapInstance$1.value.getView().getZoom(), t = 120, o = 60;
-  function n(i) {
-    return i < 14 ? o : i >= 14 && i <= 18 ? Math.round((i - 14) * (t - o) / 4 + o) : t;
+  function n(l) {
+    return l < 14 ? o : l >= 14 && l <= 18 ? Math.round((l - 14) * (t - o) / 4 + o) : t;
   }
-  const l = n(e);
-  (r = document.querySelectorAll(".truck-custom-content")) == null || r.forEach((i) => {
-    i.style.width = `${l}px`, i.style.height = `${l}px`;
+  const r = n(e);
+  (i = document.querySelectorAll(".truck-custom-content")) == null || i.forEach((l) => {
+    l.style.width = `${r}px`, l.style.height = `${r}px`;
   });
 }, mapInstance = ref(), drawPolygonSetInstance = (e) => mapInstance.value = e;
 let layerState = "drawn", drawnState = "undrawn";
@@ -1861,13 +1886,13 @@ function createHelpTooltip() {
 }
 let squareLimitError = !1, lineLimitError = !1;
 const validateSquareLimit = (e) => {
-  let o = 1 / 0, n = -1 / 0, l = 1 / 0, r = -1 / 0;
-  e == null || e.forEach((s) => {
-    const d = transform(s, projection.mercator, projection.data), m = d[0], u = d[1];
-    o = Math.min(o, u), n = Math.max(n, u), l = Math.min(l, m), r = Math.max(r, m);
+  let o = 1 / 0, n = -1 / 0, r = 1 / 0, i = -1 / 0;
+  e == null || e.forEach((c) => {
+    const d = transform(c, projection.mercator, projection.data), m = d[0], u = d[1];
+    o = Math.min(o, u), n = Math.max(n, u), r = Math.min(r, m), i = Math.max(i, m);
   });
-  const i = (n - o) * 111, c = (r - l) * 111;
-  squareLimitError = i > 150 || c > 150;
+  const l = (n - o) * 111, s = (i - r) * 111;
+  squareLimitError = l > 150 || s > 150;
 };
 let storeFeature, callbackFunction = null;
 const addInteraction = (e) => {
@@ -1879,41 +1904,41 @@ const addInteraction = (e) => {
     style: [drawPolygonStyle.drawing, circleStyle]
   }), (n = mapInstance.value) == null || n.addInteraction(draw), createMeasureTooltip(), createHelpTooltip();
   let t;
-  draw.on("drawstart", function(l) {
-    var r;
-    layerState = "drawn", sketch = l.feature, t = (r = sketch.getGeometry()) == null ? void 0 : r.on("change", function(i) {
-      const c = i.target, s = formatUtils.formatArea(c, LENGTH_UNIT.NM), m = c.getCoordinates()[0], u = new LineString([m[m.length - 2], m[m.length - 1]]), f = formatUtils.formatLength(u, LENGTH_UNIT.NM);
-      if (lineLimitError = Number(getLength(u) / 1e3) > 150, validateSquareLimit(m), measureTooltipElement && s && (measureTooltipElement.innerHTML = `
-                <span class="text">面积：${s}${lineLimitError || squareLimitError ? '<span class="error pl-12">超出可以绘画的距离</span>' : ""}</span>
-            `), helpTooltipElement && s) {
+  draw.on("drawstart", function(r) {
+    var i;
+    layerState = "drawn", sketch = r.feature, t = (i = sketch.getGeometry()) == null ? void 0 : i.on("change", function(l) {
+      const s = l.target, c = formatUtils.formatArea(s, LENGTH_UNIT.NM), m = s.getCoordinates()[0], u = new LineString([m[m.length - 2], m[m.length - 1]]), f = formatUtils.formatLength(u, LENGTH_UNIT.NM);
+      if (lineLimitError = Number(getLength(u) / 1e3) > 150, validateSquareLimit(m), measureTooltipElement && c && (measureTooltipElement.innerHTML = `
+                <span class="text">面积：${c}${lineLimitError || squareLimitError ? '<span class="error pl-12">超出可以绘画的距离</span>' : ""}</span>
+            `), helpTooltipElement && c) {
         let p = "";
-        parseFloat(s) > 0 && (p = `
-                        <div class="text ${squareLimitError ? "error" : ""}">面积：${s}${squareLimitError ? '<span class="error pl-12">超出可以绘画的距离</span>' : ""}</div>`), helpTooltipElement.innerHTML = `${p}
+        parseFloat(c) > 0 && (p = `
+                        <div class="text ${squareLimitError ? "error" : ""}">面积：${c}${squareLimitError ? '<span class="error pl-12">超出可以绘画的距离</span>' : ""}</div>`), helpTooltipElement.innerHTML = `${p}
                     <span class="text ${lineLimitError ? "error" : ""}">线段${m.length - 2}：${f}${lineLimitError ? '<span class="error pl-4">超出可以绘画的距离</span>' : ""}</span>
                     <div><span class="text">单击继续，双击结束</span></div>
                 `;
       }
     }), drawnState = "drawing";
-  }), draw.on("drawend", function(l) {
-    var r;
-    if (l.feature.getGeometry()) {
-      storeFeature = l.feature;
-      const i = endFn(l.feature);
-      i != null && i.length && callbackFunction && callbackFunction(i);
+  }), draw.on("drawend", function(r) {
+    var i;
+    if (r.feature.getGeometry()) {
+      storeFeature = r.feature;
+      const l = endFn(r.feature);
+      l != null && l.length && callbackFunction && callbackFunction(l);
     }
     if (sketch = null, measureTooltipElement = null, createMeasureTooltip(), t && unByKey(t), drawnState = "drawend", draw) {
-      const i = mapInstance.value.getInteractions().getArray().find((c) => c.ol_uid === draw.ol_uid);
-      i && ((r = mapInstance.value) == null || r.removeInteraction(i)), helpTooltipElement != null && helpTooltipElement.parentNode && helpTooltipElement.parentNode.removeChild(helpTooltipElement);
+      const l = mapInstance.value.getInteractions().getArray().find((s) => getUid(s) === getUid(draw));
+      l && ((i = mapInstance.value) == null || i.removeInteraction(l)), helpTooltipElement != null && helpTooltipElement.parentNode && helpTooltipElement.parentNode.removeChild(helpTooltipElement);
     }
   });
 }, removeInteraction = () => {
   var e, t, o;
   if (mapInstance.value) {
     if (document.querySelectorAll(".ol-tooltip.ol-tooltip-draw-polygon").forEach((n) => {
-      var l;
-      (l = n == null ? void 0 : n.parentNode) == null || l.removeChild(n);
+      var r;
+      (r = n == null ? void 0 : n.parentNode) == null || r.removeChild(n);
     }), source.clear(), (e = mapInstance.value) == null || e.removeLayer(drawVector), helpTooltipElement != null && helpTooltipElement.parentNode && helpTooltipElement.parentNode.removeChild(helpTooltipElement), ((t = mapInstance.value) == null ? void 0 : t.getTargetElement()).style.cursor = "", document.querySelector("#map").style.cursor = "", draw) {
-      const n = mapInstance.value.getInteractions().getArray().find((l) => l.ol_uid === draw.ol_uid);
+      const n = mapInstance.value.getInteractions().getArray().find((r) => getUid(r) === getUid(draw));
       n && ((o = mapInstance.value) == null || o.removeInteraction(n));
     }
     drawnState = "undrawn", layerState = "destroyed";
@@ -1921,15 +1946,15 @@ const addInteraction = (e) => {
 }, endFn = (e) => {
   var t, o, n;
   if (e.getGeometry()) {
-    const l = [], i = e.getGeometry().getCoordinates();
-    (t = i[0]) == null || t.forEach((s) => {
-      l.push(transform(s, projection.mercator, projection.data));
+    const r = [], l = e.getGeometry().getCoordinates();
+    (t = l[0]) == null || t.forEach((c) => {
+      r.push(transform(c, projection.mercator, projection.data));
     });
-    const c = i[0][i[0].length - 2];
-    if (c && measureTooltip.setPosition(c), measureTooltip.setOffset([10, 0]), measureTooltipElement && (measureTooltipElement.innerHTML += '<span class="delete-icon"><i class="map-iconfont icon-delete" /></div>'), (o = document.querySelector(".delete-icon")) == null || o.addEventListener("click", () => {
+    const s = l[0][l[0].length - 2];
+    if (s && measureTooltip.setPosition(s), measureTooltip.setOffset([10, 0]), measureTooltipElement && (measureTooltipElement.innerHTML += '<span class="delete-icon"><i class="map-iconfont icon-delete" /></div>'), (o = document.querySelector(".delete-icon")) == null || o.addEventListener("click", () => {
       reset();
     }), !lineLimitError && !squareLimitError)
-      return l;
+      return r;
     draw && ((n = mapInstance.value) == null || n.removeInteraction(draw)), helpTooltipElement != null && helpTooltipElement.parentNode && helpTooltipElement.parentNode.removeChild(helpTooltipElement);
   }
 }, initFeature = (e) => {
@@ -1937,14 +1962,14 @@ const addInteraction = (e) => {
   if (e && (callbackFunction = e), layerState = "drawn", storeFeature) {
     const n = storeFeature.getGeometry();
     if (!n) return;
-    const l = formatUtils.formatArea(n, LENGTH_UNIT.NM);
+    const r = formatUtils.formatArea(n, LENGTH_UNIT.NM);
     measureTooltipElement && (measureTooltipElement.innerHTML = `
-                <span class="text">面积：${l}${lineLimitError || squareLimitError ? '<span class="error pl-12">超出可以绘画的距离</span>' : ""}</span>
+                <span class="text">面积：${r}${lineLimitError || squareLimitError ? '<span class="error pl-12">超出可以绘画的距离</span>' : ""}</span>
             `), (t = drawVector.getSource()) == null || t.addFeature(storeFeature);
-    const r = endFn(storeFeature);
-    r != null && r.length && callbackFunction && callbackFunction(r);
-    const i = getCenter(storeFeature.getGeometry().getExtent());
-    (o = mapInstance.value) == null || o.getView().setCenter(i);
+    const i = endFn(storeFeature);
+    i != null && i.length && callbackFunction && callbackFunction(i);
+    const l = getCenter(storeFeature.getGeometry().getExtent());
+    (o = mapInstance.value) == null || o.getView().setCenter(l);
   }
 }, pointerMoveHandler = function(e) {
   var o;
@@ -1985,17 +2010,17 @@ dotImage.crossOrigin = "anonymous";
 const dotActiveImage = new Image();
 dotActiveImage.crossOrigin = "anonymous";
 const setPointStyle = (e, t, o) => {
-  const { color: n, url: l, activeUrl: r, activeColor: i } = o;
-  return (r || l) && (e ? dotActiveImage.src = CDN_URL + (r || l) : dotImage.src = CDN_URL + (l || r)), new Style({
-    renderer: (c, s) => {
-      const d = s.context;
+  const { color: n, url: r, activeUrl: i, activeColor: l } = o;
+  return (i || r) && (e ? dotActiveImage.src = CDN_URL + (i || r) : dotImage.src = CDN_URL + (r || i)), new Style({
+    renderer: (s, c) => {
+      const d = c.context;
       d.save();
       const m = 1;
       d.scale(m, m);
-      let [u, f] = c;
-      u = u / m, f = f / m, d.font = "12px Arial";
-      const p = d.measureText(t).width, w = u - p / 2, h = f - 10, g = p + 4, T = 20, M = e && i || n;
-      if (fillRectRadius(d, w, h + 30, g, T, M), d.save(), d.restore(), d.fillStyle = e ? "#FFFFFF" : "#000000", d.textAlign = "center", d.textBaseline = "middle", d.fillText(t, w + (p + 4) / 2, h + 41), d.save(), d.restore(), l || r) {
+      let [u, f] = s;
+      u = Number(u) / m, f = Number(f) / m, d.font = "12px Arial";
+      const p = d.measureText(t).width, y = u - p / 2, h = f - 10, g = p + 4, k = 20, M = e && l || n;
+      if (fillRectRadius(d, y, h + 30, g, k, M), d.save(), d.restore(), d.fillStyle = e ? "#FFFFFF" : "#000000", d.textAlign = "center", d.textBaseline = "middle", d.fillText(t, y + (p + 4) / 2, h + 41), d.save(), d.restore(), r || i) {
         const b = e ? dotActiveImage : dotImage;
         d.drawImage(b, u - b.width / 2, f - b.height / 2, 40 / m, 40 / m);
       }
@@ -2042,9 +2067,9 @@ class PointMarkerClass {
     if (this.deleteAllPointMarkers(), !this.mapInstance) return;
     let o = {};
     t.forEach((n) => {
-      var r;
-      const l = [n.lon, n.lat];
-      if (((r = this.highlightPoint) == null ? void 0 : r.id) === n.id)
+      var i;
+      const r = [n.lon, n.lat];
+      if (((i = this.highlightPoint) == null ? void 0 : i.id) === n.id)
         o = {
           id: n.id,
           name: n.name,
@@ -2052,12 +2077,12 @@ class PointMarkerClass {
           pointType: n.pointType
         };
       else {
-        const i = this.getFeature(n, l);
+        const l = this.getFeature(n, r);
         this.pointMarkerList.push({
           id: n.id,
           name: n.name,
           lonlat: [Number(n.lon), Number(n.lat)],
-          feature: i,
+          feature: l,
           pointType: n.pointType
         });
       }
@@ -2103,23 +2128,23 @@ class PointMarkerClass {
    */
   highlightPointMarker(t) {
     if (!this.mapInstance) return;
-    const { id: o, name: n, fullName: l, lon: r, lat: i, pointType: c } = t, s = [Number(r), Number(i)];
+    const { id: o, name: n, fullName: r, lon: i, lat: l, pointType: s } = t, c = [Number(i), Number(l)];
     this.highlightPoint = {
       id: o,
       name: n,
-      fullName: l,
-      lonlat: s,
-      pointType: c
-    }, this.setPointCenter(s);
+      fullName: r,
+      lonlat: c,
+      pointType: s
+    }, this.setPointCenter(c);
   }
   // 获取feature
   getFeature(t, o) {
-    var l;
+    var r;
     const n = new Feature({
       geometry: new Point(fromLonLat(o))
     });
     return n.set("data", t), n.setStyle(
-      setPointStyle(((l = this.highlightPoint) == null ? void 0 : l.id) === t.id, t.name, this.options)
+      setPointStyle(((r = this.highlightPoint) == null ? void 0 : r.id) === t.id, t.name, this.options)
     ), n;
   }
   /**
@@ -2132,10 +2157,10 @@ class PointMarkerClass {
    */
   setPointCenter(t, o = { customZoom: mapZoom.findShip, type: 1 }) {
     if (!this.mapInstance) return;
-    const { customZoom: n = mapZoom.findShip, type: l = 1 } = o, r = this.mapInstance.getView(), i = r.getZoom();
-    (l === 1 || i > n && l === 2 || i < n && l === 3) && r.setZoom(n);
-    const c = new Point(t);
-    r.setCenter(transform(c.getCoordinates(), projection.data, projection.mercator));
+    const { customZoom: n = mapZoom.findShip, type: r = 1 } = o, i = this.mapInstance.getView(), l = i.getZoom();
+    (r === 1 || l > n && r === 2 || l < n && r === 3) && i.setZoom(n);
+    const s = new Point(t);
+    i.setCenter(transform(s.getCoordinates(), projection.data, projection.mercator));
   }
 }
 const _sfc_main = /* @__PURE__ */ defineComponent({
@@ -2153,23 +2178,24 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   setup(e, { expose: t, emit: o }) {
     const n = ref();
     provide("mapInstance", n);
-    const l = ref(null), r = ref(null), i = ref(null), c = o, s = e, d = ref(s.zoom || mapZoom.default), m = ref(!1), u = ref(!0), f = ref(!0);
-    let p;
-    ((v) => {
-      v[v.tiandituTile = new TileLayer({ source: new XYZ({ url: baseMap.tiandituTile }) })] = "tiandituTile", v[v.tiandituTileMark = new TileLayer({ source: new XYZ({ url: baseMap.tiandituTileMark }) })] = "tiandituTileMark", v[v.tiandituImgTile = new TileLayer({ source: new XYZ({ url: baseMap.tiandituImgTile }), visible: !1 })] = "tiandituImgTile", v[v.tiandituImgTileMark = new TileLayer({ source: new XYZ({ url: baseMap.tiandituImgTileMark }), visible: !1 })] = "tiandituImgTileMark", v[v.greenMark = new TileLayer({ source: new XYZ({ url: baseMap.greenTile }) })] = "greenMark";
-    })(p || (p = {}));
-    const w = () => {
-      var y, L;
+    const r = ref(null), i = ref(null), l = ref(null), s = o, c = e, d = ref(c.zoom || mapZoom.default), m = ref(!1), u = ref(!0), f = ref(!0), p = {
+      tiandituTile: new TileLayer({ source: new XYZ({ url: baseMap.tiandituTile }) }),
+      tiandituTileMark: new TileLayer({ source: new XYZ({ url: baseMap.tiandituTileMark }) }),
+      tiandituImgTile: new TileLayer({ source: new XYZ({ url: baseMap.tiandituImgTile }), visible: !1 }),
+      tiandituImgTileMark: new TileLayer({ source: new XYZ({ url: baseMap.tiandituImgTileMark }), visible: !1 }),
+      greenMark: new TileLayer({ source: new XYZ({ url: baseMap.greenTile }) })
+    }, y = () => {
+      var L, w;
       const v = {
         projection: projection.mercator,
         // 地图投影坐标系
-        zoom: s.zoom || (s.vehicleMode === "ship" ? mapZoom.default : mapZoom.truckDefault),
+        zoom: c.zoom || (c.vehicleMode === "ship" ? mapZoom.default : mapZoom.truckDefault),
         // 地图缩放级别（打开页面时默认级别）
         minZoom: mapZoom.min,
         // 地图缩放最小级别
         maxZoom: mapZoom.max,
         // 地图缩放最大级别
-        center: transformUtils.lonLatToMercator(s.center || mapDefaultCenter),
+        center: transformUtils.lonLatToMercator(c.center || mapDefaultCenter),
         // 地图中心坐标
         constrainResolution: !0,
         // 需设为true禁用平滑缩放，zoom值为整数
@@ -2189,67 +2215,67 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           p.greenMark
         ],
         view: new View(v)
-      }), h(), (y = r.value) == null || y.setScaleLine(s.vehicleMode === "ship" && "nautical"), (L = n.value) == null || L.on("moveend", b), g(v.zoom < mapZoom.shipGreenDotMax), M(s.vehicleMode === "ship" || s.viewMode === "findShip" ? BaseMapType.satellite : BaseMapType.vector), s.viewMode === "findShip" && s.mmsi && s.shipData && nextTick(() => {
-        findShip(String(s.mmsi), s.shipData);
+      }), h(), (L = i.value) == null || L.setScaleLine(c.vehicleMode === "ship" ? "nautical" : "metric"), (w = n.value) == null || w.on("moveend", b), g(v.zoom < mapZoom.shipGreenDotMax), M(c.vehicleMode === "ship" || c.viewMode === "findShip" ? BaseMapType.satellite : BaseMapType.vector), c.viewMode === "findShip" && c.mmsi && c.shipData && nextTick(() => {
+        findShip(String(c.mmsi), c.shipData);
       }), onShipsMarkerHover();
     };
     onMounted(() => {
-      w();
+      y();
     });
     const h = () => {
       n.value && (renderCustomOverlaySetInstance(n.value), renderTruckSetInstance(n.value), drawPolygonSetInstance(n.value), renderShipStyleSetInstance(n.value), renderTrackStyleSetInstance(n.value), renderDashboardSetInstance(n.value), renderMarkerSetInstance(n.value), renderShipSetInstance(n.value), renderTrackSetInstance(n.value));
     }, g = (v) => {
-      var y;
-      s.vehicleMode !== "ship" && (v = !1), (y = n.value) == null || y.getLayers().forEach((L) => {
-        L.ol_uid === p.greenMark.ol_uid && (L.setVisible(v), u.value = v);
+      var L;
+      c.vehicleMode !== "ship" && (v = !1), (L = n.value) == null || L.getLayers().forEach((w) => {
+        getUid(w) === getUid(p.greenMark) && (w.setVisible(v), u.value = v);
       });
-    }, T = ref(BaseMapType.satellite), M = (v) => {
-      var y;
-      T.value = v, (y = n.value) == null || y.getLayers().forEach((L) => {
-        (L.ol_uid === p.tiandituTile.ol_uid || L.ol_uid === p.tiandituTileMark.ol_uid || L.ol_uid === p.tiandituImgTile.ol_uid || L.ol_uid === p.tiandituImgTileMark.ol_uid) && L.setVisible(!1), (v === BaseMapType.vector && (L.ol_uid === p.tiandituTile.ol_uid || L.ol_uid === p.tiandituTileMark.ol_uid) || v === BaseMapType.satellite && (L.ol_uid === p.tiandituImgTile.ol_uid || L.ol_uid === p.tiandituImgTileMark.ol_uid)) && L.setVisible(!0);
+    }, k = ref(BaseMapType.satellite), M = (v) => {
+      var L;
+      k.value = v, (L = n.value) == null || L.getLayers().forEach((w) => {
+        (getUid(w) === getUid(p.tiandituTile) || getUid(w) === getUid(p.tiandituTileMark) || getUid(w) === getUid(p.tiandituImgTile) || getUid(w) === getUid(p.tiandituImgTileMark)) && w.setVisible(!1), (v === BaseMapType.vector && (getUid(w) === getUid(p.tiandituTile) || getUid(w) === getUid(p.tiandituTileMark)) || v === BaseMapType.satellite && (getUid(w) === getUid(p.tiandituImgTile) || getUid(w) === getUid(p.tiandituImgTileMark))) && w.setVisible(!0);
       });
     }, b = () => {
-      const v = n.value.getView(), y = v.getZoom();
-      y && V(y);
-      const L = v.calculateExtent(n.value.getSize());
-      L && y && P(L, y);
-    }, V = (v) => {
-      var k, S, E, C, F;
+      const v = n.value.getView(), L = v.getZoom();
+      L && F(L);
+      const w = v.calculateExtent(n.value.getSize());
+      w && L && V(w, L);
+    }, F = (v) => {
+      var S, T, C, E, x;
       d.value = v, g(v < mapZoom.shipGreenDotMax);
-      const y = (k = n.value) == null ? void 0 : k.getLayers(), L = s.vehicleMode === "ship" ? y == null ? void 0 : y.getArray().find(($) => $.ol_uid === p.greenMark.ol_uid) : void 0;
-      showTrackLayer.value ? (f.value = !1, L == null || L.setVisible(!1), (S = shipsLayer.value) == null || S.setVisible(!1), (E = largeAmountShipsLayer.value) == null || E.setVisible(!1)) : !m.value && u.value && v <= mapZoom.shipGreenDotMax ? (f.value = !0, L == null || L.setVisible(!0), (C = shipsLayer.value) == null || C.setVisible(!1), (F = largeAmountShipsLayer.value) == null || F.setVisible(!1)) : (f.value = !1, L == null || L.setVisible(!1)), c("zoomChanged", v);
-    }, P = (v, y) => {
-      const L = transform([v[0], v[1]], projection.mercator, projection.data), k = transform([v[2], v[3]], projection.mercator, projection.data);
-      c("extentChanged", { extent: [L, k], zoom: y });
+      const L = (S = n.value) == null ? void 0 : S.getLayers(), w = c.vehicleMode === "ship" ? L == null ? void 0 : L.getArray().find((N) => getUid(N) === getUid(p.greenMark)) : void 0;
+      showTrackLayer.value ? (f.value = !1, w == null || w.setVisible(!1), (T = shipsLayer.value) == null || T.setVisible(!1), (C = largeAmountShipsLayer.value) == null || C.setVisible(!1)) : !m.value && u.value && v <= mapZoom.shipGreenDotMax ? (f.value = !0, w == null || w.setVisible(!0), (E = shipsLayer.value) == null || E.setVisible(!1), (x = largeAmountShipsLayer.value) == null || x.setVisible(!1)) : (f.value = !1, w == null || w.setVisible(!1)), s("zoomChanged", v);
+    }, V = (v, L) => {
+      const w = transform([v[0], v[1]], projection.mercator, projection.data), S = transform([v[2], v[3]], projection.mercator, projection.data);
+      s("extentChanged", { extent: [w, S], zoom: L });
     };
     return t({
       mapInstance: n,
-      initMap: w,
-      pointRender: (v, y) => new PointMarkerClass(v, y),
+      initMap: y,
+      pointRender: (v, L) => new PointMarkerClass(v, L),
       renderTrucksMarker,
       renderShip: renderShips,
-      renderTrack: (v, y, L) => {
-        var k, S;
-        currentTrackId.value = v, showTrackLayer.value = !0, m.value = !0, hiddenAllShips(), (S = (k = largeAmountShipsLayer.value) == null ? void 0 : k.getSource()) == null || S.clear(), renderTrack(v, s.vehicleMode === "ship" ? y.reverse() : y, L, LENGTH_UNIT.NM);
+      renderTrack: (v, L, w) => {
+        var S, T;
+        currentTrackId.value = v, showTrackLayer.value = !0, m.value = !0, hiddenAllShips(), (T = (S = largeAmountShipsLayer.value) == null ? void 0 : S.getSource()) == null || T.clear(), renderTrack(v, c.vehicleMode === "ship" ? L.reverse() : L, w, LENGTH_UNIT.NM);
       },
       findTruck,
       removeTruckIcon,
       clearAllTruck,
       closeTrack: () => {
-        var v, y;
-        showTrackLayer.value = !1, (v = shipTrackVectorLayer.value) == null || v.setVisible(!1), (y = selectShipsLayer.value) == null || y.setVisible(!0), m.value = !1, g(d.value < mapZoom.shipGreenDotMax), allTracks.value = [], stopAnimation();
+        var v, L;
+        showTrackLayer.value = !1, (v = shipTrackVectorLayer.value) == null || v.setVisible(!1), (L = selectShipsLayer.value) == null || L.setVisible(!0), m.value = !1, g(d.value < mapZoom.shipGreenDotMax), allTracks.value = [], stopAnimation();
       },
       closeTruckTrack: () => {
-        var v, y;
-        showTrackLayer.value = !1, (v = shipTrackVectorLayer.value) == null || v.setVisible(!1), (y = selectShipsLayer.value) == null || y.setVisible(!0), stopAnimation();
+        var v, L;
+        showTrackLayer.value = !1, (v = shipTrackVectorLayer.value) == null || v.setVisible(!1), (L = selectShipsLayer.value) == null || L.setVisible(!0), stopAnimation();
       },
       resetTrackView,
       playTrack,
       clearSelectFeature,
       findShip,
-      focusShip: (v, y, L = !0) => {
-        var k, S;
-        hiddenOrther.value = L, (k = shipsLayer.value) == null || k.setVisible(!L), (S = largeAmountShipsLayer.value) == null || S.setVisible(!1), findShip(v, y);
+      focusShip: (v, L, w = !0) => {
+        var S, T;
+        hiddenOrther.value = w, (S = shipsLayer.value) == null || S.setVisible(!w), (T = largeAmountShipsLayer.value) == null || T.setVisible(!1), findShip(v, L);
       },
       showTracks,
       removeAllTrackLayer,
@@ -2257,8 +2283,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       rerenderShip,
       switchGreenDot: () => g(!1),
       zoomTruckIcon,
-      renderTruckTrack: (v, y, L) => {
-        showTrackLayer.value = !0, renderTrack(v, y, L, LENGTH_UNIT.KM, "truck");
+      renderTruckTrack: (v, L, w) => {
+        showTrackLayer.value = !0, renderTrack(v, L, w, LENGTH_UNIT.KM, "truck");
       },
       removerLayer: removeShipTrackLineFeatureByIndex,
       renderMarker,
@@ -2266,18 +2292,18 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         m.value = !0, setMarkerPosition(v);
       },
       getZoomAndCenter: () => {
-        var S;
-        const v = (S = n.value) == null ? void 0 : S.getView();
+        var T;
+        const v = (T = n.value) == null ? void 0 : T.getView();
         if (!v) return null;
-        const y = Math.round(Number(v.getZoom())), { lon: L, lat: k } = transformUtils.mercatorToLonLat(v.getCenter());
-        return { zoom: y, center: [L, k] };
+        const L = Math.round(Number(v.getZoom())), { lon: w, lat: S } = transformUtils.mercatorToLonLat(v.getCenter());
+        return { zoom: L, center: [w, S] };
       },
       setCenter: (v) => {
-        var k;
-        const y = (k = n.value) == null ? void 0 : k.getView();
-        if (!y) return null;
-        const L = new Point(v);
-        y.setCenter(transform(L.getCoordinates(), projection.data, projection.mercator));
+        var S;
+        const L = (S = n.value) == null ? void 0 : S.getView();
+        if (!L) return null;
+        const w = new Point(v);
+        L.setCenter(transform(w.getCoordinates(), projection.data, projection.mercator));
       },
       drawPolygonTool,
       setMapInstance: h,
@@ -2289,12 +2315,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         transform: transformUtils,
         format: formatUtils
       }
-    }), (v, y) => (openBlock(), createElementBlock("div", {
+    }), (v, L) => (openBlock(), createElementBlock("div", {
       class: "map-page map-container",
       ref_key: "pageRef",
-      ref: l
+      ref: r
     }, [
-      y[0] || (y[0] = createElementVNode("div", {
+      L[0] || (L[0] = createElementVNode("div", {
         id: "map",
         class: "map"
       }, null, -1)),
@@ -2303,7 +2329,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         "view-mode": v.viewMode,
         "disable-green-dot": m.value,
         "show-track-layer": unref(showTrackLayer),
-        "map-tile-mode": T.value,
+        "map-tile-mode": k.value,
         onSwitchGreenDot: g,
         onSwitchMapTile: M
       }, {
@@ -2315,20 +2341,20 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       v.viewMode !== "WxMiniprogram" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
         createVNode(ScaleLine, {
           ref_key: "scaleLineControl",
-          ref: r
+          ref: i
         }, null, 512),
         createVNode(ZoomControl, {
           ref_key: "zoomControl",
-          ref: i
+          ref: l
         }, null, 512)
       ], 64)) : createCommentVNode("", !0),
       createVNode(Copyright, {
         type: v.logoType,
-        "map-tile": T.value
+        "map-tile": k.value
       }, null, 8, ["type", "map-tile"])
     ], 512));
   }
-}), Map = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-79369628"]]), ZhMap = withInstall(Map);
+}), Map = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-8300c924"]]), ZhMap = withInstall(Map);
 export {
   BaseMapType as B,
   CDN_URL as C,