zhihao-ui 1.2.45 → 1.2.47

package/dist/es/{Map-B_2SojSM.js → Map-DkNn4z7I.js}

@@ -1,14 +1,14 @@
-var U = Object.defineProperty;
-var z = (e, t, n) => t in e ? U(e, t, { enumerable: !0, configurable: !0, writable: !0, value: n }) : e[t] = n;
-var b = (e, t, n) => z(e, typeof t != "symbol" ? t + "" : t, n);
+var j = Object.defineProperty;
+var H = (e, t, n) => t in e ? j(e, t, { enumerable: !0, configurable: !0, writable: !0, value: n }) : e[t] = n;
+var b = (e, t, n) => H(e, typeof t != "symbol" ? t + "" : t, n);
 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 getUid, x as fromLonLat, P as Point, y as transform, z as Feature, T as Text, I as Icon, A as Translate, B as toLonLat, i as cloneDeep, G as GeoJSON, W as WebGLPointsLayer, H as Circle, J as transformExtent, h as hooks, L as LineString, K as Polyline, M as getVectorContext, N as buffer, Q as ScaleLine$1, R as MultiPoint, U as getCenter, X as TileLayer, Y as XYZ, Z as Map$1, _ as View } from "./vendor-DaYdW1_n.js";
-import { _ as _export_sfc } from "./Button-CNEQmoqP.js";
-import { g as getForegroundColor } from "./DatePicker-Dh8sksac.js";
-import { w as withInstall } from "./utils-BSQSj8Ii.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 getUid, x as fromLonLat, P as Point, y as transform, z as Feature, T as Text, I as Icon, A as Translate, B as toLonLat, G as transformExtent, h as hooks, L as LineString, H as Polyline, J as getVectorContext, i as cloneDeep, K as GeoJSON, W as WebGLPointsLayer, M as Circle, N as buffer, Q as ScaleLine$1, R as MultiPoint, U as getCenter, X as TileLayer, Y as XYZ, Z as Map$1, _ as View } from "./vendor-BmuLaCuO.js";
+import { _ as _export_sfc } from "./Button-USqLJ-9S.js";
+import { g as getForegroundColor } from "./DatePicker-C6kyMZ8-.js";
+import { w as withInstall } from "./utils-DvDZ3DAF.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, n, o, i, r, l, c, s, m, d, u, f, p, y, h, g, k, T, I, F, V, P, v, L) {
+  constructor(t, n, o, i, r, l, c, s, d, u, m, f, p, y, h, v, M, S, V, C, P, x, g, w) {
     b(this, "id");
     // mmsi
     b(this, "mmsi");
@@ -50,7 +50,7 @@ class ShipMapData {
     b(this, "existWaterGauge");
     b(this, "selected");
     b(this, "blinkColors");
-    this.id = t, this.mmsi = n, this.fill = o, this.shipType = i, this.name = r, this.length = l, this.breadth = c, this.lon = s, this.lat = m, this.createdAt = d, this.speed = u, this.from = f, this.sailStatus = p, this.hdg = y, this.cog = h, this.posType = g, this.type = k, this.angle = T, this.leftIconColor = I, this.existDevice = F, this.existMobile = V, this.existWaterGauge = P, this.selected = v, this.blinkColors = L;
+    this.id = t, this.mmsi = n, this.fill = o, this.shipType = i, this.name = r, this.length = l, this.breadth = c, this.lon = s, this.lat = d, this.createdAt = u, this.speed = m, this.from = f, this.sailStatus = p, this.hdg = y, this.cog = h, this.posType = v, this.type = M, this.angle = S, this.leftIconColor = V, this.existDevice = C, this.existMobile = P, this.existWaterGauge = x, this.selected = g, this.blinkColors = w;
   }
 }
 const formatLength = function(e, t) {
@@ -130,10 +130,10 @@ const formatLength = function(e, t) {
   }),
   emits: /* @__PURE__ */ mergeModels(["close"], ["update:visible"]),
   setup(e, { expose: t, emit: n }) {
-    const o = inject("mapInstance"), i = n, r = useModel(e, "visible"), l = ref("3"), c = ref([]), s = ref(!1), m = new VectorSource();
-    let d, u, f, p, y;
+    const o = inject("mapInstance"), i = n, r = useModel(e, "visible"), l = ref("3"), c = ref([]), s = ref(!1), d = new VectorSource();
+    let u, m, f, p, y;
     const h = new VectorLayer({
-      source: m,
+      source: d,
       style: {
         "fill-color": "rgba(255, 255, 255, 0.2)",
         "stroke-color": "#ffcc33",
@@ -141,20 +141,20 @@ const formatLength = function(e, t) {
         "circle-radius": 7,
         "circle-fill-color": "#ffcc33"
       }
-    }), g = function(S) {
-      if (S.dragging)
+    }), v = function(k) {
+      if (k.dragging)
         return;
-      let M = "点击选择起点";
-      d && (M = "单击继续，双击结束"), u && (u.innerHTML = M, f.setPosition(S.coordinate), u.classList.remove("hidden"));
-    }, k = () => {
-      var S, M;
-      o != null && o.value && ((S = o == null ? void 0 : o.value) == null || S.on("pointermove", g), (M = o == null ? void 0 : o.value) == null || M.getViewport().addEventListener("mouseout", function() {
-        var C;
-        (C = u == null ? void 0 : u.classList) == null || C.add("hidden");
+      let T = "点击选择起点";
+      u && (T = "单击继续，双击结束"), m && (m.innerHTML = T, f.setPosition(k.coordinate), m.classList.remove("hidden"));
+    }, M = () => {
+      var k, T;
+      o != null && o.value && ((k = o == null ? void 0 : o.value) == null || k.on("pointermove", v), (T = o == null ? void 0 : o.value) == null || T.getViewport().addEventListener("mouseout", function() {
+        var E;
+        (E = m == null ? void 0 : m.classList) == null || E.add("hidden");
       }), s.value = !0);
     };
-    let T;
-    const I = new Style({
+    let S;
+    const V = new Style({
       fill: new Fill({
         color: "rgba(255, 255, 255, 0.2)"
       }),
@@ -173,99 +173,99 @@ const formatLength = function(e, t) {
         })
       })
     });
-    function F() {
-      var S, M;
+    function C() {
+      var k, T;
       if (o != null && o.value) {
-        if (c.value = [], document.querySelectorAll(".ol-tooltip.ol-tooltip-static").forEach((C) => {
-          var E;
-          (E = C == null ? void 0 : C.parentNode) == null || E.removeChild(C);
-        }), m.clear(), T) {
-          const C = o.value.getInteractions().getArray().find((E) => getUid(E) === getUid(T));
-          C && ((S = o.value) == null || S.removeInteraction(C));
+        if (c.value = [], document.querySelectorAll(".ol-tooltip.ol-tooltip-static").forEach((E) => {
+          var I;
+          (I = E == null ? void 0 : E.parentNode) == null || I.removeChild(E);
+        }), d.clear(), S) {
+          const E = o.value.getInteractions().getArray().find((I) => getUid(I) === getUid(S));
+          E && ((k = o.value) == null || k.removeInteraction(E));
         }
-        (M = o.value) == null || M.removeLayer(h), u != null && u.parentNode && u.parentNode.removeChild(u), p != null && p.parentNode && p.parentNode.removeChild(p);
+        (T = o.value) == null || T.removeLayer(h), m != null && m.parentNode && m.parentNode.removeChild(m), p != null && p.parentNode && p.parentNode.removeChild(p);
       }
     }
-    function V() {
-      var M, C;
-      F(), (M = o == null ? void 0 : o.value) == null || M.addLayer(h), T = new Draw({
-        source: m,
+    function P() {
+      var T, E;
+      C(), (T = o == null ? void 0 : o.value) == null || T.addLayer(h), S = new Draw({
+        source: d,
         type: "LineString",
         style: function() {
-          return I;
+          return V;
         },
         // 添加条件函数，判断是否应该触发绘制
-        condition: function(E) {
-          return E.originalEvent.target.tagName !== "DIV";
+        condition: function(I) {
+          return I.originalEvent.target.tagName !== "DIV";
         }
-      }), (C = o == null ? void 0 : o.value) == null || C.addInteraction(T), v(), P();
-      let S;
-      T.on("drawstart", function(E) {
-        var N;
-        d = E.feature;
-        let x;
-        S = (N = d.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);
+      }), (E = o == null ? void 0 : o.value) == null || E.addInteraction(S), g(), x();
+      let k;
+      S.on("drawstart", function(I) {
+        var $;
+        u = I.feature;
+        let F;
+        k = ($ = u.getGeometry()) == null ? void 0 : $.on("change", function(R) {
+          const B = R.target;
+          let N = formatUtils.formatLength(B, Number(l.value));
+          F = B.getLastCoordinate(), p && N && (p.innerHTML = N), y.setPosition(F);
         });
-      }), T.on("drawend", function() {
-        var E, x;
-        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="${((E = c.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]), d = null, p = null, v(), S && unByKey(S);
+      }), S.on("drawend", function() {
+        var I, 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="${((I = c.value) == null ? void 0 : I.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 B;
+          $.preventDefault(), $.stopPropagation();
+          const R = (B = $.target) == null ? void 0 : B.getAttribute("data-index");
+          R && w(Number(R));
+        }), y.setOffset([0, -7]), u = null, p = null, g(), k && unByKey(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,
+    function x() {
+      var k;
+      m != null && m.parentNode && m.parentNode.removeChild(m), m = document.createElement("div"), m.className = "ol-tooltip hidden", f = new Overlay({
+        element: m,
         offset: [15, 0],
         positioning: "center-left"
-      }), (S = o == null ? void 0 : o.value) == null || S.addOverlay(f);
+      }), (k = o == null ? void 0 : o.value) == null || k.addOverlay(f);
     }
-    function v() {
-      var S;
+    function g() {
+      var k;
       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
-      }), (S = o == null ? void 0 : o.value) == null || S.addOverlay(y);
+      }), (k = o == null ? void 0 : o.value) == null || k.addOverlay(y);
     }
-    const L = (S) => {
-      var E, x;
-      c.value[S] && c.value.splice(S, 1);
-      const M = document.querySelectorAll(".ol-tooltip.ol-tooltip-static.ol-tooltip-measure");
-      M[S] && ((x = (E = M[S]) == null ? void 0 : E.parentNode) == null || x.removeChild(M[S]));
-      const C = m.getFeatures();
-      C[S] && m.removeFeature(C[S]);
-    }, w = () => {
+    const w = (k) => {
+      var I, F;
+      c.value[k] && c.value.splice(k, 1);
+      const T = document.querySelectorAll(".ol-tooltip.ol-tooltip-static.ol-tooltip-measure");
+      T[k] && ((F = (I = T[k]) == null ? void 0 : I.parentNode) == null || F.removeChild(T[k]));
+      const E = d.getFeatures();
+      E[k] && d.removeFeature(E[k]);
+    }, L = () => {
       i("close");
     };
     return watch(() => r, () => {
-      r.value && !s.value && (k(), V());
+      r.value && !s.value && (M(), P());
     }, { deep: !0, immediate: !0 }), t({
-      addInteraction: V,
-      removeInteraction: F
-    }), (S, M) => r.value && S.viewMode !== "WxMiniprogram" ? (openBlock(), createElementBlock("div", _hoisted_1$4, [
+      addInteraction: P,
+      removeInteraction: C
+    }), (k, T) => r.value && k.viewMode !== "WxMiniprogram" ? (openBlock(), createElementBlock("div", _hoisted_1$4, [
       createElementVNode("div", { class: "header" }, [
-        M[1] || (M[1] = createElementVNode("div", { class: "title" }, "测量", -1)),
+        T[1] || (T[1] = createElementVNode("div", { class: "title" }, "测量", -1)),
         createElementVNode("i", {
-          onClick: w,
+          onClick: L,
           class: "map-iconfont icon-close"
         })
       ]),
       createElementVNode("div", _hoisted_2$2, [
-        M[2] || (M[2] = createElementVNode("div", { class: "tips" }, "在地图上点击多个点测量距离，距离单位", -1)),
+        T[2] || (T[2] = createElementVNode("div", { class: "tips" }, "在地图上点击多个点测量距离，距离单位", -1)),
         createVNode(unref(ElSelect), {
           class: "select-length-unit",
           modelValue: l.value,
-          "onUpdate:modelValue": M[0] || (M[0] = (C) => l.value = C)
+          "onUpdate:modelValue": T[0] || (T[0] = (E) => l.value = E)
         }, {
           default: withCtx(() => [
             createVNode(unref(ElOption), {
@@ -285,19 +285,19 @@ const formatLength = function(e, t) {
         }, 8, ["modelValue"])
       ]),
       createElementVNode("div", _hoisted_3$1, [
-        (openBlock(!0), createElementBlock(Fragment, null, renderList(c.value, (C, E) => (openBlock(), createElementBlock("div", {
+        (openBlock(!0), createElementBlock(Fragment, null, renderList(c.value, (E, I) => (openBlock(), createElementBlock("div", {
           class: "measure-history-item",
-          key: E
+          key: I
         }, [
           createElementVNode("div", _hoisted_4, [
-            M[3] || (M[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)
+            T[3] || (T[3] = createElementVNode("i", { class: "map-iconfont icon-line" }, null, -1)),
+            createElementVNode("span", _hoisted_5, "线段" + toDisplayString(I + 1), 1),
+            createElementVNode("span", _hoisted_6, toDisplayString(E), 1)
           ]),
           createElementVNode("div", {
             class: "delete-button",
-            onClick: (x) => L(E)
-          }, M[4] || (M[4] = [
+            onClick: (F) => w(I)
+          }, T[4] || (T[4] = [
             createElementVNode("i", { class: "map-iconfont icon-delete" }, null, -1)
           ]), 8, _hoisted_7)
         ]))), 128))
@@ -334,31 +334,31 @@ const formatLength = function(e, t) {
     // 设置文本背景的内边距
   })
 }), renderMarker = (e, t = !0, n = !0) => {
-  var d;
+  var u;
   if (!mapInstance$8.value || !e || e.split(",").length !== 2) return;
   const [o, i] = e.split(",").map(Number);
   marker.value = new Feature({
     geometry: new Point(fromLonLat([o, i]))
   });
   const r = n ? `${o}, ${i}` : "";
-  (d = marker.value) == null || d.setStyle(createIconStyle(r));
+  (u = marker.value) == null || u.setStyle(createIconStyle(r));
   const l = new VectorSource({
     features: [marker.value]
   }), c = new VectorLayer({
     source: l
   }), s = mapInstance$8.value.getView();
   if (mapInstance$8.value.addLayer(c), t) {
-    const u = new Translate({
+    const m = new Translate({
       layers: [c]
     });
-    u.on("translating", function(f) {
+    m.on("translating", function(f) {
       var h;
       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);
+    }), mapInstance$8.value.addInteraction(m);
   }
-  const m = new Point([o, i]);
-  s.setCenter(transform(m.getCoordinates(), projection.data, projection.mercator)), s.setZoom(mapZoom.findShip);
+  const d = new Point([o, i]);
+  s.setCenter(transform(d.getCoordinates(), projection.data, projection.mercator)), s.setZoom(mapZoom.findShip);
 }, setMarkerPosition = (e) => {
   var i, r;
   if (!mapInstance$8.value) return;
@@ -410,452 +410,65 @@ const formatLength = function(e, t) {
 }, LOG_DATE_FORMAT = "YYYY-MM-DD HH:mm:ss", DEFAULT_VALUE = "--";
 ref();
 const shipsLayer = ref(), largeAmountShipsLayer = ref(), selectShipsLayer = ref(), allShips = ref([]), selectSingleShipData = ref();
-ref();
-const trucksLayer = ref(), shipTrackLineFeatures = ref([]), trackLineVectorSource = ref(), shipTrackVectorLayer = ref();
-ref();
-ref();
-const shipLabels = ref([]), trackLabels = ref([]), showTrackLayer = ref(!1), allTracks = ref([]), currentTrackId = ref(""), showTrackAnimatMarker = ref(!1), hiddenOrther = ref(!1), showMeasure = ref(!1), getShowMeasure = () => showMeasure.value;
-function getIconFont(unicode = "") {
-  return unicode.indexOf("&amp;") !== -1 && (unicode = unicode.replace("&amp;", "&")), unicode.indexOf("&amp") !== -1 && (unicode = unicode.replace("&amp", "&")), eval('("' + unicode.replace("&#x", "\\u").replace(";", "") + '")');
-}
-const multiplyPixelRatio = (e) => {
-  const t = window.devicePixelRatio || 1;
-  return e.map((n) => n.map((o) => o * t));
-}, adjustBounds = (e, t) => t.length === 2 ? [e[0] - t[0], e[1] - t[1], e[2] + t[0], e[3] + t[1]] : [e[0] + t[0], e[1] + t[1], e[2] + t[2], e[3] + t[3]], isOverlapping = (e, t) => e[0] <= t[2] && e[2] >= t[0] && e[1] <= t[3] && e[3] >= t[1], getIconStyle = (e) => new Style({
-  text: new Text({
-    font: "Normal 14px map-iconfont",
-    text: getIconFont(e),
-    fill: new Fill({ color: "#fff" }),
-    offsetY: -14
-  }),
-  zIndex: 100
-}), getRotation = (e, t, n) => {
-  function o(u) {
-    return 180 * (u % (2 * Math.PI)) / Math.PI;
-  }
-  function i(u) {
-    return u % 360 * Math.PI / 180;
-  }
-  function r(u) {
-    if (!u) throw new Error("Coordinate is required");
-    if (!Array.isArray(u)) {
-      if (u.type === "Feature" && u.geometry !== null && u.geometry.type === "Point")
-        return u.geometry.coordinates;
-      if (u.type === "Point") return u.coordinates;
-    }
-    if (Array.isArray(u) && u.length >= 2 && !Array.isArray(u[0]) && !Array.isArray(u[1]))
-      return u;
-    throw new Error(
-      "Coordinate must be GeoJSON Point or an Array of numbers"
-    );
-  }
-  function l(u, f, p = {}) {
-    if (p.final)
-      return function(P, v) {
-        return (l(v, P) + 180) % 360;
-      }(u, f);
-    const y = r(u), h = r(f), g = i(y[0]), k = i(h[0]), T = i(y[1]), I = i(h[1]), F = Math.sin(k - g) * Math.cos(I), V = Math.cos(T) * Math.sin(I) - Math.sin(T) * Math.cos(I) * Math.cos(k - g);
-    return o(Math.atan2(F, V));
-  }
-  function c(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"), m({ type: "Point", coordinates: u }, f, p);
-  }
-  function m(u, f = {}, p = {}) {
-    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 d = l(s(e), s(t), n);
-  return d < 0 ? 360 + d : d;
-}, 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: (n, o) => {
-    n = n;
-    const i = o.context, r = o.feature.get("data");
-    if (!r) return;
-    o.feature.get("index") === 0 && (shipLabels.value = []);
-    try {
-      const c = drawShipBody(i, r, n, t);
-      c && (drawHeading(i, r, c, t), r.selected = e, e && setTimeout(() => {
-        drawSelectBounds(i, c);
-      }, 1)), drawShipLabel(i, r, n);
-    } catch {
-      return !1;
-    }
-  }
-}), drawShipBody = (e, t, n, o) => {
-  if (!mapInstance$7.value) return;
-  const i = Math.round(Number(mapInstance$7.value.getView().getZoom()));
-  if (!i) return;
-  let r = [];
-  const [l, c] = drawShipModelByZoom[i] || [0, 0], [s, m] = n;
-  if (i <= mapZoom.shipModelMax && i > mapZoom.shipModelMin && t.length >= l && t.breadth >= c)
-    r = rotateShapeModel(drawCurrentShipShapeModel(t, i), t.angle).map((u) => {
-      const [f, p] = u;
-      return [s + f, m + p];
-    });
-  else {
-    const d = rotateShapeModel(triangleModel, t.angle);
-    n.length === 2 && (r = d.map((u) => {
-      const [f, p] = u;
-      return [s + f, m + p];
-    }));
-  }
-  if (!(r.length > 2)) return !1;
-  if (t != null && t.length) {
-    const d = r.length === 3 ? 30 : t.length * 0.4;
-    e.beginPath(), e.arc(
-      n[0],
-      n[1],
-      d,
-      0,
-      2 * Math.PI
-    ), e.fillStyle = "rgba(255, 255, 255, 0.001)", e.fill();
-  }
-  e.save(), e.beginPath(), e.moveTo(r[0][0], r[0][1]);
-  for (let d = 1; d < r.length; d++)
-    e.lineTo(r[d][0], r[d][1]);
-  return e.closePath(), e.strokeStyle = o ? "#ff0000" : "#000", e.lineWidth = o ? 2 : 1, e.stroke(), e.fillStyle = t.fill, e.fill(), e.restore(), r;
-}, drawHeading = (e, t, n, o) => {
-  const [i, r] = n[0], l = getShipDirectPath(t);
-  if (l) {
-    const c = l.map(function(s) {
-      const [m, d] = s;
-      return [m + i, d + r];
-    });
-    if (e.save(), e.beginPath(), t.angle > 0) {
-      e.translate(i, r);
-      const s = t.angle * Math.PI / 180;
-      e.rotate(s), e.translate(-i, -r);
-    }
-    e.moveTo(i, r);
-    for (let s = 1; s < c.length; s++) {
-      const [m, d] = c[s];
-      e.lineTo(m, d);
-    }
-    e.strokeStyle = o ? "#ff0000" : "#000", e.lineWidth = o ? 2 : 1, e.stroke(), e.restore();
-  }
-}, drawSelectBounds = (e, t) => {
-  let [n, o, i, r] = getPixelFromCoordinate(t);
-  const l = window.devicePixelRatio || 1, c = 4;
-  n -= c, o -= c, i += c, r += c, e.save(), e.strokeStyle = "#ff0000", e.lineWidth = 4 * l;
-  const s = 8 * l;
-  e.beginPath(), e.moveTo(n + s, r), e.lineTo(n, r), e.lineTo(n, r - s), e.moveTo(n, o + s), e.lineTo(n, o), e.lineTo(n + s, o), e.moveTo(i - s, o), e.lineTo(i, o), e.lineTo(i, o + s), e.moveTo(i, r - s), e.lineTo(i, r), e.lineTo(i - s, r), e.stroke(), e.restore();
-}, drawShipLabel = (e, t, n) => {
-  if (!t.selected && shipLabels.value.find((u) => u.name === t.name)) return;
-  const [o, i] = n, r = o, l = i, c = t.name;
-  let s;
-  t.leftIconColor && (s = { color: t.leftIconColor, icon: "&#xe599;" });
-  const m = getShipCustomIcon(t), d = {
-    id: t.id,
-    center: [r, l],
-    text: c,
-    fill: t.fill,
-    color: "#fff",
-    textColor: "#000",
-    bgColor: "#fff",
-    leftIcon: s,
-    rightIcons: m,
-    selected: t.selected,
-    blinkColors: t.blinkColors,
-    type: "ShipName"
-  };
-  drawLabel(e, d, shipLabels.value);
-}, drawCurrentShipShapeModel = (e, t) => {
-  let n = 0;
-  t <= 14 ? n = 0.058 : t === 15 ? n = 0.12 : t === 16 ? n = 0.22 : t === 17 ? n = 0.435 : t === 18 && (n = 0.857);
-  const o = e.length / 4 * n, i = e.breadth * n;
-  let r = cloneDeep(shipShapeModel);
-  return r = r.map(([l, c]) => [l * i, c * o]), r;
-}, getShipDirectPath = (e) => {
-  const { speed: t, hdg: n, cog: o } = e;
-  let i = "", r = null;
-  if (t && t > 1 && (n !== null && n != 511 && o !== null ? o - n >= 3 ? i = "left" : o - n <= -3 ? i = "right" : i = "front" : i = "front", i && t))
-    for (let l = 0; l < speedCondition.length; l++) {
-      const c = speedCondition[l];
-      if (t >= c[0] && t < c[1]) {
-        r = shipDirectPath[i][l];
-        break;
-      }
-    }
-  return r;
-}, 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), selectedShips = ref([]);
-let selectShipsVectorSource;
-const renderShips = (e) => {
-  var n, o, i, r;
-  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, ...selectedShips.value], !hiddenOrther.value))
-    return t >= mapZoom.shipGreenDotMax && t < mapZoom.shipModelMin ? ((n = shipsLayer.value) == null || n.setVisible(!1), (o = largeAmountShipsLayer.value) == null || o.setVisible(!0), renderLargeAmountShips(allShips.value)) : ((i = largeAmountShipsLayer.value) == null || i.setVisible(!1), (r = shipsLayer.value) == null || r.setVisible(!0), renderShipsMarker(allShips.value));
-}, renderLargeAmountShips = (e) => {
-  if (!mapInstance$6.value) return;
-  const t = e.map((n) => ({
-    type: "Feature",
-    geometry: {
-      type: "Point",
-      coordinates: [n.lon, n.lat]
-    },
-    properties: n
-  }));
-  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 n;
-  if (!mapInstance$6.value) return;
-  deleteAllShipMarkers();
-  let t = convertShipMapData(e);
-  if (t = customFilterShips(t), !!(t != null && t.length))
-    return t.forEach((o, i) => {
-      const r = [o.lon, o.lat], l = new Feature({
-        geometry: new Point(fromLonLat(r))
-      }), c = 1;
-      l.set("clickGeometry", new Circle(fromLonLat(r), c)), l.set("data", o), l.set("index", i), l.setStyle(
-        setShipStyle(!1)
-      ), shipsMarkerList.push({
-        ship: o,
-        lonlat: r,
-        feature: l
-      });
-    }), shipsVectorSource = new VectorSource({
-      features: shipsMarkerList.map((o) => o.feature)
-    }), shipsLayer.value = new VectorLayer({
-      source: shipsVectorSource,
-      zIndex: 100
-    }), (n = mapInstance$6.value) == null || n.addLayer(shipsLayer.value), shipsLayer.value;
-}, onShipsMarkerHover = () => {
-  var o;
-  let e = null, t = 0;
-  const n = 100;
-  (o = mapInstance$6.value) == null || o.on("pointermove", function(i) {
-    var s, m, d, u;
-    const r = Date.now();
-    if (r - t < n)
-      return;
-    t = r;
-    const l = (s = mapInstance$6.value) == null ? void 0 : s.forEachFeatureAtPixel(i.pixel, (f) => f), c = (m = mapInstance$6.value) == null ? void 0 : m.getTargetElement();
-    if (c && (c.style.cursor = l ? "pointer" : ""), e !== l) {
-      if (e) {
-        const f = e.get("data");
-        if (!(f != null && f.mmsi)) return;
-        e.setStyle(
-          setShipStyle(((d = selectedShipData.value) == null ? void 0 : d.id) === f.id, !1)
-        );
-      }
-      if (l) {
-        const f = l.get("data");
-        if (!(f != null && f.mmsi)) return;
-        e = l, l.setStyle(
-          setShipStyle(((u = selectedShipData.value) == null ? void 0 : u.id) === f.id, !0)
-        );
-      } else
-        e = null;
-    }
-  });
-}, customFilterShips = (e) => {
-  let t = cloneDeep(e);
-  return t = t.filter((n) => {
-    var i;
-    const o = getFilterItem(n).every(({ btnShow: r, value: l }) => r ? !!l : !0);
-    return (switchBtnShow.value.camera || switchBtnShow.value.mobile || switchBtnShow.value.waterGauge) && ((i = selectedShipData.value) == null ? void 0 : i.id) === n.id && clearSelectFeature(), o;
-  }), 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$6.value) return;
-  const t = cloneDeep(selectSingleShipData.value);
-  selectSingleShipData.value = convertShipMapData(e);
-  const n = [selectSingleShipData.value.lon, selectSingleShipData.value.lat], o = new Feature({
-    geometry: new Point(fromLonLat(n))
-  });
-  o.set("data", selectSingleShipData.value), o.setStyle(
-    setShipStyle(!0)
-  ), shipsMarkerList.push({
-    ship: selectSingleShipData.value,
-    lonlat: n,
-    feature: o
-  }), selectShipsVectorSource == null || selectShipsVectorSource.clear(), selectShipsVectorSource = new VectorSource({
-    features: [o]
-  }), selectShipsLayer.value = new VectorLayer({
-    source: selectShipsVectorSource
-  }), shipsVectorSource && setVisibleFeatureById(shipsVectorSource, selectSingleShipData.value.id, !0);
-  const i = (r = shipsLayer.value) == null ? void 0 : r.getSource();
-  return i && (t && setVisibleFeatureById(i, t.id, !0), setVisibleFeatureById(i, selectSingleShipData.value.id, !1)), mapInstance$6.value.addLayer(selectShipsLayer.value), selectShipsLayer.value.setVisible(!0), selectShipsLayer.value;
-}, setVisibleFeatureById = (e, t, n) => {
-  e && e.forEachFeature((o) => {
-    const i = o.get("data");
-    i && i.id === t && o.setStyle(n ? setShipStyle(!1, i.id) : setBlankStyle());
-  });
-}, findShip = (e, t, n = !0) => {
-  var i, r, l, c, s;
-  if (!e || !mapInstance$6.value) return;
-  const o = (l = (r = (i = shipsLayer.value) == null ? void 0 : i.getSource()) == null ? void 0 : r.getFeatures()) == null ? void 0 : l.find((m) => {
-    var d;
-    return ((d = m.get("data")) == null ? void 0 : d.id) === e;
-  });
-  if (o)
-    selectedShipData.value = o.get("data");
-  else if (t && t.lon && t.lat)
-    selectedShipData.value = t;
-  else {
-    console.error("找不到船舶");
-    return;
+ref();
+const trucksLayer = ref(), shipTrackLineFeatures = ref([]), trackLineVectorSource = ref(), shipTrackVectorLayer = ref();
+ref();
+ref();
+const shipLabels = ref([]), trackLabels = ref([]), showTrackLayer = ref(!1), allTracks = ref([]), currentTrackId = ref(""), showTrackAnimatMarker = ref(!1), hiddenOrther = ref(!1), showMeasure = ref(!1), getShowMeasure = () => showMeasure.value;
+function getIconFont(unicode = "") {
+  return unicode.indexOf("&amp;") !== -1 && (unicode = unicode.replace("&amp;", "&")), unicode.indexOf("&amp") !== -1 && (unicode = unicode.replace("&amp", "&")), eval('("' + unicode.replace("&#x", "\\u").replace(";", "") + '")');
+}
+const multiplyPixelRatio = (e) => {
+  const t = window.devicePixelRatio || 1;
+  return e.map((n) => n.map((o) => o * t));
+}, adjustBounds = (e, t) => t.length === 2 ? [e[0] - t[0], e[1] - t[1], e[2] + t[0], e[3] + t[1]] : [e[0] + t[0], e[1] + t[1], e[2] + t[2], e[3] + t[3]], isOverlapping = (e, t) => e[0] <= t[2] && e[2] >= t[0] && e[1] <= t[3] && e[3] >= t[1], getIconStyle = (e) => new Style({
+  text: new Text({
+    font: "Normal 14px map-iconfont",
+    text: getIconFont(e),
+    fill: new Fill({ color: "#fff" }),
+    offsetY: -14
+  }),
+  zIndex: 100
+}), getRotation = (e, t, n) => {
+  function o(m) {
+    return 180 * (m % (2 * Math.PI)) / Math.PI;
   }
-  if (selectedShips.value.some((m) => {
-    var d;
-    return m.id === ((d = selectedShipData.value) == null ? void 0 : d.id);
-  }) || selectedShips.value.push(selectedShipData.value), n && ((c = selectedShipData.value) != null && c.lon) && ((s = selectedShipData.value) != null && s.lat)) {
-    const m = mapInstance$6.value.getView(), d = new Point([selectedShipData.value.lon, selectedShipData.value.lat]);
-    m.setCenter(transform(d.getCoordinates(), projection.data, projection.mercator));
-    const u = m.getZoom(), f = u < mapZoom.findShipMin ? mapZoom.findShip : u;
-    m.setZoom(f);
+  function i(m) {
+    return m % 360 * Math.PI / 180;
   }
-  return setTimeout(() => {
-    t && selectSingleShipMarker(t);
-  }, 50), o;
-}, clearSelectFeature = () => {
-  var e;
-  if (selectedShipData.value && shipsVectorSource && selectSingleShipData.value) {
-    setVisibleFeatureById(shipsVectorSource, selectSingleShipData.value.id, !1);
-    const t = (e = shipsLayer.value) == null ? void 0 : e.getSource();
-    t && setVisibleFeatureById(t, selectSingleShipData.value.id, !0);
+  function r(m) {
+    if (!m) throw new Error("Coordinate is required");
+    if (!Array.isArray(m)) {
+      if (m.type === "Feature" && m.geometry !== null && m.geometry.type === "Point")
+        return m.geometry.coordinates;
+      if (m.type === "Point") return m.coordinates;
+    }
+    if (Array.isArray(m) && m.length >= 2 && !Array.isArray(m[0]) && !Array.isArray(m[1]))
+      return m;
+    throw new Error(
+      "Coordinate must be GeoJSON Point or an Array of numbers"
+    );
   }
-  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);
+  function l(m, f, p = {}) {
+    if (p.final)
+      return function(x, g) {
+        return (l(g, x) + 180) % 360;
+      }(m, f);
+    const y = r(m), h = r(f), v = i(y[0]), M = i(h[0]), S = i(y[1]), V = i(h[1]), C = Math.sin(M - v) * Math.cos(V), P = Math.cos(S) * Math.sin(V) - Math.sin(S) * Math.cos(V) * Math.cos(M - v);
+    return o(Math.atan2(C, P));
+  }
+  function c(m) {
+    return !isNaN(m) && m !== null && !Array.isArray(m);
+  }
+  function s(m, f = {}, p = {}) {
+    return m || console.log("Coordinates are required"), Array.isArray(m) || console.log("Coordinates must be an Array"), m.length < 2 && console.log("Coordinates must be at least 2 numbers long"), (!c(m[0]) || !c(m[1])) && console.log("Coordinates must contain numbers"), d({ type: "Point", coordinates: m }, f, p);
+  }
+  function d(m, f = {}, p = {}) {
+    const y = { type: "Feature" };
+    return p.id !== void 0 && (y.id = p.id), p.bbox && (y.bbox = p.bbox), y.properties = f || {}, y.geometry = m, y;
+  }
+  const u = l(s(e), s(t), n);
+  return u < 0 ? 360 + u : u;
 }, labelAlpha = 0.8, pixelRatio = window.devicePixelRatio || 1, labelFont = `500 ${12 * pixelRatio}px Arial`, labelOutSize = 2 * pixelRatio, labelHeight = 10 * pixelRatio, fillRectRadius = (e, t, n, o, i, r, l = 4) => {
   e.beginPath(), e.moveTo(t + l, n), e.arcTo(t + o, n, t + o, n + l, l), e.arcTo(t + o, n + i, t + o - l, n + i, l), e.arcTo(t, n + i, t, n + i - l, l), e.arcTo(t, n, t + l, n, l), e.closePath(), e.fillStyle = r, e.fill();
 }, getPixelFromCoordinate = (e) => {
@@ -871,8 +484,8 @@ const renderShips = (e) => {
   let t = 0, n = 0, o = 0;
   const i = e.length;
   for (let c = 0; c < i - 1; c++) {
-    const [s, m] = e[c], [d, u] = e[c + 1], f = s * u - d * m;
-    o += f, t += (s + d) * f, n += (m + u) * f;
+    const [s, d] = e[c], [u, m] = e[c + 1], f = s * m - u * d;
+    o += f, t += (s + u) * f, n += (d + m) * f;
   }
   if (o *= 0.5, o === 0)
     throw new Error("多边形面积为零");
@@ -881,37 +494,37 @@ const renderShips = (e) => {
 }, rotateShapeModel = (e, t) => {
   const [n, o] = calculatePolygonCentroid(e), i = t * Math.PI / 180, r = Math.cos(i), l = Math.sin(i);
   return e.map(([c, s]) => {
-    const m = c - n, d = s - o, u = m * r - d * l + n, f = m * l + d * r + o;
-    return [u, f];
+    const d = c - n, u = s - o, m = d * r - u * l + n, f = d * l + u * r + o;
+    return [m, 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, n, o, i) {
   let r, l, c, s;
-  const m = e[0], d = e[1];
+  const d = e[0], u = e[1];
   switch (t) {
     case 0:
-      r = m + i, l = r + n, s = d - i, c = s - o;
+      r = d + i, l = r + n, s = u - i, c = s - o;
       break;
     case 1:
-      r = m + i, l = r + n, s = d + o / 2, c = s - o;
+      r = d + i, l = r + n, s = u + o / 2, c = s - o;
       break;
     case 2:
-      r = m + i, l = r + n, s = d + i + o, c = s - o;
+      r = d + i, l = r + n, s = u + i + o, c = s - o;
       break;
     case 3:
-      r = m - n / 2, l = r + n, s = d + i + o, c = s - o;
+      r = d - n / 2, l = r + n, s = u + i + o, c = s - o;
       break;
     case 4:
-      l = m, r = l - n, s = d + i + o, c = s - o;
+      l = d, r = l - n, s = u + i + o, c = s - o;
       break;
     case 5:
-      l = m - i, r = l - n, s = d + o / 2, c = s - o;
+      l = d - i, r = l - n, s = u + o / 2, c = s - o;
       break;
     case 6:
-      l = m, r = l - n, s = d - i, c = s - o;
+      l = d, r = l - n, s = u - i, c = s - o;
       break;
     case 7:
-      r = m - n / 2, l = r + n, s = d - i, c = s - o;
+      r = d - n / 2, l = r + n, s = u - i, c = s - o;
   }
   if (!(!r || !c || !l || !s))
     return [Math.min(r, l), Math.min(c, s), Math.max(r, l), Math.max(c, s) + 1];
@@ -954,44 +567,44 @@ function drawLabelBody(e, t, n) {
     center: l,
     text: c,
     leftIcon: s,
-    shipColor: m,
-    lineLength: d = 20,
-    selected: u
+    shipColor: d,
+    lineLength: u = 20,
+    selected: m
   } = n;
   e.save(), o && (e.font = o);
   let f = e.measureText(c).width + 4 * i;
-  (s || m) && (f += r + 6 * i), e.restore();
-  let p, y = 20, h = -1, g = r + 3 * i;
-  if (d)
-    for (let k = 0; k < 8; k++) {
-      p = calculateBounds(l, k, f, g, d);
-      let T = !1;
-      for (let I = 0; I < t.length; ++I) {
-        let F = t[I].bounds, V = [
-          F[0] - y,
-          F[1] - y,
-          F[2] + y,
-          F[3] + y
+  (s || d) && (f += r + 6 * i), e.restore();
+  let p, y = 20, h = -1, v = r + 3 * i;
+  if (u)
+    for (let M = 0; M < 8; M++) {
+      p = calculateBounds(l, M, f, v, u);
+      let S = !1;
+      for (let V = 0; V < t.length; ++V) {
+        let C = t[V].bounds, P = [
+          C[0] - y,
+          C[1] - y,
+          C[2] + y,
+          C[3] + y
         ];
-        if (p && isOverlapping(p, V)) {
-          T = !0;
+        if (p && isOverlapping(p, P)) {
+          S = !0;
           break;
         }
       }
-      if (!T) {
-        h = k;
+      if (!S) {
+        h = M;
         break;
       }
     }
   else
-    h = 0, p = calculateBounds(l, h, f, g, d);
-  if (u && h === -1 && (h = 0), h === 5 && (h = 0), p && h > -1) {
-    let k = getBottomLeftPoint(p), T = getTopRighttPoint(p);
+    h = 0, p = calculateBounds(l, h, f, v, u);
+  if (m && h === -1 && (h = 0), h === 5 && (h = 0), p && h > -1) {
+    let M = getBottomLeftPoint(p), S = getTopRighttPoint(p);
     return {
       center: l,
-      x: calculateAnchorPoint(l, h, f, g, d),
-      l: T,
-      r: k,
+      x: calculateAnchorPoint(l, h, f, v, u),
+      l: S,
+      r: M,
       bounds: p,
       position: h,
       name: c
@@ -1003,21 +616,21 @@ const drawText = (e, t) => {
   if (!e) return;
   const { center: n, text: o, textColor: i, leftIcon: r, rightIcons: l, font: c } = t;
   e.save(), e.setTransform(1, 0, 0, 1, 0, 0);
-  let [s, m] = n;
+  let [s, d] = n;
   if (r) {
     e.font = `${18 * pixelRatio}px map-iconfont`;
-    let d = getIconFont(r.icon);
-    e.fillStyle = r.color, e.fillText(d, s + labelOutSize - 3 * pixelRatio, m + 2.6 * pixelRatio), s += 23 * pixelRatio;
+    let u = getIconFont(r.icon);
+    e.fillStyle = r.color, e.fillText(u, s + labelOutSize - 3 * pixelRatio, d + 2.6 * pixelRatio), s += 23 * pixelRatio;
   }
   if (l != null && l.length) {
     e.font = `${12 * pixelRatio}px map-iconfont`, e.fillStyle = "#3370ff";
-    const d = e.measureText(o).width + 6 * pixelRatio;
-    l.forEach((u, f) => {
-      const p = getIconFont(u), y = 20 * pixelRatio * f;
-      e.fillText(p, s + d + y, m);
+    const u = e.measureText(o).width + 6 * pixelRatio;
+    l.forEach((m, f) => {
+      const p = getIconFont(m), y = 20 * pixelRatio * f;
+      e.fillText(p, s + u + y, d);
     });
   }
-  e.font = c || labelFont, e.fillStyle = i, e.fillText(o, s + 2, m), e.restore();
+  e.font = c || labelFont, e.fillStyle = i, e.fillText(o, s + 2, d), e.restore();
 }, drawPolygon = (e, t) => {
   let {
     points: n,
@@ -1027,35 +640,35 @@ const drawText = (e, t) => {
     translation: l,
     rotation: c,
     rotationCenter: s,
-    scale: m,
-    globalAlpha: d
+    scale: d,
+    globalAlpha: u
   } = t;
-  if (d || (d = 1), n && e) {
-    e.save(), e.beginPath(), c && c !== 0 && s == null && e.rotate(c), l && e.translate(l[0], l[1]), c && (s != null && s.length) && e.rotate(c), m && e.scale(m, m), e.moveTo(n[0][0], n[0][1]);
-    for (let u = 1; u < n.length; u++)
-      e.lineTo(n[u][0], n[u][1]);
-    r && e.closePath(), o && (e.strokeStyle = o, e.stroke()), i && r && (d && (e.globalAlpha = d), e.fillStyle = i, e.fill()), e.restore();
+  if (u || (u = 1), n && e) {
+    e.save(), e.beginPath(), c && c !== 0 && s == null && e.rotate(c), l && e.translate(l[0], l[1]), c && (s != null && s.length) && e.rotate(c), d && e.scale(d, d), e.moveTo(n[0][0], n[0][1]);
+    for (let m = 1; m < n.length; m++)
+      e.lineTo(n[m][0], n[m][1]);
+    r && e.closePath(), o && (e.strokeStyle = o, e.stroke()), i && r && (u && (e.globalAlpha = u), e.fillStyle = i, e.fill()), e.restore();
   }
-}, intervalIds = {}, drawLabel = (e, t, n) => {
-  var u, f, p, y, h, g, k;
-  let { center: o, text: i, color: r, textColor: l, bgColor: c, leftIcon: s, rightIcons: m, type: d } = t;
-  if (o && i) {
-    const T = {
+}, intervalIds = {}, drawLabel = (e, t, n, o) => {
+  var f, p, y, h, v, M, S;
+  let { center: i, text: r, color: l, textColor: c, bgColor: s, leftIcon: d, rightIcons: u, type: m } = t;
+  if (i && r) {
+    const V = {
       font: labelFont,
       labelOutSize,
       labelHeight,
-      center: o,
-      text: i,
-      leftIcon: s,
+      center: i,
+      text: r,
+      leftIcon: d,
       selected: t.selected
     };
-    (u = t.blinkColors) != null && u.length && t.fill && (c = t.fill, l = getForegroundColor(t.fill));
-    const I = drawLabelBody(e, n, T);
-    if (I) {
-      const { x: F, bounds: V, l: P } = I, v = [getTopLeftPoint(V), getBottomLeftPoint(V), getBottomRightPoint(V), getTopRighttPoint(V)];
-      n.find((E) => E.name === i) || n.push(I), drawPolygon(e, {
-        points: [o, F],
-        strokeColor: r,
+    (f = t.blinkColors) != null && f.length && t.fill && (s = t.fill, c = getForegroundColor(t.fill));
+    const C = drawLabelBody(e, n, V);
+    if (C) {
+      const { x: P, bounds: x, l: g } = C, w = [getTopLeftPoint(x), getBottomLeftPoint(x), getBottomRightPoint(x), getTopRighttPoint(x)];
+      n.find((F) => F.name === r) || n.push(C), drawPolygon(e, {
+        points: [i, P],
+        strokeColor: l,
         fillColor: "#000",
         shouldClosePath: !0,
         translation: void 0,
@@ -1063,46 +676,47 @@ const drawText = (e, t) => {
         rotationCenter: void 0,
         scale: void 0,
         globalAlpha: labelAlpha
-      }), m != null && m.length && m.forEach(() => {
-        v[1][0] += pixelRatio * 18, v[2][0] += pixelRatio * 18;
+      }), u != null && u.length && u.forEach(() => {
+        w[1][0] += pixelRatio * 18, w[2][0] += pixelRatio * 18;
       });
-      const w = {
-        points: v,
-        strokeColor: r,
-        fillColor: c,
+      const k = {
+        points: w,
+        strokeColor: l,
+        fillColor: s,
         shouldClosePath: !0
-      }, [S, M] = P, C = {
-        center: [S, M + labelOutSize + labelHeight + 1],
-        text: i,
-        textColor: l,
-        leftIcon: s,
-        rightIcons: m,
+      }, [T, E] = g, I = {
+        center: [T, E + labelOutSize + labelHeight + 1],
+        text: r,
+        textColor: c,
+        leftIcon: d,
+        rightIcons: u,
         blinkColors: t.blinkColors
       };
-      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(n, i)) : (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(n, i));
+      if (drawPolygon(e, k), drawText(e, I), t != null && t.blinkColors && t.blinkColors.length > 0) {
+        let F = Date.now(), $ = 0;
+        const R = t.blinkColors;
+        !!!((h = (y = (p = selectShipsLayer.value) == null ? void 0 : p.getSource()) == null ? void 0 : y.getFeatures()) != null && h.find((N) => {
+          var A;
+          return ((A = N.get("data")) == null ? void 0 : A.id) === t.id;
+        }) || (S = (M = (v = shipsLayer.value) == null ? void 0 : v.getSource()) == null ? void 0 : M.getFeatures()) != null && S.find((N) => {
+          var A;
+          return ((A = N.get("data")) == null ? void 0 : A.id) === t.id;
+        })) || hiddenOrther.value ? (clearInterval(intervalIds[t.id]), deleteLabelFromArray(n, r)) : (intervalIds[t.id] && clearInterval(intervalIds[t.id]), intervalIds[t.id] = window.setInterval(() => {
+          var _, Z, U;
+          const N = Date.now();
+          N - F >= 500 && ($ = ($ + 1) % R.length, F = N, k.fillColor = R[$], drawPolygon(e, k), I.textColor = getForegroundColor(k.fillColor), drawText(e, I)), ((U = (Z = (_ = shipsLayer.value) == null ? void 0 : _.getSource()) == null ? void 0 : Z.getFeatures()) == null ? void 0 : U.some((z) => {
+            const O = z.get("data");
+            if ((O == null ? void 0 : O.id) === t.id) {
+              const D = o == null ? void 0 : o.getView().calculateExtent();
+              if (!D) return !1;
+              const G = fromLonLat([O.lon, O.lat]);
+              return G[0] >= D[0] && G[0] <= D[2] && G[1] >= D[1] && G[1] <= D[3];
+            }
+            return !1;
+          })) || (clearInterval(intervalIds[t.id]), deleteLabelFromArray(n, r));
         }, 10));
       } else
-        shipLabels.value.find((x) => x.name === i) && (clearInterval(intervalIds[t.id]), drawPolygon(e, w), drawText(e, C));
+        shipLabels.value.find(($) => $.name === r) && (clearInterval(intervalIds[t.id]), drawPolygon(e, k), drawText(e, I));
     }
   }
   return null;
@@ -1136,8 +750,8 @@ function gcj02ToWgs84(e) {
     l = 1 - ee * l * l;
     const c = Math.sqrt(l);
     o = o * 180 / (a * (1 - ee) / (l * c) * PI), i = i * 180 / (a / c * Math.cos(r) * PI);
-    const s = n + o, m = t + i;
-    return `${(t * 2 - m).toFixed(6)}, ${(n * 2 - s).toFixed(6)}`;
+    const s = n + o, d = t + i;
+    return `${(t * 2 - d).toFixed(6)}, ${(n * 2 - s).toFixed(6)}`;
   }
 }
 function calculateCirclePoints(e, t) {
@@ -1168,45 +782,54 @@ function mercatorToLonLat(e, t = "lonlat") {
 function calculateBoundingBox(e) {
   let t = 1 / 0, n = -1 / 0, o = 1 / 0, i = -1 / 0;
   e.forEach((h) => {
-    const [g, k] = h;
-    t = Math.min(t, k), n = Math.max(n, k), o = Math.min(o, g), i = Math.max(i, g);
+    const [v, M] = h;
+    t = Math.min(t, M), n = Math.max(n, M), o = Math.min(o, v), i = Math.max(i, v);
   });
-  const r = i - o, l = n - t, c = Math.max(r, l), s = (o + i) / 2, m = (t + n) / 2, d = c / 2, u = s - d, f = s + d, p = m - d, y = m + d;
-  return [f, p, u, y];
+  const r = i - o, l = n - t, c = Math.max(r, l), s = (o + i) / 2, d = (t + n) / 2, u = c / 2, m = s - u, f = s + u, p = d - u, y = d + u;
+  return [f, p, m, y];
 }
 const transformUtils = {
   gcj02ToWgs84,
   calculateCirclePoints,
   lonLatToMercator,
   mercatorToLonLat,
-  calculateBoundingBox
-}, mapInstance$5 = ref(), renderTrackStyleSetInstance = (e) => mapInstance$5.value = e, stopIcon = "&#xe6e2;", stopColor = "#E31818", slowIcon = "&#xe703;", slowColor = "#1890FF", dropletsIcon = "&#xe6d2", trackList$1 = ref([]);
+  calculateBoundingBox,
+  transform
+}, mapInstance$7 = ref(), renderTrackStyleSetInstance = (e) => mapInstance$7.value = e, stopIcon = "&#xe6e2;", stopColor = "#E31818", slowIcon = "&#xe703;", slowColor = "#1890FF", dropletsIcon = "&#xe6d2", trackList$1 = ref([]);
 let animationFeature;
 const renderTrackLine = (e, t, n) => {
-  var r, l, c;
+  var l, c, s;
   const o = e[t];
   if (!o) return;
-  allTracks.value[t] = o, trackList$1.value = [], trackList$1.value = o.map((s, m) => (s.center = [s.lon, s.lat], s.centerPoint = transformUtils.lonLatToMercator(s.center), s.id = t, s.index = m, s.time = hooks(s.createdAt).format("YYYY-MM-DD HH:mm:ss"), s));
-  const i = trackList$1.value.map((s) => s.centerPoint);
-  if (i.length >= 2) {
-    const s = new LineString(i), m = new Feature({ geometry: s });
-    m.setStyle(
+  allTracks.value[t] = o, trackList$1.value = [];
+  let i = o;
+  o.length > 5e3 ? o.filter((d, u) => u % 5 === 0) : o.length > 4e3 ? o.filter((d, u) => u % 4 === 0) : o.length > 2e3 && o.filter((d, u) => u % 2 === 0), trackList$1.value = i.map((d, u) => {
+    if (Number(d.lon) > 180 || Number(d.lat) > 180) {
+      const [m, f] = formatUtils.convertSixHundredThousandToLatLng(d.lon, d.lat);
+      d.lon = m, d.lat = f;
+    }
+    return d.center = [d.lon, d.lat], d.centerPoint = transformUtils.lonLatToMercator(d.center), d.id = t, d.index = u, d.time = hooks(d.createdAt).format("YYYY-MM-DD HH:mm:ss"), d;
+  });
+  const r = trackList$1.value.map((d) => d.centerPoint);
+  if (r.length >= 2) {
+    const d = new LineString(r), u = new Feature({ geometry: d });
+    u.setStyle(
       new Style({
         stroke: new Stroke({
           color: n,
           width: 2
         })
       })
-    ), m.setId(t), m.set("type", "line"), (l = (r = shipTrackVectorLayer.value) == null ? void 0 : r.getSource()) == null || l.clear(), shipTrackLineFeatures.value = [];
-    const d = shipTrackLineFeatures.value.findIndex((f) => f.getId() === t);
-    d >= 0 ? shipTrackLineFeatures.value[d] = m : shipTrackLineFeatures.value.push(m);
-    const u = createAnimatedIconFeature(n, i);
+    ), u.setId(t), u.set("type", "line"), (c = (l = shipTrackVectorLayer.value) == null ? void 0 : l.getSource()) == null || c.clear(), shipTrackLineFeatures.value = [];
+    const m = shipTrackLineFeatures.value.findIndex((p) => p.getId() === t);
+    m >= 0 ? shipTrackLineFeatures.value[m] = u : shipTrackLineFeatures.value.push(u);
+    const f = createAnimatedIconFeature(n, r);
     trackLineVectorSource.value = new VectorSource({
       features: [...shipTrackLineFeatures.value]
-    }), animationFeature = u, console.log(animationFeature), shipTrackVectorLayer.value = new VectorLayer({
+    }), animationFeature = f, console.log(animationFeature), shipTrackVectorLayer.value = new VectorLayer({
       source: trackLineVectorSource.value,
       zIndex: 102
-    }), renderPoint(n), (c = mapInstance$5.value) == null || c.addLayer(shipTrackVectorLayer.value);
+    }), renderPoint(n), (s = mapInstance$7.value) == null || s.addLayer(shipTrackVectorLayer.value);
   }
 }, handlePlay = (e, t) => {
   const n = allTracks.value[String(e)];
@@ -1240,8 +863,8 @@ 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, p;
-  const n = Number(50 * t), o = ((u = e.frameState) == null ? void 0 : u.time) ?? Date.now(), i = o - lastTime;
+  var m, f, p;
+  const n = Number(50 * t), o = ((m = e.frameState) == null ? void 0 : m.time) ?? Date.now(), i = o - lastTime;
   if (distance = (distance + n * i / 1e6) % 2, lastTime = o, distance >= 1) {
     stopAnimation();
     return;
@@ -1252,19 +875,19 @@ const moveFeature = (e, t) => {
     distance > 1 ? distance - 0.01 : distance
   ), c = linePath.getCoordinateAt(
     distance > 1 ? 2 - distance : distance + 0.01
-  ), m = getRotation(
+  ), d = getRotation(
     transformUtils.mercatorToLonLat(l, "array"),
     transformUtils.mercatorToLonLat(c, "array")
   ) * Math.PI / 180;
-  (f = geoMarkerStyle.getText()) == null || f.setRotation(m), position.setCoordinates(r);
-  const d = getVectorContext(e);
-  d.context_.save(), d.setStyle(geoMarkerStyle), d.drawGeometry(position), d.context_.restore(), (p = mapInstance$5.value) == null || p.render();
+  (f = geoMarkerStyle.getText()) == null || f.setRotation(d), position.setCoordinates(r);
+  const u = getVectorContext(e);
+  u.context_.save(), u.setStyle(geoMarkerStyle), u.drawGeometry(position), u.context_.restore(), (p = mapInstance$7.value) == null || p.render();
 }, startAnimation = () => {
   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]), moveFeatureHandler && (vectorLayer == null || vectorLayer.on("postrender", moveFeatureHandler)), geoMarker == null || geoMarker.setGeometry(void 0);
 }, stopAnimation = () => {
   var e;
-  trackAnimating.value && (trackAnimating.value = !1, geoMarker == null || geoMarker.setGeometry(void 0), moveFeatureHandler && vectorLayer && vectorLayer.un("postrender", moveFeatureHandler), vectorLayer && ((e = mapInstance$5.value) == null || e.removeLayer(vectorLayer)), vectorLayer = null, geoMarker = null);
+  trackAnimating.value && (trackAnimating.value = !1, geoMarker == null || geoMarker.setGeometry(void 0), moveFeatureHandler && vectorLayer && vectorLayer.un("postrender", moveFeatureHandler), vectorLayer && ((e = mapInstance$7.value) == null || e.removeLayer(vectorLayer)), vectorLayer = null, geoMarker = null);
 }, playAnimation = (e, t) => {
   var o;
   trackAnimating.value && stopAnimation(), polyline = new Polyline({
@@ -1287,42 +910,42 @@ const moveFeature = (e, t) => {
     source: new VectorSource({
       features: [geoMarker]
     })
-  }), (o = mapInstance$5.value) == null || o.addLayer(vectorLayer), moveFeatureHandler = (i) => moveFeature(i, t), startAnimation();
+  }), (o = mapInstance$7.value) == null || o.addLayer(vectorLayer), moveFeatureHandler = (i) => moveFeature(i, t), startAnimation();
 }, renderPoint = (e) => {
-  if (!mapInstance$5.value) return;
+  if (!mapInstance$7.value) return;
   const t = trackList$1.value || [];
   if (!(t && t.length > 1)) return [];
   const n = { 16: 24, 17: 15, default: 4 }, o = [], i = t.length;
   for (let c = 0; c < i; c++) {
     t[c].index = c;
-    const s = mapInstance$5.value.getPixelFromCoordinate(t[c].centerPoint);
+    const s = mapInstance$7.value.getPixelFromCoordinate(t[c].centerPoint);
     if (s) {
-      let m = s.concat(s);
-      m = adjustBounds(m, [20, 20]);
-      const d = mapInstance$5.value.getView().getZoom();
-      if (!d) return;
-      if (d > 15) {
-        const f = n[d] || n.default;
-        m = adjustBounds(m, [f, f]);
+      let d = s.concat(s);
+      d = adjustBounds(d, [20, 20]);
+      const u = mapInstance$7.value.getView().getZoom();
+      if (!u) return;
+      if (u > 15) {
+        const f = n[u] || n.default;
+        d = adjustBounds(d, [f, f]);
       }
-      let u = !0;
+      let m = !0;
       if (t[c].state !== "0") {
         for (let f = 0; f < o.length; f++)
-          if (isOverlapping(m, o[f].bounds)) {
-            u = !1;
+          if (isOverlapping(d, o[f].bounds)) {
+            m = !1;
             break;
           }
       }
-      u && (t[c].bounds = m, o.push(t[c]));
+      m && (t[c].bounds = d, o.push(t[c]));
     }
   }
   const r = getIconStyle(stopIcon), l = getIconStyle(slowIcon);
   o.forEach((c, s) => {
-    var u, f;
-    const m = new Feature({
+    var m, f;
+    const d = new Feature({
       geometry: new Point(c.centerPoint)
     });
-    m.set("type", "track_point"), m.set("data", c), m.setStyle([
+    d.set("type", "track_point"), d.set("data", c), d.setStyle([
       new Style({
         // 扩大交互热区
         image: new CircleStyle({
@@ -1338,13 +961,13 @@ const moveFeature = (e, t) => {
           radius: 3
         })
       })
-    ]), trackLineVectorSource.value.addFeature(m);
-    const d = new Feature({
+    ]), trackLineVectorSource.value.addFeature(d);
+    const u = new Feature({
       geometry: new Point(fromLonLat(c.center))
     });
-    if (d.set("type", "track_label"), d.set("track_label_index", s), d.setStyle(
+    if (u.set("type", "track_label"), u.set("track_label_index", s), u.setStyle(
       setTrackLabelStyle(c, e)
-    ), trackLineVectorSource.value.addFeature(d), typeof c == "object" && c.hasOwnProperty("state")) {
+    ), trackLineVectorSource.value.addFeature(u), typeof c == "object" && c.hasOwnProperty("state")) {
       const p = new Feature({
         geometry: new Point(c.centerPoint)
       });
@@ -1357,7 +980,7 @@ const moveFeature = (e, t) => {
         }),
         zIndex: 99
       }), h = [];
-      Number(c.state) === 0 ? ((u = y.getText()) == null || u.setFill(new Fill({ color: stopColor })), h.push(r)) : Number(c.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);
+      Number(c.state) === 0 ? ((m = y.getText()) == null || m.setFill(new Fill({ color: stopColor })), h.push(r)) : Number(c.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);
     }
   }), renderArrow(o, e), renderIconPoint();
 }, renderArrow = (e, t) => {
@@ -1371,74 +994,461 @@ const moveFeature = (e, t) => {
     else {
       const c = trackList$1.value[Math.floor(l)], s = trackList$1.value[Math.ceil(l)];
       if (c && s) {
-        const [m, d] = c.centerPoint, [u, f] = s.centerPoint;
-        i = [(m + u) / 2, (d + f) / 2];
+        const [d, u] = c.centerPoint, [m, f] = s.centerPoint;
+        i = [(d + m) / 2, (u + f) / 2];
+      }
+    }
+    if (i) {
+      const c = new Feature({
+        geometry: new Point(i)
+      });
+      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[o].center,
+              e[o + 1].center
+            ) * (Math.PI / 180)
+          })
+        })
+      ), trackLineVectorSource.value.addFeature(c);
+    }
+  }
+}, renderIconPoint = () => {
+  const e = "&#xe69b;", t = "#fcdc3f", n = "#ff0000";
+  (trackList$1.value.length < 2 ? [trackList$1.value[0]] : [trackList$1.value[0], trackList$1.value[trackList$1.value.length - 1]]).forEach((i) => {
+    const r = new Feature({
+      geometry: new Point(i.centerPoint)
+    });
+    r.set("type", "track_begin"), r.set("data", i);
+    const l = i.index === 0 && trackList$1.value.length >= 2 ? t : n;
+    r.setStyle(
+      new Style({
+        text: new Text({
+          font: "Normal 14px map-iconfont",
+          text: getIconFont(e),
+          fill: new Fill({ color: l })
+        }),
+        zIndex: 101
+      })
+    ), trackLineVectorSource.value.addFeature(r);
+  });
+}, setTrackLabelStyle = (e, t) => new Style({
+  renderer: (n, o) => {
+    const i = o.context, c = {
+      id: e.id || "",
+      center: n,
+      text: e.time,
+      color: t,
+      textColor: "#000",
+      bgColor: "rgba(255,255,255,.8)",
+      selected: !0,
+      type: "TrackTime"
+    };
+    drawLabel(i, 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: (n, o) => {
+    n = n;
+    const i = o.context, r = o.feature.get("data");
+    if (!r) return;
+    o.feature.get("index") === 0 && (shipLabels.value = []);
+    try {
+      const c = drawShipBody(i, r, n, t);
+      c && (drawHeading(i, r, c, t), r.selected = e, e && setTimeout(() => {
+        drawSelectBounds(i, c);
+      }, 1)), drawShipLabel(i, r, n);
+    } catch {
+      return !1;
+    }
+  }
+}), drawShipBody = (e, t, n, o) => {
+  if (!mapInstance$6.value) return;
+  const i = Math.round(Number(mapInstance$6.value.getView().getZoom()));
+  if (!i) return;
+  let r = [];
+  const [l, c] = drawShipModelByZoom[i] || [0, 0], [s, d] = n;
+  if (i <= mapZoom.shipModelMax && i > mapZoom.shipModelMin && t.length >= l && t.breadth >= c)
+    r = rotateShapeModel(drawCurrentShipShapeModel(t, i), t.angle).map((m) => {
+      const [f, p] = m;
+      return [s + f, d + p];
+    });
+  else {
+    const u = rotateShapeModel(triangleModel, t.angle);
+    n.length === 2 && (r = u.map((m) => {
+      const [f, p] = m;
+      return [s + f, d + p];
+    }));
+  }
+  if (!(r.length > 2)) return !1;
+  if (t != null && t.length) {
+    const u = r.length === 3 ? 30 : t.length * 0.4;
+    e.beginPath(), e.arc(
+      n[0],
+      n[1],
+      u,
+      0,
+      2 * Math.PI
+    ), e.fillStyle = "rgba(255, 255, 255, 0.001)", e.fill();
+  }
+  e.save(), e.beginPath(), e.moveTo(r[0][0], r[0][1]);
+  for (let u = 1; u < r.length; u++)
+    e.lineTo(r[u][0], r[u][1]);
+  return e.closePath(), e.strokeStyle = o ? "#ff0000" : "#000", e.lineWidth = o ? 2 : 1, e.stroke(), e.fillStyle = t.fill, e.fill(), e.restore(), r;
+}, drawHeading = (e, t, n, o) => {
+  const [i, r] = n[0], l = getShipDirectPath(t);
+  if (l) {
+    const c = l.map(function(s) {
+      const [d, u] = s;
+      return [d + i, u + r];
+    });
+    if (e.save(), e.beginPath(), t.angle > 0) {
+      e.translate(i, r);
+      const s = t.angle * Math.PI / 180;
+      e.rotate(s), e.translate(-i, -r);
+    }
+    e.moveTo(i, r);
+    for (let s = 1; s < c.length; s++) {
+      const [d, u] = c[s];
+      e.lineTo(d, u);
+    }
+    e.strokeStyle = o ? "#ff0000" : "#000", e.lineWidth = o ? 2 : 1, e.stroke(), e.restore();
+  }
+}, drawSelectBounds = (e, t) => {
+  let [n, o, i, r] = getPixelFromCoordinate(t);
+  const l = window.devicePixelRatio || 1, c = 4;
+  n -= c, o -= c, i += c, r += c, e.save(), e.strokeStyle = "#ff0000", e.lineWidth = 4 * l;
+  const s = 8 * l;
+  e.beginPath(), e.moveTo(n + s, r), e.lineTo(n, r), e.lineTo(n, r - s), e.moveTo(n, o + s), e.lineTo(n, o), e.lineTo(n + s, o), e.moveTo(i - s, o), e.lineTo(i, o), e.lineTo(i, o + s), e.moveTo(i, r - s), e.lineTo(i, r), e.lineTo(i - s, r), e.stroke(), e.restore();
+}, drawShipLabel = (e, t, n) => {
+  if (!t.selected && shipLabels.value.find((m) => m.name === t.name)) return;
+  const [o, i] = n, r = o, l = i, c = t.name;
+  let s;
+  t.leftIconColor && (s = { color: t.leftIconColor, icon: "&#xe599;" });
+  const d = getShipCustomIcon(t), u = {
+    id: t.id,
+    center: [r, l],
+    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, u, shipLabels.value, mapInstance$6.value);
+}, drawCurrentShipShapeModel = (e, t) => {
+  let n = 0;
+  t <= 14 ? n = 0.058 : t === 15 ? n = 0.12 : t === 16 ? n = 0.22 : t === 17 ? n = 0.435 : t === 18 && (n = 0.857);
+  const o = e.length / 4 * n, i = e.breadth * n;
+  let r = cloneDeep(shipShapeModel);
+  return r = r.map(([l, c]) => [l * i, c * o]), r;
+}, getShipDirectPath = (e) => {
+  const { speed: t, hdg: n, cog: o } = e;
+  let i = "", r = null;
+  if (t && t > 1 && (n !== null && n != 511 && o !== null ? o - n >= 3 ? i = "left" : o - n <= -3 ? i = "right" : i = "front" : i = "front", i && t))
+    for (let l = 0; l < speedCondition.length; l++) {
+      const c = speedCondition[l];
+      if (t >= c[0] && t < c[1]) {
+        r = shipDirectPath[i][l];
+        break;
       }
     }
-    if (i) {
-      const c = new Feature({
-        geometry: new Point(i)
+  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), selectedShips = ref([]);
+let selectShipsVectorSource;
+const renderShips = (e) => {
+  var n, o, i, 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((l) => {
+  }), !(!t || t < mapZoom.shipGreenDotMax) && (allShips.value = [...e, ...selectedShips.value], !hiddenOrther.value))
+    return t >= mapZoom.shipGreenDotMax && t < mapZoom.shipModelMin ? ((n = shipsLayer.value) == null || n.setVisible(!1), (o = largeAmountShipsLayer.value) == null || o.setVisible(!0), renderLargeAmountShips(allShips.value)) : ((i = largeAmountShipsLayer.value) == null || i.setVisible(!1), (r = shipsLayer.value) == null || r.setVisible(!0), renderShipsMarker(allShips.value));
+}, renderLargeAmountShips = (e) => {
+  if (!mapInstance$5.value) return;
+  const t = e.map((n) => ({
+    type: "Feature",
+    geometry: {
+      type: "Point",
+      coordinates: [n.lon, n.lat]
+    },
+    properties: n
+  }));
+  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 n;
+  if (!mapInstance$5.value) return;
+  deleteAllShipMarkers();
+  let t = convertShipMapData(e);
+  if (t = customFilterShips(t), !!(t != null && t.length))
+    return t.forEach((o, i) => {
+      const r = [o.lon, o.lat], l = new Feature({
+        geometry: new Point(fromLonLat(r))
+      }), c = 1;
+      l.set("clickGeometry", new Circle(fromLonLat(r), c)), l.set("data", o), l.set("index", i), l.setStyle(
+        setShipStyle(!1)
+      ), shipsMarkerList.push({
+        ship: o,
+        lonlat: r,
+        feature: 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[o].center,
-              e[o + 1].center
-            ) * (Math.PI / 180)
-          })
-        })
-      ), trackLineVectorSource.value.addFeature(c);
+    }), shipsVectorSource = new VectorSource({
+      features: shipsMarkerList.map((o) => o.feature)
+    }), shipsLayer.value = new VectorLayer({
+      source: shipsVectorSource,
+      zIndex: 100
+    }), (n = mapInstance$5.value) == null || n.addLayer(shipsLayer.value), shipsLayer.value;
+}, onShipsMarkerHover = () => {
+  var o;
+  let e = null, t = 0;
+  const n = 100;
+  (o = mapInstance$5.value) == null || o.on("pointermove", function(i) {
+    var s, d, u, m;
+    const r = Date.now();
+    if (r - t < n)
+      return;
+    t = r;
+    const l = (s = mapInstance$5.value) == null ? void 0 : s.forEachFeatureAtPixel(i.pixel, (f) => f), c = (d = mapInstance$5.value) == null ? void 0 : d.getTargetElement();
+    if (c && (c.style.cursor = l ? "pointer" : ""), e !== l) {
+      if (e) {
+        const f = e.get("data");
+        if (!(f != null && f.mmsi)) return;
+        e.setStyle(
+          setShipStyle(((u = selectedShipData.value) == null ? void 0 : u.id) === f.id, !1)
+        );
+      }
+      if (l) {
+        const f = l.get("data");
+        if (!(f != null && f.mmsi)) return;
+        e = l, l.setStyle(
+          setShipStyle(((m = selectedShipData.value) == null ? void 0 : m.id) === f.id, !0)
+        );
+      } else
+        e = null;
     }
-  }
-}, renderIconPoint = () => {
-  const e = "&#xe69b;", t = "#fcdc3f", n = "#ff0000";
-  (trackList$1.value.length < 2 ? [trackList$1.value[0]] : [trackList$1.value[0], trackList$1.value[trackList$1.value.length - 1]]).forEach((i) => {
-    const r = new Feature({
-      geometry: new Point(i.centerPoint)
-    });
-    r.set("type", "track_begin"), r.set("data", i);
-    const l = i.index === 0 && trackList$1.value.length >= 2 ? t : n;
-    r.setStyle(
-      new Style({
-        text: new Text({
-          font: "Normal 14px map-iconfont",
-          text: getIconFont(e),
-          fill: new Fill({ color: l })
-        }),
-        zIndex: 101
-      })
-    ), trackLineVectorSource.value.addFeature(r);
   });
-}, setTrackLabelStyle = (e, t) => new Style({
-  renderer: (n, o) => {
-    const i = o.context, c = {
-      id: e.id || "",
-      center: n,
-      text: e.time,
-      color: t,
-      textColor: "#000",
-      bgColor: "rgba(255,255,255,.8)",
-      selected: !0,
-      type: "TrackTime"
-    };
-    drawLabel(i, c, trackLabels.value);
+}, customFilterShips = (e) => {
+  let t = cloneDeep(e);
+  return t = t.filter((n) => {
+    var i;
+    const o = getFilterItem(n).every(({ btnShow: r, value: l }) => r ? !!l : !0);
+    return (switchBtnShow.value.camera || switchBtnShow.value.mobile || switchBtnShow.value.waterGauge) && ((i = selectedShipData.value) == null ? void 0 : i.id) === n.id && clearSelectFeature(), o;
+  }), 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 n = [selectSingleShipData.value.lon, selectSingleShipData.value.lat], o = new Feature({
+    geometry: new Point(fromLonLat(n))
+  });
+  o.set("data", selectSingleShipData.value), o.setStyle(
+    setShipStyle(!0)
+  ), shipsMarkerList.push({
+    ship: selectSingleShipData.value,
+    lonlat: n,
+    feature: o
+  }), selectShipsVectorSource == null || selectShipsVectorSource.clear(), selectShipsVectorSource = new VectorSource({
+    features: [o]
+  }), selectShipsLayer.value = new VectorLayer({
+    source: selectShipsVectorSource
+  }), shipsVectorSource && setVisibleFeatureById(shipsVectorSource, selectSingleShipData.value.id, !0);
+  const i = (r = shipsLayer.value) == null ? void 0 : r.getSource();
+  return i && (t && setVisibleFeatureById(i, t.id, !0), setVisibleFeatureById(i, selectSingleShipData.value.id, !1)), mapInstance$5.value.addLayer(selectShipsLayer.value), selectShipsLayer.value.setVisible(!0), selectShipsLayer.value;
+}, setVisibleFeatureById = (e, t, n) => {
+  e && e.forEachFeature((o) => {
+    const i = o.get("data");
+    i && i.id === t && o.setStyle(n ? setShipStyle(!1, i.id) : setBlankStyle());
+  });
+}, findShip = (e, t, n = !0) => {
+  var i, r, l, c, s;
+  if (!e || !mapInstance$5.value) return;
+  const o = (l = (r = (i = shipsLayer.value) == null ? void 0 : i.getSource()) == null ? void 0 : r.getFeatures()) == null ? void 0 : l.find((d) => {
+    var u;
+    return ((u = d.get("data")) == null ? void 0 : u.id) === e;
+  });
+  if (o)
+    selectedShipData.value = o.get("data");
+  else if (t && t.lon && t.lat)
+    selectedShipData.value = t;
+  else {
+    console.error("找不到船舶");
+    return;
+  }
+  if (selectedShips.value.some((d) => {
+    var u;
+    return d.id === ((u = selectedShipData.value) == null ? void 0 : u.id);
+  }) || selectedShips.value.push(selectedShipData.value), n && ((c = selectedShipData.value) != null && c.lon) && ((s = selectedShipData.value) != null && s.lat)) {
+    const d = mapInstance$5.value.getView(), u = new Point([selectedShipData.value.lon, selectedShipData.value.lat]);
+    d.setCenter(transform(u.getCoordinates(), projection.data, projection.mercator));
+    const m = d.getZoom(), f = m < mapZoom.findShipMin ? mapZoom.findShip : m;
+    d.setZoom(f);
+  }
+  return setTimeout(() => {
+    t && selectSingleShipMarker(t);
+  }, 50), o;
+}, clearSelectFeature = () => {
+  var e;
+  if (selectedShipData.value && shipsVectorSource && selectSingleShipData.value) {
+    setVisibleFeatureById(shipsVectorSource, selectSingleShipData.value.id, !1);
+    const t = (e = shipsLayer.value) == null ? void 0 : e.getSource();
+    t && setVisibleFeatureById(t, selectSingleShipData.value.id, !0);
   }
-}), mapInstance$4 = ref(), renderCustomOverlaySetInstance = (e) => mapInstance$4.value = e, drawCustomContent = (e, t, n, o = "top-left", i = !1) => {
-  var d, u;
+  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, n, o = "top-left", i = !1, r = !0) => {
+  var m, f;
   if (!t || !mapInstance$4.value) return;
-  document.querySelectorAll(".truck-custom-content").forEach((f) => {
-    var p;
-    return (p = f.parentNode) == null ? void 0 : p.removeChild(f);
+  r && document.querySelectorAll(".truck-custom-content").forEach((p) => {
+    var y;
+    return (y = p.parentNode) == null ? void 0 : y.removeChild(p);
   });
-  const r = document.createElement("div");
-  r.innerHTML = n;
-  const l = new Overlay({
-    element: r,
+  const l = document.createElement("div");
+  l.innerHTML = n;
+  const c = new Overlay({
+    element: l,
     position: t,
     // 初始位置
     positioning: o,
@@ -1446,55 +1456,55 @@ const moveFeature = (e, t) => {
     // 设置不阻拦事件
   });
   if (i) {
-    let f = !1, p = [0, 0], y = [0, 0], h = 0, g = 0;
-    r.addEventListener("mousedown", function(k) {
-      var I;
-      f = !0, h = k.clientX, g = k.clientY;
-      const T = (I = mapInstance$4.value) == null ? void 0 : I.getCoordinateFromPixel([k.clientX - 200, k.clientY - 200]);
-      T && (p = T), y = [
-        k.clientX - r.getBoundingClientRect().left + 160,
-        k.clientY - r.getBoundingClientRect().top + 84
-      ], k.preventDefault(), console.log(e, h, g);
-    }), document.addEventListener("mousemove", function(k) {
-      var T;
-      if (f) {
-        const I = (T = mapInstance$4.value) == null ? void 0 : T.getCoordinateFromPixel([k.clientX - y[0], k.clientY - y[1]]), F = I[0] - p[0], V = I[1] - p[1];
-        l.setPosition([p[0] + F, p[1] + V]);
+    let p = !1, y = [0, 0], h = [0, 0], v = 0, M = 0;
+    l.addEventListener("mousedown", function(S) {
+      var C;
+      p = !0, v = S.clientX, M = S.clientY;
+      const V = (C = mapInstance$4.value) == null ? void 0 : C.getCoordinateFromPixel([S.clientX - 200, S.clientY - 200]);
+      V && (y = V), h = [
+        S.clientX - l.getBoundingClientRect().left + 160,
+        S.clientY - l.getBoundingClientRect().top + 84
+      ], S.preventDefault(), console.log(e, v, M);
+    }), document.addEventListener("mousemove", function(S) {
+      var V;
+      if (p) {
+        const C = (V = mapInstance$4.value) == null ? void 0 : V.getCoordinateFromPixel([S.clientX - h[0], S.clientY - h[1]]), P = C[0] - y[0], x = C[1] - y[1];
+        c.setPosition([y[0] + P, y[1] + x]);
       }
     }), document.addEventListener("mouseup", function() {
-      f = !1;
+      p = !1;
     });
   }
-  (d = mapInstance$4.value) == null || d.addOverlay(l);
-  const c = r.querySelector(".close-button");
-  c && c.addEventListener("click", () => {
-    var f, p;
-    (f = mapInstance$4.value) == null || f.removeOverlay(l), (p = r.parentNode) == null || p.removeChild(r);
+  (m = mapInstance$4.value) == null || m.addOverlay(c);
+  const s = l.querySelector(".close-button");
+  s && s.addEventListener("click", () => {
+    var p, y;
+    (p = mapInstance$4.value) == null || p.removeOverlay(c), (y = l.parentNode) == null || y.removeChild(l);
   });
-  const s = JSON.parse(JSON.stringify(t)), m = (u = mapInstance$4.value) == null ? void 0 : u.getCoordinateFromPixel(s);
-  return l.setPosition(m), l;
+  const d = JSON.parse(JSON.stringify(t)), u = (f = mapInstance$4.value) == null ? void 0 : f.getCoordinateFromPixel(d);
+  return c.setPosition(u), c;
 }, mapInstance$3 = ref(), renderTrackSetInstance = (e) => mapInstance$3.value = e, showTracks = ref([]), trackList = ref([]);
 ref(null);
 const trackId = ref(""), cursor = ref(0), renderTrack = (e, t, n, o, i = "ship") => {
-  var d;
+  var u;
   if (console.log(i), nextTick(() => {
     hiddenAllShips();
-  }).then((u) => {
+  }).then((m) => {
   }), (t == null ? void 0 : t.length) < 2) {
-    ((d = showTracks.value) == null ? void 0 : d.findIndex((u) => u.id === e)) < 0 && showTracks.value.push({ id: e, length: "" });
+    ((u = showTracks.value) == null ? void 0 : u.findIndex((m) => m.id === e)) < 0 && showTracks.value.push({ id: e, length: "" });
     return;
   }
   const r = {};
-  t.forEach((u) => {
-    u.state ? u.state = Number(u.state) : delete u.state;
+  t.forEach((m) => {
+    m.state ? m.state = Number(m.state) : delete m.state;
   }), trackId.value = e, r[e] = t, trackList.value = t;
   const l = ["#ff0000", "#00ff00", "#0079ff", "#ffa500", "#800080", "#008080", "#ffc0cb", "#800000", "#000080", "#808000"], c = r[e].map(
-    (u) => transform([u.lon, u.lat], projection.data, projection.mercator)
-  ), s = new LineString(c), m = formatUtils.formatLength(s, o) || "--";
+    (m) => transform([m.lon, m.lat], projection.data, projection.mercator)
+  ), s = new LineString(c), d = formatUtils.formatLength(s, o) || "--";
   nextTick(() => {
     var f, p;
-    const u = (f = showTracks.value) == null ? void 0 : f.findIndex((y) => y.id === e);
-    u < 0 ? showTracks.value.push({ id: e, length: m }) : showTracks.value[u].length = m, ++cursor.value, cursor.value > l.length && (cursor.value = 0), renderTrackLine(r, e, n), nextTick(() => {
+    const m = (f = showTracks.value) == null ? void 0 : f.findIndex((y) => y.id === e);
+    m < 0 ? showTracks.value.push({ id: e, length: d }) : showTracks.value[m].length = d, ++cursor.value, cursor.value > l.length && (cursor.value = 0), renderTrackLine(r, e, n), nextTick(() => {
       resetTrackView(e);
     }).then(() => {
     }), (p = mapInstance$3.value) == null || p.on("moveend", () => {
@@ -1512,14 +1522,14 @@ const trackId = ref(""), cursor = ref(0), renderTrack = (e, t, n, o, i = "ship")
     if (o) {
       const s = o.get("data");
       if (!(s != null && s.time)) return;
-      let m = "";
-      s != null && s.stayTime && (m = `
+      let d = "";
+      s != null && s.stayTime && (d = `
                     <div class="item w-100">
                         <div class="item-label">停泊时间约</div>
                         <div class="item-item">${formatMinutesToDDHHMM(Number(s.stayTime))}</div>
                     </div>
                 `);
-      const d = `
+      const u = `
                 <div class="track-point-popup">
                     <div class="item">
                         <div class="item-label">状态</div>
@@ -1549,10 +1559,10 @@ const trackId = ref(""), cursor = ref(0), renderTrack = (e, t, n, o, i = "ship")
                         <div class="item-label">时间</div>
                         <div class="item-item">${s.time}</div>
                     </div>
-                    ${m ?? m}
-                </div>`, u = (l = mapInstance$3.value) == null ? void 0 : l.getPixelFromCoordinate(n.coordinate);
-      if (u) {
-        const f = drawCustomContent(s.time, u, d, "top-left");
+                    ${d ?? d}
+                </div>`, m = (l = mapInstance$3.value) == null ? void 0 : l.getPixelFromCoordinate(n.coordinate);
+      if (m) {
+        const f = drawCustomContent(s.time, m, u, "top-left");
         f && (e.value = f);
       }
     } else
@@ -1594,13 +1604,13 @@ const trackId = ref(""), cursor = ref(0), renderTrack = (e, t, n, o, i = "ship")
   emits: ["switchGreenDot", "switchMapTile"],
   setup(e, { emit: t }) {
     var p, y;
-    const n = inject("mapInstance"), o = e, i = t, r = ref(((y = (p = n == null ? void 0 : n.value) == null ? void 0 : p.getView()) == null ? void 0 : y.getZoom()) || mapZoom.default), l = ref(!1), c = ref(null), s = ref(!0), m = () => {
+    const n = inject("mapInstance"), o = e, i = t, r = ref(((y = (p = n == null ? void 0 : n.value) == null ? void 0 : p.getView()) == null ? void 0 : y.getZoom()) || mapZoom.default), l = ref(!1), c = ref(null), s = ref(!0), d = () => {
       o.disableGreenDot || r.value >= mapZoom.shipGreenDotMax || (s.value = !s.value, i("switchGreenDot", s.value));
-    }, d = () => {
-      i("switchMapTile", o.mapTileMode === BaseMapType.vector ? BaseMapType.satellite : BaseMapType.vector);
     }, u = () => {
-      var h, g;
-      l.value ? (showMeasure.value = !1, (h = c.value) == null || h.removeInteraction()) : (showMeasure.value = !0, (g = c.value) == null || g.addInteraction()), l.value = !l.value;
+      i("switchMapTile", o.mapTileMode === BaseMapType.vector ? BaseMapType.satellite : BaseMapType.vector);
+    }, m = () => {
+      var h, v;
+      l.value ? (showMeasure.value = !1, (h = c.value) == null || h.removeInteraction()) : (showMeasure.value = !0, (v = c.value) == null || v.addInteraction()), l.value = !l.value;
     }, f = () => {
       var h;
       (h = c.value) == null || h.removeInteraction(), l.value = !1;
@@ -1609,12 +1619,12 @@ const trackId = ref(""), cursor = ref(0), renderTrack = (e, t, n, o, i = "ship")
       nextTick(() => {
         var h;
         (h = n == null ? void 0 : n.value) == null || h.on("moveend", () => {
-          var k, T;
-          const g = (T = (k = n == null ? void 0 : n.value) == null ? void 0 : k.getView()) == null ? void 0 : T.getZoom();
-          g && (r.value = g);
+          var M, S;
+          const v = (S = (M = n == null ? void 0 : n.value) == null ? void 0 : M.getView()) == null ? void 0 : S.getZoom();
+          v && (r.value = v);
         });
       });
-    }), (h, g) => (openBlock(), createElementBlock(Fragment, null, [
+    }), (h, v) => (openBlock(), createElementBlock(Fragment, null, [
       createElementVNode("div", {
         class: normalizeClass(`tool-panel ${h.viewMode}`)
       }, [
@@ -1623,47 +1633,47 @@ const trackId = ref(""), cursor = ref(0), renderTrack = (e, t, n, o, i = "ship")
             h.vehicleMode === "ship" ? (openBlock(), createElementBlock("div", {
               key: 0,
               class: normalizeClass(["switch-btn", `${l.value && "active"}`]),
-              onClick: u
-            }, g[5] || (g[5] = [
+              onClick: m
+            }, v[5] || (v[5] = [
               createElementVNode("i", { class: "map-iconfont icon-measure" }, null, -1),
               createElementVNode("div", { class: "button-text" }, "测距", -1)
             ]), 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"}`),
-              onClick: m
-            }, g[6] || (g[6] = [
+              onClick: d
+            }, v[6] || (v[6] = [
               createElementVNode("i", { class: "map-iconfont icon-ship" }, null, -1),
               createElementVNode("div", { class: "button-text" }, "绿点", -1)
             ]), 2)) : createCommentVNode("", !0),
             h.vehicleMode === "ship" ? (openBlock(), createElementBlock("div", {
               key: 2,
               class: normalizeClass(`switch-btn ${h.mapTileMode === unref(BaseMapType).satellite && "active"}`),
-              onClick: g[0] || (g[0] = (k) => d())
-            }, g[7] || (g[7] = [
+              onClick: v[0] || (v[0] = (M) => u())
+            }, v[7] || (v[7] = [
               createElementVNode("i", { class: "map-iconfont icon-space" }, null, -1),
               createElementVNode("div", { class: "button-text" }, "图层", -1)
             ]), 2)) : createCommentVNode("", !0),
             h.vehicleMode === "truck" ? (openBlock(), createElementBlock("div", {
               key: 3,
               class: normalizeClass(`switch-btn ${h.mapTileMode === unref(BaseMapType).satellite && "active"}`),
-              onClick: g[1] || (g[1] = (k) => d())
-            }, g[8] || (g[8] = [
+              onClick: v[1] || (v[1] = (M) => u())
+            }, v[8] || (v[8] = [
               createElementVNode("i", { class: "map-iconfont icon-space" }, null, -1),
               createElementVNode("div", { class: "button-text" }, "卫星", -1)
             ]), 2)) : createCommentVNode("", !0),
             h.showTrackLayer ? (openBlock(), createElementBlock(Fragment, { key: 4 }, [
               createElementVNode("div", {
                 class: "switch-btn multiple",
-                onClick: g[2] || (g[2] = (k) => unref(playTrack)(unref(currentTrackId), 1))
-              }, g[9] || (g[9] = [
+                onClick: v[2] || (v[2] = (M) => unref(playTrack)(unref(currentTrackId), 1))
+              }, v[9] || (v[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] = (k) => unref(resetTrackView)())
-              }, g[10] || (g[10] = [
+                onClick: v[3] || (v[3] = (M) => unref(resetTrackView)())
+              }, v[10] || (v[10] = [
                 createElementVNode("i", { class: "map-iconfont icon-center" }, null, -1),
                 createElementVNode("div", { class: "button-text" }, "轨迹居中", -1)
               ]))
@@ -1674,24 +1684,24 @@ const trackId = ref(""), cursor = ref(0), renderTrack = (e, t, n, o, i = "ship")
           h.vehicleMode === "ship" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
             createElementVNode("div", {
               class: normalizeClass(["switch-btn", `${l.value && "active"}`]),
-              onClick: u
-            }, g[11] || (g[11] = [
+              onClick: m
+            }, v[11] || (v[11] = [
               createElementVNode("i", { class: "map-iconfont icon-measure" }, null, -1),
               createElementVNode("div", { class: "button-text" }, "测距", -1)
             ]), 2),
             h.vehicleMode === "ship" ? (openBlock(), createElementBlock("div", {
               key: 0,
               class: normalizeClass(`switch-btn ${s.value && "active"} ${(h.disableGreenDot || r.value >= unref(mapZoom).shipGreenDotMax) && "disabled"}`),
-              onClick: m
-            }, g[12] || (g[12] = [
+              onClick: d
+            }, v[12] || (v[12] = [
               createElementVNode("i", { class: "map-iconfont icon-ship" }, null, -1),
               createElementVNode("div", { class: "button-text" }, "绿点", -1)
             ]), 2)) : createCommentVNode("", !0)
           ], 64)) : createCommentVNode("", !0),
           createElementVNode("div", {
             class: normalizeClass(["switch-btn", { active: h.mapTileMode === unref(BaseMapType).satellite }]),
-            onClick: d
-          }, g[13] || (g[13] = [
+            onClick: u
+          }, v[13] || (v[13] = [
             createElementVNode("i", { class: "map-iconfont icon-space" }, null, -1),
             createElementVNode("div", { class: "button-text" }, "卫星", -1)
           ]), 2)
@@ -1703,7 +1713,7 @@ const trackId = ref(""), cursor = ref(0), renderTrack = (e, t, n, o, i = "ship")
           ref_key: "measureRef",
           ref: c,
           visible: l.value,
-          "onUpdate:visible": g[4] || (g[4] = (k) => l.value = k),
+          "onUpdate:visible": v[4] || (v[4] = (M) => l.value = M),
           onClose: f,
           "view-mode": h.viewMode
         }, null, 8, ["visible", "view-mode"])) : createCommentVNode("", !0)
@@ -1791,25 +1801,25 @@ const setTruckStyle = (e, t, n, o) => new Style({
     l.save();
     let c = 1;
     l.scale(c, c);
-    let [s, m] = i;
-    s = Number(s) / c - 20, m = Number(m) / c;
-    const d = s - 70, u = m - 68;
+    let [s, d] = i;
+    s = Number(s) / c - 20, d = Number(d) / c;
+    const u = s - 70, m = d - 68;
     let f = 180;
     const p = 56, y = "#FFFFFF";
     let h = 176;
-    const g = 52;
-    let k = "#164AFF", T = "#FFFFFF";
-    n === CAR_COLOR.YELLOW ? (h = 176, k = "#FFC81E", T = "rgba(0,0,0,0.88)") : n === CAR_COLOR.Y_GREEN && (f = 200, h = 196, k = "#8FED7C", T = "rgba(0,0,0,0.88)"), o != null && o.length && (f += o.length * 56), fillRectRadius(l, d, u, f, p, y), fillRectRadius(l, d + 2, u + 2, h, g, k), n === CAR_COLOR.Y_GREEN && fillRectRadius(l, d + 2, u + 2, 68, g, "#FFC81E"), l.save(), l.restore(), l.fillStyle = T, l.font = "bold 28px Arial", l.textAlign = "left", l.textBaseline = "middle";
-    const I = `${t.slice(0, 2) + " · " + t.slice(2)}`;
-    if (l.fillText(I, d + 12, u + 32), l.save(), l.restore(), o != null && o.length) {
-      const V = l.measureText(I).width + 12;
-      let P = 0;
-      o.forEach((v) => {
-        v === DEVICE_TYPE.CAMERA && (l.drawImage(cameraImage, s - 54 + V + P * 56, m - 64, 50, 50), ++P), v === DEVICE_TYPE.LOAD && (l.drawImage(loadImage, s - 54 + V + P * 56, m - 64, 50, 50), ++P);
+    const v = 52;
+    let M = "#164AFF", S = "#FFFFFF";
+    n === CAR_COLOR.YELLOW ? (h = 176, M = "#FFC81E", S = "rgba(0,0,0,0.88)") : n === CAR_COLOR.Y_GREEN && (f = 200, h = 196, M = "#8FED7C", S = "rgba(0,0,0,0.88)"), o != null && o.length && (f += o.length * 56), fillRectRadius(l, u, m, f, p, y), fillRectRadius(l, u + 2, m + 2, h, v, M), n === CAR_COLOR.Y_GREEN && fillRectRadius(l, u + 2, m + 2, 68, v, "#FFC81E"), l.save(), l.restore(), l.fillStyle = S, l.font = "bold 28px Arial", l.textAlign = "left", l.textBaseline = "middle";
+    const V = `${t.slice(0, 2) + " · " + t.slice(2)}`;
+    if (l.fillText(V, u + 12, m + 32), l.save(), l.restore(), o != null && o.length) {
+      const P = l.measureText(V).width + 12;
+      let x = 0;
+      o.forEach((g) => {
+        g === DEVICE_TYPE.CAMERA && (l.drawImage(cameraImage, s - 54 + P + x * 56, d - 64, 50, 50), ++x), g === DEVICE_TYPE.LOAD && (l.drawImage(loadImage, s - 54 + P + x * 56, d - 64, 50, 50), ++x);
       });
     }
-    const F = dotImage$1;
-    l.drawImage(F, s + f / 2 - 90, m, 50 / c, 50 / c), l.restore();
+    const C = dotImage$1;
+    l.drawImage(C, s + f / 2 - 90, d, 50 / c, 50 / c), l.restore();
   }
 }), mapInstance$2 = ref(), renderDashboardSetInstance = (e) => mapInstance$2.value = e;
 ref([]);
@@ -1836,19 +1846,19 @@ const renderTrucksMarker = (e) => {
   truckMarkerList.forEach((e) => {
     e.feature && (trucksVectorSource == null || trucksVectorSource.removeFeature(e.feature));
   }), truckMarkerList = [];
-}, mapInstance$1 = ref(), renderTruckSetInstance = (e) => mapInstance$1.value = e, vehicle = ref(null), focusShipData = ref(), currentTruckOverlay = ref(null), findTruck = async (e) => {
+}, mapInstance$1 = ref(), renderTruckSetInstance = (e) => mapInstance$1.value = e, vehicle = ref(null), focusShipData = ref(), currentTruckOverlay = ref(null), findTruck = async (e, t) => {
   if (!mapInstance$1.value || (focusShipData.value = e, !(e != null && e.lon && (e != null && e.lat)))) return;
-  const t = formatUtils.convertSixHundredThousandToLatLng(e.lon, e.lat), n = mapInstance$1.value.getPixelFromCoordinate(transform(t, projection.data, projection.mercator));
-  currentTruckOverlay.value = e ? drawTruckIcon(e.vno, n, (e == null ? void 0 : e.drc) ?? "") ?? null : null;
-  const o = mapInstance$1.value.getView(), i = new Point(t);
-  o.setCenter(transform(i.getCoordinates(), projection.data, projection.mercator));
+  const n = Math.abs(Number(e.lon)) > 180 ? formatUtils.convertSixHundredThousandToLatLng(e.lon, e.lat) : [e.lon, e.lat], o = mapInstance$1.value.getPixelFromCoordinate(transform(n, projection.data, projection.mercator));
+  currentTruckOverlay.value = e ? drawTruckIcon(e.vno, o, (e == null ? void 0 : e.drc) ?? "", t) ?? null : null;
+  const i = mapInstance$1.value.getView(), r = new Point(n);
+  i.setCenter(transform(r.getCoordinates(), projection.data, projection.mercator));
 }, clearAllTruck = () => {
   vehicle.value.clearAllShip();
-}, drawTruckIcon = (e, t, n) => {
-  const o = `<div id="${e}" class="ol-custom-content truck-custom-content" style="width: 80px; height: 80px; transform: rotate(${n}deg);">
+}, drawTruckIcon = (e, t, n, o) => {
+  let i = `<div id="${e}" class="ol-custom-content truck-custom-content" style="width: 80px; height: 80px; transform: rotate(${n}deg);">
           <img src="${CDN_URL}map/car-icon.gif" width="100%" height="100%" />
         </div>`;
-  return drawCustomContent(e, t, o, "center-center");
+  return o && (i += o), drawCustomContent(e, t, i, "center-center");
 }, removeTruckIcon = () => {
   var t;
   const e = (t = currentTruckOverlay.value) == null ? void 0 : t.getElement();
@@ -1910,8 +1920,8 @@ let squareLimitError = !1, lineLimitError = !1;
 const validateSquareLimit = (e) => {
   let n = 1 / 0, o = -1 / 0, i = 1 / 0, r = -1 / 0;
   e == null || e.forEach((s) => {
-    const m = transform(s, projection.mercator, projection.data), d = m[0], u = m[1];
-    n = Math.min(n, u), o = Math.max(o, u), i = Math.min(i, d), r = Math.max(r, d);
+    const d = transform(s, projection.mercator, projection.data), u = d[0], m = d[1];
+    n = Math.min(n, m), o = Math.max(o, m), i = Math.min(i, u), r = Math.max(r, u);
   });
   const l = (o - n) * 111, c = (r - i) * 111;
   squareLimitError = l > 150 || c > 150;
@@ -1929,14 +1939,14 @@ const addInteraction = (e) => {
   draw.on("drawstart", function(i) {
     var r;
     layerState = "drawn", sketch = i.feature, t = (r = sketch.getGeometry()) == null ? void 0 : r.on("change", function(l) {
-      const c = l.target, s = formatUtils.formatArea(c, LENGTH_UNIT.NM), d = c.getCoordinates()[0], u = new LineString([d[d.length - 2], d[d.length - 1]]), f = formatUtils.formatLength(u, LENGTH_UNIT.NM);
-      if (lineLimitError = Number(getLength(u) / 1e3) > 150, validateSquareLimit(d), measureTooltipElement && s && (measureTooltipElement.innerHTML = `
+      const c = l.target, s = formatUtils.formatArea(c, LENGTH_UNIT.NM), u = c.getCoordinates()[0], m = new LineString([u[u.length - 2], u[u.length - 1]]), f = formatUtils.formatLength(m, LENGTH_UNIT.NM);
+      if (lineLimitError = Number(getLength(m) / 1e3) > 150, validateSquareLimit(u), measureTooltipElement && s && (measureTooltipElement.innerHTML = `
                 <span class="text">面积：${s}${lineLimitError || squareLimitError ? '<span class="error pl-12">超出可以绘画的距离</span>' : ""}</span>
             `), helpTooltipElement && s) {
         let p = "";
         parseFloat(s) > 0 && (p = `
                         <div class="text ${squareLimitError ? "error" : ""}">面积：${s}${squareLimitError ? '<span class="error pl-12">超出可以绘画的距离</span>' : ""}</div>`), helpTooltipElement.innerHTML = `${p}
-                    <span class="text ${lineLimitError ? "error" : ""}">线段${d.length - 2}：${f}${lineLimitError ? '<span class="error pl-4">超出可以绘画的距离</span>' : ""}</span>
+                    <span class="text ${lineLimitError ? "error" : ""}">线段${u.length - 2}：${f}${lineLimitError ? '<span class="error pl-4">超出可以绘画的距离</span>' : ""}</span>
                     <div><span class="text">单击继续，双击结束</span></div>
                 `;
       }
@@ -2034,17 +2044,20 @@ const setPointStyle = (e, t, n) => {
   const { color: o, url: i, activeUrl: r, activeColor: l } = n;
   return (r || i) && (e ? dotActiveImage.src = CDN_URL + (r || i) : dotImage.src = CDN_URL + (i || r)), new Style({
     renderer: (c, s) => {
-      const m = s.context;
-      m.save();
-      const d = window.devicePixelRatio || 1;
-      let [u, f] = c;
-      u = Number(u), f = Number(f), m.font = `${12 * d}px Arial`;
-      const p = m.measureText(t).width, y = u - p / 2 - (d <= 1 ? 8 : d), h = f + 6 * d, g = p + 4, k = 16 * d, T = e && l || o;
-      if (fillRectRadius(m, y, h + 13 * d, g, k, T), m.save(), m.restore(), m.fillStyle = e ? "#FFFFFF" : "#000000", m.textAlign = "center", m.textBaseline = "middle", m.fillText(t, y + (p + 4) / 2, h + 22 * d), m.save(), m.restore(), i || r) {
-        const I = e ? dotActiveImage : dotImage;
-        m.drawImage(I, u - I.width / 2, f - I.height / 2, 30 * d, 30 * d);
+      const d = s.context;
+      d.save();
+      const u = window.devicePixelRatio || 1;
+      let [m, f] = c;
+      if (m = Number(m), f = Number(f), t) {
+        d.font = `${12 * u}px Arial`;
+        const p = d.measureText(t).width, y = m - p / 2 - (u <= 1 ? 8 : u), h = f + 6 * u, v = p + 4, M = 16 * u, S = e && l || o;
+        fillRectRadius(d, y, h + 13 * u, v, M, S), d.save(), d.restore(), d.fillStyle = e ? "#FFFFFF" : "#000000", d.textAlign = "center", d.textBaseline = "middle", d.fillText(t, y + (p + 4) / 2, h + 22 * u), d.save(), d.restore();
+      }
+      if (i || r) {
+        const p = e ? dotActiveImage : dotImage;
+        d.drawImage(p, m - p.width / 2, f - p.height / 2, 30 * u, 30 * u);
       }
-      m.restore();
+      d.restore();
     }
   });
 };
@@ -2066,6 +2079,27 @@ class PointMarkerClass {
     b(this, "pointLayer");
     // 颜色等其他设置
     b(this, "options");
+    // 使用坐标点区域自动缩放地图层级
+    b(this, "resetPointsView", (t) => {
+      var r;
+      if (!this.mapInstance || t.length === 0) return;
+      const n = (r = this.mapInstance) == null ? void 0 : r.getView();
+      if (!n) return;
+      const i = t.map(
+        (l) => transform(l, projection.data, projection.mercator)
+      ).reduce((l, c) => [
+        Math.min(l[0], c[0]),
+        Math.min(l[1], c[1]),
+        Math.max(l[2], c[0]),
+        Math.max(l[3], c[1])
+      ], [1 / 0, 1 / 0, -1 / 0, -1 / 0]);
+      try {
+        const l = buffer(i, Math.max(i[2] - i[0], i[3] - i[1]) * 0.02);
+        n.fit(l);
+      } catch (l) {
+        console.error("Failed to zoom to points:", l);
+      }
+    });
     this.mapInstance = t, this.options = n;
   }
   /**
@@ -2084,7 +2118,7 @@ class PointMarkerClass {
    * pointType
    */
   renderPointMarker(t) {
-    if (this.deleteAllPointMarkers(), !this.mapInstance) return;
+    if (!this.mapInstance) return;
     let n = {};
     t.forEach((o) => {
       var r;
@@ -2198,15 +2232,15 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   setup(e, { expose: t, emit: n }) {
     const o = ref();
     provide("mapInstance", o);
-    const i = ref(null), r = ref(null), l = ref(null), c = n, s = e, m = ref(s.zoom || mapZoom.default), d = ref(!1), u = ref(!0), f = ref(!0), p = {
+    const i = ref(null), r = ref(null), l = ref(null), c = n, s = e, d = ref(s.zoom || mapZoom.default), u = ref(!1), m = 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 = {
+      var w, L;
+      const g = {
         projection: projection.mercator,
         // 地图投影坐标系
         zoom: s.zoom || (s.vehicleMode === "ship" ? mapZoom.default : mapZoom.truckDefault),
@@ -2234,8 +2268,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           p.tiandituImgTileMark,
           p.greenMark
         ],
-        view: new View(v)
-      }), h(), (L = r.value) == null || L.setScaleLine(s.vehicleMode === "ship" ? "nautical" : "metric"), (w = o.value) == null || w.on("moveend", I), g(v.zoom < mapZoom.shipGreenDotMax), T(s.vehicleMode === "ship" || s.viewMode === "findShip" ? BaseMapType.satellite : BaseMapType.vector), s.viewMode === "findShip" && s.mmsi && s.shipData && nextTick(() => {
+        view: new View(g)
+      }), h(), (w = r.value) == null || w.setScaleLine(s.vehicleMode === "ship" ? "nautical" : "metric"), (L = o.value) == null || L.on("moveend", V), v(g.zoom < mapZoom.shipGreenDotMax), S(s.vehicleMode === "ship" || s.viewMode === "findShip" ? BaseMapType.satellite : BaseMapType.vector), s.viewMode === "findShip" && s.mmsi && s.shipData && nextTick(() => {
         findShip(String(s.mmsi), s.shipData);
       }), onShipsMarkerHover();
     };
@@ -2244,86 +2278,87 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     });
     const h = () => {
       o.value && (renderCustomOverlaySetInstance(o.value), renderTruckSetInstance(o.value), drawPolygonSetInstance(o.value), renderShipStyleSetInstance(o.value), renderTrackStyleSetInstance(o.value), renderDashboardSetInstance(o.value), renderMarkerSetInstance(o.value), renderShipSetInstance(o.value), renderTrackSetInstance(o.value));
-    }, g = (v) => {
-      var L;
-      s.vehicleMode !== "ship" && (v = !1), (L = o.value) == null || L.getLayers().forEach((w) => {
-        getUid(w) === getUid(p.greenMark) && (w.setVisible(v), u.value = v);
+    }, v = (g) => {
+      var w;
+      s.vehicleMode !== "ship" && (g = !1), (w = o.value) == null || w.getLayers().forEach((L) => {
+        getUid(L) === getUid(p.greenMark) && (L.setVisible(g), m.value = g);
       });
-    }, k = ref(BaseMapType.satellite), T = (v) => {
-      var L;
-      k.value = v, (L = o.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);
+    }, M = ref(BaseMapType.satellite), S = (g) => {
+      var w;
+      M.value = g, (w = o.value) == null || w.getLayers().forEach((L) => {
+        (getUid(L) === getUid(p.tiandituTile) || getUid(L) === getUid(p.tiandituTileMark) || getUid(L) === getUid(p.tiandituImgTile) || getUid(L) === getUid(p.tiandituImgTileMark)) && L.setVisible(!1), (g === BaseMapType.vector && (getUid(L) === getUid(p.tiandituTile) || getUid(L) === getUid(p.tiandituTileMark)) || g === BaseMapType.satellite && (getUid(L) === getUid(p.tiandituImgTile) || getUid(L) === getUid(p.tiandituImgTileMark))) && L.setVisible(!0);
       });
-    }, I = () => {
-      const v = o.value.getView(), L = v.getZoom();
-      L && F(L);
-      const w = v.calculateExtent(o.value.getSize());
-      w && L && V(w, L);
-    }, F = (v) => {
-      var S, M, C, E, x;
-      m.value = v, g(v < mapZoom.shipGreenDotMax);
-      const L = (S = o.value) == null ? void 0 : S.getLayers(), w = s.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), (M = shipsLayer.value) == null || M.setVisible(!1), (C = largeAmountShipsLayer.value) == null || C.setVisible(!1)) : !d.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)), c("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);
-      c("extentChanged", { extent: [w, S], zoom: L });
+    }, V = () => {
+      const g = o.value.getView(), w = g.getZoom();
+      w && C(w);
+      const L = g.calculateExtent(o.value.getSize());
+      L && w && P(L, w);
+    }, C = (g) => {
+      var k, T, E, I, F;
+      d.value = g, v(g < mapZoom.shipGreenDotMax);
+      const w = (k = o.value) == null ? void 0 : k.getLayers(), L = s.vehicleMode === "ship" ? w == null ? void 0 : w.getArray().find(($) => getUid($) === getUid(p.greenMark)) : void 0;
+      showTrackLayer.value ? (f.value = !1, L == null || L.setVisible(!1), (T = shipsLayer.value) == null || T.setVisible(!1), (E = largeAmountShipsLayer.value) == null || E.setVisible(!1)) : !u.value && m.value && g <= mapZoom.shipGreenDotMax ? (f.value = !0, L == null || L.setVisible(!0), (I = shipsLayer.value) == null || I.setVisible(!1), (F = largeAmountShipsLayer.value) == null || F.setVisible(!1)) : (f.value = !1, L == null || L.setVisible(!1)), c("zoomChanged", g);
+    }, P = (g, w) => {
+      const L = transform([g[0], g[1]], projection.mercator, projection.data), k = transform([g[2], g[3]], projection.mercator, projection.data);
+      c("extentChanged", { extent: [L, k], zoom: w });
     };
     return t({
       mapInstance: o,
       initMap: y,
-      pointRender: (v, L) => new PointMarkerClass(v, L),
+      pointRender: (g, w) => new PointMarkerClass(g, w),
       renderTrucksMarker,
       renderShip: renderShips,
-      renderTrack: (v, L, w) => {
-        var S, M;
-        currentTrackId.value = v, showTrackLayer.value = !0, d.value = !0, hiddenAllShips(), (M = (S = largeAmountShipsLayer.value) == null ? void 0 : S.getSource()) == null || M.clear(), renderTrack(v, s.vehicleMode === "ship" ? L.reverse() : L, w, LENGTH_UNIT.NM);
+      renderTrack: (g, w, L) => {
+        var k, T;
+        currentTrackId.value = g, showTrackLayer.value = !0, u.value = !0, hiddenAllShips(), (T = (k = largeAmountShipsLayer.value) == null ? void 0 : k.getSource()) == null || T.clear(), renderTrack(g, s.vehicleMode === "ship" ? w.reverse() : w, L, LENGTH_UNIT.NM);
       },
       findTruck,
       removeTruckIcon,
       clearAllTruck,
       closeTrack: () => {
-        var v, L;
-        showTrackLayer.value = !1, (v = shipTrackVectorLayer.value) == null || v.setVisible(!1), (L = selectShipsLayer.value) == null || L.setVisible(!0), d.value = !1, g(m.value < mapZoom.shipGreenDotMax), allTracks.value = [], stopAnimation();
+        var g, w;
+        showTrackLayer.value = !1, (g = shipTrackVectorLayer.value) == null || g.setVisible(!1), (w = selectShipsLayer.value) == null || w.setVisible(!0), u.value = !1, v(d.value < mapZoom.shipGreenDotMax), allTracks.value = [], stopAnimation();
       },
       closeTruckTrack: () => {
-        var v, L;
-        showTrackLayer.value = !1, (v = shipTrackVectorLayer.value) == null || v.setVisible(!1), (L = selectShipsLayer.value) == null || L.setVisible(!0), stopAnimation();
+        var g, w;
+        showTrackLayer.value = !1, (g = shipTrackVectorLayer.value) == null || g.setVisible(!1), (w = selectShipsLayer.value) == null || w.setVisible(!0), stopAnimation();
       },
       resetTrackView,
       playTrack,
       clearSelectFeature,
       findShip,
-      focusShip: (v, L, w = !0) => {
-        var S, M;
-        hiddenOrther.value = w, (S = shipsLayer.value) == null || S.setVisible(!w), (M = largeAmountShipsLayer.value) == null || M.setVisible(!1), findShip(v, L);
+      focusShip: (g, w, L = !0) => {
+        var k, T;
+        hiddenOrther.value = L, (k = shipsLayer.value) == null || k.setVisible(!L), (T = largeAmountShipsLayer.value) == null || T.setVisible(!1), findShip(g, w);
       },
       showTracks,
       removeAllTrackLayer,
       switchFilterItem,
       rerenderShip,
-      switchGreenDot: () => g(!1),
+      switchGreenDot: () => v(!1),
       zoomTruckIcon,
-      renderTruckTrack: (v, L, w) => {
-        showTrackLayer.value = !0, renderTrack(v, L, w, LENGTH_UNIT.KM, "truck");
+      renderTruckTrack: (g, w, L) => {
+        showTrackLayer.value = !0, renderTrack(g, w, L, LENGTH_UNIT.KM, "truck");
       },
+      drawCustomContent,
       removerLayer: removeShipTrackLineFeatureByIndex,
       renderMarker,
-      setMarkerPosition: (v) => {
-        d.value = !0, setMarkerPosition(v);
+      setMarkerPosition: (g) => {
+        u.value = !0, setMarkerPosition(g);
       },
       getZoomAndCenter: () => {
-        var M;
-        const v = (M = o.value) == null ? void 0 : M.getView();
-        if (!v) return null;
-        const L = Math.round(Number(v.getZoom())), { lon: w, lat: S } = transformUtils.mercatorToLonLat(v.getCenter());
-        return { zoom: L, center: [w, S] };
+        var T;
+        const g = (T = o.value) == null ? void 0 : T.getView();
+        if (!g) return null;
+        const w = Math.round(Number(g.getZoom())), { lon: L, lat: k } = transformUtils.mercatorToLonLat(g.getCenter());
+        return { zoom: w, center: [L, k] };
       },
-      setCenter: (v) => {
-        var S;
-        const L = (S = o.value) == null ? void 0 : S.getView();
-        if (!L) return null;
-        const w = new Point(v);
-        L.setCenter(transform(w.getCoordinates(), projection.data, projection.mercator));
+      setCenter: (g) => {
+        var k;
+        const w = (k = o.value) == null ? void 0 : k.getView();
+        if (!w) return null;
+        const L = new Point(g);
+        w.setCenter(transform(L.getCoordinates(), projection.data, projection.mercator));
       },
       drawPolygonTool,
       setMapInstance: h,
@@ -2338,30 +2373,30 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         transform: transformUtils,
         format: formatUtils
       }
-    }), (v, L) => (openBlock(), createElementBlock("div", {
+    }), (g, w) => (openBlock(), createElementBlock("div", {
       class: "map-page map-container",
       ref_key: "pageRef",
       ref: i
     }, [
-      L[0] || (L[0] = createElementVNode("div", {
+      w[0] || (w[0] = createElementVNode("div", {
         id: "map",
         class: "map"
       }, null, -1)),
       createVNode(ToolPanel, {
-        "vehicle-mode": v.vehicleMode,
-        "view-mode": v.viewMode,
-        "disable-green-dot": d.value,
+        "vehicle-mode": g.vehicleMode,
+        "view-mode": g.viewMode,
+        "disable-green-dot": u.value,
         "show-track-layer": unref(showTrackLayer),
-        "map-tile-mode": k.value,
-        onSwitchGreenDot: g,
-        onSwitchMapTile: T
+        "map-tile-mode": M.value,
+        onSwitchGreenDot: v,
+        onSwitchMapTile: S
       }, {
         toolPanel: withCtx(() => [
-          renderSlot(v.$slots, "toolPanel", {}, void 0, !0)
+          renderSlot(g.$slots, "toolPanel", {}, void 0, !0)
         ]),
         _: 3
       }, 8, ["vehicle-mode", "view-mode", "disable-green-dot", "show-track-layer", "map-tile-mode"]),
-      v.viewMode !== "WxMiniprogram" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+      g.viewMode !== "WxMiniprogram" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
         createVNode(ScaleLine, {
           ref_key: "scaleLineControl",
           ref: r
@@ -2372,12 +2407,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         }, null, 512)
       ], 64)) : createCommentVNode("", !0),
       createVNode(Copyright, {
-        type: v.logoType,
-        "map-tile": k.value
+        type: g.logoType,
+        "map-tile": M.value
       }, null, 8, ["type", "map-tile"])
     ], 512));
   }
-}), Map = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-c9c5f065"]]), ZhMap = withInstall(Map);
+}), Map = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-0cb9105e"]]), ZhMap = withInstall(Map);
 export {
   BaseMapType as B,
   CDN_URL as C,