zhihao-ui 1.2.26 → 1.2.28

package/dist/es/{Map-DhceUygQ.js → Map-Bq9kPMot.js}

@@ -1,114 +1,117 @@
-var B = Object.defineProperty;
-var R = (e, t, o) => t in e ? B(e, t, { enumerable: !0, configurable: !0, writable: !0, value: o }) : e[t] = o;
-var I = (e, t, o) => R(e, typeof t != "symbol" ? t + "" : t, o);
+var R = Object.defineProperty;
+var A = (e, t, n) => t in e ? R(e, t, { enumerable: !0, configurable: !0, writable: !0, value: n }) : e[t] = n;
+var S = (e, t, n) => A(e, typeof t != "symbol" ? t + "" : t, n);
+import { n as getArea, o as getLength, V as VectorSource, p as VectorLayer, S as Style, C as CircleStyle, F as Fill, q as Stroke, D as Draw, O as Overlay, u as unByKey, r as ElSelect, s as ElOption, T as Text, t as fromLonLat, v as transformExtent, h as hooks, L as LineString, w as Feature, P as Point, x as Polyline, y as getVectorContext, e as cloneDeep, G as GeoJSON, W as WebGLPointsLayer, z as Circle, A as transform, B as buffer, H as ScaleLine$1, I as Icon, J as Translate, K as toLonLat, M as MultiPoint, N as getCenter, Q as TileLayer, X as XYZ, R as Map$1, U as View } from "./vendor-BhAIOWbw.js";
 import { defineComponent, inject, useModel, ref, watch, openBlock, createElementBlock, createElementVNode, createVNode, unref, withCtx, Fragment, renderList, toDisplayString, createCommentVNode, mergeModels, nextTick, onMounted, normalizeClass, renderSlot, createBlock, provide } from "vue";
-import { n as getArea, o as getLength, V as VectorSource, p as VectorLayer, S as Style, C as CircleStyle, F as Fill, q as Stroke, D as Draw, O as Overlay, u as unByKey, r as ElSelect, s as ElOption, T as Text, t as fromLonLat, v as transformExtent, h as hooks, L as LineString, w as Feature, P as Point, x as Polyline, y as getVectorContext, e as cloneDeep, G as GeoJSON, W as WebGLPointsLayer, z as transform, A as buffer, B as ScaleLine$1, I as Icon, H as Translate, J as toLonLat, M as MultiPoint, K as getCenter, N as TileLayer, X as XYZ, Q as Map$1, R as View } from "./vendor-gTOtiVzA.js";
-import { _ as _export_sfc } from "./Button-Va8xfPJd.js";
-import { w as withInstall } from "./utils-D-zYpBSZ.js";
-var BaseMapType = /* @__PURE__ */ ((e) => (e[e.vector = 0] = "vector", e[e.satellite = 1] = "satellite", e))(BaseMapType || {}), 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 || {});
+import { _ as _export_sfc } from "./Button-CzjgaPIL.js";
+import { w as withInstall } from "./utils-BIGjF-zg.js";
+var BaseMapType = /* @__PURE__ */ ((e) => (e[e.vector = 0] = "vector", e[e.satellite = 1] = "satellite", e))(BaseMapType || {}), CAR_COLOR = /* @__PURE__ */ ((e) => (e[e.BLUE = 1] = "BLUE", e[e.YELLOW = 2] = "YELLOW", e[e.Y_GREEN = 3] = "Y_GREEN", e))(CAR_COLOR || {}), DEVICE_TYPE = /* @__PURE__ */ ((e) => (e[e.HOST = 1] = "HOST", e[e.TALK = 2] = "TALK", e[e.STORAGE = 3] = "STORAGE", e[e.INTERNET = 4] = "INTERNET", e[e.CAMERA = 5] = "CAMERA", e[e.LOAD = 6] = "LOAD", e))(DEVICE_TYPE || {}), LENGTH_UNIT = /* @__PURE__ */ ((e) => (e[e.M = 1] = "M", e[e.KM = 2] = "KM", e[e.NM = 3] = "NM", e))(LENGTH_UNIT || {}), SWITCH_BTN = /* @__PURE__ */ ((e) => (e.Camera = "camera", e.Mobile = "mobile", e.WaterGauge = "waterGauge", e))(SWITCH_BTN || {}), SHIP_SAIL_STATUS = /* @__PURE__ */ ((e) => (e[e.发动机使用中 = 0] = "发动机使用中", e[e.锚泊 = 1] = "锚泊", e[e.未操作 = 2] = "未操作", e[e.操纵能力受限 = 3] = "操纵能力受限", e[e.吃水受限 = 4] = "吃水受限", e[e.系泊 = 5] = "系泊", e[e.搁浅 = 6] = "搁浅", e[e.从事捕捞 = 7] = "从事捕捞", e[e.航行中 = 8] = "航行中", e[e.留作将来修正导航状态 = 9] = "留作将来修正导航状态", e[e.高速船留用 = 10] = "高速船留用", e[e.机动船尾推作业 = 11] = "机动船尾推作业", e[e.机动船顶推或侧推作业 = 12] = "机动船顶推或侧推作业", e[e.飞翼船留用 = 13] = "飞翼船留用", e[e.现行的 = 14] = "现行的", e[e.未定义 = 15] = "未定义", e))(SHIP_SAIL_STATUS || {});
 class ShipMapData {
-  constructor(t, o, n, r, l, i, s, c, d, m, u, f, p, y, h, g, L, T, b, C, F, v, S) {
-    I(this, "id");
+  constructor(t, n, o, r, l, i, s, c, d, m, u, f, p, y, h, g, M, T, b, C, x, v, w, k) {
+    S(this, "id");
     // mmsi
-    I(this, "mmsi");
+    S(this, "mmsi");
     // 船舶三角形填充色
-    I(this, "fill");
+    S(this, "fill");
     // 船类型 "7": "货船",
-    I(this, "shipType");
+    S(this, "shipType");
     // 船名
-    I(this, "name");
+    S(this, "name");
     // 长度
-    I(this, "length");
+    S(this, "length");
     // 宽度
-    I(this, "breadth");
+    S(this, "breadth");
     // 经度
-    I(this, "lon");
+    S(this, "lon");
     // 纬度
-    I(this, "lat");
+    S(this, "lat");
     // 时间
-    I(this, "createdAt");
+    S(this, "createdAt");
     // 速度
-    I(this, "speed");
+    S(this, "speed");
     // 来源
-    I(this, "from");
+    S(this, "from");
     // 船状态 "stop":"静止","sail":"航行","work":"作业","danger":"危险","other":"其他"
-    I(this, "sailStatus");
+    S(this, "sailStatus");
     // 船艏向
-    I(this, "hdg");
+    S(this, "hdg");
     // 航迹向
-    I(this, "cog");
+    S(this, "cog");
     // 设备定位类型
-    I(this, "posType");
-    I(this, "type");
+    S(this, "posType");
+    S(this, "type");
     // 航向角度
-    I(this, "angle");
+    S(this, "angle");
     // 左侧是否显示色块
-    I(this, "leftIconColor");
-    I(this, "existDevice");
-    I(this, "existMobile");
-    I(this, "existWaterGauge");
-    I(this, "selected");
-    this.id = t, this.mmsi = o, this.fill = n, this.shipType = r, this.name = l, this.length = i, this.breadth = s, this.lon = c, this.lat = d, this.createdAt = m, this.speed = u, this.from = f, this.sailStatus = p, this.hdg = y, this.cog = h, this.posType = g, this.type = L, this.angle = T, this.leftIconColor = b, this.existDevice = C, this.existMobile = F, this.existWaterGauge = v, this.selected = S;
+    S(this, "leftIconColor");
+    S(this, "existDevice");
+    S(this, "existMobile");
+    S(this, "existWaterGauge");
+    S(this, "selected");
+    S(this, "blinkColors");
+    this.id = t, this.mmsi = n, this.fill = o, this.shipType = r, this.name = l, this.length = i, this.breadth = s, this.lon = c, this.lat = d, this.createdAt = m, this.speed = u, this.from = f, this.sailStatus = p, this.hdg = y, this.cog = h, this.posType = g, this.type = M, this.angle = T, this.leftIconColor = b, this.existDevice = C, this.existMobile = x, this.existWaterGauge = v, this.selected = w, this.blinkColors = k;
   }
 }
 const formatLength = function(e, t) {
-  const n = getLength(e);
+  const o = getLength(e);
   let r = "";
   switch (t) {
     case LENGTH_UNIT.M:
-      r = Math.round(n * 100) / 100 + " m";
+      r = Math.round(o * 100) / 100 + " m";
       break;
     case LENGTH_UNIT.KM:
-      r = Math.round(n / 1e3 * 100) / 100 + " km";
+      r = Math.round(o / 1e3 * 100) / 100 + " km";
       break;
     case LENGTH_UNIT.NM:
-      r = (Math.round(n / 1e3 * 100) / 100 / 1.852).toFixed(2) + " nm";
+      r = (Math.round(o / 1e3 * 100) / 100 / 1.852).toFixed(2) + " nm";
       break;
   }
   return r;
 }, convertSixHundredThousandToLatLng = function(e, t) {
-  const o = Number(t) / 6e5;
-  return [Number(e) / 6e5, o];
+  const n = Number(t) / 6e5;
+  return [Number(e) / 6e5, n];
 }, formatArea = (e, t) => {
-  const n = getArea(e);
+  const o = getArea(e);
   let r;
   switch (t) {
     case LENGTH_UNIT.KM:
-      n > 1e4 ? r = Math.round(n / 1e6 * 100) / 100 + " km<sup>2</sup>" : r = Math.round(n * 100) / 100 + " m<sup>2</sup>";
+      o > 1e4 ? r = Math.round(o / 1e6 * 100) / 100 + " km<sup>2</sup>" : r = Math.round(o * 100) / 100 + " m<sup>2</sup>";
       break;
     case LENGTH_UNIT.NM:
       const l = Math.pow(1.852, 2);
-      n > 1e4 ? r = Math.round(n / 1e6 / l * 100) / 100 + " nm<sup>2</sup>" : r = Math.round(n * 100) / 100 + " m<sup>2</sup>";
+      o > 1e4 ? r = Math.round(o / 1e6 / l * 100) / 100 + " nm<sup>2</sup>" : r = Math.round(o * 100) / 100 + " m<sup>2</sup>";
       break;
   }
   return r;
 }, convertShipMapData = (e) => {
-  const t = (o) => new ShipMapData(
-    o.id,
-    o.id,
+  const t = (n) => new ShipMapData(
+    n.id,
+    n.id,
     // 船舶三角形填充色
-    o.fill || "#04C900",
+    n.fill || "#04C900",
     "70",
-    (o.cnname || o.enname || o.name) + `${o.existName ? o.existName : ""}`,
-    o.len || o.length,
-    o.wid || o.breadth,
-    o.lon,
-    o.lat,
+    (n.cnname || n.enname || n.name) + `${n.existName ? n.existName : ""}`,
+    n.len || n.length,
+    n.wid || n.breadth,
+    n.lon,
+    n.lat,
     (/* @__PURE__ */ new Date()).getTime(),
-    o.spd,
-    o.from,
-    o.status,
-    Number(o.hdg),
-    o.cog,
-    Number(o.postype),
+    n.spd,
+    n.from,
+    n.status,
+    Number(n.hdg),
+    n.cog,
+    Number(n.postype),
     "other",
-    o.cog,
-    o.leftIconColor,
-    o.existDevice,
-    o.existMobile,
-    o.existWaterGauge
+    n.cog,
+    n.leftIconColor,
+    n.existDevice,
+    n.existMobile,
+    n.existWaterGauge,
+    n.selected,
+    n.blinkColors
   );
-  return Array.isArray(e) ? e.map((o) => t(o)) : t(e);
+  return Array.isArray(e) ? e.map((n) => t(n)) : t(e);
 }, formatUtils = {
   formatLength,
   convertSixHundredThousandToLatLng,
@@ -125,8 +128,8 @@ const formatLength = function(e, t) {
     visibleModifiers: {}
   }),
   emits: /* @__PURE__ */ mergeModels(["close"], ["update:visible"]),
-  setup(e, { expose: t, emit: o }) {
-    const n = inject("mapInstance"), r = o, l = useModel(e, "visible"), i = ref("3"), s = ref([]), c = ref(!1), d = new VectorSource();
+  setup(e, { expose: t, emit: n }) {
+    const o = inject("mapInstance"), r = n, l = useModel(e, "visible"), i = ref("3"), s = ref([]), c = ref(!1), d = new VectorSource();
     let m, u, f, p, y;
     const h = new VectorLayer({
       source: d,
@@ -137,15 +140,15 @@ const formatLength = function(e, t) {
         "circle-radius": 7,
         "circle-fill-color": "#ffcc33"
       }
-    }), g = function(k) {
-      if (k.dragging)
+    }), g = function(L) {
+      if (L.dragging)
         return;
-      let M = "点击选择起点";
-      m && (M = "单击继续，双击结束"), u && (u.innerHTML = M, f.setPosition(k.coordinate), u.classList.remove("hidden"));
-    }, L = () => {
-      n.value && (n.value.on("pointermove", g), n.value.getViewport().addEventListener("mouseout", function() {
-        var k;
-        (k = u == null ? void 0 : u.classList) == null || k.add("hidden");
+      let I = "点击选择起点";
+      m && (I = "单击继续，双击结束"), u && (u.innerHTML = I, f.setPosition(L.coordinate), u.classList.remove("hidden"));
+    }, M = () => {
+      o.value && (o.value.on("pointermove", g), o.value.getViewport().addEventListener("mouseout", function() {
+        var L;
+        (L = u == null ? void 0 : u.classList) == null || L.add("hidden");
       }), c.value = !0);
     };
     let T;
@@ -169,88 +172,88 @@ const formatLength = function(e, t) {
       })
     });
     function C() {
-      var k, M;
-      if (n.value) {
+      var L, I;
+      if (o.value) {
         if (s.value = [], document.querySelectorAll(".ol-tooltip.ol-tooltip-static").forEach((E) => {
-          var x;
-          (x = E == null ? void 0 : E.parentNode) == null || x.removeChild(E);
+          var F;
+          (F = E == null ? void 0 : E.parentNode) == null || F.removeChild(E);
         }), d.clear(), T) {
-          const E = n.value.getInteractions().getArray().find((x) => x.ol_uid === T.ol_uid);
-          E && ((k = n.value) == null || k.removeInteraction(E));
+          const E = o.value.getInteractions().getArray().find((F) => F.ol_uid === T.ol_uid);
+          E && ((L = o.value) == null || L.removeInteraction(E));
         }
-        (M = n.value) == null || M.removeLayer(h), u != null && u.parentNode && u.parentNode.removeChild(u), p != null && p.parentNode && p.parentNode.removeChild(p);
+        (I = o.value) == null || I.removeLayer(h), u != null && u.parentNode && u.parentNode.removeChild(u), p != null && p.parentNode && p.parentNode.removeChild(p);
       }
     }
-    function F() {
-      var M, E;
-      C(), (M = n.value) == null || M.addLayer(h), T = new Draw({
+    function x() {
+      var I, E;
+      C(), (I = o.value) == null || I.addLayer(h), T = new Draw({
         source: d,
         type: "LineString",
         style: function() {
           return b;
         }
-      }), (E = n.value) == null || E.addInteraction(T), S(), v();
-      let k;
-      T.on("drawstart", function(x) {
-        var N;
-        m = x.feature;
-        let P;
-        k = (N = m.getGeometry()) == null ? void 0 : N.on("change", function(A) {
-          const $ = A.target;
-          let _ = formatUtils.formatLength($, Number(i.value));
-          P = $.getLastCoordinate(), p && _ && (p.innerHTML = _), y.setPosition(P);
+      }), (E = o.value) == null || E.addInteraction(T), w(), v();
+      let L;
+      T.on("drawstart", function(F) {
+        var $;
+        m = F.feature;
+        let N;
+        L = ($ = m.getGeometry()) == null ? void 0 : $.on("change", function(D) {
+          const P = D.target;
+          let B = formatUtils.formatLength(P, Number(i.value));
+          N = P.getLastCoordinate(), p && B && (p.innerHTML = B), y.setPosition(N);
         });
       }), T.on("drawend", function() {
-        p && (p.className = "ol-tooltip ol-tooltip-static ol-tooltip-measure"), p != null && p.innerHTML && s.value.push(p == null ? void 0 : p.innerHTML), y.setOffset([0, -7]), m = null, p = null, S(), k && unByKey(k);
+        p && (p.className = "ol-tooltip ol-tooltip-static ol-tooltip-measure"), p != null && p.innerHTML && s.value.push(p == null ? void 0 : p.innerHTML), y.setOffset([0, -7]), m = null, p = null, w(), L && unByKey(L);
       });
     }
     function v() {
-      var k;
+      var L;
       u != null && u.parentNode && u.parentNode.removeChild(u), u = document.createElement("div"), u.className = "ol-tooltip hidden", f = new Overlay({
         element: u,
         offset: [15, 0],
         positioning: "center-left"
-      }), (k = n.value) == null || k.addOverlay(f);
+      }), (L = o.value) == null || L.addOverlay(f);
     }
-    function S() {
-      var k;
+    function w() {
+      var L;
       p != null && p.parentNode && p.parentNode.removeChild(p), p = document.createElement("div"), p.className = "ol-tooltip ol-tooltip-measure", y = new Overlay({
         element: p,
         offset: [0, -15],
         positioning: "bottom-center",
         stopEvent: !1,
         insertFirst: !1
-      }), (k = n.value) == null || k.addOverlay(y);
+      }), (L = o.value) == null || L.addOverlay(y);
     }
-    const w = (k) => {
-      var x, P;
-      s.value[k] && s.value.splice(k, 1);
-      const M = document.querySelectorAll(".ol-tooltip.ol-tooltip-static.ol-tooltip-measure");
-      M[k] && ((P = (x = M[k]) == null ? void 0 : x.parentNode) == null || P.removeChild(M[k]));
+    const k = (L) => {
+      var F, N;
+      s.value[L] && s.value.splice(L, 1);
+      const I = document.querySelectorAll(".ol-tooltip.ol-tooltip-static.ol-tooltip-measure");
+      I[L] && ((N = (F = I[L]) == null ? void 0 : F.parentNode) == null || N.removeChild(I[L]));
       const E = d.getFeatures();
-      E[k] && d.removeFeature(E[k]);
+      E[L] && d.removeFeature(E[L]);
     }, V = () => {
       r("close");
     };
     return watch(() => l, () => {
-      l && !c.value && (L(), F());
+      l && !c.value && (M(), x());
     }, { deep: !0, immediate: !0 }), t({
-      addInteraction: F,
+      addInteraction: x,
       removeInteraction: C
-    }), (k, M) => l.value && k.viewMode !== "WxMiniprogram" ? (openBlock(), createElementBlock("div", _hoisted_1$4, [
+    }), (L, I) => l.value && L.viewMode !== "WxMiniprogram" ? (openBlock(), createElementBlock("div", _hoisted_1$4, [
       createElementVNode("div", { class: "header" }, [
-        M[1] || (M[1] = createElementVNode("div", { class: "title" }, "测量", -1)),
+        I[1] || (I[1] = createElementVNode("div", { class: "title" }, "测量", -1)),
         createElementVNode("i", {
           onClick: V,
           class: "map-iconfont icon-close"
         })
       ]),
       createElementVNode("div", _hoisted_2$2, [
-        M[2] || (M[2] = createElementVNode("div", { class: "tips" }, "在地图上点击多个点测量距离，距离单位", -1)),
+        I[2] || (I[2] = createElementVNode("div", { class: "tips" }, "在地图上点击多个点测量距离，距离单位", -1)),
         createVNode(unref(ElSelect), {
           class: "select-length-unit",
           modelValue: i.value,
-          "onUpdate:modelValue": M[0] || (M[0] = (E) => i.value = E)
+          "onUpdate:modelValue": I[0] || (I[0] = (E) => i.value = E)
         }, {
           default: withCtx(() => [
             createVNode(unref(ElOption), {
@@ -270,19 +273,19 @@ const formatLength = function(e, t) {
         }, 8, ["modelValue"])
       ]),
       createElementVNode("div", _hoisted_3$2, [
-        (openBlock(!0), createElementBlock(Fragment, null, renderList(s.value, (E, x) => (openBlock(), createElementBlock("div", {
+        (openBlock(!0), createElementBlock(Fragment, null, renderList(s.value, (E, F) => (openBlock(), createElementBlock("div", {
           class: "measure-history-item",
-          key: x
+          key: F
         }, [
           createElementVNode("div", _hoisted_4, [
-            M[3] || (M[3] = createElementVNode("i", { class: "map-iconfont icon-line" }, null, -1)),
-            createElementVNode("span", _hoisted_5, "线段" + toDisplayString(x + 1), 1),
+            I[3] || (I[3] = createElementVNode("i", { class: "map-iconfont icon-line" }, null, -1)),
+            createElementVNode("span", _hoisted_5, "线段" + toDisplayString(F + 1), 1),
             createElementVNode("span", _hoisted_6, toDisplayString(E), 1)
           ]),
           createElementVNode("div", {
             class: "delete-button",
-            onClick: (P) => w(x)
-          }, M[4] || (M[4] = [
+            onClick: (N) => k(F)
+          }, I[4] || (I[4] = [
             createElementVNode("i", { class: "map-iconfont icon-delete" }, null, -1)
           ]), 8, _hoisted_7)
         ]))), 128))
@@ -291,13 +294,13 @@ const formatLength = function(e, t) {
   }
 }), Measure = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["__scopeId", "data-v-d566fd81"]]), CDN_URL = "https://static.zhihaoscm.cn/", tiandituKey = "a6e8f78974f2581f2ca00485b40c948f", baseMap = {
   // 矢量底图
-  tiandituTile: `http://t0.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&TILEMATRIXSET=w&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=${tiandituKey}`,
+  tiandituTile: `https://t0.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&TILEMATRIXSET=w&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=${tiandituKey}`,
   // 矢量注记
-  tiandituTileMark: `http://t0.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&TILEMATRIXSET=w&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=${tiandituKey}`,
+  tiandituTileMark: `https://t0.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&TILEMATRIXSET=w&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=${tiandituKey}`,
   // 影像底图
-  tiandituImgTile: `http://t0.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&TILEMATRIXSET=w&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=${tiandituKey}`,
+  tiandituImgTile: `https://t0.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&TILEMATRIXSET=w&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=${tiandituKey}`,
   // 影像注记
-  tiandituImgTileMark: `http://t0.tianditu.gov.cn/cia_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&TILEMATRIXSET=w&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=${tiandituKey}`,
+  tiandituImgTileMark: `https://t0.tianditu.gov.cn/cia_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&TILEMATRIXSET=w&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=${tiandituKey}`,
   // 绿点图
   greenTile: `${CDN_URL}/map/tile/{z}/{x}/{y}.png`
 }, mapZoom = {
@@ -327,7 +330,7 @@ const formatLength = function(e, t) {
   data: "EPSG:4326",
   // 墨卡托投影坐标 渲染坐标
   mercator: "EPSG:3857"
-};
+}, LOG_DATE_FORMAT = "YYYY-MM-DD HH:mm:ss", DEFAULT_VALUE = "--";
 ref();
 const shipsLayer = ref(), largeAmountShipsLayer = ref(), selectShipsLayer = ref(), allShips = ref([]), selectSingleShipData = ref();
 ref();
@@ -340,7 +343,7 @@ function getIconFont(unicode = "") {
 }
 const multiplyPixelRatio = (e) => {
   const t = window.devicePixelRatio || 1;
-  return e.map((o) => o.map((n) => n * t));
+  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",
@@ -349,8 +352,8 @@ const multiplyPixelRatio = (e) => {
     offsetY: -14
   }),
   zIndex: 100
-}), getRotation = (e, t, o) => {
-  function n(u) {
+}), getRotation = (e, t, n) => {
+  function o(u) {
     return 180 * (u % (2 * Math.PI)) / Math.PI;
   }
   function r(u) {
@@ -371,11 +374,11 @@ const multiplyPixelRatio = (e) => {
   }
   function i(u, f, p = {}) {
     if (p.final)
-      return function(v, S) {
-        return (i(S, v) + 180) % 360;
+      return function(v, w) {
+        return (i(w, v) + 180) % 360;
       }(u, f);
-    const y = l(u), h = l(f), g = r(y[0]), L = r(h[0]), T = r(y[1]), b = r(h[1]), C = Math.sin(L - g) * Math.cos(b), F = Math.cos(T) * Math.sin(b) - Math.sin(T) * Math.cos(b) * Math.cos(L - g);
-    return n(Math.atan2(C, F));
+    const y = l(u), h = l(f), g = r(y[0]), M = r(h[0]), T = r(y[1]), b = r(h[1]), C = Math.sin(M - g) * Math.cos(b), x = Math.cos(T) * Math.sin(b) - Math.sin(T) * Math.cos(b) * Math.cos(M - g);
+    return o(Math.atan2(C, x));
   }
   function s(u) {
     return !isNaN(u) && u !== null && !Array.isArray(u);
@@ -387,100 +390,100 @@ const multiplyPixelRatio = (e) => {
     const y = { type: "Feature" };
     return p.id !== void 0 && (y.id = p.id), p.bbox && (y.bbox = p.bbox), y.properties = f || {}, y.geometry = u, y;
   }
-  const m = i(c(e), c(t), o);
+  const m = i(c(e), c(t), n);
   return m < 0 ? 360 + m : m;
-}, labelAlpha = 0.8, labelFont = "500 12px Arial", labelOutSize = 2, labelHeight = 10, fillRectRadius = (e, t, o, n, r, l, i = 4) => {
-  e.beginPath(), e.moveTo(t + i, o), e.arcTo(t + n, o, t + n, o + i, i), e.arcTo(t + n, o + r, t + n - i, o + r, i), e.arcTo(t, o + r, t, o + r - i, i), e.arcTo(t, o, t + i, o, i), e.closePath(), e.fillStyle = l, e.fill();
+}, labelAlpha = 0.8, labelFont = "500 12px Arial", labelOutSize = 2, labelHeight = 10, fillRectRadius = (e, t, n, o, r, l, i = 4) => {
+  e.beginPath(), e.moveTo(t + i, n), e.arcTo(t + o, n, t + o, n + i, i), e.arcTo(t + o, n + r, t + o - i, n + r, i), e.arcTo(t, n + r, t, n + r - i, i), e.arcTo(t, n, t + i, n, i), e.closePath(), e.fillStyle = l, e.fill();
 }, getPixelFromCoordinate = (e) => {
   if (!e || e.length === 0)
     throw new Error("Points array is empty or invalid.");
-  let t = 1 / 0, o = 1 / 0, n = -1 / 0, r = -1 / 0;
+  let t = 1 / 0, n = 1 / 0, o = -1 / 0, r = -1 / 0;
   for (const [l, i] of e)
-    l < t && (t = l), i < o && (o = i), l > n && (n = l), i > r && (r = i);
-  return [t, o, n, r];
+    l < t && (t = l), i < n && (n = i), l > o && (o = l), i > r && (r = i);
+  return [t, n, o, r];
 }, calculatePolygonCentroid = (e) => {
   if (!Array.isArray(e) || e.length < 3)
     throw new Error("A polygon must have at least 3 coordinates.");
-  let t = 0, o = 0, n = 0;
+  let t = 0, n = 0, o = 0;
   const r = e.length;
   for (let s = 0; s < r - 1; s++) {
     const [c, d] = e[s], [m, u] = e[s + 1], f = c * u - m * d;
-    n += f, t += (c + m) * f, o += (d + u) * f;
+    o += f, t += (c + m) * f, n += (d + u) * f;
   }
-  if (n *= 0.5, n === 0)
+  if (o *= 0.5, o === 0)
     throw new Error("多边形面积为零");
-  const l = t / (6 * n), i = o / (6 * n);
+  const l = t / (6 * o), i = n / (6 * o);
   return [l, i];
 }, rotateShapeModel = (e, t) => {
-  const [o, n] = calculatePolygonCentroid(e), r = t * Math.PI / 180, l = Math.cos(r), i = Math.sin(r);
+  const [n, o] = calculatePolygonCentroid(e), r = t * Math.PI / 180, l = Math.cos(r), i = Math.sin(r);
   return e.map(([s, c]) => {
-    const d = s - o, m = c - n, u = d * l - m * i + o, f = d * i + m * l + n;
+    const d = s - n, m = c - o, u = d * l - m * i + n, f = d * i + m * l + o;
     return [u, f];
   });
 }, getTopLeftPoint = (e) => [e[0], e[3]], getBottomLeftPoint = (e) => [e[2], e[3]], getBottomRightPoint = (e) => [e[2], e[1]], getTopRighttPoint = (e) => [e[0], e[1]];
-function calculateBounds(e, t, o, n, r) {
+function calculateBounds(e, t, n, o, r) {
   let l, i, s, c, d = e[0], m = e[1];
   switch (t) {
     case 0:
-      l = d + r, i = l + o, c = m - r, s = c - n;
+      l = d + r, i = l + n, c = m - r, s = c - o;
       break;
     case 1:
-      l = d + r, i = l + o, c = m + n / 2, s = c - n;
+      l = d + r, i = l + n, c = m + o / 2, s = c - o;
       break;
     case 2:
-      l = d + r, i = l + o, c = m + r + n, s = c - n;
+      l = d + r, i = l + n, c = m + r + o, s = c - o;
       break;
     case 3:
-      l = d - o / 2, i = l + o, c = m + r + n, s = c - n;
+      l = d - n / 2, i = l + n, c = m + r + o, s = c - o;
       break;
     case 4:
-      i = d, l = i - o, c = m + r + n, s = c - n;
+      i = d, l = i - n, c = m + r + o, s = c - o;
       break;
     case 5:
-      i = d - r, l = i - o, c = m + n / 2, s = c - n;
+      i = d - r, l = i - n, c = m + o / 2, s = c - o;
       break;
     case 6:
-      i = d, l = i - o, c = m - r, s = c - n;
+      i = d, l = i - n, c = m - r, s = c - o;
       break;
     case 7:
-      l = d - o / 2, i = l + o, c = m - r, s = c - n;
+      l = d - n / 2, i = l + n, c = m - r, s = c - o;
   }
   if (!(!l || !s || !i || !c))
     return [Math.min(l, i), Math.min(s, c), Math.max(l, i), Math.max(s, c) + 1];
 }
-function calculateAnchorPoint(e, t, o = 70, n = 20, r = 20) {
+function calculateAnchorPoint(e, t, n = 70, o = 20, r = 20) {
   let l = [0, 0];
   switch (t) {
     case 0:
-      l[0] = e[0] + r, l[1] = e[1] - r - n / 2;
+      l[0] = e[0] + r, l[1] = e[1] - r - o / 2;
       break;
     case 1:
       l[0] = e[0] + r, l[1] = e[1];
       break;
     case 2:
-      l[0] = e[0] + r, l[1] = e[1] + r + n / 2;
+      l[0] = e[0] + r, l[1] = e[1] + r + o / 2;
       break;
     case 3:
-      l[0] = e[0], l[1] = e[1] + r + n / 4;
+      l[0] = e[0], l[1] = e[1] + r + o / 4;
       break;
     case 4:
-      l[0] = Math.max(e[0] - r, e[0] - o / 2), l[1] = e[1] + r + n / 4;
+      l[0] = Math.max(e[0] - r, e[0] - n / 2), l[1] = e[1] + r + o / 4;
       break;
     case 5:
       l[0] = e[0] - r, l[1] = e[1];
       break;
     case 6:
-      l[0] = Math.max(e[0] - r, e[0] - o / 2), l[1] = e[1] - r - n / 4;
+      l[0] = Math.max(e[0] - r, e[0] - n / 2), l[1] = e[1] - r - o / 4;
       break;
     case 7:
-      l[0] = e[0], l[1] = e[1] - r - n / 4;
+      l[0] = e[0], l[1] = e[1] - r - o / 4;
   }
   return l;
 }
-function drawLabelBody(e, t, o) {
+function drawLabelBody(e, t, n) {
   if (!e) return;
   const {
-    font: n,
+    font: o,
     labelOutSize: r = 2,
     labelHeight: l,
     center: i,
@@ -489,41 +492,41 @@ function drawLabelBody(e, t, o) {
     shipColor: d,
     lineLength: m = 20,
     selected: u
-  } = o;
-  e.save(), n && (e.font = n);
+  } = n;
+  e.save(), o && (e.font = o);
   let f = e.measureText(s).width + 2 * r;
   (c || d) && (f += l + 4 * r), e.restore();
   let p, y = 20, h = -1, g = l + 3 * r;
   if (m)
-    for (let L = 0; L < 8; L++) {
-      p = calculateBounds(i, L, f, g, m);
+    for (let M = 0; M < 8; M++) {
+      p = calculateBounds(i, M, f, g, m);
       let T = !1;
       for (let b = 0; b < t.length; ++b) {
-        let C = t[b].bounds, F = [
+        let C = t[b].bounds, x = [
           C[0] - y,
           C[1] - y,
           C[2] + y,
           C[3] + y
         ];
-        if (p && isOverlapping(p, F)) {
+        if (p && isOverlapping(p, x)) {
           T = !0;
           break;
         }
       }
       if (!T) {
-        h = L;
+        h = M;
         break;
       }
     }
   else
     h = 0, p = calculateBounds(i, h, f, g, m);
   if (u && h === -1 && (h = 0), p && h > -1) {
-    let L = getBottomLeftPoint(p), T = getTopRighttPoint(p);
+    let M = getBottomLeftPoint(p), T = getTopRighttPoint(p);
     return {
       center: i,
       x: calculateAnchorPoint(i, h, f, g, m),
       l: T,
-      r: L,
+      r: M,
       bounds: p,
       position: h,
       name: s
@@ -531,29 +534,46 @@ function drawLabelBody(e, t, o) {
   } else
     return null;
 }
+let intervalId;
 const drawText = (e, t) => {
   if (!e) return;
-  const { center: o, text: n, textColor: r, leftIcon: l, rightIcons: i, font: s } = t;
+  const { center: n, text: o, textColor: r, leftIcon: l, rightIcons: i, font: s } = t;
   e.save(), e.setTransform(1, 0, 0, 1, 0, 0);
-  let [c, d] = o;
+  let [c, d] = n;
   if (l) {
-    e.font = "22px map-iconfont";
-    let m = getIconFont(l.icon);
-    e.fillStyle = l.color, e.fillText(m, c + labelOutSize - 4, d + 4), c += 22;
+    if (t.blinkColors && t.blinkColors.length > 0) {
+      let m = Date.now(), u = 0;
+      const f = [];
+      t.blinkColors.forEach((p) => {
+        f.push(p), f.push("white");
+      }), intervalId && clearInterval(intervalId), intervalId = setInterval(() => {
+        const p = Date.now();
+        if (p - m >= 500) {
+          u = (u + 1) % f.length, m = p, e.font = "22px map-iconfont";
+          let y = getIconFont(l.icon);
+          e.fillStyle = f[u], e.fillText(y, c - 22 + labelOutSize - 4, d + 4);
+        }
+      }, 10);
+    } else {
+      e.font = "22px map-iconfont";
+      let m = getIconFont(l.icon);
+      e.fillStyle = l.color, e.fillText(m, c + labelOutSize - 4, d + 4);
+    }
+    c += 22;
   }
   if (i != null && i.length) {
     e.font = "12px map-iconfont", e.fillStyle = "#3370ff";
-    let m = e.measureText(n).width + 6;
+    let m = e.measureText(o).width + 6;
     i.forEach((u, f) => {
       let p = getIconFont(u), y = 20 * f;
       e.fillText(p, c + m + y, d);
     });
   }
-  e.font = s || labelFont, e.fillStyle = r, e.fillText(n, c, d), e.restore();
+  e.font = s || labelFont, e.fillStyle = r, e.fillText(o, c, d), e.restore();
 }, drawPolygon = (e, t) => {
   let {
-    points: o,
-    strokeColor: n,
+    points: n,
+    strokeColor: o,
     fillColor: r,
     shouldClosePath: l,
     translation: i,
@@ -562,29 +582,29 @@ const drawText = (e, t) => {
     scale: d,
     globalAlpha: m
   } = t;
-  if (m || (m = 1), o && e) {
-    e.save(), e.beginPath(), s && s !== 0 && c == null && e.rotate(s), i && e.translate(i[0], i[1]), s && (c != null && c.length) && e.rotate(s), d && e.scale(d, d), e.moveTo(o[0][0], o[0][1]);
-    for (let u = 1; u < o.length; u++)
-      e.lineTo(o[u][0], o[u][1]);
-    l && e.closePath(), n && (e.strokeStyle = n, e.stroke()), r && l && (m && (e.globalAlpha = m), e.fillStyle = r, e.fill()), e.restore();
+  if (m || (m = 1), n && e) {
+    e.save(), e.beginPath(), s && s !== 0 && c == null && e.rotate(s), i && e.translate(i[0], i[1]), s && (c != null && c.length) && e.rotate(s), d && e.scale(d, d), e.moveTo(n[0][0], n[0][1]);
+    for (let u = 1; u < n.length; u++)
+      e.lineTo(n[u][0], n[u][1]);
+    l && e.closePath(), o && (e.strokeStyle = o, e.stroke()), r && l && (m && (e.globalAlpha = m), e.fillStyle = r, e.fill()), e.restore();
   }
-}, drawLabel = (e, t, o) => {
-  const { center: n, text: r, color: l, textColor: i, bgColor: s, leftIcon: c, rightIcons: d, type: m } = t;
-  if (n && r) {
+}, drawLabel = (e, t, n) => {
+  const { center: o, text: r, color: l, textColor: i, bgColor: s, leftIcon: c, rightIcons: d, type: m } = t;
+  if (o && r) {
     let u = {
       font: labelFont,
       labelOutSize,
       labelHeight,
-      center: n,
+      center: o,
       text: r,
       leftIcon: c,
       selected: t.selected
-    }, f = drawLabelBody(e, o, u);
+    }, f = drawLabelBody(e, n, u);
     if (f) {
       const { x: p, bounds: y, l: h } = f;
       let g = [getTopLeftPoint(y), getBottomLeftPoint(y), getBottomRightPoint(y), getTopRighttPoint(y)];
-      o.find((v) => v.name === r) || o.push(f), drawPolygon(e, {
-        points: [n, p],
+      n.find((v) => v.name === r) || n.push(f), drawPolygon(e, {
+        points: [o, p],
         strokeColor: l,
         fillColor: "#000",
         shouldClosePath: !0,
@@ -601,48 +621,49 @@ const drawText = (e, t) => {
         fillColor: s,
         shouldClosePath: !0
       });
-      const [b, C] = h, F = {
+      const [b, C] = h, x = {
         center: [b, C + labelOutSize + labelHeight + 1],
         text: r,
         textColor: i,
         leftIcon: c,
-        rightIcons: d
+        rightIcons: d,
+        blinkColors: t.blinkColors
       };
-      drawText(e, F);
+      drawText(e, x);
     }
   }
   return null;
 }, PI = Math.PI, a = 6378245, ee = 0.006693421622965943;
 function transformLat(e, t) {
-  let o = -100 + 2 * e + 3 * t + 0.2 * t * t + 0.1 * e * t + 0.2 * Math.sqrt(Math.abs(e));
-  return o += (20 * Math.sin(6 * e * PI) + 20 * Math.sin(2 * e * PI)) * 2 / 3, o += (20 * Math.sin(t * PI) + 40 * Math.sin(t / 3 * PI)) * 2 / 3, o += (160 * Math.sin(t / 12 * PI) + 320 * Math.sin(t * PI / 30)) * 2 / 3, o;
+  let n = -100 + 2 * e + 3 * t + 0.2 * t * t + 0.1 * e * t + 0.2 * Math.sqrt(Math.abs(e));
+  return n += (20 * Math.sin(6 * e * PI) + 20 * Math.sin(2 * e * PI)) * 2 / 3, n += (20 * Math.sin(t * PI) + 40 * Math.sin(t / 3 * PI)) * 2 / 3, n += (160 * Math.sin(t / 12 * PI) + 320 * Math.sin(t * PI / 30)) * 2 / 3, n;
 }
 function transformLng(e, t) {
-  let o = 300 + e + 2 * t + 0.1 * e * e + 0.1 * e * t + 0.1 * Math.sqrt(Math.abs(e));
-  return o += (20 * Math.sin(6 * e * PI) + 20 * Math.sin(2 * e * PI)) * 2 / 3, o += (20 * Math.sin(e * PI) + 40 * Math.sin(e / 3 * PI)) * 2 / 3, o += (150 * Math.sin(e / 12 * PI) + 300 * Math.sin(e / 30 * PI)) * 2 / 3, o;
+  let n = 300 + e + 2 * t + 0.1 * e * e + 0.1 * e * t + 0.1 * Math.sqrt(Math.abs(e));
+  return n += (20 * Math.sin(6 * e * PI) + 20 * Math.sin(2 * e * PI)) * 2 / 3, n += (20 * Math.sin(e * PI) + 40 * Math.sin(e / 3 * PI)) * 2 / 3, n += (150 * Math.sin(e / 12 * PI) + 300 * Math.sin(e / 30 * PI)) * 2 / 3, n;
 }
 function outOfChina(e, t) {
   return !(e > 73.66 && e < 135.05 && t > 3.86 && t < 53.55);
 }
 function gcj02ToWgs84(e) {
-  const [t, o] = e.split(",").map(Number);
-  if (outOfChina(t, o))
-    return `${t.toFixed(6)}, ${o.toFixed(6)}`;
+  const [t, n] = e.split(",").map(Number);
+  if (outOfChina(t, n))
+    return `${t.toFixed(6)}, ${n.toFixed(6)}`;
   {
-    let n = transformLat(t - 105, o - 35), r = transformLng(t - 105, o - 35), l = o / 180 * PI, i = Math.sin(l);
+    let o = transformLat(t - 105, n - 35), r = transformLng(t - 105, n - 35), l = n / 180 * PI, i = Math.sin(l);
     i = 1 - ee * i * i;
     let s = Math.sqrt(i);
-    n = n * 180 / (a * (1 - ee) / (i * s) * PI), r = r * 180 / (a / s * Math.cos(l) * PI);
-    let c = o + n, d = t + r;
-    return `${(t * 2 - d).toFixed(6)}, ${(o * 2 - c).toFixed(6)}`;
+    o = o * 180 / (a * (1 - ee) / (i * s) * PI), r = r * 180 / (a / s * Math.cos(l) * PI);
+    let c = n + o, d = t + r;
+    return `${(t * 2 - d).toFixed(6)}, ${(n * 2 - c).toFixed(6)}`;
   }
 }
 function calculateCirclePoints(e, t) {
-  const o = fromLonLat(e), n = t * 1e3, r = [
-    o[0] - n,
-    o[1] - n,
-    o[0] + n,
-    o[1] + n
+  const n = fromLonLat(e), o = t * 1e3, r = [
+    n[0] - o,
+    n[1] - o,
+    n[0] + o,
+    n[1] + o
   ], l = transformExtent(r, projection.mercator, projection.data);
   return {
     leftTopPoint: { lng: l[0], lat: l[3] },
@@ -654,20 +675,20 @@ function calculateCirclePoints(e, t) {
 const equatorialCircumference = 2003750834e-2;
 function lonLatToMercator(e) {
   const t = e[0] * equatorialCircumference / 180;
-  let o = Math.log(Math.tan((90 + e[1]) * Math.PI / 360)) / (Math.PI / 180);
-  return o = o * equatorialCircumference / 180, [t, o];
+  let n = Math.log(Math.tan((90 + e[1]) * Math.PI / 360)) / (Math.PI / 180);
+  return n = n * equatorialCircumference / 180, [t, n];
 }
 function mercatorToLonLat(e, t = "lonlat") {
-  let o = { lon: 0, lat: 0 }, n = e[0] / equatorialCircumference * 180, r = e[1] / equatorialCircumference * 180;
-  return r = 180 / Math.PI * (2 * Math.atan(Math.exp(r * Math.PI / 180)) - Math.PI / 2), o.lon = n, o.lat = r, t === "lonlat" ? o : [n, r];
+  let n = { lon: 0, lat: 0 }, o = e[0] / equatorialCircumference * 180, r = e[1] / equatorialCircumference * 180;
+  return r = 180 / Math.PI * (2 * Math.atan(Math.exp(r * Math.PI / 180)) - Math.PI / 2), n.lon = o, n.lat = r, t === "lonlat" ? n : [o, r];
 }
 function calculateBoundingBox(e) {
-  let t = 1 / 0, o = -1 / 0, n = 1 / 0, r = -1 / 0;
+  let t = 1 / 0, n = -1 / 0, o = 1 / 0, r = -1 / 0;
   e.forEach((h) => {
-    const [g, L] = h;
-    t = Math.min(t, L), o = Math.max(o, L), n = Math.min(n, g), r = Math.max(r, g);
+    const [g, M] = h;
+    t = Math.min(t, M), n = Math.max(n, M), o = Math.min(o, g), r = Math.max(r, g);
   });
-  const l = r - n, i = o - t, s = Math.max(l, i), c = (n + r) / 2, d = (t + o) / 2, m = s / 2, u = c - m, f = c + m, p = d - m, y = d + m;
+  const l = r - o, i = n - t, s = Math.max(l, i), c = (o + r) / 2, d = (t + n) / 2, m = s / 2, u = c - m, f = c + m, p = d - m, y = d + m;
   return [f, p, u, y];
 }
 const transformUtils = {
@@ -676,11 +697,11 @@ const transformUtils = {
   lonLatToMercator,
   mercatorToLonLat,
   calculateBoundingBox
-}, mapInstance$8 = ref(), renderTrackStyleSetInstance = (e) => mapInstance$8.value = e, stopIcon = "&#xe6e2;", stopColor = "#E31818", slowIcon = "&#xe703;", slowColor = "#1890FF", dropletsIcon = "&#xe6d2", trackList$1 = ref([]), renderTrackLine = (e, t, o) => {
+}, mapInstance$8 = ref(), renderTrackStyleSetInstance = (e) => mapInstance$8.value = e, stopIcon = "&#xe6e2;", stopColor = "#E31818", slowIcon = "&#xe703;", slowColor = "#1890FF", dropletsIcon = "&#xe6d2", trackList$1 = ref([]), renderTrackLine = (e, t, n) => {
   var l, i, s;
-  const n = e[t];
-  if (!n) return;
-  allTracks.value[t] = n, trackList$1.value = [], trackList$1.value = n.map((c, d) => (c.center = [c.lon, c.lat], c.centerPoint = transformUtils.lonLatToMercator(c.center), c.id = t, c.index = d, c.time = hooks(c.createdAt).format("YYYY-MM-DD HH:mm:ss"), c));
+  const o = e[t];
+  if (!o) return;
+  allTracks.value[t] = o, trackList$1.value = [], trackList$1.value = o.map((c, d) => (c.center = [c.lon, c.lat], c.centerPoint = transformUtils.lonLatToMercator(c.center), c.id = t, c.index = d, c.time = hooks(c.createdAt).format("YYYY-MM-DD HH:mm:ss"), c));
   let r = trackList$1.value.map((c) => c.centerPoint);
   if (r.length >= 2) {
     let c = new LineString(r);
@@ -688,37 +709,37 @@ const transformUtils = {
     d.setStyle(
       new Style({
         stroke: new Stroke({
-          color: o,
+          color: n,
           width: 2
         })
       })
     ), d.setId(t), d.set("type", "line"), (i = (l = shipTrackVectorLayer.value) == null ? void 0 : l.getSource()) == null || i.clear(), shipTrackLineFeatures.value = [];
     const m = shipTrackLineFeatures.value.findIndex((u) => u.getId() === t);
-    m >= 0 ? shipTrackLineFeatures.value[m] = d : shipTrackLineFeatures.value.push(d), createAnimatedIconFeature(o, r), trackLineVectorSource.value = new VectorSource({
+    m >= 0 ? shipTrackLineFeatures.value[m] = d : shipTrackLineFeatures.value.push(d), createAnimatedIconFeature(n, r), trackLineVectorSource.value = new VectorSource({
       features: [...shipTrackLineFeatures.value]
     }), shipTrackVectorLayer.value = new VectorLayer({
       source: trackLineVectorSource.value
-    }), renderPoint(o), (s = mapInstance$8.value) == null || s.addLayer(shipTrackVectorLayer.value);
+    }), renderPoint(n), (s = mapInstance$8.value) == null || s.addLayer(shipTrackVectorLayer.value);
   }
 }, handlePlay = (e, t) => {
-  const o = allTracks.value[e];
-  playAnimation(o.map((n) => [n.lon, n.lat]), t);
+  const n = allTracks.value[e];
+  playAnimation(n.map((o) => [o.lon, o.lat]), t);
 }, removeShipTrackLineFeatureByIndex = (e) => {
   e >= 0 && e < shipTrackLineFeatures.value.length && (shipTrackLineFeatures.value.splice(e, 1), allTracks.value.splice(e, 1)), trackLineVectorSource.value = new VectorSource({
     features: [...shipTrackLineFeatures.value]
   }), shipTrackVectorLayer.value && shipTrackVectorLayer.value.setSource(trackLineVectorSource.value);
 }, createAnimatedIconFeature = (e, t) => {
-  const o = new Feature({
+  const n = new Feature({
     geometry: new Point(fromLonLat([t[0][0], t[0][1]]))
     // 初始位置
-  }), n = new Style({
+  }), o = new Style({
     text: new Text({
       font: "700 14px map-iconfont",
       text: getIconFont("&#xe6bc;"),
       fill: new Fill({ color: e })
     })
   });
-  return o.setStyle(n), o;
+  return n.setStyle(o), n;
 }, geoMarkerStyle = new Style({
   text: new Text({
     font: "700 20px map-iconfont",
@@ -733,8 +754,8 @@ const trackAnimating = ref(!1);
 let distance = 0, lastTime = Date.now(), moveFeatureHandler = null;
 const moveFeature = (e, t) => {
   var u;
-  const o = Number(50 * t), n = e.frameState.time, r = n - lastTime;
-  if (distance = (distance + o * r / 1e6) % 2, lastTime = n, distance >= 1) {
+  const n = Number(50 * t), o = e.frameState.time, r = o - lastTime;
+  if (distance = (distance + n * r / 1e6) % 2, lastTime = o, distance >= 1) {
     stopAnimation();
     return;
   }
@@ -754,7 +775,7 @@ const moveFeature = (e, t) => {
   var e;
   trackAnimating.value && (trackAnimating.value = !1, geoMarker.setGeometry(null), vectorLayer.un("postrender", moveFeatureHandler), (e = mapInstance$8.value) == null || e.removeLayer(vectorLayer), vectorLayer = null, geoMarker = null);
 }, playAnimation = (e, t) => {
-  var o;
+  var n;
   trackAnimating.value && stopAnimation(), polyline = new Polyline({
     factor: 1e6
   }).writeGeometry(new LineString(e)), linePath = new Polyline({
@@ -773,12 +794,12 @@ const moveFeature = (e, t) => {
     source: new VectorSource({
       features: [geoMarker]
     })
-  }), (o = mapInstance$8.value) == null || o.addLayer(vectorLayer), moveFeatureHandler = (n) => moveFeature(n, t), startAnimation();
+  }), (n = mapInstance$8.value) == null || n.addLayer(vectorLayer), moveFeatureHandler = (o) => moveFeature(o, t), startAnimation();
 }, renderPoint = (e) => {
   if (!mapInstance$8.value) return;
   let t = trackList$1.value || [];
   if (!(t && t.length > 1)) return [];
-  let o = { 16: 24, 17: 15, default: 4 }, n = [], r = t.length;
+  let n = { 16: 24, 17: 15, default: 4 }, o = [], r = t.length;
   for (let s = 0; s < r; s++) {
     t[s].index = s;
     let c = mapInstance$8.value.getPixelFromCoordinate(t[s].centerPoint);
@@ -788,22 +809,22 @@ const moveFeature = (e, t) => {
       let m = mapInstance$8.value.getView().getZoom();
       if (!m) return;
       if (m > 15) {
-        let f = o[m] || o.default;
+        let f = n[m] || n.default;
         d = adjustBounds(d, [f, f]);
       }
       let u = !0;
       if (t[s].state !== "0") {
-        for (let f = 0; f < n.length; f++)
-          if (isOverlapping(d, n[f].bounds)) {
+        for (let f = 0; f < o.length; f++)
+          if (isOverlapping(d, o[f].bounds)) {
             u = !1;
             break;
           }
       }
-      u && (t[s].bounds = d, n.push(t[s]));
+      u && (t[s].bounds = d, o.push(t[s]));
     }
   }
   const l = getIconStyle(stopIcon), i = getIconStyle(slowIcon);
-  n.forEach((s, c) => {
+  o.forEach((s, c) => {
     var u, f;
     let d = new Feature({
       geometry: new Point(s.centerPoint)
@@ -813,7 +834,8 @@ const moveFeature = (e, t) => {
         image: new CircleStyle({
           fill: new Fill({ color: e }),
           stroke: new Stroke({ color: "#fff", width: 2 }),
-          radius: 3
+          radius: 3,
+          hitDetectionRadius: 10
         })
       })
     ), trackLineVectorSource.value.addFeature(d);
@@ -835,14 +857,14 @@ const moveFeature = (e, t) => {
         }),
         zIndex: 99
       }), h = [];
-      s.state === "0" ? ((u = y.getText()) == null || u.setFill(new Fill({ color: stopColor })), h.push(l)) : ((f = y.getText()) == null || f.setFill(new Fill({ color: slowColor })), h.push(i)), h.push(y), p.setStyle(h), trackLineVectorSource.value.addFeature(p);
+      Number(s.state) === 0 ? ((u = y.getText()) == null || u.setFill(new Fill({ color: stopColor })), h.push(l)) : Number(s.state) === 1 && ((f = y.getText()) == null || f.setFill(new Fill({ color: slowColor })), h.push(i)), h.push(y), p.setStyle(h), trackLineVectorSource.value.addFeature(p);
     }
-  }), renderArrow(n, e), renderIconPoint();
+  }), renderArrow(o, e), renderIconPoint();
 }, renderArrow = (e, t) => {
-  const o = e.length;
-  o || (e.push(trackList$1.value[0]), e.push(trackList$1.value[trackList$1.value.length - 1]));
-  for (let n = 0; n < o - 1; n++) {
-    let r, l = e[n], i = (e[n + 1].index + l.index) / 2;
+  const n = e.length;
+  n || (e.push(trackList$1.value[0]), e.push(trackList$1.value[trackList$1.value.length - 1]));
+  for (let o = 0; o < n - 1; o++) {
+    let r, l = e[o], i = (e[o + 1].index + l.index) / 2;
     if (i % 2 === 0)
       r = trackList$1.value[i].centerPoint;
     else {
@@ -864,8 +886,8 @@ const moveFeature = (e, t) => {
             fill: new Fill({ color: t }),
             // 设置箭头旋转 角度转为弧度
             rotation: getRotation(
-              e[n].center,
-              e[n + 1].center
+              e[o].center,
+              e[o + 1].center
             ) * (Math.PI / 180)
           })
         })
@@ -873,13 +895,13 @@ const moveFeature = (e, t) => {
     }
   }
 }, renderIconPoint = () => {
-  const e = "&#xe69b;", t = "#fcdc3f", o = "#ff0000";
+  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((r) => {
     let l = new Feature({
       geometry: new Point(r.centerPoint)
     });
     l.set("type", "track_begin"), l.set("data", r);
-    const i = r.index === 0 && trackList$1.value.length >= 2 ? t : o;
+    const i = r.index === 0 && trackList$1.value.length >= 2 ? t : n;
     l.setStyle(
       new Style({
         text: new Text({
@@ -892,9 +914,9 @@ const moveFeature = (e, t) => {
     ), trackLineVectorSource.value.addFeature(l);
   });
 }, setTrackLabelStyle = (e, t) => new Style({
-  renderer: (o, n) => {
-    const r = n.context, s = {
-      center: o,
+  renderer: (n, o) => {
+    const r = o.context, s = {
+      center: n,
       text: e.time,
       color: t,
       textColor: "#000",
@@ -973,30 +995,30 @@ const moveFeature = (e, t) => {
     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) => new Style({
-  renderer: (t, o) => {
-    const n = o.context, r = o.feature.get("data");
-    o.feature.get("index") === 0 && (shipLabels.value = []);
+  renderer: (t, n) => {
+    const o = n.context, r = n.feature.get("data");
+    n.feature.get("index") === 0 && (shipLabels.value = []);
     try {
-      const i = drawShipBody(n, r, t);
-      i && (drawHeading(n, r, i), e && (drawSelectBounds(n, i), r.selected = !0)), drawShipLabel(n, r, t);
+      const i = drawShipBody(o, r, t);
+      i && (drawHeading(o, r, i), e && (drawSelectBounds(o, i), r.selected = !0)), drawShipLabel(o, r, t);
     } catch {
       return !1;
     }
   }
-}), drawShipBody = (e, t, o) => {
+}), drawShipBody = (e, t, n) => {
   if (!mapInstance$7.value) return;
-  const n = Math.round(Number(mapInstance$7.value.getView().getZoom()));
-  if (!n) return;
+  const o = Math.round(Number(mapInstance$7.value.getView().getZoom()));
+  if (!o) return;
   let r = [];
-  const [l, i] = drawShipModelByZoom[n] || [0, 0], [s, c] = o;
-  if (n <= mapZoom.shipModelMax && n > mapZoom.shipModelMin && t.length >= l && t.breadth >= i)
-    r = rotateShapeModel(drawCurrentShipShapeModel(t, n), t.angle).map((m) => {
+  const [l, i] = drawShipModelByZoom[o] || [0, 0], [s, c] = n;
+  if (o <= mapZoom.shipModelMax && o > mapZoom.shipModelMin && t.length >= l && t.breadth >= i)
+    r = rotateShapeModel(drawCurrentShipShapeModel(t, o), t.angle).map((m) => {
       const [u, f] = m;
       return [s + u, c + f];
     });
   else {
     const d = rotateShapeModel(triangleModel, t.angle);
-    o.length === 2 && (r = d.map((m) => {
+    n.length === 2 && (r = d.map((m) => {
       const [u, f] = m;
       return [s + u, c + f];
     }));
@@ -1006,19 +1028,19 @@ const moveFeature = (e, t) => {
   for (let d = 1; d < r.length; d++)
     e.lineTo(r[d][0], r[d][1]);
   return e.closePath(), e.strokeStyle = "#000", e.lineWidth = 1, e.stroke(), e.fillStyle = t.fill, e.fill(), e.restore(), r;
-}, drawHeading = (e, t, o) => {
-  const [n, r] = o[0], l = getShipDirectPath(t);
+}, drawHeading = (e, t, n) => {
+  const [o, r] = n[0], l = getShipDirectPath(t);
   if (l) {
     let i = l.map(function(s) {
       let [c, d] = s;
-      return [c + n, d + r];
+      return [c + o, d + r];
     });
     if (e.save(), e.beginPath(), t.angle > 0) {
-      e.translate(n, r);
+      e.translate(o, r);
       const s = t.angle * Math.PI / 180;
-      e.rotate(s), e.translate(-n, -r);
+      e.rotate(s), e.translate(-o, -r);
     }
-    e.moveTo(n, r);
+    e.moveTo(o, r);
     for (let s = 1; s < i.length; s++) {
       let [c, d] = i[s];
       e.lineTo(c, d);
@@ -1026,13 +1048,13 @@ const moveFeature = (e, t) => {
     e.strokeStyle = "#000", e.lineWidth = 1, e.stroke(), e.restore();
   }
 }, drawSelectBounds = (e, t) => {
-  let [o, n, r, l] = getPixelFromCoordinate(t);
+  let [n, o, r, l] = getPixelFromCoordinate(t);
   const i = 4;
-  o -= i, n -= i, r += i, l += i, e.save(), e.strokeStyle = "#ff0000", e.lineWidth = 4;
+  n -= i, o -= i, r += i, l += i, e.save(), e.strokeStyle = "#ff0000", e.lineWidth = 4;
   const s = 8;
-  e.beginPath(), e.moveTo(o + s, l), e.lineTo(o, l), e.lineTo(o, l - s), e.moveTo(o, n + s), e.lineTo(o, n), e.lineTo(o + s, n), e.moveTo(r - s, n), e.lineTo(r, n), e.lineTo(r, n + s), e.moveTo(r, l - s), e.lineTo(r, l), e.lineTo(r - s, l), e.stroke(), e.restore();
-}, drawShipLabel = (e, t, o) => {
-  const [n, r] = o, l = n - 0, i = r - 0, s = t.name;
+  e.beginPath(), e.moveTo(n + s, l), e.lineTo(n, l), e.lineTo(n, l - s), e.moveTo(n, o + s), e.lineTo(n, o), e.lineTo(n + s, o), e.moveTo(r - s, o), e.lineTo(r, o), e.lineTo(r, o + s), e.moveTo(r, l - s), e.lineTo(r, l), e.lineTo(r - s, l), e.stroke(), e.restore();
+}, drawShipLabel = (e, t, n) => {
+  const [o, r] = n, l = o - 0, i = r - 0, s = t.name;
   let c;
   t.leftIconColor && (c = { color: t.leftIconColor, icon: "&#xe599;" });
   let d = getShipCustomIcon(t);
@@ -1045,18 +1067,19 @@ const moveFeature = (e, t) => {
     leftIcon: c,
     rightIcons: d,
     selected: t.selected,
+    blinkColors: t.blinkColors,
     type: "ShipName"
   };
   drawLabel(e, m, shipLabels.value);
 }, drawCurrentShipShapeModel = (e, t) => {
-  let o = 0;
-  t <= 14 ? o = 0.058 : t === 15 ? o = 0.12 : t === 16 ? o = 0.22 : t === 17 ? o = 0.435 : t === 18 && (o = 0.857);
-  const n = e.length / 4 * o, r = e.breadth * o;
+  let 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, r = e.breadth * n;
   let l = cloneDeep(shipShapeModel);
-  return l = l.map(([i, s]) => [i * r, s * n]), l;
+  return l = l.map(([i, s]) => [i * r, s * o]), l;
 }, getShipDirectPath = (e) => {
-  let { speed: t, hdg: o, cog: n } = e, r = "", l = null;
-  if (t && t > 1 && (o !== null && o != 511 && n !== null ? n - o >= 3 ? r = "left" : n - o <= -3 ? r = "right" : r = "front" : r = "front", r && t))
+  let { speed: t, hdg: n, cog: o } = e, r = "", l = null;
+  if (t && t > 1 && (n !== null && n != 511 && o !== null ? o - n >= 3 ? r = "left" : o - n <= -3 ? r = "right" : r = "front" : r = "front", r && t))
     for (let i in speedCondition) {
       let s = speedCondition[i];
       if (t >= s[0] && t < s[1]) {
@@ -1073,14 +1096,14 @@ let shipsMarkerList = [], shipsVectorSource, largeAmountShipsSource;
 const selectedShipData = ref(null);
 let selectShipsVectorSource;
 const renderShips = (e) => {
-  var o, n, r, l;
+  var n, o, r, l;
   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((i) => {
   }), !(!t || t < mapZoom.shipGreenDotMax) && (allShips.value = e, !hiddenOrther.value))
-    return t >= mapZoom.shipGreenDotMax && t < mapZoom.shipModelMin || e.length > renderShipsLimit ? ((o = shipsLayer.value) == null || o.setVisible(!1), (n = largeAmountShipsLayer.value) == null || n.setVisible(!0), renderLargeAmountShips(e)) : ((r = largeAmountShipsLayer.value) == null || r.setVisible(!1), (l = shipsLayer.value) == null || l.setVisible(!0), renderShipsMarker(e));
+    return t >= mapZoom.shipGreenDotMax && t < mapZoom.shipModelMin ? ((n = shipsLayer.value) == null || n.setVisible(!1), (o = largeAmountShipsLayer.value) == null || o.setVisible(!0), renderLargeAmountShips(e)) : ((r = largeAmountShipsLayer.value) == null || r.setVisible(!1), (l = shipsLayer.value) == null || l.setVisible(!0), renderShipsMarker(e));
 }, renderLargeAmountShips = (e) => {
   if (!mapInstance$6.value) return;
   const t = e.map((n) => ({
@@ -1091,28 +1114,29 @@ const renderShips = (e) => {
     },
     properties: n
   }));
-  largeAmountShipsSource == null || largeAmountShipsSource.clear(), largeAmountShipsSource = new VectorSource({
+  return largeAmountShipsSource == null || largeAmountShipsSource.clear(), largeAmountShipsSource = new VectorSource({
     features: new GeoJSON().readFeatures({
       type: "FeatureCollection",
       features: t
     }, {
       featureProjection: projection.mercator
     })
-  });
-  const o = [
-    "case",
-    ["==", ["get", "existMobile"], 1],
-    // 假设 type1 对应红色
-    "#D9001C",
-    "#04C900"
-  ];
-  return largeAmountShipsLayer.value = new WebGLPointsLayer({
+  }), largeAmountShipsLayer.value = new WebGLPointsLayer({
     source: largeAmountShipsSource,
     style: {
       "shape-points": 3,
       "shape-radius": 9,
-      "shape-fill-color": o,
-      // 'shape-fill-color': ['get', 'data.fill'],
+      "shape-fill-color": [
+        "case",
+        ["==", ["get", "fill"], "#D9001C"],
+        "#D9001C",
+        // 如果 fill 是 #D9001C，返回红色
+        ["==", ["get", "fill"], "#04C900"],
+        "#04C900",
+        // 如果 fill 是 #04C900，返回绿色
+        "#04C900"
+        // 默认颜色（绿色）
+      ],
       "shape-rotate-with-view": !1,
       "shape-rotation": [
         "+",
@@ -1129,32 +1153,33 @@ const renderShips = (e) => {
     }
   }), 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, n) => {
-      const r = [o.lon, o.lat], l = new Feature({
-        geometry: new Point(fromLonLat(r))
-      });
-      l.set("data", o), l.set("index", n), l.setStyle(
-        setShipStyle(!1, o.id)
+    return t.forEach((o, r) => {
+      const l = [o.lon, o.lat], i = new Feature({
+        geometry: new Point(fromLonLat(l))
+      }), s = 1;
+      i.set("clickGeometry", new Circle(fromLonLat(l), s)), i.set("data", o), i.set("index", r), i.setStyle(
+        setShipStyle(!1)
       ), shipsMarkerList.push({
         ship: o,
-        lonlat: r,
-        feature: l
+        lonlat: l,
+        feature: i
       });
     }), shipsVectorSource = new VectorSource({
       features: shipsMarkerList.map((o) => o.feature)
     }), shipsLayer.value = new VectorLayer({
       source: shipsVectorSource
-    }), mapInstance$6.value.addLayer(shipsLayer.value), shipsLayer.value;
+    }), (n = mapInstance$6.value) == null || n.addLayer(shipsLayer.value), shipsLayer.value;
 }, customFilterShips = (e) => {
   let t = cloneDeep(e);
-  return t = t.filter((o) => {
+  return t = t.filter((n) => {
     var r;
-    let n = getFilterItem(o).every(({ btnShow: l, value: i }) => l ? !!i : !0);
-    return (switchBtnShow.value.camera || switchBtnShow.value.mobile || switchBtnShow.value.waterGauge) && ((r = selectedShipData.value) == null ? void 0 : r.id) === o.id && clearSelectFeature(), n;
+    let o = getFilterItem(n).every(({ btnShow: l, value: i }) => l ? !!i : !0);
+    return (switchBtnShow.value.camera || switchBtnShow.value.mobile || switchBtnShow.value.waterGauge) && ((r = selectedShipData.value) == null ? void 0 : r.id) === n.id && clearSelectFeature(), o;
   }), t;
 }, getFilterItem = (e) => [
   { btnShow: switchBtnShow.value.camera, value: e == null ? void 0 : e.existDevice },
@@ -1169,45 +1194,45 @@ const renderShips = (e) => {
   if (!mapInstance$6.value) return;
   const t = cloneDeep(selectSingleShipData.value);
   selectSingleShipData.value = convertShipMapData(e);
-  const o = [selectSingleShipData.value.lon, selectSingleShipData.value.lat], n = new Feature({
-    geometry: new Point(fromLonLat(o))
+  const n = [selectSingleShipData.value.lon, selectSingleShipData.value.lat], o = new Feature({
+    geometry: new Point(fromLonLat(n))
   });
-  n.set("data", selectSingleShipData.value), n.setStyle(
+  o.set("data", selectSingleShipData.value), o.setStyle(
     setShipStyle(!0)
   ), shipsMarkerList.push({
     ship: selectSingleShipData.value,
-    lonlat: o,
-    feature: n
+    lonlat: n,
+    feature: o
   }), selectShipsVectorSource == null || selectShipsVectorSource.clear(), selectShipsVectorSource = new VectorSource({
-    features: [n]
+    features: [o]
   }), selectShipsLayer.value = new VectorLayer({
     source: selectShipsVectorSource
   }), setVisibleFeatureById(shipsVectorSource, selectSingleShipData.value.id, !0);
   const r = (l = shipsLayer.value) == null ? void 0 : l.getSource();
   return r && (t && setVisibleFeatureById(r, t.id, !0), setVisibleFeatureById(r, selectSingleShipData.value.id, !1)), mapInstance$6.value.addLayer(selectShipsLayer.value), selectShipsLayer.value.setVisible(!0), selectShipsLayer.value;
-}, setVisibleFeatureById = (e, t, o) => {
-  e && e.forEachFeature((n) => {
-    const r = n.get("data");
-    r && r.id === t && n.setStyle(o ? setShipStyle(!1, r.id) : setBlankStyle());
+}, setVisibleFeatureById = (e, t, n) => {
+  e && e.forEachFeature((o) => {
+    const r = o.get("data");
+    r && r.id === t && o.setStyle(n ? setShipStyle(!1, r.id) : setBlankStyle());
   });
-}, findShip = (e, t, o = !0) => {
+}, findShip = (e, t, n = !0) => {
   var r, l, i, s, c;
   if (console.log(mapInstance$6.value.ol_uid), !e || !mapInstance$6.value) return;
-  const n = (i = (l = (r = shipsLayer.value) == null ? void 0 : r.getSource()) == null ? void 0 : l.getFeatures()) == null ? void 0 : i.find((d) => {
+  const o = (i = (l = (r = shipsLayer.value) == null ? void 0 : r.getSource()) == null ? void 0 : l.getFeatures()) == null ? void 0 : i.find((d) => {
     var m;
     return ((m = d.get("data")) == null ? void 0 : m.id) === e;
   });
-  if (n ? selectedShipData.value = n.get("data") : t && (selectedShipData.value = t), !t) {
+  if (o ? selectedShipData.value = o.get("data") : t && (selectedShipData.value = t), !t) {
     console.error("找不到船舶");
     return;
   }
-  if (o && ((s = selectedShipData.value) != null && s.lon) && ((c = selectedShipData.value) != null && c.lat)) {
+  if (n && ((s = selectedShipData.value) != null && s.lon) && ((c = selectedShipData.value) != null && c.lat)) {
     const d = mapInstance$6.value.getView(), m = new Point([selectedShipData.value.lon, selectedShipData.value.lat]);
     d.setCenter(transform(m.getCoordinates(), projection.data, projection.mercator));
     const u = d.getZoom(), f = u < mapZoom.findShipMin ? mapZoom.findShip : u;
     d.setZoom(f);
   }
-  return selectSingleShipMarker(t), n;
+  return selectSingleShipMarker(t), o;
 }, clearSelectFeature = () => {
   var e;
   if (selectedShipData.value) {
@@ -1232,9 +1257,50 @@ const renderShips = (e) => {
   switchBtnShow.value[e] = t, renderShips(allShips.value);
 }, rerenderShip = () => {
   renderShips(allShips.value);
-}, mapInstance$5 = ref(), renderTrackSetInstance = (e) => mapInstance$5.value = e, showTracks = ref([]), trackList = ref([]);
+}, mapInstance$5 = ref(), renderCustomOverlaySetInstance = (e) => mapInstance$5.value = e, drawCustomContent = (e, t, n, o = "top-left", r = !1) => {
+  var m, u;
+  if (!t || !mapInstance$5.value) return;
+  document.querySelectorAll(".truck-custom-content").forEach((f) => f.parentNode.removeChild(f));
+  const l = document.createElement("div");
+  l.innerHTML = n;
+  const i = new Overlay({
+    element: l,
+    position: t,
+    // 初始位置
+    positioning: o,
+    stopEvent: r
+    // 设置不阻拦事件
+  });
+  if (r) {
+    let f = !1, p = [0, 0], y = [0, 0];
+    l.addEventListener("mousedown", function(h) {
+      var g;
+      f = !0, h.clientX, h.clientY, p = (g = mapInstance$5.value) == null ? void 0 : g.getCoordinateFromPixel([h.clientX - 200, h.clientY - 200]), y = [
+        h.clientX - l.getBoundingClientRect().left + 160,
+        h.clientY - l.getBoundingClientRect().top + 84
+      ], h.preventDefault();
+    }), document.addEventListener("mousemove", function(h) {
+      var g;
+      if (f) {
+        let M = (g = mapInstance$5.value) == null ? void 0 : g.getCoordinateFromPixel([h.clientX - y[0], h.clientY - y[1]]), T = M[0] - p[0], b = M[1] - p[1];
+        i.setPosition([p[0] + T, p[1] + b]);
+      }
+    }), document.addEventListener("mouseup", function() {
+      f = !1;
+    });
+  }
+  (m = mapInstance$5.value) == null || m.addOverlay(i);
+  const s = l.querySelector(".close-button");
+  s && s.addEventListener("click", () => {
+    var f, p;
+    (f = mapInstance$5.value) == null || f.removeOverlay(i), (p = l.parentNode) == null || p.removeChild(l);
+  });
+  let c = JSON.parse(JSON.stringify(t));
+  const d = (u = mapInstance$5.value) == null ? void 0 : u.getCoordinateFromPixel(c);
+  return i.setPosition(d), i;
+}, mapInstance$4 = ref(), renderTrackSetInstance = (e) => mapInstance$4.value = e, showTracks = ref([]), trackList = ref([]);
 ref(null);
-const trackId = ref(""), cursor = ref(0), renderTrack = (e, t, o, n, r = "ship") => {
+const trackId = ref(""), cursor = ref(0), renderTrack = (e, t, n, o, r = "ship") => {
   var m;
   if (nextTick(() => {
     hiddenAllShips();
@@ -1249,18 +1315,71 @@ const trackId = ref(""), cursor = ref(0), renderTrack = (e, t, o, n, r = "ship")
   }), trackId.value = e, l[e] = t, trackList.value = t;
   const i = ["#ff0000", "#00ff00", "#0079ff", "#ffa500", "#800080", "#008080", "#ffc0cb", "#800000", "#000080", "#808000"], s = l[e].map(
     (u) => transform([u.lon, u.lat], projection.data, projection.mercator)
-  ), c = new LineString(s), d = formatUtils.formatLength(c, n) || "--";
+  ), c = new LineString(s), d = formatUtils.formatLength(c, 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: d }) : showTracks.value[u].length = d, ++cursor.value, cursor.value > i.length && (cursor.value = 0), renderTrackLine(l, e, o), nextTick(() => {
+    u < 0 ? showTracks.value.push({ id: e, length: d }) : showTracks.value[u].length = d, ++cursor.value, cursor.value > i.length && (cursor.value = 0), renderTrackLine(l, e, n), nextTick(() => {
       resetTrackView(e);
     }).then(() => {
-    }), (p = mapInstance$5.value) == null || p.on("moveend", () => {
-      showTrackLayer.value && (trackLabels.value = [], renderTrackLine(l, e, o));
-    });
+    }), (p = mapInstance$4.value) == null || p.on("moveend", () => {
+      showTrackLayer.value && (trackLabels.value = [], renderTrackLine(l, e, n));
+    }), renderTrackPointPopup();
   }).then(() => {
   });
+}, renderTrackPointPopup = () => {
+  var t;
+  const e = ref(null);
+  (t = mapInstance$4.value) == null || t.on("pointermove", (n) => {
+    var r, l, i, s;
+    e.value && ((r = mapInstance$4.value) == null || r.removeOverlay(e.value));
+    const o = (l = mapInstance$4.value) == null ? void 0 : l.forEachFeatureAtPixel(n.pixel, (c) => c);
+    if (o) {
+      const c = o.get("data");
+      if (!(c != null && c.time)) return;
+      let d = "";
+      c != null && c.stayTime && (d = `
+                    <div class="item w-100">
+                        <div class="item-label">停泊时间约</div>
+                        <div class="item-item">${c.stayTime}</div>
+                    </div>
+                `);
+      const m = `
+                <div class="track-point-popup">
+                    <div class="item">
+                        <div class="item-label">状态</div>
+                        <div class="item-item">${c != null && c.sailStatus ? SHIP_SAIL_STATUS[String(c.sailStatus)] : DEFAULT_VALUE}</div>
+                    </div>
+                    <div class="item">
+                        <div class="item-label">航速</div>
+                        <div class="item-item">${c.speed || DEFAULT_VALUE}</div>
+                    </div>
+                    <div class="item">
+                        <div class="item-label">艏向</div>
+                        <div class="item-item">${c.hdg || DEFAULT_VALUE}</div>
+                    </div>
+                    <div class="item">
+                        <div class="item-label">航向</div>
+                        <div class="item-item">${c.cog || DEFAULT_VALUE}</div>
+                    </div>
+                    <div class="item">
+                        <div class="item-label">经度</div>
+                        <div class="item-item">${c.lon || DEFAULT_VALUE}</div>
+                    </div>
+                    <div class="item">
+                        <div class="item-label">纬度</div>
+                        <div class="item-item">${c.lat || DEFAULT_VALUE}</div>
+                    </div>
+                    <div class="item w-100">
+                        <div class="item-label">时间</div>
+                        <div class="item-item">${c.time}</div>
+                    </div>
+                    ${d ?? d}
+                </div>`, u = (i = mapInstance$4.value) == null ? void 0 : i.getPixelFromCoordinate(n.coordinate);
+      e.value = drawCustomContent(c.time, u, m, "center-center");
+    } else
+      (s = mapInstance$4.value) == null || s.removeOverlay(e.value);
+  });
 }, removeAllTrackLayer = () => {
   var e;
   showTracks.value = [], (e = trackLineVectorSource.value) == null || e.clear();
@@ -1268,12 +1387,12 @@ const trackId = ref(""), cursor = ref(0), renderTrack = (e, t, o, n, r = "ship")
   handlePlay(String(e), t);
 }, resetTrackView = (e) => {
   var r;
-  const t = mapInstance$5.value.getView(), o = e ? shipTrackLineFeatures.value.find((l) => l.getId() === e) : shipTrackLineFeatures.value[0];
-  if (!o) return;
-  const n = (r = o == null ? void 0 : o.getGeometry()) == null ? void 0 : r.getExtent();
-  if (n != null && n.length)
+  const t = mapInstance$4.value.getView(), n = e ? shipTrackLineFeatures.value.find((l) => l.getId() === e) : shipTrackLineFeatures.value[0];
+  if (!n) return;
+  const o = (r = n == null ? void 0 : n.getGeometry()) == null ? void 0 : r.getExtent();
+  if (o != null && o.length)
     try {
-      const l = buffer(n, Math.max(n[2] - n[0], n[3] - n[1]) * 0.02);
+      const l = buffer(o, Math.max(o[2] - o[0], o[3] - o[1]) * 0.02);
       t.fit(l);
     } catch (l) {
       console.log(l);
@@ -1293,10 +1412,10 @@ const trackId = ref(""), cursor = ref(0), renderTrack = (e, t, o, n, r = "ship")
   emits: ["switchGreenDot", "switchMapTile"],
   setup(e, { emit: t }) {
     var p, y;
-    const o = inject("mapInstance"), n = e, r = t, l = ref(((y = (p = o.value) == null ? void 0 : p.getView()) == null ? void 0 : y.getZoom()) || mapZoom.default), i = ref(!1), s = ref(null), c = ref(!0), d = () => {
-      n.disableGreenDot || l.value >= mapZoom.shipGreenDotMax || (c.value = !c.value, r("switchGreenDot", c.value));
+    const n = inject("mapInstance"), o = e, r = t, l = ref(((y = (p = n.value) == null ? void 0 : p.getView()) == null ? void 0 : y.getZoom()) || mapZoom.default), i = ref(!1), s = ref(null), c = ref(!0), d = () => {
+      o.disableGreenDot || l.value >= mapZoom.shipGreenDotMax || (c.value = !c.value, r("switchGreenDot", c.value));
     }, m = () => {
-      r("switchMapTile", n.mapTileMode === BaseMapType.vector ? BaseMapType.satellite : BaseMapType.vector);
+      r("switchMapTile", o.mapTileMode === BaseMapType.vector ? BaseMapType.satellite : BaseMapType.vector);
     }, u = () => {
       var h, g;
       i.value ? (h = s.value) == null || h.removeInteraction() : (g = s.value) == null || g.addInteraction(), i.value = !i.value;
@@ -1307,9 +1426,9 @@ const trackId = ref(""), cursor = ref(0), renderTrack = (e, t, o, n, r = "ship")
     return onMounted(() => {
       nextTick(() => {
         var h;
-        (h = o.value) == null || h.on("moveend", () => {
-          var L, T;
-          const g = (T = (L = o.value) == null ? void 0 : L.getView()) == null ? void 0 : T.getZoom();
+        (h = n.value) == null || h.on("moveend", () => {
+          var M, T;
+          const g = (T = (M = n.value) == null ? void 0 : M.getView()) == null ? void 0 : T.getZoom();
           g && (l.value = g);
         });
       });
@@ -1338,7 +1457,7 @@ const trackId = ref(""), cursor = ref(0), renderTrack = (e, t, o, n, r = "ship")
             h.vehicleMode === "ship" ? (openBlock(), createElementBlock("div", {
               key: 2,
               class: normalizeClass(`switch-btn ${h.mapTileMode === unref(BaseMapType).satellite && "active"}`),
-              onClick: g[0] || (g[0] = (L) => m())
+              onClick: g[0] || (g[0] = (M) => m())
             }, g[7] || (g[7] = [
               createElementVNode("i", { class: "map-iconfont icon-space" }, null, -1),
               createElementVNode("div", { class: "button-text" }, "图层", -1)
@@ -1346,7 +1465,7 @@ const trackId = ref(""), cursor = ref(0), renderTrack = (e, t, o, n, r = "ship")
             h.vehicleMode === "truck" ? (openBlock(), createElementBlock("div", {
               key: 3,
               class: normalizeClass(`switch-btn ${h.mapTileMode === unref(BaseMapType).satellite && "active"}`),
-              onClick: g[1] || (g[1] = (L) => m())
+              onClick: g[1] || (g[1] = (M) => m())
             }, g[8] || (g[8] = [
               createElementVNode("i", { class: "map-iconfont icon-space" }, null, -1),
               createElementVNode("div", { class: "button-text" }, "卫星", -1)
@@ -1354,14 +1473,14 @@ const trackId = ref(""), cursor = ref(0), renderTrack = (e, t, o, n, r = "ship")
             h.showTrackLayer ? (openBlock(), createElementBlock(Fragment, { key: 4 }, [
               createElementVNode("div", {
                 class: "switch-btn multiple",
-                onClick: g[2] || (g[2] = (L) => unref(playTrack)(unref(currentTrackId), 1))
+                onClick: g[2] || (g[2] = (M) => unref(playTrack)(unref(currentTrackId), 1))
               }, g[9] || (g[9] = [
                 createElementVNode("i", { class: "map-iconfont icon-play" }, null, -1),
                 createElementVNode("div", { class: "button-text" }, "播放轨迹", -1)
               ])),
               createElementVNode("div", {
                 class: "switch-btn multiple",
-                onClick: g[3] || (g[3] = (L) => unref(resetTrackView)())
+                onClick: g[3] || (g[3] = (M) => unref(resetTrackView)())
               }, g[10] || (g[10] = [
                 createElementVNode("i", { class: "map-iconfont icon-center" }, null, -1),
                 createElementVNode("div", { class: "button-text" }, "轨迹居中", -1)
@@ -1402,7 +1521,7 @@ const trackId = ref(""), cursor = ref(0), renderTrack = (e, t, o, n, r = "ship")
           ref_key: "measureRef",
           ref: s,
           visible: i.value,
-          "onUpdate:visible": g[4] || (g[4] = (L) => i.value = L),
+          "onUpdate:visible": g[4] || (g[4] = (M) => i.value = M),
           onClose: f,
           "view-mode": h.viewMode
         }, null, 8, ["visible", "view-mode"])) : createCommentVNode("", !0)
@@ -1412,14 +1531,14 @@ const trackId = ref(""), cursor = ref(0), renderTrack = (e, t, o, n, r = "ship")
 }), ToolPanel = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["__scopeId", "data-v-ef931f65"]]), _hoisted_1$2 = { id: "scale-line-container" }, _sfc_main$3 = /* @__PURE__ */ defineComponent({
   __name: "scaleLine",
   setup(e, { expose: t }) {
-    const o = inject("mapInstance");
+    const n = inject("mapInstance");
     return t({
       setScaleLine: (r) => {
         var s;
         const l = new ScaleLine$1({
           units: r || "metric"
         }), i = document.getElementById("scale-line-container");
-        i && (l.setTarget(i), (s = o.value) == null || s.addControl(l));
+        i && (l.setTarget(i), (s = n.value) == null || s.addControl(l));
       }
     }), (r, l) => (openBlock(), createElementBlock("div", _hoisted_1$2));
   }
@@ -1431,22 +1550,22 @@ const trackId = ref(""), cursor = ref(0), renderTrack = (e, t, o, n, r = "ship")
     }
   },
   setup(e) {
-    const t = inject("mapInstance"), o = () => {
+    const t = inject("mapInstance"), n = () => {
       if (!t.value) return;
       const r = t.value.getView(), l = r.getZoom();
       l && r.setZoom(l + 1);
-    }, n = () => {
+    }, o = () => {
       if (!t.value) return;
       const r = t.value.getView(), l = r.getZoom();
       l && r.setZoom(l - 1);
     };
     return (r, l) => (openBlock(), createElementBlock("div", _hoisted_1$1, [
       createElementVNode("div", {
-        onClick: o,
+        onClick: n,
         class: "button big-button"
       }, "+"),
       createElementVNode("div", {
-        onClick: n,
+        onClick: o,
         class: "button small-button"
       }, "-")
     ]));
@@ -1454,7 +1573,7 @@ const trackId = ref(""), cursor = ref(0), renderTrack = (e, t, o, n, r = "ship")
 }), ZoomControl = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-602b1c0f"]]), _hoisted_1 = { class: "copyright" }, _hoisted_2 = { class: "tdt-control-copyright tdt-control" }, _hoisted_3 = ["src"], _sfc_main$1 = /* @__PURE__ */ defineComponent({
   __name: "copyright",
   setup(e) {
-    return (t, o) => (openBlock(), createElementBlock("div", _hoisted_1, [
+    return (t, n) => (openBlock(), createElementBlock("div", _hoisted_1, [
       createElementVNode("div", _hoisted_2, [
         createElementVNode("img", {
           src: unref(CDN_URL) + "map/tdt-logo.png",
@@ -1463,27 +1582,27 @@ const trackId = ref(""), cursor = ref(0), renderTrack = (e, t, o, n, r = "ship")
           class: "logo",
           alt: ""
         }, null, 8, _hoisted_3),
-        o[0] || (o[0] = createElementVNode("div", { class: "copyright-text" }, "GS（2024）0568号 - 甲测资字1100471", -1))
+        n[0] || (n[0] = createElementVNode("div", { class: "copyright-text" }, "GS（2024）0568号 - 甲测资字1100471", -1))
       ]),
-      o[1] || (o[1] = createElementVNode("div", {
+      n[1] || (n[1] = createElementVNode("div", {
         id: "dataSource",
         class: "tdt-control data-source"
       }, "数据来源：自然资源部 & NavInfo", -1))
     ]));
   }
-}), Copyright = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-9c5c2f7b"]]), dotImage = new Image();
-dotImage.src = `${CDN_URL}/map/truck-dot.svg`;
-dotImage.crossOrigin = "anonymous";
-const dotActiveImage = new Image();
-dotActiveImage.src = `${CDN_URL}/map/truck-dot-active.svg`;
-dotActiveImage.crossOrigin = "anonymous";
+}), Copyright = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-9c5c2f7b"]]), dotImage$1 = new Image();
+dotImage$1.src = `${CDN_URL}/map/truck-dot.svg`;
+dotImage$1.crossOrigin = "anonymous";
+const dotActiveImage$1 = new Image();
+dotActiveImage$1.src = `${CDN_URL}/map/truck-dot-active.svg`;
+dotActiveImage$1.crossOrigin = "anonymous";
 const cameraImage = new Image();
 cameraImage.src = `${CDN_URL}/map/map-camera.svg`;
 cameraImage.crossOrigin = "anonymous";
 const loadImage = new Image();
 loadImage.src = `${CDN_URL}/map/map-load.svg`;
 loadImage.crossOrigin = "anonymous";
-const setTruckStyle = (e, t, o, n) => new Style({
+const setTruckStyle = (e, t, n, o) => new Style({
   renderer: (r, l) => {
     const i = l.context;
     i.save();
@@ -1496,99 +1615,58 @@ const setTruckStyle = (e, t, o, n) => new Style({
     const p = 56, y = "#FFFFFF";
     let h = 176;
     const g = 52;
-    let L = "#164AFF", T = "#FFFFFF";
-    o === CAR_COLOR.YELLOW ? (h = 176, L = "#FFC81E", T = "rgba(0,0,0,0.88)") : o === CAR_COLOR.Y_GREEN && (f = 200, h = 196, L = "#8FED7C", T = "rgba(0,0,0,0.88)"), n != null && n.length && (f += n.length * 56), fillRectRadius(i, m, u, f, p, y), fillRectRadius(i, m + 2, u + 2, h, g, L), o === CAR_COLOR.Y_GREEN && fillRectRadius(i, m + 2, u + 2, 68, g, "#FFC81E"), i.save(), i.restore(), i.fillStyle = T, i.font = "bold 28px Arial", i.textAlign = "left", i.textBaseline = "middle";
+    let M = "#164AFF", T = "#FFFFFF";
+    n === CAR_COLOR.YELLOW ? (h = 176, M = "#FFC81E", T = "rgba(0,0,0,0.88)") : n === CAR_COLOR.Y_GREEN && (f = 200, h = 196, M = "#8FED7C", T = "rgba(0,0,0,0.88)"), o != null && o.length && (f += o.length * 56), fillRectRadius(i, m, u, f, p, y), fillRectRadius(i, m + 2, u + 2, h, g, M), n === CAR_COLOR.Y_GREEN && fillRectRadius(i, m + 2, u + 2, 68, g, "#FFC81E"), i.save(), i.restore(), i.fillStyle = T, i.font = "bold 28px Arial", i.textAlign = "left", i.textBaseline = "middle";
     const b = `${t.slice(0, 2) + " · " + t.slice(2)}`;
-    if (i.fillText(b, m + 12, u + 32), i.save(), i.restore(), n != null && n.length) {
-      const F = i.measureText(b).width + 12;
+    if (i.fillText(b, m + 12, u + 32), i.save(), i.restore(), o != null && o.length) {
+      const x = i.measureText(b).width + 12;
       let v = 0;
-      n.forEach((S) => {
-        S === DEVICE_TYPE.CAMERA && (i.drawImage(cameraImage, c - 54 + F + v * 56, d - 64, 50, 50), ++v), S === DEVICE_TYPE.LOAD && (i.drawImage(loadImage, c - 54 + F + v * 56, d - 64, 50, 50), ++v);
+      o.forEach((w) => {
+        w === DEVICE_TYPE.CAMERA && (i.drawImage(cameraImage, c - 54 + x + v * 56, d - 64, 50, 50), ++v), w === DEVICE_TYPE.LOAD && (i.drawImage(loadImage, c - 54 + x + v * 56, d - 64, 50, 50), ++v);
       });
     }
-    const C = dotImage;
+    const C = dotImage$1;
     i.drawImage(C, c + f / 2 - 90, d, 50 / s, 50 / s), i.restore();
   }
-}), mapInstance$4 = ref(), renderDashboardSetInstance = (e) => mapInstance$4.value = e;
+}), mapInstance$3 = ref(), renderDashboardSetInstance = (e) => mapInstance$3.value = e;
 ref([]);
 let truckMarkerList = [], trucksVectorSource;
 const renderTrucksMarker = (e) => {
-  if (deleteAllTruckMarkers(), !!mapInstance$4.value)
+  if (deleteAllTruckMarkers(), !!mapInstance$3.value)
     return e.forEach((t) => {
-      const o = formatUtils.convertSixHundredThousandToLatLng(t.lon, t.lat), n = new Feature({
-        geometry: new Point(fromLonLat(o))
+      const n = formatUtils.convertSixHundredThousandToLatLng(t.lon, t.lat), o = new Feature({
+        geometry: new Point(fromLonLat(n))
       });
-      n.set("data", t), n.setStyle(
+      o.set("data", t), o.setStyle(
         setTruckStyle(!1, t.vno, t == null ? void 0 : t.vclColor, t == null ? void 0 : t.icons)
       ), truckMarkerList.push({
         name: t.vno,
-        lonlat: o,
-        feature: n
+        lonlat: n,
+        feature: o
       });
     }), trucksVectorSource = new VectorSource({
       features: truckMarkerList.map((t) => t.feature)
     }), trucksLayer.value = new VectorLayer({
       source: trucksVectorSource
-    }), mapInstance$4.value.addLayer(trucksLayer.value), trucksLayer.value;
+    }), mapInstance$3.value.addLayer(trucksLayer.value), trucksLayer.value;
 }, deleteAllTruckMarkers = () => {
   truckMarkerList.forEach((e) => {
     e.feature && (trucksVectorSource == null || trucksVectorSource.removeFeature(e.feature));
   }), truckMarkerList = [];
-}, mapInstance$3 = ref(), renderCustomOverlaySetInstance = (e) => mapInstance$3.value = e, drawCustomContent = (e, t, o, n = "top-left", r = !1) => {
-  var m, u;
-  if (!t || !mapInstance$3.value) return;
-  document.querySelectorAll(".truck-custom-content").forEach((f) => f.parentNode.removeChild(f));
-  const l = document.createElement("div");
-  l.innerHTML = o;
-  const i = new Overlay({
-    element: l,
-    position: t,
-    // 初始位置
-    positioning: n,
-    stopEvent: r
-    // 设置不阻拦事件
-  });
-  if (r) {
-    let f = !1, p = [0, 0], y = [0, 0];
-    l.addEventListener("mousedown", function(h) {
-      var g;
-      f = !0, h.clientX, h.clientY, p = (g = mapInstance$3.value) == null ? void 0 : g.getCoordinateFromPixel([h.clientX - 200, h.clientY - 200]), y = [
-        h.clientX - l.getBoundingClientRect().left + 160,
-        h.clientY - l.getBoundingClientRect().top + 84
-      ], h.preventDefault();
-    }), document.addEventListener("mousemove", function(h) {
-      var g;
-      if (f) {
-        let L = (g = mapInstance$3.value) == null ? void 0 : g.getCoordinateFromPixel([h.clientX - y[0], h.clientY - y[1]]), T = L[0] - p[0], b = L[1] - p[1];
-        i.setPosition([p[0] + T, p[1] + b]);
-      }
-    }), document.addEventListener("mouseup", function() {
-      f = !1;
-    });
-  }
-  (m = mapInstance$3.value) == null || m.addOverlay(i);
-  const s = l.querySelector(".close-button");
-  s && s.addEventListener("click", () => {
-    var f, p;
-    (f = mapInstance$3.value) == null || f.removeOverlay(i), (p = l.parentNode) == null || p.removeChild(l);
-  });
-  let c = JSON.parse(JSON.stringify(t));
-  const d = (u = mapInstance$3.value) == null ? void 0 : u.getCoordinateFromPixel(c);
-  return i.setPosition(d), i;
 }, mapInstance$2 = ref(), renderTruckSetInstance = (e) => mapInstance$2.value = e, vehicle = ref(null), focusShipData = ref(), currentTruckOverlay = ref(null), findTruck = async (e) => {
   if (!mapInstance$2.value) return;
   focusShipData.value = e;
-  const t = formatUtils.convertSixHundredThousandToLatLng(e.lon, e.lat), o = mapInstance$2.value.getPixelFromCoordinate(transform(t, projection.data, projection.mercator));
-  currentTruckOverlay.value = drawTruckIcon(e.vno, o, e == null ? void 0 : e.drc);
-  const n = mapInstance$2.value.getView(), r = new Point(t);
-  n.setCenter(transform(r.getCoordinates(), projection.data, projection.mercator));
+  const t = formatUtils.convertSixHundredThousandToLatLng(e.lon, e.lat), n = mapInstance$2.value.getPixelFromCoordinate(transform(t, projection.data, projection.mercator));
+  currentTruckOverlay.value = drawTruckIcon(e.vno, n, e == null ? void 0 : e.drc);
+  const o = mapInstance$2.value.getView(), r = new Point(t);
+  o.setCenter(transform(r.getCoordinates(), projection.data, projection.mercator));
 }, clearAllTruck = () => {
   vehicle.value.clearAllShip();
-}, drawTruckIcon = (e, t, o) => {
-  const n = `<div id="${e}" class="ol-custom-content truck-custom-content" style="width: 80px; height: 80px; transform: rotate(${o}deg);">
+}, 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);">
           <img src="${CDN_URL}map/car-icon.gif" width="100%" height="100%" />
         </div>`;
-  return drawCustomContent(e, t, n, "center-center");
+  return drawCustomContent(e, t, o, "center-center");
 }, removeTruckIcon = () => {
   var t;
   const e = (t = currentTruckOverlay.value) == null ? void 0 : t.getElement();
@@ -1596,11 +1674,11 @@ const renderTrucksMarker = (e) => {
 }, zoomTruckIcon = () => {
   var l;
   if (!mapInstance$2.value) return;
-  const e = mapInstance$2.value.getView().getZoom(), t = 120, o = 60;
-  function n(i) {
-    return i < 14 ? o : i >= 14 && i <= 18 ? Math.round((i - 14) * (t - o) / 4 + o) : t;
+  const e = mapInstance$2.value.getView().getZoom(), t = 120, n = 60;
+  function o(i) {
+    return i < 14 ? n : i >= 14 && i <= 18 ? Math.round((i - 14) * (t - n) / 4 + n) : t;
   }
-  const r = n(e);
+  const r = o(e);
   (l = document.querySelectorAll(".truck-custom-content")) == null || l.forEach((i) => {
     i.style.width = `${r}px`, i.style.height = `${r}px`;
   });
@@ -1633,14 +1711,14 @@ const renderTrucksMarker = (e) => {
     padding: [2, 2, 2, 2]
     // 设置文本背景的内边距
   })
-}), renderMarker = (e, t = !0, o = !0) => {
+}), renderMarker = (e, t = !0, n = !0) => {
   var m;
   if (!mapInstance$1.value || !e || e.split(",").length !== 2) return;
-  const [n, r] = e.split(",").map(Number);
+  const [o, r] = e.split(",").map(Number);
   marker.value = new Feature({
-    geometry: new Point(fromLonLat([n, r]))
+    geometry: new Point(fromLonLat([o, r]))
   });
-  const l = o ? `${n}, ${r}` : "";
+  const l = n ? `${o}, ${r}` : "";
   (m = marker.value) == null || m.setStyle(createIconStyle(l));
   const i = new VectorSource({
     features: [marker.value]
@@ -1657,15 +1735,15 @@ const renderTrucksMarker = (e) => {
       markerPosition.value = `${y[0].toFixed(6)}, ${y[1].toFixed(6)}`, (h = marker.value) == null || h.setStyle(createIconStyle(markerPosition.value));
     }), mapInstance$1.value.addInteraction(u);
   }
-  const d = new Point([n, r]);
+  const d = new Point([o, r]);
   c.setCenter(transform(d.getCoordinates(), projection.data, projection.mercator)), c.setZoom(mapZoom.findShip);
 }, setMarkerPosition = (e) => {
   var r, l;
   if (!mapInstance$1.value) return;
-  const t = mapInstance$1.value.getView(), o = e.split(",").map(Number);
-  (l = (r = marker.value) == null ? void 0 : r.getGeometry()) == null || l.setCoordinates(fromLonLat([o[0], o[1]]));
-  const n = new Point([o[0], o[1]]);
-  t.setCenter(transform(n.getCoordinates(), projection.data, projection.mercator));
+  const t = mapInstance$1.value.getView(), n = e.split(",").map(Number);
+  (l = (r = marker.value) == null ? void 0 : r.getGeometry()) == null || l.setCoordinates(fromLonLat([n[0], n[1]]));
+  const o = new Point([n[0], n[1]]);
+  t.setCenter(transform(o.getCoordinates(), projection.data, projection.mercator));
 }, mapInstance = ref(), drawPolygonSetInstance = (e) => mapInstance.value = e;
 let layerState = "drawn", drawnState = "undrawn";
 const source = new VectorSource();
@@ -1690,18 +1768,18 @@ function createHelpTooltip() {
 }
 let squareLimitError = !1, lineLimitError = !1;
 const validateSquareLimit = (e) => {
-  let o = 1 / 0, n = -1 / 0, r = 1 / 0, l = -1 / 0;
+  let n = 1 / 0, o = -1 / 0, r = 1 / 0, l = -1 / 0;
   e == null || e.forEach((c) => {
     const d = transform(c, projection.mercator, projection.data), m = d[0], u = d[1];
-    o = Math.min(o, u), n = Math.max(n, u), r = Math.min(r, m), l = Math.max(l, m);
+    n = Math.min(n, u), o = Math.max(o, u), r = Math.min(r, m), l = Math.max(l, m);
   });
-  const i = (n - o) * 111, s = (l - r) * 111;
+  const i = (o - n) * 111, s = (l - r) * 111;
   squareLimitError = i > 150 || s > 150;
 };
 let storeFeature;
 const addInteraction = (e) => {
-  var n, r;
-  drawVector || init(), drawnState = "undrawn", layerState = "drawn", (n = mapInstance.value) == null || n.addLayer(drawVector);
+  var o, r;
+  drawVector || init(), drawnState = "undrawn", layerState = "drawn", (o = mapInstance.value) == null || o.addLayer(drawVector);
   const t = new Style({
     stroke: new Stroke({
       color: "rgba(255, 255, 255, 1)",
@@ -1718,10 +1796,10 @@ const addInteraction = (e) => {
     trace: !0,
     style: [t, circleStyle]
   }), (r = mapInstance.value) == null || r.addInteraction(draw), createMeasureTooltip(), createHelpTooltip();
-  let o;
+  let n;
   draw.on("drawstart", function(l) {
     var i;
-    layerState = "drawn", sketch = l.feature, o = (i = sketch.getGeometry()) == null ? void 0 : i.on("change", function(s) {
+    layerState = "drawn", sketch = l.feature, n = (i = sketch.getGeometry()) == null ? void 0 : i.on("change", function(s) {
       const c = s.target;
       let d = formatUtils.formatArea(c, LENGTH_UNIT.NM);
       const u = c.getCoordinates()[0], f = new LineString([u[u.length - 2], u[u.length - 1]]);
@@ -1744,57 +1822,57 @@ const addInteraction = (e) => {
       const s = endFn(l.feature);
       s != null && s.length && e && e(s);
     }
-    if (sketch = null, measureTooltipElement = null, createMeasureTooltip(), o && unByKey(o), drawnState = "drawend", draw) {
+    if (sketch = null, measureTooltipElement = null, createMeasureTooltip(), n && unByKey(n), drawnState = "drawend", draw) {
       const s = mapInstance.value.getInteractions().getArray().find((c) => c.ol_uid === draw.ol_uid);
       s && ((i = mapInstance.value) == null || i.removeInteraction(s)), helpTooltipElement != null && helpTooltipElement.parentNode && helpTooltipElement.parentNode.removeChild(helpTooltipElement);
     }
   });
 }, removeInteraction = () => {
-  var e, t, o;
+  var e, t, n;
   if (mapInstance.value) {
-    if (document.querySelectorAll(".ol-tooltip.ol-tooltip-draw-polygon").forEach((n) => {
+    if (document.querySelectorAll(".ol-tooltip.ol-tooltip-draw-polygon").forEach((o) => {
       var r;
-      (r = n == null ? void 0 : n.parentNode) == null || r.removeChild(n);
+      (r = o == null ? void 0 : o.parentNode) == null || r.removeChild(o);
     }), source.clear(), (e = mapInstance.value) == null || e.removeLayer(drawVector), helpTooltipElement != null && helpTooltipElement.parentNode && helpTooltipElement.parentNode.removeChild(helpTooltipElement), ((t = mapInstance.value) == null ? void 0 : t.getTargetElement()).style.cursor = "", document.querySelector("#map").style.cursor = "", draw) {
-      const n = mapInstance.value.getInteractions().getArray().find((r) => r.ol_uid === draw.ol_uid);
-      n && ((o = mapInstance.value) == null || o.removeInteraction(n));
+      const o = mapInstance.value.getInteractions().getArray().find((r) => r.ol_uid === draw.ol_uid);
+      o && ((n = mapInstance.value) == null || n.removeInteraction(o));
     }
     drawnState = "undrawn", layerState = "destroyed";
   }
 }, endFn = (e) => {
-  var t, o, n;
+  var t, n, o;
   if (e.getGeometry()) {
     const r = [], i = e.getGeometry().getCoordinates();
     (t = i[0]) == null || t.forEach((c) => {
       r.push(transform(c, projection.mercator, projection.data));
     });
     const s = i[0][i[0].length - 2];
-    if (s && measureTooltip.setPosition(s), measureTooltip.setOffset([10, 0]), measureTooltipElement && (measureTooltipElement.innerHTML += '<span class="delete-icon"><i class="map-iconfont icon-delete" /></div>'), (o = document.querySelector(".delete-icon")) == null || o.addEventListener("click", () => {
+    if (s && measureTooltip.setPosition(s), measureTooltip.setOffset([10, 0]), measureTooltipElement && (measureTooltipElement.innerHTML += '<span class="delete-icon"><i class="map-iconfont icon-delete" /></div>'), (n = document.querySelector(".delete-icon")) == null || n.addEventListener("click", () => {
       reset();
     }), !lineLimitError && !squareLimitError)
       return r;
-    draw && ((n = mapInstance.value) == null || n.removeInteraction(draw)), helpTooltipElement != null && helpTooltipElement.parentNode && helpTooltipElement.parentNode.removeChild(helpTooltipElement);
+    draw && ((o = mapInstance.value) == null || o.removeInteraction(draw)), helpTooltipElement != null && helpTooltipElement.parentNode && helpTooltipElement.parentNode.removeChild(helpTooltipElement);
   }
 }, initFeature = (e) => {
-  var t, o;
+  var t, n;
   if (layerState = "drawn", storeFeature) {
-    const n = storeFeature.getGeometry();
-    if (!n) return;
-    const r = formatUtils.formatArea(n, LENGTH_UNIT.NM);
+    const o = storeFeature.getGeometry();
+    if (!o) return;
+    const r = formatUtils.formatArea(o, LENGTH_UNIT.NM);
     measureTooltipElement && (measureTooltipElement.innerHTML = `
                 <span class="text">面积：${r}${lineLimitError || squareLimitError ? '<span class="error pl-12">超出可以绘画的距离</span>' : ""}</span>
             `), (t = drawVector.getSource()) == null || t.addFeature(storeFeature);
     const l = endFn(storeFeature);
     l != null && l.length && e && e(l);
     const i = getCenter(storeFeature.getGeometry().getExtent());
-    (o = mapInstance.value) == null || o.getView().setCenter(i);
+    (n = mapInstance.value) == null || n.getView().setCenter(i);
   }
 }, pointerMoveHandler = function(e) {
-  var o;
+  var n;
   if (e.dragging)
     return;
   let t = "点击选择起点";
-  sketch && (t = "单击继续，双击结束"), helpTooltipElement && (helpTooltipElement.innerHTML = t, helpTooltip.setPosition(e.coordinate), helpTooltipElement.classList.remove("hidden")), layerState === "drawn" && (((o = mapInstance.value) == null ? void 0 : o.getTargetElement()).style.cursor = "crosshair");
+  sketch && (t = "单击继续，双击结束"), helpTooltipElement && (helpTooltipElement.innerHTML = t, helpTooltip.setPosition(e.coordinate), helpTooltipElement.classList.remove("hidden")), layerState === "drawn" && (((n = mapInstance.value) == null ? void 0 : n.getTargetElement()).style.cursor = "crosshair");
 }, init = () => {
   mapInstance.value && (circleStyle = new Style({
     image: new CircleStyle({
@@ -1842,16 +1920,16 @@ const addInteraction = (e) => {
     shipData: {}
   },
   emits: ["zoomChanged", "extentChanged"],
-  setup(e, { expose: t, emit: o }) {
-    const n = ref();
-    provide("mapInstance", n);
-    const r = ref(null), l = ref(null), i = ref(null), s = o, c = e, d = ref(c.zoom || mapZoom.default), m = ref(!1), u = ref(!0), f = ref(!0);
+  setup(e, { expose: t, emit: n }) {
+    const o = ref();
+    provide("mapInstance", o);
+    const r = ref(null), l = ref(null), i = ref(null), s = n, c = e, d = ref(c.zoom || mapZoom.default), m = ref(!1), u = ref(!0), f = ref(!0);
     let p;
     ((v) => {
       v[v.tiandituTile = new TileLayer({ source: new XYZ({ url: baseMap.tiandituTile }) })] = "tiandituTile", v[v.tiandituTileMark = new TileLayer({ source: new XYZ({ url: baseMap.tiandituTileMark }) })] = "tiandituTileMark", v[v.tiandituImgTile = new TileLayer({ source: new XYZ({ url: baseMap.tiandituImgTile }), visible: !1 })] = "tiandituImgTile", v[v.tiandituImgTileMark = new TileLayer({ source: new XYZ({ url: baseMap.tiandituImgTileMark }), visible: !1 })] = "tiandituImgTileMark", v[v.greenMark = new TileLayer({ source: new XYZ({ url: baseMap.greenTile }) })] = "greenMark";
     })(p || (p = {}));
     const y = () => {
-      var S, w;
+      var w, k;
       const v = {
         projection: projection.mercator,
         // 地图投影坐标系
@@ -1869,7 +1947,7 @@ const addInteraction = (e) => {
         // 禁用旋转
         multiWorld: !0
       };
-      n.value = new Map$1({
+      o.value = new Map$1({
         target: "map",
         // 对应页面里 id 为 map 的元素
         layers: [
@@ -1881,7 +1959,7 @@ const addInteraction = (e) => {
           p.greenMark
         ],
         view: new View(v)
-      }), h(), (S = l.value) == null || S.setScaleLine(c.vehicleMode === "ship" && "nautical"), (w = n.value) == null || w.on("moveend", b), g(v.zoom < mapZoom.shipGreenDotMax), T(c.vehicleMode === "ship" || c.viewMode === "findShip" ? BaseMapType.satellite : BaseMapType.vector), c.viewMode === "findShip" && c.mmsi && c.shipData && nextTick(() => {
+      }), h(), (w = l.value) == null || w.setScaleLine(c.vehicleMode === "ship" && "nautical"), (k = o.value) == null || k.on("moveend", b), g(v.zoom < mapZoom.shipGreenDotMax), T(c.vehicleMode === "ship" || c.viewMode === "findShip" ? BaseMapType.satellite : BaseMapType.vector), c.viewMode === "findShip" && c.mmsi && c.shipData && nextTick(() => {
         findShip(String(c.mmsi), c.shipData);
       });
     };
@@ -1889,58 +1967,58 @@ const addInteraction = (e) => {
       y();
     });
     const h = () => {
-      n.value && (renderCustomOverlaySetInstance(n.value), renderTruckSetInstance(n.value), drawPolygonSetInstance(n.value), renderShipStyleSetInstance(n.value), renderTrackStyleSetInstance(n.value), renderDashboardSetInstance(n.value), renderMarkerSetInstance(n.value), renderShipSetInstance(n.value), renderTrackSetInstance(n.value));
+      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 S;
-      c.vehicleMode !== "ship" && (v = !1), (S = n.value) == null || S.getLayers().forEach((w) => {
-        w.ol_uid === p.greenMark.ol_uid && (w.setVisible(v), u.value = v);
+      var w;
+      c.vehicleMode !== "ship" && (v = !1), (w = o.value) == null || w.getLayers().forEach((k) => {
+        k.ol_uid === p.greenMark.ol_uid && (k.setVisible(v), u.value = v);
       });
-    }, L = ref(BaseMapType.satellite), T = (v) => {
-      var S;
-      L.value = v, (S = n.value) == null || S.getLayers().forEach((w) => {
-        (w.ol_uid === p.tiandituTile.ol_uid || w.ol_uid === p.tiandituTileMark.ol_uid || w.ol_uid === p.tiandituImgTile.ol_uid || w.ol_uid === p.tiandituImgTileMark.ol_uid) && w.setVisible(!1), (v === BaseMapType.vector && (w.ol_uid === p.tiandituTile.ol_uid || w.ol_uid === p.tiandituTileMark.ol_uid) || v === BaseMapType.satellite && (w.ol_uid === p.tiandituImgTile.ol_uid || w.ol_uid === p.tiandituImgTileMark.ol_uid)) && w.setVisible(!0);
+    }, M = ref(BaseMapType.satellite), T = (v) => {
+      var w;
+      M.value = v, (w = o.value) == null || w.getLayers().forEach((k) => {
+        (k.ol_uid === p.tiandituTile.ol_uid || k.ol_uid === p.tiandituTileMark.ol_uid || k.ol_uid === p.tiandituImgTile.ol_uid || k.ol_uid === p.tiandituImgTileMark.ol_uid) && k.setVisible(!1), (v === BaseMapType.vector && (k.ol_uid === p.tiandituTile.ol_uid || k.ol_uid === p.tiandituTileMark.ol_uid) || v === BaseMapType.satellite && (k.ol_uid === p.tiandituImgTile.ol_uid || k.ol_uid === p.tiandituImgTileMark.ol_uid)) && k.setVisible(!0);
       });
     }, b = () => {
-      const v = n.value.getView(), S = v.getZoom();
-      S && C(S);
-      const w = v.calculateExtent(n.value.getSize());
-      w && S && F(w, S);
+      const v = o.value.getView(), w = v.getZoom();
+      w && C(w);
+      const k = v.calculateExtent(o.value.getSize());
+      k && w && x(k, w);
     }, C = (v) => {
-      var V, k, M, E, x;
+      var V, L, I, E, F;
       d.value = v, g(v < mapZoom.shipGreenDotMax);
-      const S = (V = n.value) == null ? void 0 : V.getLayers(), w = c.vehicleMode === "ship" ? S == null ? void 0 : S.getArray().find((P) => P.ol_uid === p.greenMark.ol_uid) : void 0;
-      showTrackLayer.value ? (f.value = !1, w == null || w.setVisible(!1), (k = shipsLayer.value) == null || k.setVisible(!1), (M = largeAmountShipsLayer.value) == null || M.setVisible(!1)) : !m.value && u.value && v <= mapZoom.shipGreenDotMax ? (f.value = !0, w == null || w.setVisible(!0), (E = shipsLayer.value) == null || E.setVisible(!1), (x = largeAmountShipsLayer.value) == null || x.setVisible(!1)) : (f.value = !1, w == null || w.setVisible(!1)), s("zoomChanged", v);
-    }, F = (v, S) => {
-      const w = transform([v[0], v[1]], projection.mercator, projection.data), V = transform([v[2], v[3]], projection.mercator, projection.data);
-      s("extentChanged", { extent: [w, V], zoom: S });
+      const w = (V = o.value) == null ? void 0 : V.getLayers(), k = c.vehicleMode === "ship" ? w == null ? void 0 : w.getArray().find((N) => N.ol_uid === p.greenMark.ol_uid) : void 0;
+      showTrackLayer.value ? (f.value = !1, k == null || k.setVisible(!1), (L = shipsLayer.value) == null || L.setVisible(!1), (I = largeAmountShipsLayer.value) == null || I.setVisible(!1)) : !m.value && u.value && v <= mapZoom.shipGreenDotMax ? (f.value = !0, k == null || k.setVisible(!0), (E = shipsLayer.value) == null || E.setVisible(!1), (F = largeAmountShipsLayer.value) == null || F.setVisible(!1)) : (f.value = !1, k == null || k.setVisible(!1)), s("zoomChanged", v);
+    }, x = (v, w) => {
+      const k = transform([v[0], v[1]], projection.mercator, projection.data), V = transform([v[2], v[3]], projection.mercator, projection.data);
+      s("extentChanged", { extent: [k, V], zoom: w });
     };
     return t({
-      mapInstance: n,
+      mapInstance: o,
       initMap: y,
       renderTrucksMarker,
       renderShip: renderShips,
-      renderTrack: (v, S, w) => {
-        var V, k;
-        currentTrackId.value = v, showTrackLayer.value = !0, m.value = !0, hiddenAllShips(), (k = (V = largeAmountShipsLayer.value) == null ? void 0 : V.getSource()) == null || k.clear(), renderTrack(v, S, w, LENGTH_UNIT.NM);
+      renderTrack: (v, w, k) => {
+        var V, L;
+        currentTrackId.value = v, showTrackLayer.value = !0, m.value = !0, hiddenAllShips(), (L = (V = largeAmountShipsLayer.value) == null ? void 0 : V.getSource()) == null || L.clear(), renderTrack(v, w, k, LENGTH_UNIT.NM);
       },
       findTruck,
       removeTruckIcon,
       clearAllTruck,
       closeTrack: () => {
-        var v, S;
-        showTrackLayer.value = !1, (v = shipTrackVectorLayer.value) == null || v.setVisible(!1), (S = selectShipsLayer.value) == null || S.setVisible(!0), m.value = !1, g(d.value < mapZoom.shipGreenDotMax), allTracks.value = [], stopAnimation();
+        var v, w;
+        showTrackLayer.value = !1, (v = shipTrackVectorLayer.value) == null || v.setVisible(!1), (w = selectShipsLayer.value) == null || w.setVisible(!0), m.value = !1, g(d.value < mapZoom.shipGreenDotMax), allTracks.value = [], stopAnimation();
       },
       closeTruckTrack: () => {
-        var v, S;
-        showTrackLayer.value = !1, (v = shipTrackVectorLayer.value) == null || v.setVisible(!1), (S = selectShipsLayer.value) == null || S.setVisible(!0), stopAnimation();
+        var v, w;
+        showTrackLayer.value = !1, (v = shipTrackVectorLayer.value) == null || v.setVisible(!1), (w = selectShipsLayer.value) == null || w.setVisible(!0), stopAnimation();
       },
       resetTrackView,
       playTrack,
       clearSelectFeature,
       findShip,
-      focusShip: (v, S, w = !0) => {
-        var V, k;
-        hiddenOrther.value = w, (V = shipsLayer.value) == null || V.setVisible(!w), (k = largeAmountShipsLayer.value) == null || k.setVisible(!1), findShip(v, S);
+      focusShip: (v, w, k = !0) => {
+        var V, L;
+        hiddenOrther.value = k, (V = shipsLayer.value) == null || V.setVisible(!k), (L = largeAmountShipsLayer.value) == null || L.setVisible(!1), findShip(v, w);
       },
       showTracks,
       removeAllTrackLayer,
@@ -1948,25 +2026,25 @@ const addInteraction = (e) => {
       rerenderShip,
       switchGreenDot: () => g(!1),
       zoomTruckIcon,
-      renderTruckTrack: (v, S, w) => {
-        showTrackLayer.value = !0, renderTrack(v, S, w, LENGTH_UNIT.KM, "truck");
+      renderTruckTrack: (v, w, k) => {
+        showTrackLayer.value = !0, renderTrack(v, w, k, LENGTH_UNIT.KM, "truck");
       },
       removerLayer: removeShipTrackLineFeatureByIndex,
       renderMarker,
       setMarkerPosition,
       getZoomAndCenter: () => {
-        var k;
-        const v = (k = n.value) == null ? void 0 : k.getView();
+        var L;
+        const v = (L = o.value) == null ? void 0 : L.getView();
         if (!v) return null;
-        const S = Math.round(Number(v.getZoom())), { lon: w, lat: V } = transformUtils.mercatorToLonLat(v.getCenter());
-        return { zoom: S, center: [w, V] };
+        const w = Math.round(Number(v.getZoom())), { lon: k, lat: V } = transformUtils.mercatorToLonLat(v.getCenter());
+        return { zoom: w, center: [k, V] };
       },
       setCenter: (v) => {
         var V;
-        const S = (V = n.value) == null ? void 0 : V.getView();
-        if (!S) return null;
-        const w = new Point(v);
-        S.setCenter(transform(w.getCoordinates(), projection.data, projection.mercator));
+        const w = (V = o.value) == null ? void 0 : V.getView();
+        if (!w) return null;
+        const k = new Point(v);
+        w.setCenter(transform(k.getCoordinates(), projection.data, projection.mercator));
       },
       drawPolygonTool,
       setMapInstance: h,
@@ -1978,12 +2056,12 @@ const addInteraction = (e) => {
         transform: transformUtils,
         format: formatUtils
       }
-    }), (v, S) => (openBlock(), createElementBlock("div", {
+    }), (v, w) => (openBlock(), createElementBlock("div", {
       class: "map-page map-container",
       ref_key: "pageRef",
       ref: r
     }, [
-      S[0] || (S[0] = createElementVNode("div", {
+      w[0] || (w[0] = createElementVNode("div", {
         id: "map",
         class: "map"
       }, null, -1)),
@@ -1992,7 +2070,7 @@ const addInteraction = (e) => {
         "view-mode": v.viewMode,
         "disable-green-dot": m.value,
         "show-track-layer": unref(showTrackLayer),
-        "map-tile-mode": L.value,
+        "map-tile-mode": M.value,
         onSwitchGreenDot: g,
         onSwitchMapTile: T
       }, {
@@ -2014,7 +2092,180 @@ const addInteraction = (e) => {
       createVNode(Copyright)
     ], 512));
   }
-}), Map = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-d4bd9364"]]), ZhMap = withInstall(Map);
+}), Map = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-d4bd9364"]]), dotImage = new Image();
+dotImage.crossOrigin = "anonymous";
+const dotActiveImage = new Image();
+dotActiveImage.crossOrigin = "anonymous";
+const setPointStyle = (e, t, n) => {
+  const { color: o, url: r, activeUrl: l, activeColor: i } = n;
+  return (l || r) && (e ? dotActiveImage.src = CDN_URL + (l || r) : dotImage.src = CDN_URL + (r || l)), new Style({
+    renderer: (s, c) => {
+      const d = c.context;
+      d.save();
+      let m = 1;
+      d.scale(m, m);
+      let [u, f] = s;
+      u = u / m, f = f / m, d.font = "12px Arial";
+      const p = d.measureText(t).width, y = u - p / 2, h = f - 10, g = p + 4, M = 20, T = e && i || o;
+      if (fillRectRadius(d, y, h + 30, g, M, T), d.save(), d.restore(), d.fillStyle = e ? "#FFFFFF" : "#000000", d.textAlign = "center", d.textBaseline = "middle", d.fillText(t, y + (p + 4) / 2, h + 41), d.save(), d.restore(), r || l) {
+        const b = e ? dotActiveImage : dotImage;
+        d.drawImage(b, u - b.width / 2, f - b.height / 2, 40 / m, 40 / m);
+      }
+      d.restore();
+    }
+  });
+};
+class PointMarkerClass {
+  /**
+   * 地图实例
+   * @param mapInstance
+   * 配置渲染点的样式
+   * @param options
+   */
+  constructor(t, n) {
+    S(this, "mapInstance");
+    // 渲染的数据
+    S(this, "pointMarkerList", []);
+    // 绘制点渲染层数据
+    S(this, "pointsVectorSource");
+    // 当前高亮的数据
+    S(this, "highlightPoint");
+    S(this, "pointLayer");
+    // 颜色等其他设置
+    S(this, "options");
+    this.mapInstance = t, this.options = n;
+  }
+  /**
+   *  渲染
+   * @param list
+   * 格式：
+   * 获取数据的id
+   * id
+   * 地图显示
+   * name
+   * fullName,
+   * 经纬度
+   * lon,
+   * lat,
+   * 渲染点的数据类型，好通过这个判断点击地图获取到的类型， 任意字符串
+   * pointType
+   */
+  renderPointMarker(t) {
+    if (this.deleteAllPointMarkers(), !this.mapInstance) return;
+    let n = {};
+    t.forEach((o) => {
+      var l;
+      const r = [o.lon, o.lat];
+      if (((l = this.highlightPoint) == null ? void 0 : l.id) === o.id)
+        n = {
+          id: o.id,
+          name: o.name,
+          lonlat: [Number(o.lon), Number(o.lat)],
+          pointType: o.pointType
+        };
+      else {
+        const i = this.getFeature(o, r);
+        this.pointMarkerList.push({
+          id: o.id,
+          name: o.name,
+          lonlat: [Number(o.lon), Number(o.lat)],
+          feature: i,
+          pointType: o.pointType
+        });
+      }
+    }), n && n.lonlat && (n.feature = this.getFeature(n, n.lonlat), this.pointMarkerList.push(n)), this.pointsVectorSource = new VectorSource({
+      features: [...this.pointMarkerList.map((o) => o.feature)]
+    }), this.pointLayer = new VectorLayer({
+      source: this.pointsVectorSource
+    }), this.mapInstance.addLayer(this.pointLayer), console.log(this.pointLayer);
+  }
+  // 删除所有已渲染的点
+  deleteAllPointMarkers() {
+    this.pointMarkerList.forEach((t) => {
+      var n;
+      t.feature && ((n = this.pointsVectorSource) == null || n.removeFeature(t.feature));
+    }), this.pointMarkerList = [];
+  }
+  // 取消高亮
+  cancelHighlightTruckMarker() {
+    var r;
+    if (!this.highlightPoint)
+      return;
+    const { id: t, name: n } = this.highlightPoint, o = this.pointMarkerList.find((l) => l.id === t);
+    t && o && o.feature && ((r = this.pointsVectorSource) == null || r.removeFeature(o.feature), o.feature.setStyle(
+      setPointStyle(!1, n, this.options)
+    ));
+  }
+  /**
+   * 设置选中
+   *  渲染
+   * @param item
+   * 格式：
+   * 获取数据的id
+   * id
+   * 地图显示
+   * name
+   * fullName,
+   * 经纬度
+   * lon,
+   * lat,
+   * 渲染点的数据类型，好通过这个判断点击地图获取到的类型， 任意字符串
+   * pointType
+   */
+  highlightPointMarker(t) {
+    if (!this.mapInstance) return;
+    const { id: n, name: o, fullName: r, lon: l, lat: i, pointType: s } = t, c = [Number(l), Number(i)];
+    this.highlightPoint = {
+      id: n,
+      name: o,
+      fullName: r,
+      lonlat: c,
+      pointType: s
+    }, this.setPointCenter(c);
+  }
+  //隐藏其他点
+  hiddenPointMarker(t) {
+    this.pointMarkerList.forEach((n) => {
+      n.id !== t && n.feature && n.feature.setStyle(void 0);
+    });
+  }
+  // 获取feature
+  getFeature(t, n) {
+    var r;
+    const o = new Feature({
+      geometry: new Point(fromLonLat(n))
+    });
+    return o.set("data", t), o.setStyle(
+      setPointStyle(((r = this.highlightPoint) == null ? void 0 : r.id) === t.id, t.name, this.options)
+    ), o;
+  }
+  /**
+   *
+   * @param lonlat 经纬度
+   * @param options {
+   *     customZoom 自定义层级
+   *     type 0: 不改变地图大小 1: 等于customZoom 2: 地图当前zoom > 传入的customZoom(缩小地图) 3: 地图当前zoom < 传入的customZoom(放大地图)
+   * }
+   */
+  setPointCenter(t, n = { customZoom: mapZoom.findShip, type: 1 }) {
+    if (!this.mapInstance) return;
+    const { customZoom: o = mapZoom.findShip, type: r = 1 } = n, l = this.mapInstance.getView(), i = l.getZoom();
+    (r === 1 || i > o && r === 2 || i < o && r === 3) && l.setZoom(o);
+    const s = new Point(t);
+    l.setCenter(transform(s.getCoordinates(), projection.data, projection.mercator));
+  }
+}
+const ZhMap = withInstall(Map);
 export {
-  ZhMap as Z
+  CDN_URL as C,
+  DEFAULT_VALUE as D,
+  LOG_DATE_FORMAT as L,
+  PointMarkerClass as P,
+  ZhMap as Z,
+  mapDefaultCenter as a,
+  baseMap as b,
+  mapZoom as m,
+  projection as p,
+  renderShipsLimit as r,
+  tiandituKey as t
 };