zhihao-ui 1.3.20 → 1.3.21

package/dist/es/{Map-DlXenBet.js → Map-Bs3yh61N.js}

@@ -4,16 +4,16 @@ import { _ as _export_sfc } from "./Button-CGndQwez.js";
 import { w as withInstall } from "./utils-D2wHR1YB.js";
 const _hoisted_1$2 = { id: "scale-line-container" }, _sfc_main$2 = /* @__PURE__ */ defineComponent({
   __name: "scaleLine",
-  setup(e, { expose: s }) {
-    return s({
-      setScaleLine: (n, i) => {
-        i || (i = "metric");
+  setup(e, { expose: l }) {
+    return l({
+      setScaleLine: (s, c) => {
+        c || (c = "metric");
         const t = new ScaleLine$1({
-          units: i
-        }), m = document.getElementById("scale-line-container");
-        m && (t.setTarget(m), n.addControl(t));
+          units: c
+        }), L = document.getElementById("scale-line-container");
+        L && (t.setTarget(L), s.addControl(t));
       }
-    }), (n, i) => (openBlock(), createElementBlock("div", _hoisted_1$2));
+    }), (s, c) => (openBlock(), createElementBlock("div", _hoisted_1$2));
   }
 }), ScaleLine = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-2bc5dee8"]]), _hoisted_1$1 = { class: "zoom" }, _sfc_main$1 = /* @__PURE__ */ defineComponent({
   __name: "zoomControl",
@@ -24,28 +24,28 @@ const _hoisted_1$2 = { id: "scale-line-container" }, _sfc_main$2 = /* @__PURE__
     }
   },
   setup(e) {
-    const s = e;
-    console.log("props", s);
-    const l = () => {
+    const l = e;
+    console.log("props", l);
+    const n = () => {
       console.log("props");
-      const { setZoom: i, getZoom: t, getInstall: m } = s.mapInstance.methods;
-      if (!m()) return;
+      const { setZoom: c, getZoom: t, getInstall: L } = l.mapInstance.methods;
+      if (!L()) return;
       const o = t();
-      o && i(o + 1);
-    }, n = () => {
-      const { setZoom: i, getZoom: t, getInstall: m } = s.mapInstance.methods;
-      if (!m()) return;
+      o && c(o + 1);
+    }, s = () => {
+      const { setZoom: c, getZoom: t, getInstall: L } = l.mapInstance.methods;
+      if (!L()) return;
       const o = t();
-      o && i(o - 1);
+      o && c(o - 1);
     };
-    return (i, t) => (openBlock(), createElementBlock("div", _hoisted_1$1, [
+    return (c, t) => (openBlock(), createElementBlock("div", _hoisted_1$1, [
       createElementVNode("div", {
         class: "button big-button",
-        onClick: l
+        onClick: n
       }, " + "),
       createElementVNode("div", {
         class: "button small-button",
-        onClick: n
+        onClick: s
       }, " - ")
     ]));
   }
@@ -72,27 +72,27 @@ const _hoisted_1$2 = { id: "scale-line-container" }, _sfc_main$2 = /* @__PURE__
 }, MAP_DEFAULT_CENTER = [114.84, 30.52], CDN_URL = "https://static.zhihaoscm.cn/", equatorialCircumference = 2003750834e-2;
 var BASE_MAP_LINK = ((e) => (e.vectorTile = `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=${TIAN_DI_TU_KEY}`, e.vectorTileMark = `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=${TIAN_DI_TU_KEY}`, e.satelliteImgTile = `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=${TIAN_DI_TU_KEY}`, e.satelliteImgTileMark = `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=${TIAN_DI_TU_KEY}`, e.greenTile = `${CDN_URL}/map/tile/{z}/{x}/{y}.png`, e))(BASE_MAP_LINK || {}), LENGTH_UNIT = /* @__PURE__ */ ((e) => (e[e.M = 1] = "M", e[e.KM = 2] = "KM", e[e.NM = 3] = "NM", e))(LENGTH_UNIT || {});
 function useMapInitializer() {
-  const e = ref(), s = () => e.value, l = () => s().getView(), n = () => {
+  const e = ref(), l = () => e.value, n = () => l().getView(), s = () => {
     var y;
-    return (y = l()) == null ? void 0 : y.getZoom();
-  }, i = (y) => {
-    var P;
-    (P = l()) == null || P.setZoom(y);
-  }, t = (y, P) => {
-    var V;
-    (V = l()) == null || V.setCenter(fromLonLat([y, P]));
-  }, m = () => {
-    var P;
-    const y = (P = l()) == null ? void 0 : P.getCenter();
+    return (y = n()) == null ? void 0 : y.getZoom();
+  }, c = (y) => {
+    var N;
+    (N = n()) == null || N.setZoom(y);
+  }, t = (y, N) => {
+    var $;
+    ($ = n()) == null || $.setCenter(fromLonLat([y, N]));
+  }, L = () => {
+    var N;
+    const y = (N = n()) == null ? void 0 : N.getCenter();
     return toLonLat(y);
-  }, v = () => {
+  }, m = () => {
     var y;
-    return (y = s()) == null ? void 0 : y.getSize();
-  }, o = new Map$2(), r = (y, P) => {
-    p(P);
-    const V = {
-      zoom: P.zoom,
-      center: fromLonLat(P.center),
+    return (y = l()) == null ? void 0 : y.getSize();
+  }, o = new Map$2(), r = (y, N) => {
+    p(N);
+    const $ = {
+      zoom: N.zoom,
+      center: fromLonLat(N.center),
       minZoom: MAP_ZOOM.min,
       maxZoom: MAP_ZOOM.max,
       constrainResolution: !0,
@@ -109,7 +109,7 @@ function useMapInitializer() {
         o.get("satelliteImgTile"),
         o.get("satelliteImgTileMark")
       ],
-      view: new View(V)
+      view: new View($)
     });
     e.value = f;
   }, p = (y) => {
@@ -145,279 +145,279 @@ function useMapInitializer() {
     }));
   };
   return {
-    getInstall: s,
-    getView: l,
-    getZoom: n,
-    setZoom: i,
+    getInstall: l,
+    getView: n,
+    getZoom: s,
+    setZoom: c,
     setCenter: t,
-    getCenter: m,
-    getSize: v,
+    getCenter: L,
+    getSize: m,
     initMap: r,
     setBaseLayerMap: p
   };
 }
-const convertSixHundredThousandToLatLng = function(e, s) {
-  const l = Number(s) / 6e5;
-  return [Number(e) / 6e5, l];
-}, calculateCirclePoints = (e, s) => {
-  const l = fromLonLat(e), n = s * 1e3, i = [
-    l[0] - n,
-    l[1] - n,
-    l[0] + n,
-    l[1] + n
-  ], t = transformExtent(i, projection.mercator, projection.data);
+const convertSixHundredThousandToLatLng = function(e, l) {
+  const n = Number(l) / 6e5;
+  return [Number(e) / 6e5, n];
+}, calculateCirclePoints = (e, l) => {
+  const n = fromLonLat(e), s = l * 1e3, c = [
+    n[0] - s,
+    n[1] - s,
+    n[0] + s,
+    n[1] + s
+  ], t = transformExtent(c, projection.mercator, projection.data);
   return {
     leftTopPoint: { lng: t[0], lat: t[3] },
     rightTopPoint: { lng: t[2], lat: t[3] },
     rightBottomPoint: { lng: t[2], lat: t[1] },
     leftBottomPoint: { lng: t[0], lat: t[1] }
   };
-}, formatLength = function(e, s) {
-  const n = getLength(e);
-  let i = "";
-  switch (console.log(s, LENGTH_UNIT), s) {
+}, formatLength = function(e, l) {
+  const s = getLength(e);
+  let c = "";
+  switch (console.log(l, LENGTH_UNIT), l) {
     case LENGTH_UNIT.M:
-      i = Math.round(n * 100) / 100 + " m";
+      c = Math.round(s * 100) / 100 + " m";
       break;
     case LENGTH_UNIT.KM:
-      i = Math.round(n / 1e3 * 100) / 100 + " km";
+      c = Math.round(s / 1e3 * 100) / 100 + " km";
       break;
     case LENGTH_UNIT.NM:
-      i = (Math.round(n / 1e3 * 100) / 100 / 1.852).toFixed(2) + " nm";
+      c = (Math.round(s / 1e3 * 100) / 100 / 1.852).toFixed(2) + " nm";
       break;
   }
-  return i;
+  return c;
 };
 function lonLatToMercator(e) {
-  const s = e[0] * equatorialCircumference / 180;
-  let l = Math.log(Math.tan((90 + e[1]) * Math.PI / 360)) / (Math.PI / 180);
-  return l = l * equatorialCircumference / 180, [s, l];
+  const l = e[0] * equatorialCircumference / 180;
+  let n = Math.log(Math.tan((90 + e[1]) * Math.PI / 360)) / (Math.PI / 180);
+  return n = n * equatorialCircumference / 180, [l, n];
 }
 function getIconFont(unicode = "") {
   return unicode.indexOf("&") !== -1 && (unicode = unicode.replace("&", "&")), unicode.indexOf("&amp") !== -1 && (unicode = unicode.replace("&amp", "&")), eval('("' + unicode.replace("&#x", "\\u").replace(";", "") + '")');
 }
 const getIconStyle = (e) => {
-  const s = new Text({
+  const l = new Text({
     font: "Normal 14px map-iconfont",
     text: getIconFont(e),
     fill: new Fill({ color: "#fff" }),
     offsetY: -14
   });
   return new Style({
-    text: s,
+    text: l,
     zIndex: 100
   });
-}, mercatorToLonLat = (e, s = "lonlat") => {
-  const l = { lon: 0, lat: 0 }, n = e[0] / equatorialCircumference * 180;
-  let i = e[1] / equatorialCircumference * 180;
-  return i = 180 / Math.PI * (2 * Math.atan(Math.exp(i * Math.PI / 180)) - Math.PI / 2), l.lon = n, l.lat = i, s === "lonlat" ? l : [n, i];
+}, mercatorToLonLat = (e, l = "lonlat") => {
+  const n = { lon: 0, lat: 0 }, s = e[0] / equatorialCircumference * 180;
+  let c = e[1] / equatorialCircumference * 180;
+  return c = 180 / Math.PI * (2 * Math.atan(Math.exp(c * Math.PI / 180)) - Math.PI / 2), n.lon = s, n.lat = c, l === "lonlat" ? n : [s, c];
 }, formatMinutesToDDHHMM = (e) => {
-  const s = hooks.duration(e, "minutes"), l = Math.floor(s.asDays()), n = s.hours(), i = s.minutes();
-  let t = `${String(i).padStart(2, "0")}分`;
-  return n !== 0 && (t = `${String(n).padStart(2, "0")}时${t}`), l !== 0 && (t = `${String(l).padStart(2, "0")}天${t}`), t;
-}, useCarTrackManager = (e, s) => {
-  let l = null;
-  const n = async (p) => {
+  const l = hooks.duration(e, "minutes"), n = Math.floor(l.asDays()), s = l.hours(), c = l.minutes();
+  let t = `${String(c).padStart(2, "0")}分`;
+  return s !== 0 && (t = `${String(s).padStart(2, "0")}时${t}`), n !== 0 && (t = `${String(n).padStart(2, "0")}天${t}`), t;
+}, useCarTrackManager = (e, l) => {
+  let n = null;
+  const s = async (p) => {
     if (!e || (console.log("vehicleInfo", p), !(p != null && p.lon && (p != null && p.lat)))) return;
     const y = Math.abs(Number(p.lon)) > 180 ? convertSixHundredThousandToLatLng(p.lon, p.lat) : [p.lon, p.lat];
-    i(p, fromLonLat(y));
-    const P = e == null ? void 0 : e.getView(), V = new Point(y);
-    P.setCenter(transform(V.getCoordinates(), projection.data, projection.mercator));
-  }, i = (p, y) => {
-    const P = `${CDN_URL}map/car-icon.gif`;
-    l || (l = new Overlay({
+    c(p, fromLonLat(y));
+    const N = e == null ? void 0 : e.getView(), $ = new Point(y);
+    N.setCenter(transform($.getCoordinates(), projection.data, projection.mercator));
+  }, c = (p, y) => {
+    const N = `${CDN_URL}map/car-icon.gif`;
+    n || (n = new Overlay({
       element: document.createElement("div"),
       positioning: "center-center",
       stopEvent: !1
       // 允许交互事件穿透
-    }), e.addOverlay(l));
-    const V = l.getElement();
-    V.style.backgroundImage = `url(${P})`, V.style.width = "80px", V.style.height = "80px";
+    }), e.addOverlay(n));
+    const $ = n.getElement();
+    $.style.backgroundImage = `url(${N})`, $.style.width = "80px", $.style.height = "80px";
     const f = (p == null ? void 0 : p.drc) || "";
-    V.style.transform = `rotate(${f}deg)`, V.style.backgroundSize = "cover", l == null || l.setPosition(y);
+    $.style.transform = `rotate(${f}deg)`, $.style.backgroundSize = "cover", n == null || n.setPosition(y);
   };
   return {
-    location: n,
+    location: s,
     remove: () => {
-      const p = l == null ? void 0 : l.getElement();
+      const p = n == null ? void 0 : n.getElement();
       p && (p.innerHTML = "");
     },
-    renderTrack: (p, y, P) => {
-      s.render(p, y, P, "truck", 1e3);
+    renderTrack: (p, y, N) => {
+      l.render(p, y, N, "truck", 1e3);
     },
     setCenter: (p) => {
-      s.setCenter(p);
+      l.setCenter(p);
     },
     closeTrack: () => {
-      s.close();
+      l.close();
     },
     playTrack: (p, y) => {
-      s.play(p, y);
+      l.play(p, y);
     }
   };
 };
 var 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 || {}), SHIP_DIRECT = /* @__PURE__ */ ((e) => (e.left = "left", e.right = "right", e.front = "front", e.up = "up", e.down = "down", e.back = "back", e))(SHIP_DIRECT || {});
 const useTrackManager = (e) => {
-  const s = /* @__PURE__ */ new Map(), l = {};
-  let n = null;
-  const i = "--";
+  const l = /* @__PURE__ */ new Map(), n = {};
+  let s = null;
+  const c = "--";
   let t = null;
-  const m = document.createElement("div"), v = new Overlay({
-    element: m,
+  const L = document.createElement("div"), m = new Overlay({
+    element: L,
     positioning: "top-left",
     stopEvent: !1,
     className: "track-label-popup"
   });
-  let o, r, p, y, P, V = !1, f = Date.now(), w, k = 0, L = null, S = 20, _ = !1;
-  const H = 5, B = [], W = (a) => {
-    var d;
-    for (B.unshift(a); B.length > H; ) {
-      const g = B.pop(), b = s.get(g);
-      b && ((d = b.getSource()) == null || d.clear(), e == null || e.removeLayer(b), s.delete(g), delete l[g]);
+  let o, r, p, y, N, $ = !1, f = Date.now(), v, k = 0, x = null, C = 20, A = !1;
+  const H = 5, B = [], W = (i) => {
+    var u;
+    for (B.unshift(i); B.length > H; ) {
+      const g = B.pop(), b = l.get(g);
+      b && ((u = b.getSource()) == null || u.clear(), e == null || e.removeLayer(b), l.delete(g), delete n[g]);
     }
   };
-  let c = "";
-  const x = ["#ff0000", "#00ff00", "#0079ff", "#ffa500", "#800080", "#008080", "#ffc0cb", "#800000", "#000080", "#808000"], u = debounce(() => {
-    if (n && l[n] && s.get(n).getVisible() && _) {
+  let d = "";
+  const w = ["#ff0000", "#00ff00", "#0079ff", "#ffa500", "#800080", "#008080", "#ffc0cb", "#800000", "#000080", "#808000"], a = debounce(() => {
+    if (s && n[s] && l.get(s).getVisible() && A) {
       console.log("reRenderTrackLine------------");
-      const a = cloneDeep(M(n, l[n]));
-      ce(n, a);
+      const i = cloneDeep(M(s, n[s]));
+      ae(s, i);
     }
-  }, 300), M = (a, d) => {
+  }, 300), M = (i, u) => {
     let g = [];
-    const b = Math.max(1, Math.floor(d.length / S));
-    return g = d.filter((T, R) => R % b === 0).map((T, R) => {
+    const b = Math.max(1, Math.floor(u.length / C));
+    return g = u.filter((T, _) => _ % b === 0).map((T, _) => {
       if (Number(T.lon) > 180 || Number(T.lat) > 180) {
-        const [$, A] = convertSixHundredThousandToLatLng(T.lon, T.lat);
-        T.lon = $, T.lat = A;
+        const [D, z] = convertSixHundredThousandToLatLng(T.lon, T.lat);
+        T.lon = D, T.lat = z;
       }
-      return T.center = [T.lon, T.lat], T.centerPoint = lonLatToMercator(T.center), T.time = hooks(T.createdAt).format("YYYY-MM-DD HH:mm:ss"), T.id = a, T.index = R, T;
+      return T.center = [T.lon, T.lat], T.centerPoint = lonLatToMercator(T.center), T.time = hooks(T.createdAt).format("YYYY-MM-DD HH:mm:ss"), T.id = i, T.index = _, T;
     }), g;
-  }, D = async (a, d, g, b = "ship", C = 200) => {
-    if (!e || (d = d == null ? void 0 : d.reverse(), v && b === "ship" && (e != null && e.getOverlays().getArray().includes(v) || e.addOverlay(v)), (d == null ? void 0 : d.length) < 2))
+  }, F = async (i, u, g, b = "ship", E = 200) => {
+    if (!e || (u = u == null ? void 0 : u.reverse(), m && b === "ship" && (e != null && e.getOverlays().getArray().includes(m) || e.addOverlay(m)), (u == null ? void 0 : u.length) < 2))
       return;
-    W(a), n = a, l[a] = d, S = C;
-    const T = Object.keys(l).findIndex((R) => R === a) || 0;
-    c = g || x[T > 10 ? 10 : T], _ = !0, await z(), await ne(n);
-  }, N = (a) => {
-    const d = new VectorSource();
+    W(i), s = i, n[i] = u, C = E;
+    const T = Object.keys(n).findIndex((_) => _ === i) || 0;
+    d = g || w[T > 10 ? 10 : T], A = !0, await R(), await se(s);
+  }, V = (i) => {
+    const u = new VectorSource();
     return new VectorLayer({
-      source: d,
+      source: u,
       visible: !1,
       // 默认隐藏
-      className: `track-layer-${a}`,
+      className: `track-layer-${i}`,
       renderBuffer: 1024
       // 增大渲染缓冲区
     });
-  }, O = (a) => {
-    s.forEach((d, g) => {
-      var C;
-      const b = g === a;
-      d.getVisible() !== b && (d.setVisible(b), e.getLayers().getArray().includes(d) || e.addLayer(d), b || (C = d.getSource()) == null || C.clear());
-    }), n = a;
-  }, z = async () => {
-    const a = n;
-    if (!s.has(a)) {
-      const T = N(a);
-      s.set(a, T);
+  }, O = (i) => {
+    l.forEach((u, g) => {
+      var E;
+      const b = g === i;
+      u.getVisible() !== b && (u.setVisible(b), e.getLayers().getArray().includes(u) || e.addLayer(u), b || (E = u.getSource()) == null || E.clear());
+    }), s = i;
+  }, R = async () => {
+    const i = s;
+    if (!l.has(i)) {
+      const T = V(i);
+      l.set(i, T);
     }
-    await O(a);
-    const d = c || "", g = l[a] || [];
+    await O(i);
+    const u = d || "", g = n[i] || [];
     if (!(g && g.length > 1)) return [];
     let b = [];
-    b = M(a, g);
-    const C = b.map((T) => T.centerPoint);
-    b.length >= 2 && await F(a, C, d);
-  }, F = (a, d, g) => {
-    const b = new LineString(d), C = s.get(a).getSource(), T = C.getFeatureById(a);
+    b = M(i, g);
+    const E = b.map((T) => T.centerPoint);
+    b.length >= 2 && await P(i, E, u);
+  }, P = (i, u, g) => {
+    const b = new LineString(u), E = l.get(i).getSource(), T = E.getFeatureById(i);
     if (T)
-      T.setGeometry(b), T.setId(a), T.setStyle(Z(g)), L = T;
+      T.setGeometry(b), T.setId(i), T.setStyle(Z(g)), x = T;
     else {
-      const R = new Feature({ geometry: b });
-      R.setId(a), R.set("type", "line"), R.setStyle(Z(g)), C.addFeature(R), L = R;
+      const _ = new Feature({ geometry: b });
+      _.setId(i), _.set("type", "line"), _.setStyle(Z(g)), E.addFeature(_), x = _;
     }
-    return L;
-  }, Z = (a) => new Style({
+    return x;
+  }, Z = (i) => new Style({
     stroke: new Stroke({
-      color: a,
+      color: i,
       width: 2
     })
-  }), K = (a, d, g) => {
-    const b = a == null ? void 0 : a.get("trackId");
-    if (a && b && d === "hover") {
+  }), K = (i, u, g) => {
+    const b = i == null ? void 0 : i.get("trackId");
+    if (i && b && u === "hover") {
       e.getTargetElement().style.cursor = b ? "pointer" : "";
-      const C = a.get("data"), T = Q(C), R = g == null ? void 0 : g.coordinate;
-      R && (m.querySelector(".popup-content"), m.innerHTML = T, v == null || v.setPosition(R));
+      const E = i.get("data"), T = Q(E), _ = g == null ? void 0 : g.coordinate;
+      _ && (L.querySelector(".popup-content"), L.innerHTML = T, m == null || m.setPosition(_));
     } else
-      v && v.setPosition(void 0);
-  }, Q = (a) => {
-    if (!(a != null && a.time)) return;
-    let d = "";
-    return a != null && a.stayTime && (d = `
+      m && m.setPosition(void 0);
+  }, Q = (i) => {
+    if (!(i != null && i.time)) return;
+    let u = "";
+    return i != null && i.stayTime && (u = `
             <div class="item w-100">
                 <div class="item-label">停泊时间约</div>
-                <div class="item-item">${formatMinutesToDDHHMM(Number(a.stayTime))}</div>
+                <div class="item-item">${formatMinutesToDDHHMM(Number(i.stayTime))}</div>
             </div>
         `), `
         <div class="track-point-popup">
             <div class="item">
                 <div class="item-label">状态</div>
-                <div class="item-item">${a != null && a.sailStatus ? SHIP_SAIL_STATUS[a.sailStatus] : i}</div>
+                <div class="item-item">${i != null && i.sailStatus ? SHIP_SAIL_STATUS[i.sailStatus] : c}</div>
             </div>
             <div class="item">
                 <div class="item-label">航速</div>
-                <div class="item-item">${a.speed || i}</div>
+                <div class="item-item">${i.speed || c}</div>
             </div>
             <div class="item">
                 <div class="item-label">艏向</div>
-                <div class="item-item">${a.hdg || i}</div>
+                <div class="item-item">${i.hdg || c}</div>
             </div>
             <div class="item">
                 <div class="item-label">航向</div>
-                <div class="item-item">${a.cog || i}</div>
+                <div class="item-item">${i.cog || c}</div>
             </div>
             <div class="item">
                 <div class="item-label">经度</div>
-                <div class="item-item">${a.lon || i}</div>
+                <div class="item-item">${i.lon || c}</div>
             </div>
             <div class="item">
                 <div class="item-label">纬度</div>
-                <div class="item-item">${a.lat || i}</div>
+                <div class="item-item">${i.lat || c}</div>
             </div>
             <div class="item w-100">
                 <div class="item-label">时间</div>
-                <div class="item-item">${a.time}</div>
+                <div class="item-item">${i.time}</div>
             </div>
-            ${d ?? d}
+            ${u ?? u}
         </div>`;
-  }, ie = (a) => {
-    const g = a.map(($) => {
-      const A = e.getPixelFromCoordinate(fromLonLat($.center));
+  }, U = (i) => {
+    const g = i.map((D) => {
+      const z = e.getPixelFromCoordinate(fromLonLat(D.center));
       return {
-        ...$,
-        original: $,
-        pixel: A,
+        ...D,
+        original: D,
+        pixel: z,
         distance: 0
         // 先初始化，后续计算
       };
     });
     let b = 0;
     g[0].distance = 0;
-    for (let $ = 1; $ < g.length; $++) {
-      const A = g[$ - 1].pixel, Y = g[$].pixel, X = Y[0] - A[0], E = Y[1] - A[1];
-      b += Math.sqrt(X * X + E * E), g[$].distance = b;
+    for (let D = 1; D < g.length; D++) {
+      const z = g[D - 1].pixel, Y = g[D].pixel, X = Y[0] - z[0], S = Y[1] - z[1];
+      b += Math.sqrt(X * X + S * S), g[D].distance = b;
     }
-    const C = g.filter(
-      ($, A) => A === 0 || A === g.length - 1
+    const E = g.filter(
+      (D, z) => z === 0 || z === g.length - 1
     ), T = [];
-    for (let $ = 0; $ < C.length; $++) {
-      const A = C[$];
-      if (T.push(A), $ < C.length - 1) {
-        const Y = C[$ + 1], X = Y.distance - A.distance, E = Math.floor(X / 100);
-        for (let G = 1; G <= E; G++) {
-          const j = A.distance + G * 100;
+    for (let D = 0; D < E.length; D++) {
+      const z = E[D];
+      if (T.push(z), D < E.length - 1) {
+        const Y = E[D + 1], X = Y.distance - z.distance, S = Math.floor(X / 100);
+        for (let G = 1; G <= S; G++) {
+          const j = z.distance + G * 100;
           if (j >= Y.distance) break;
-          const q = ae(
+          const q = J(
             g,
             j
           );
@@ -426,29 +426,29 @@ const useTrackManager = (e) => {
       }
     }
     return Array.from(
-      new Map(T.map(($) => [$.distance.toFixed(2), $])).values()
-    ).map(($) => ({
-      ...$.original,
+      new Map(T.map((D) => [D.distance.toFixed(2), D])).values()
+    ).map((D) => ({
+      ...D.original,
       // 优先保留原始数据
-      ...$,
+      ...D,
       // 覆盖坐标等计算属性
-      coord: $.coord,
+      coord: D.coord,
       // 确保使用插值后的坐标
-      pixel: $.pixel,
-      distance: $.distance
+      pixel: D.pixel,
+      distance: D.distance
     }));
   };
-  function ae(a, d) {
-    for (let g = 1; g < a.length; g++) {
-      const b = a[g - 1], C = a[g];
-      if (d >= b.distance && d <= C.distance) {
-        const T = (d - b.distance) / (C.distance - b.distance), R = b.pixel[0] + T * (C.pixel[0] - b.pixel[0]), $ = b.pixel[1] + T * (C.pixel[1] - b.pixel[1]), A = e == null ? void 0 : e.getCoordinateFromPixel([R, $]);
+  function J(i, u) {
+    for (let g = 1; g < i.length; g++) {
+      const b = i[g - 1], E = i[g];
+      if (u >= b.distance && u <= E.distance) {
+        const T = (u - b.distance) / (E.distance - b.distance), _ = b.pixel[0] + T * (E.pixel[0] - b.pixel[0]), D = b.pixel[1] + T * (E.pixel[1] - b.pixel[1]), z = e == null ? void 0 : e.getCoordinateFromPixel([_, D]);
         return {
           ...b,
           // 继承前一个点的属性（可调整）
-          coord: A,
-          pixel: [R, $],
-          distance: d,
+          coord: z,
+          pixel: [_, D],
+          distance: u,
           original: void 0
           // 明确标记为插值生成点
         };
@@ -456,26 +456,26 @@ const useTrackManager = (e) => {
     }
     return null;
   }
-  const ce = async (a, d) => {
-    await re(), await ge(a);
-    const g = ie(d), b = g.map((T) => de(T));
-    s.get(a).getSource().addFeatures(b), he(a, g, d, c), g.forEach((T) => {
-      const R = ue(a, c, T);
-      e.addOverlay(R);
+  const ae = async (i, u) => {
+    await le(), await ge(i);
+    const g = U(u), b = g.map((T) => de(T));
+    l.get(i).getSource().addFeatures(b), me(i, g, u, d), g.forEach((T) => {
+      const _ = ue(i, d, T);
+      e.addOverlay(_);
     });
-  }, de = (a) => {
-    const d = new Feature({
-      geometry: new Point(a.centerPoint),
-      data: a
+  }, de = (i) => {
+    const u = new Feature({
+      geometry: new Point(i.centerPoint),
+      data: i
     });
-    d.set("type", "track_point"), d.set("trackId", a.id), d.set("data", a);
+    u.set("type", "track_point"), u.set("trackId", i.id), u.set("data", i);
     let g = [
-      ...fe(a, c)
+      ...fe(i, d)
     ];
-    return (a.index === 0 || a.index === l[a.id].length - 1) && (g = [...me(a)], d.set("type", "track_begin")), a.state !== void 0 && a.state !== null && (g = [...ye(a)], d.set("type", "track_icon")), d.setStyle(g), d;
-  }, ue = (a, d, g) => {
+    return (i.index === 0 || i.index === n[i.id].length - 1) && (g = [...ve(i)], u.set("type", "track_begin")), i.state !== void 0 && i.state !== null && (g = [...ye(i)], u.set("type", "track_icon")), u.setStyle(g), u;
+  }, ue = (i, u, g) => {
     const b = document.createElement("div");
-    b.className = "track-overlay-label", b.style.position = "relative", b.style.backgroundColor = "rgba(255,255,255,0.8)", b.style.border = `1px solid ${d}`, b.style.fontSize = "12px", b.innerHTML = `
+    b.className = "track-overlay-label", b.style.position = "relative", b.style.backgroundColor = "rgba(255,255,255,0.8)", b.style.border = `1px solid ${u}`, b.style.fontSize = "12px", b.innerHTML = `
         <span>${g.time}</span>
         <svg
              style="position: absolute;left: -20px;top: 0;"
@@ -485,10 +485,10 @@ const useTrackManager = (e) => {
              height="20">
             <line x1="0" y1="20"
               x2="20" y2="0"
-              stroke="${d}"
+              stroke="${u}"
               stroke-width="1" />
     `;
-    const C = new Overlay({
+    const E = new Overlay({
       element: b,
       position: fromLonLat(g.center),
       positioning: "top-left",
@@ -496,18 +496,18 @@ const useTrackManager = (e) => {
       stopEvent: !1,
       className: "track-label-time-overlay"
     });
-    return C.set("class", "track-label-overlay"), C.set("trackId", a), C;
-  }, re = () => {
-    const a = e == null ? void 0 : e.getOverlays().getArray(), d = a == null ? void 0 : a.filter((g) => g.get("class") === "track-label-overlay");
-    d && d.length > 0 && d.forEach((g) => {
+    return E.set("class", "track-label-overlay"), E.set("trackId", i), E;
+  }, le = () => {
+    const i = e == null ? void 0 : e.getOverlays().getArray(), u = i == null ? void 0 : i.filter((g) => g.get("class") === "track-label-overlay");
+    u && u.length > 0 && u.forEach((g) => {
       g.setPosition(void 0), g.dispose();
     });
-  }, ge = (a) => {
-    const d = s.get(a).getSource();
-    d.forEachFeature((g) => {
-      g.get("type") !== "line" && d.removeFeature(g);
+  }, ge = (i) => {
+    const u = l.get(i).getSource();
+    u.forEachFeature((g) => {
+      g.get("type") !== "line" && u.removeFeature(g);
     });
-  }, fe = (a, d) => (`${a.time}`, [
+  }, fe = (i, u) => (`${i.time}`, [
     new Style({
       // 扩大交互热区
       image: new CircleStyle({
@@ -518,39 +518,39 @@ const useTrackManager = (e) => {
     // 轨迹点样式
     new Style({
       image: new CircleStyle({
-        fill: new Fill({ color: d }),
+        fill: new Fill({ color: u }),
         stroke: new Stroke({ color: "#fff", width: 2 }),
         radius: 3
       })
     })
     // textStyle,
-  ]), ye = (a) => {
-    const d = "#E31818", g = "#1890FF", b = "&#xe6d2", C = new Style({
+  ]), ye = (i) => {
+    const u = "#E31818", g = "#1890FF", b = "&#xe6d2", E = new Style({
       text: new Text({
         font: "Normal 22px map-iconfont",
         text: getIconFont(b),
         offsetY: -10,
         fill: new Fill({
-          color: Number(a.state) === 0 ? d : Number(a.state) === 1 ? g : ""
+          color: Number(i.state) === 0 ? u : Number(i.state) === 1 ? g : ""
         })
       }),
       zIndex: 99
-    }), R = getIconStyle("&#xe6e2;"), A = getIconStyle("&#xe703;"), Y = [];
-    return Number(a.state) === 0 ? Y.push(R) : Number(a.state) === 1 && Y.push(A), Y.push(C), Y;
-  }, he = (a, d, g, b) => {
-    const C = d || [], T = d.length;
-    T || (C.push(g[0]), C.push(g[g.length - 1]));
-    const R = [];
-    for (let A = 0; A < T - 1; A++) {
+    }), _ = getIconStyle("&#xe6e2;"), z = getIconStyle("&#xe703;"), Y = [];
+    return Number(i.state) === 0 ? Y.push(_) : Number(i.state) === 1 && Y.push(z), Y.push(E), Y;
+  }, me = (i, u, g, b) => {
+    const E = u || [], T = u.length;
+    T || (E.push(g[0]), E.push(g[g.length - 1]));
+    const _ = [];
+    for (let z = 0; z < T - 1; z++) {
       let Y;
-      const X = d[A], E = (d[A + 1].index + X.index) / 2;
-      if (E % 2 === 0)
-        Y = g[E].centerPoint;
+      const X = u[z], S = (u[z + 1].index + X.index) / 2;
+      if (S % 2 === 0)
+        Y = g[S].centerPoint;
       else {
-        const G = g[Math.floor(E)], j = g[Math.ceil(E)];
+        const G = g[Math.floor(S)], j = g[Math.ceil(S)];
         if (G && j) {
-          const [q, J] = G.centerPoint, [I, ee] = j.centerPoint;
-          Y = [(q + I) / 2, (J + ee) / 2];
+          const [q, ee] = G.centerPoint, [te, oe] = j.centerPoint;
+          Y = [(q + te) / 2, (ee + oe) / 2];
         }
       }
       if (Y) {
@@ -564,69 +564,69 @@ const useTrackManager = (e) => {
               text: getIconFont("&#xe6bc;"),
               fill: new Fill({ color: b }),
               // 设置箭头旋转 角度转为弧度
-              rotation: le(
-                d[A].center,
-                d[A + 1].center
+              rotation: ie(
+                u[z].center,
+                u[z + 1].center
               ) * (Math.PI / 180)
             })
           })
-        ), R.push(G);
+        ), _.push(G);
       }
     }
-    const $ = s.get(a).getSource();
-    $ == null || $.addFeatures(R);
-  }, ne = (a) => {
-    var T, R;
-    const d = e.getView(), g = (T = s == null ? void 0 : s.get(a)) == null ? void 0 : T.getSource(), b = L || (a ? g == null ? void 0 : g.getFeatureById(a) : null);
+    const D = l.get(i).getSource();
+    D == null || D.addFeatures(_);
+  }, se = (i) => {
+    var T, _;
+    const u = e.getView(), g = (T = l == null ? void 0 : l.get(i)) == null ? void 0 : T.getSource(), b = x || (i ? g == null ? void 0 : g.getFeatureById(i) : null);
     if (!b) return;
-    const C = (R = b == null ? void 0 : b.getGeometry()) == null ? void 0 : R.getExtent();
-    if (C != null && C.length)
+    const E = (_ = b == null ? void 0 : b.getGeometry()) == null ? void 0 : _.getExtent();
+    if (E != null && E.length)
       try {
-        const $ = buffer(C, Math.max(C[2] - C[0], C[3] - C[1]) * 0.02);
-        d.fit($);
-      } catch ($) {
-        console.log($);
+        const D = buffer(E, Math.max(E[2] - E[0], E[3] - E[1]) * 0.02);
+        u.fit(D);
+      } catch (D) {
+        console.log(D);
       }
-  }, me = (a) => {
-    const d = "&#xe69b;", C = a.index === 0 ? "#fcdc3f" : "#ff0000";
+  }, ve = (i) => {
+    const u = "&#xe69b;", E = i.index === 0 ? "#fcdc3f" : "#ff0000";
     return [new Style({
       text: new Text({
         font: "Normal 14px map-iconfont",
-        text: getIconFont(d),
-        fill: new Fill({ color: C })
+        text: getIconFont(u),
+        fill: new Fill({ color: E })
       }),
       zIndex: 101
     })];
-  }, ve = () => {
-    console.log("清除所有的轨迹-----"), U(), s.forEach((d) => {
+  }, he = () => {
+    console.log("清除所有的轨迹-----"), I(), l.forEach((u) => {
       var g;
-      (g = d.getSource()) == null || g.clear(), e == null || e.removeLayer(d);
-    }), Object.keys(l).forEach((d) => {
-      s.delete(d), delete l[d];
-    }), _ = !1, re();
-  }, we = (a) => {
-    const d = s.get(a || n);
-    d == null || d.setVisible(!1);
+      (g = u.getSource()) == null || g.clear(), e == null || e.removeLayer(u);
+    }), Object.keys(n).forEach((u) => {
+      l.delete(u), delete n[u];
+    }), A = !1, le();
+  }, we = (i) => {
+    const u = l.get(i || s);
+    u == null || u.setVisible(!1);
     const g = e.getOverlays().getArray();
     for (let b = 0; b < g.length; ) {
-      const C = g[b];
-      C.get("class") === "track-label-overlay" ? (C.setPosition(void 0), e.removeOverlay(C)) : b++;
+      const E = g[b];
+      E.get("class") === "track-label-overlay" ? (E.setPosition(void 0), e.removeOverlay(E)) : b++;
     }
-    U();
-  }, pe = (a, d = LENGTH_UNIT.NM) => {
+    I();
+  }, Le = (i, u = LENGTH_UNIT.NM) => {
     const g = {
-      id: a,
+      id: i,
       length: "--"
-    }, C = (l[a] || []).map(
-      (R) => transform([R.lon, R.lat], projection.data, projection.mercator)
-    ), T = new LineString(C);
-    return g.length = formatLength(T, d) || "--", g;
-  }, Le = (a, d) => {
-    xe(String(a), d);
-  }, xe = (a, d) => {
-    const g = l[String(a)], b = g == null ? void 0 : g.map((C) => [C.lon, C.lat]);
-    b && ke(b, d);
-  }, te = new Style({
+    }, E = (n[i] || []).map(
+      (_) => transform([_.lon, _.lat], projection.data, projection.mercator)
+    ), T = new LineString(E);
+    return g.length = formatLength(T, u) || "--", g;
+  }, pe = (i, u) => {
+    xe(String(i), u);
+  }, xe = (i, u) => {
+    const g = n[String(i)], b = g == null ? void 0 : g.map((E) => [E.lon, E.lat]);
+    b && ke(b, u);
+  }, re = new Style({
     text: new Text({
       font: "700 20px map-iconfont",
       text: getIconFont("&#xe657;"),
@@ -634,35 +634,35 @@ const useTrackManager = (e) => {
       rotation: 0
       // 初始旋转角度
     })
-  }), be = (a, d) => {
-    var E, G;
-    const g = Number(50 * d), b = ((E = a.frameState) == null ? void 0 : E.time) ?? Date.now(), C = b - f;
-    if (k = (k + g * C / 1e6) % 2, f = b, k >= 1) {
-      U();
+  }), be = (i, u) => {
+    var S, G;
+    const g = Number(50 * u), b = ((S = i.frameState) == null ? void 0 : S.time) ?? Date.now(), E = b - f;
+    if (k = (k + g * E / 1e6) % 2, f = b, k >= 1) {
+      I();
       return;
     }
     const T = r.getCoordinateAt(
       k > 1 ? 2 - k : k
-    ), R = r.getCoordinateAt(
+    ), _ = r.getCoordinateAt(
       k > 1 ? k - 0.01 : k
-    ), $ = r.getCoordinateAt(
+    ), D = r.getCoordinateAt(
       k > 1 ? 2 - k : k + 0.01
-    ), Y = le(
-      mercatorToLonLat(R, "array"),
-      mercatorToLonLat($, "array")
+    ), Y = ie(
+      mercatorToLonLat(_, "array"),
+      mercatorToLonLat(D, "array")
     ) * Math.PI / 180;
-    (G = te.getText()) == null || G.setRotation(Y), y.setCoordinates(T);
-    const X = getVectorContext(a);
-    X.setStyle(te), X.drawGeometry(y), e == null || e.render();
+    (G = re.getText()) == null || G.setRotation(Y), y.setCoordinates(T);
+    const X = getVectorContext(i);
+    X.setStyle(re), X.drawGeometry(y), e == null || e.render();
   }, Me = () => {
-    var a;
-    V = !0, f = Date.now(), k = 0, y = ((a = p.getGeometry()) == null ? void 0 : a.clone()) || new Point([0, 0]), t && (w == null || w.on("postrender", t)), P == null || P.setGeometry(void 0);
-  }, U = () => {
-    V && (V = !1, P == null || P.setGeometry(void 0), t && w && w.un("postrender", t), w && (e == null || e.removeLayer(w)), w = null, P = null);
-  }, ke = (a, d) => {
-    V && U(), o = new Polyline({
+    var i;
+    $ = !0, f = Date.now(), k = 0, y = ((i = p.getGeometry()) == null ? void 0 : i.clone()) || new Point([0, 0]), t && (v == null || v.on("postrender", t)), N == null || N.setGeometry(void 0);
+  }, I = () => {
+    $ && ($ = !1, N == null || N.setGeometry(void 0), t && v && v.un("postrender", t), v && (e == null || e.removeLayer(v)), v = null, N = null);
+  }, ke = (i, u) => {
+    $ && I(), o = new Polyline({
       factor: 1e6
-    }).writeGeometry(new LineString(a)), r = new Polyline({
+    }).writeGeometry(new LineString(i)), r = new Polyline({
       factor: 1e6
     }).readGeometry(o, {
       dataProjection: projection.data,
@@ -672,51 +672,51 @@ const useTrackManager = (e) => {
       geometry: new Point(r.getFirstCoordinate())
     });
     const g = p.getGeometry();
-    y = g ? g.clone() : new Point([0, 0]), P = new Feature({
+    y = g ? g.clone() : new Point([0, 0]), N = new Feature({
       type: "geoMarker",
-      style: te,
+      style: re,
       geometry: y
-    }), w = new VectorLayer({
+    }), v = new VectorLayer({
       source: new VectorSource({
-        features: [P]
+        features: [N]
       })
-    }), e == null || e.addLayer(w), t = (b) => be(b, d), Me();
-  }, le = (a, d, g) => {
-    function b(E) {
-      return 180 * (E % (2 * Math.PI)) / Math.PI;
+    }), e == null || e.addLayer(v), t = (b) => be(b, u), Me();
+  }, ie = (i, u, g) => {
+    function b(S) {
+      return 180 * (S % (2 * Math.PI)) / Math.PI;
     }
-    function C(E) {
-      return E % 360 * Math.PI / 180;
+    function E(S) {
+      return S % 360 * Math.PI / 180;
     }
-    function T(E) {
+    function T(S) {
       var G;
-      if (!E) throw new Error("Coordinate is required");
-      if (!Array.isArray(E)) {
-        if ((E == null ? void 0 : E.type) === "Feature" && (E == null ? void 0 : E.geometry) !== null && ((G = E == null ? void 0 : E.geometry) == null ? void 0 : G.type) === "Point")
-          return E == null ? void 0 : E.geometry.coordinates;
-        if (E.type === "Point") return (E == null ? void 0 : E.coordinates) || [];
+      if (!S) throw new Error("Coordinate is required");
+      if (!Array.isArray(S)) {
+        if ((S == null ? void 0 : S.type) === "Feature" && (S == null ? void 0 : S.geometry) !== null && ((G = S == null ? void 0 : S.geometry) == null ? void 0 : G.type) === "Point")
+          return S == null ? void 0 : S.geometry.coordinates;
+        if (S.type === "Point") return (S == null ? void 0 : S.coordinates) || [];
       }
-      if (Array.isArray(E) && E.length >= 2 && !Array.isArray(E[0]) && !Array.isArray(E[1]))
-        return E;
+      if (Array.isArray(S) && S.length >= 2 && !Array.isArray(S[0]) && !Array.isArray(S[1]))
+        return S;
       throw new Error(
         "Coordinate must be GeoJSON Point or an Array of numbers"
       );
     }
-    function R(E, G, j = {}) {
+    function _(S, G, j = {}) {
       if (j.final)
-        return function(Ee, Se) {
-          return (R(Se, Ee) + 180) % 360;
-        }(E, G);
-      const q = T(E), J = T(G), I = C(q[0]), ee = C(J[0]), se = C(q[1]), oe = C(J[1]), Ce = Math.sin(ee - I) * Math.cos(oe), Te = Math.cos(se) * Math.sin(oe) - Math.sin(se) * Math.cos(oe) * Math.cos(ee - I);
-      return b(Math.atan2(Ce, Te));
+        return function(Te, Se) {
+          return (_(Se, Te) + 180) % 360;
+        }(S, G);
+      const q = T(S), ee = T(G), te = E(q[0]), oe = E(ee[0]), ce = E(q[1]), ne = E(ee[1]), Ce = Math.sin(oe - te) * Math.cos(ne), Ee = Math.cos(ce) * Math.sin(ne) - Math.sin(ce) * Math.cos(ne) * Math.cos(oe - te);
+      return b(Math.atan2(Ce, Ee));
     }
-    function $(E) {
-      return !isNaN(E) && E !== null && !Array.isArray(E);
+    function D(S) {
+      return !isNaN(S) && S !== null && !Array.isArray(S);
     }
-    function A(E, G = {}, j = {}) {
-      return E || console.log("Coordinates are required"), Array.isArray(E) || console.log("Coordinates must be an Array"), E.length < 2 && console.log("Coordinates must be at least 2 numbers long"), (!$(E[0]) || !$(E[1])) && console.log("Coordinates must contain numbers"), Y({ type: "Point", coordinates: E }, G, j);
+    function z(S, G = {}, j = {}) {
+      return S || console.log("Coordinates are required"), Array.isArray(S) || console.log("Coordinates must be an Array"), S.length < 2 && console.log("Coordinates must be at least 2 numbers long"), (!D(S[0]) || !D(S[1])) && console.log("Coordinates must contain numbers"), Y({ type: "Point", coordinates: S }, G, j);
     }
-    function Y(E, G = {}, j = {}) {
+    function Y(S, G = {}, j = {}) {
       const q = {
         type: "Feature",
         id: "",
@@ -724,34 +724,36 @@ const useTrackManager = (e) => {
         bbox: {},
         geometry: {}
       };
-      return j.id !== void 0 && (q.id = j.id), j.bbox && (q.bbox = j.bbox), q.properties = G, q.geometry = E, q;
+      return j.id !== void 0 && (q.id = j.id), j.bbox && (q.bbox = j.bbox), q.properties = G, q.geometry = S, q;
     }
-    const X = R(A(a), A(d), g);
+    const X = _(z(i), z(u), g);
     return X < 0 ? 360 + X : X;
   };
   return {
-    render: D,
-    remove: ve,
-    play: Le,
-    setCenter: ne,
+    render: F,
+    remove: he,
+    play: pe,
+    setCenter: se,
     close: we,
-    getLength: pe,
+    getLength: Le,
     handleTrackMapEvent: K,
-    reRenderTrackLine: u
+    reRenderTrackLine: a
   };
 };
 function useShipOverlay(e) {
-  const s = ref(null);
-  ref(null);
-  const l = computed(() => ({
-    "--overlay-color": e.color || "#FFF",
-    "--bg-color": e.selected ? e.color : "#ffffff",
+  console.log("useShipOverlay", e);
+  const l = ref(null), n = computed(() => ({
+    "--overlay-color": "#FFF",
+    "--bg-color1": e.colors && e.colors[0] ? e.colors[0] : "#ffffff",
+    // 默认第一个颜色
+    "--bg-color2": e.colors && e.colors[1] ? e.colors[1] : "#ffffff",
+    "--bg-color": "#ffffff",
     position: "relative",
     "pointer-events": "none"
-  })), n = computed(() => ({
+  })), s = computed(() => ({
     position: "relative",
     "border-radius": "1px",
-    "background-color": "var(--bg-color)",
+    "background-color": "var(--content-bg)",
     color: "#000",
     padding: "2px 5px 2px 0px",
     font: "500 Normal 12px",
@@ -760,17 +762,17 @@ function useShipOverlay(e) {
     "white-space": "nowrap",
     border: "1px solid #FFF",
     "pointer-events": "auto",
-    transition: "background-color 0.5s ease, border 0.5s ease",
+    // 'transition': 'background-color 0.5s ease, border 0.5s ease',
     "z-index": "1",
     display: "flex",
     "align-items": "center",
-    animation: e.selected ? "blink 1.5s ease-in-out infinite" : "none"
-    // 动画开关
-  })), i = computed(() => ({
+    animation: e.selected ? e.colors && e.colors.length >= 2 ? "blink-dual 2s ease-in-out infinite" : "blink-single 1.5s ease-in-out infinite" : "none"
+    // "animation": props.selected ? 'blink 1.5s ease-in-out infinite' : 'none', // 动画开关
+  })), c = computed(() => ({
     width: "14px",
     height: "14px",
     margin: "1px 5px 1px 1px",
-    "background-color": "var(--bg-color)"
+    "background-color": "var(--attention-bg)"
   })), t = computed(() => ({
     position: "absolute",
     top: "0px",
@@ -784,19 +786,19 @@ function useShipOverlay(e) {
     left: "-20px"
   }));
   return () => h("div", {
-    ref: s,
+    ref: l,
     class: "ship-overlay-container",
-    style: l.value
+    style: n.value
   }, [
     h(
       "div",
       {
         class: "ship-overlay-content",
-        style: n.value
+        style: s.value
       },
       [
         h("div", {
-          style: e.selected ? i.value : {}
+          style: e.selected ? c.value : {}
         }, ""),
         h("div", {
           class: "text",
@@ -851,43 +853,43 @@ function useShipOverlay(e) {
   ]);
 }
 ref([]);
-function addOverlay(e, s, l, n) {
-  if (s) {
-    const i = new Overlay({
-      element: l,
+function addOverlay(e, l, n, s) {
+  if (l) {
+    const c = new Overlay({
+      element: n,
       positioning: "top-left",
-      id: "label-" + (n == null ? void 0 : n.id),
+      id: "label-" + (s == null ? void 0 : s.id),
       offset: [20, -20],
       autoPan: !1,
-      position: s,
-      className: n.blinking ? "ship-label-overlay-blinking" : "ship-label-overlay"
+      position: l,
+      className: s.blinking ? "ship-label-overlay-blinking" : "ship-label-overlay"
     });
-    i.set("class", "zh-map-ship-overlay"), e.addOverlay(i);
+    c.set("class", "zh-map-ship-overlay"), e.addOverlay(c);
   }
 }
 const getShipDirectPath = (e) => {
-  const { spd: s, hdg: l, cog: n } = e;
-  return s ? l !== null && +l != 511 && n !== null ? n - +l >= 3 ? SHIP_DIRECT.right : n - +l <= -3 ? SHIP_DIRECT.left : SHIP_DIRECT.front : SHIP_DIRECT.front : "";
-}, createShipStyle = (e, s) => {
-  const { shipData: l } = s.getProperties(), n = getShipType(e), i = getShipScale(e, l, n);
-  return initShipStyle(s, i, n);
+  const { spd: l, hdg: n, cog: s } = e;
+  return l ? n !== null && +n != 511 && s !== null ? s - +n >= 3 ? SHIP_DIRECT.right : s - +n <= -3 ? SHIP_DIRECT.left : SHIP_DIRECT.front : SHIP_DIRECT.front : "";
+}, createShipStyle = (e, l) => {
+  const { shipData: n } = l.getProperties(), s = getShipType(e), c = getShipScale(e, n, s);
+  return initShipStyle(l, c, s);
 }, getShipType = (e) => {
-  const s = e == null ? void 0 : e.getView().getZoom();
-  return s <= MAP_ZOOM.shipModelMax && s >= MAP_ZOOM.shipTriggleMin ? "ship" : "triangle";
-}, getShipScale = (e, s, l) => {
-  if (l === "ship") {
-    const { len: n, wid: i } = s, t = 97, m = 20, o = 1 / (e == null ? void 0 : e.getView().getResolution()), r = n * o / t, p = i * o / m, y = Math.min(r, p);
+  const l = e == null ? void 0 : e.getView().getZoom();
+  return l <= MAP_ZOOM.shipModelMax && l >= MAP_ZOOM.shipTriggleMin ? "ship" : "triangle";
+}, getShipScale = (e, l, n) => {
+  if (n === "ship") {
+    const { len: s, wid: c } = l, t = 97, L = 20, o = 1 / (e == null ? void 0 : e.getView().getResolution()), r = s * o / t, p = c * o / L, y = Math.min(r, p);
     return y < 0.2 ? 0.2 : y > 2 ? 2 : y;
   }
   return MAP_ZOOM.scaleNum;
-}, initShipStyle = (e, s, l) => {
-  const { color: n, direct: i, isHighlight: t, shipData: m } = e.getProperties(), v = ((m == null ? void 0 : m.cog) - 90 + 360) % 360;
+}, initShipStyle = (e, l, n) => {
+  const { color: s, direct: c, isHighlight: t, shipData: L } = e.getProperties(), m = ((L == null ? void 0 : L.cog) - 90 + 360) % 360;
   return new Style({
     image: new Icon({
       src: o(),
-      scale: s || MAP_ZOOM.scaleNum,
+      scale: l || MAP_ZOOM.scaleNum,
       anchor: [0.5, 0.5],
-      rotation: v * Math.PI / 180,
+      rotation: m * Math.PI / 180,
       rotateWithView: !1
     })
   });
@@ -895,72 +897,73 @@ const getShipDirectPath = (e) => {
     return `data:image/svg+xml;utf8,${encodeURIComponent(r())}`;
   }
   function r() {
-    switch (l) {
+    switch (n) {
       case "triangle":
         return `<svg width="41" height="24" viewBox="0 0 41 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                 <path d="M30.8843 12.6777L2.21343 21.7067C1.75559 21.8509 1.28947 21.509 1.28947 21.029L1.28947 2.97103C1.28947 2.49102 1.75558 2.14913 2.21342 2.29331L30.8843 11.3223C31.5471 11.531 31.5471 12.469 30.8843 12.6777Z" 
-                 fill="${n}" stroke="${t ? "#FF2424" : "black"}"  stroke-width="${t ? "2" : "0.578947"}" />
+                 fill="${s}" stroke="${t ? "#FF2424" : "black"}"  stroke-width="${t ? "2" : "0.578947"}" />
                 <!--path船航向左边或者向前-->
-                ${i === SHIP_DIRECT.left && `<path d="M30 12L40 12L40 8" stroke="${t ? "#FF2424" : "black"}" stroke-width="2"/>`}
+                ${c === SHIP_DIRECT.left && `<path d="M30 12L40 12L40 8" stroke="${t ? "#FF2424" : "black"}" stroke-width="2"/>`}
                 <!--path船航向右边-->
-                ${i === SHIP_DIRECT.right && `<path d="M30 12L40 12L40 16" stroke="${t ? "#FF2424" : "black"}" stroke-width="2"/>`}
+                ${c === SHIP_DIRECT.right && `<path d="M30 12L40 12L40 16" stroke="${t ? "#FF2424" : "black"}" stroke-width="2"/>`}
                 <!--path黑线无左右-->
-                ${i === SHIP_DIRECT.front && `<path d="M30 12L40 12" stroke="${t ? "#FF2424" : "black"}" stroke-width="1.5"/>`}
+                ${c === SHIP_DIRECT.front && `<path d="M30 12L40 12" stroke="${t ? "#FF2424" : "black"}" stroke-width="1.5"/>`}
             </svg>
             `;
       case "ship":
         return `<svg width="97" height="20" viewBox="0 0 97 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                 <path d="M0.289474 17.3433L0.289474 2.65655C0.289474 2.28572 0.574654 1.97725 0.944343 1.9482L22.0544 0.289473L67.5204 0.289473C67.6295 0.289473 67.7372 0.314613 67.835 0.362943L86.0565 9.3629C86.5844 9.6236 86.5844 10.3763 86.0565 10.637L67.835 19.6371C67.7372 19.6854 67.6295 19.7105 67.5203 19.7105L22.0544 19.7105L0.944343 18.0517C0.574653 18.0226 0.289474 17.7142 0.289474 17.3433Z" 
-                fill="${n}" stroke="${t ? "#FF2424" : "black"}"  stroke-width="${t ? "4" : "0.578947"}"/>
-                ${i === SHIP_DIRECT.left && `<path d="M86 10L96 10L96 6" stroke="${t ? "#FF2424" : "black"}" stroke-width="1.5"/>`}
-                ${i === SHIP_DIRECT.right && `<path d="M86 10L96 10L96 14" stroke="${t ? "#FF2424" : "black"}" stroke-width="1.5"/>`}
-                ${i === SHIP_DIRECT.front && `<path  d="M86 10L96 10" stroke="${t ? "#FF2424" : "black"}" stroke-width="1.5"/>`}
+                fill="${s}" stroke="${t ? "#FF2424" : "black"}"  stroke-width="${t ? "4" : "0.578947"}"/>
+                ${c === SHIP_DIRECT.left && `<path d="M86 10L96 10L96 6" stroke="${t ? "#FF2424" : "black"}" stroke-width="1.5"/>`}
+                ${c === SHIP_DIRECT.right && `<path d="M86 10L96 10L96 14" stroke="${t ? "#FF2424" : "black"}" stroke-width="1.5"/>`}
+                ${c === SHIP_DIRECT.front && `<path  d="M86 10L96 10" stroke="${t ? "#FF2424" : "black"}" stroke-width="1.5"/>`}
             </svg>
             `;
       default:
         return "";
     }
   }
-}, selectedShipStyle = (e, s) => {
-  const l = selectedShipElement(e, s), n = s.id, { lon: i, lat: t } = s, m = new Overlay({
-    element: l,
-    position: fromLonLat([i, t]),
-    id: "selected-" + n,
+}, selectedShipStyle = (e, l) => {
+  const n = selectedShipElement(e, l), s = l.id, { lon: c, lat: t } = l, L = new Overlay({
+    element: n,
+    position: fromLonLat([c, t]),
+    id: "selected-" + s,
     positioning: "center-center",
     offset: [0, 5],
     className: "ship-selected-overlay"
   });
-  return m.set("class", "ship-overlay-selected"), m;
-}, selectedShipElement = (e, s) => {
-  const l = getShipType(e), n = getShipScale(e, s, l), i = l === "ship" ? 109 : 49, t = `
-      <svg style="transform:scale(${n});" xmlns="http://www.w3.org/2000/svg" width="${i}" height="${i}" viewBox="0 0 49 49" fill="none">
+  return L.set("class", "ship-overlay-selected"), L;
+}, selectedShipElement = (e, l) => {
+  const n = getShipType(e), s = getShipScale(e, l, n), c = n === "ship" ? 109 : 49, t = `
+      <svg style="transform:scale(${s});" xmlns="http://www.w3.org/2000/svg" width="${c}" height="${c}" viewBox="0 0 49 49" fill="none">
           <path d="M1.99982 46.9998L1.99982 1.99982L46.9998 1.99982L46.9998 46.9998L1.99982 46.9998Z" fill="#FF2424" fill-opacity="0.2"/>
           <path fill-rule="evenodd" clip-rule="evenodd" d="M19.9998 0.5V3.5L3.49976 3.5V20H0.499756V0.500002L19.9998 0.5ZM45.4998 3.5H28.9998V0.5H48.4998V20H45.4998V3.5ZM48.4998 29L48.4998 48.5H28.9998V45.5H45.4998L45.4998 29H48.4998ZM3.49976 45.5L3.49976 29H0.499756L0.499758 48.5L19.9998 48.5V45.5L3.49976 45.5Z" fill="#FF2424"/>
       </svg>
-    `, m = document.createElement("div");
-  return m.className = "ship-overlay-selected", m.innerHTML = t, m;
-}, createLabelStyle = (e, s) => {
-  const { shipData: l, blinking: n } = s.getProperties(), { lon: i, lat: t } = l, m = createLabelElement(s);
-  i && t && addOverlay(e, fromLonLat([i, t]), m, { ...l, blinking: n });
+    `, L = document.createElement("div");
+  return L.className = "ship-overlay-selected", L.innerHTML = t, L;
+}, createLabelStyle = (e, l) => {
+  const { lon: n, lat: s, blinking: c } = l, t = createLabelElement(l);
+  n && s && addOverlay(e, fromLonLat([n, s]), t, { ...l, blinking: c });
 }, createLabelElement = (e) => {
-  const s = document.createElement("div");
-  s.className = "ship-overlay-box", s.style.position = "relative";
-  const l = e.getProperties(), { shipData: n, blinking: i, blinkingColor: t, name: m } = l, { lon: v, lat: o } = n, r = createVNode({
+  const l = document.createElement("div");
+  l.className = "ship-overlay-box", l.style.position = "relative";
+  const { lon: n, lat: s, blinking: c, blinkingColors: t, name: L } = e, m = createVNode({
     setup() {
       return useShipOverlay({
-        selected: i,
-        name: m,
-        color: t,
-        existDevice: n == null ? void 0 : n.existDevice,
-        existMobile: n == null ? void 0 : n.existMobile,
-        existWaterGauge: n == null ? void 0 : n.existWaterGauge
+        position: [n + 2e-3, s + 2e-3],
+        selected: c,
+        name: L,
+        colors: t || [],
+        existDevice: e == null ? void 0 : e.existDevice,
+        existMobile: e == null ? void 0 : e.existMobile,
+        existWaterGauge: e == null ? void 0 : e.existWaterGauge
       });
     }
   });
-  return render(r, s), s;
+  return render(m, l), l;
 }, getRightIcons = (e) => {
-  const s = [];
-  return e.existDevice && s.push("&#xe687;"), e.existMobile && s.push("&#xe688;"), e.existWaterGauge && s.push("&#xe686;"), s;
+  const l = [];
+  return e.existDevice && l.push("&#xe687;"), e.existMobile && l.push("&#xe688;"), e.existWaterGauge && l.push("&#xe686;"), l;
 };
 function getRandomLineDirection() {
   const e = [
@@ -974,48 +977,48 @@ function getRandomLineDirection() {
   return e[Math.floor(Math.random() * e.length)];
 }
 const devicePixelRatio = window.devicePixelRatio || 1;
-function generateBase64Icon(e, s, l = "left-bottom", n = 2) {
-  const i = document.createElement("canvas"), t = i.getContext("2d");
+function generateBase64Icon(e, l, n = "left-bottom", s = 2) {
+  const c = document.createElement("canvas"), t = c.getContext("2d");
   if (!t) return "";
-  const m = 2, v = 16, o = window.devicePixelRatio || 1, r = "500 12px Arial", p = "14px map-iconfont";
+  const L = 2, m = 16, o = window.devicePixelRatio || 1, r = "500 12px Arial", p = "14px map-iconfont";
   t.font = r;
-  const P = t.measureText(e).width;
+  const N = t.measureText(e).width;
   t.font = p;
-  const V = s.map((N) => ({ width: t.measureText(getIconFont(N)).width, height: 14 })), f = V.reduce((N, O) => N + O.width, 0), w = (s.length - 1) * n, k = m + P + f + w + m * 2, L = m + 16 + m;
-  let S, _, H = 0, B = 0, W = 0, c = 0, x = 0, u = 0;
-  switch (S = v + k, l) {
+  const $ = l.map((V) => ({ width: t.measureText(getIconFont(V)).width, height: 14 })), f = $.reduce((V, O) => V + O.width, 0), v = (l.length - 1) * s, k = L + N + f + v + L * 2, x = L + 16 + L;
+  let C, A, H = 0, B = 0, W = 0, d = 0, w = 0, a = 0;
+  switch (C = m + k, n) {
     case "right-top":
-      _ = v + L, H = 0, B = v + L, W = v, c = 0, x = v, u = 0;
+      A = m + x, H = 0, B = m + x, W = m, d = 0, w = m, a = 0;
       break;
     case "right-middle":
-      _ = L, H = 0, B = L / 2, W = v, c = L / 2, x = v, u = 0;
+      A = x, H = 0, B = x / 2, W = m, d = x / 2, w = m, a = 0;
       break;
     case "right-bottom":
-      _ = v + L, H = 0, B = 0, W = v, c = v, x = v, u = v;
+      A = m + x, H = 0, B = 0, W = m, d = m, w = m, a = m;
       break;
     case "left-top":
-      _ = v + L, H = k, B = v, W = k + v, c = L + v, x = 0, u = 0;
+      A = m + x, H = k, B = m, W = k + m, d = x + m, w = 0, a = 0;
       break;
     case "left-middle":
-      _ = L, H = k, B = L / 2, W = k + v, c = L / 2, x = 0, u = 0;
+      A = x, H = k, B = x / 2, W = k + m, d = x / 2, w = 0, a = 0;
       break;
     case "left-bottom":
-      _ = v + L, H = k, B = L, W = k + v, c = 0, x = 0, u = v;
+      A = m + x, H = k, B = x, W = k + m, d = 0, w = 0, a = m;
       break;
   }
-  i.width = Math.round(S * o), i.height = Math.round(_ * o), i.style.width = `${S}px`, i.style.height = `${_}px`, t.scale(o, o), t.clearRect(0, 0, S, _), t.beginPath(), t.moveTo(H, B), t.lineTo(W, c), t.strokeStyle = "#FFF", t.lineWidth = 1, t.stroke(), t.fillStyle = "#FFF", t.fillRect(x, u, k, L), t.font = r, t.textBaseline = "middle";
-  const M = u + m + L / 2;
-  t.strokeStyle = "#ffffff", t.lineWidth = 1, t.strokeText(e, x + m, M), t.fillStyle = "#000000", t.fillText(e, x + m, M), t.font = p, t.fillStyle = "#3370ff";
-  let D = x + m + P + n;
-  return s.forEach((N, O) => {
-    const z = u + m + L / 2;
-    t.fillText(getIconFont(N), D, z), D += V[O].width + n;
-  }), i.toDataURL("image/png");
+  c.width = Math.round(C * o), c.height = Math.round(A * o), c.style.width = `${C}px`, c.style.height = `${A}px`, t.scale(o, o), t.clearRect(0, 0, C, A), t.beginPath(), t.moveTo(H, B), t.lineTo(W, d), t.strokeStyle = "#FFF", t.lineWidth = 1, t.stroke(), t.fillStyle = "#FFF", t.fillRect(w, a, k, x), t.font = r, t.textBaseline = "middle";
+  const M = a + L + x / 2;
+  t.strokeStyle = "#ffffff", t.lineWidth = 1, t.strokeText(e, w + L, M), t.fillStyle = "#000000", t.fillText(e, w + L, M), t.font = p, t.fillStyle = "#3370ff";
+  let F = w + L + N + s;
+  return l.forEach((V, O) => {
+    const R = a + L + x / 2;
+    t.fillText(getIconFont(V), F, R), F += $[O].width + s;
+  }), c.toDataURL("image/png");
 }
 const createLabelFeatureStyle = (e) => {
-  const { name: s, rightIcons: l } = e.getProperties(), n = getRandomLineDirection(), i = generateBase64Icon(s, l, n);
+  const { name: l, rightIcons: n } = e.getProperties(), s = getRandomLineDirection(), c = generateBase64Icon(l, n, s);
   let t = [0, 0];
-  switch (n) {
+  switch (s) {
     case "right-top":
       t = [0, 1];
       break;
@@ -1037,7 +1040,7 @@ const createLabelFeatureStyle = (e) => {
   }
   return new Style({
     image: new Icon({
-      src: i,
+      src: c,
       anchor: t,
       displacement: [0, 0],
       scale: 1 / devicePixelRatio,
@@ -1046,191 +1049,206 @@ const createLabelFeatureStyle = (e) => {
     })
   });
 }, useShipManager = (e) => {
-  let s = null, l = null;
-  const n = new VectorSource(), i = new VectorImageLayer({
-    source: n,
+  let l = null, n = null;
+  const s = new VectorSource(), c = new VectorImageLayer({
+    source: s,
     className: "zh-map--ship-layer",
     renderBuffer: 300,
     zIndex: 101
-  }), t = new VectorSource(), m = new VectorLayer({
+  }), t = new VectorSource(), L = new VectorLayer({
     source: t,
     className: "zh-map--ship-label-layer",
     zIndex: 102,
     updateWhileInteracting: !1,
     updateWhileAnimating: !1,
-    declutter: function(c, x) {
-      return !x.get("selected");
+    declutter: function(d, w) {
+      return !(w && (w != null && w.get("selected")));
     }
   });
-  e == null || e.addLayer(i), e == null || e.addLayer(m);
-  let v = "", o = {}, r = {};
-  const p = (c) => {
-    if (!c || !e) return;
-    const x = (l == null ? void 0 : l.id) || (s == null ? void 0 : s.get("id"));
-    if (l) {
-      const u = c.filter((M) => M.id === x);
-      u.length === 0 ? c.push(l) : l = u[0];
+  e == null || e.addLayer(c), e == null || e.addLayer(L);
+  let m = "", o = {}, r = {};
+  const p = (d) => {
+    if (!d || !e) return;
+    const w = (n == null ? void 0 : n.id) || (l == null ? void 0 : l.get("id"));
+    if (n) {
+      const a = d.filter((M) => M.id === w);
+      a.length === 0 ? d.push(n) : n = a[0];
     }
-    V(), f(!0), W(c), P();
-  }, y = (c) => {
-    const x = (l == null ? void 0 : l.id) || (s == null ? void 0 : s.get("id")), u = fromLonLat([c == null ? void 0 : c.lon, c == null ? void 0 : c.lat]), M = c.fill || "#04C900", D = getShipDirectPath(c), N = new Feature({
-      geometry: new Point(u),
+    $(), f(!0), W(d), N();
+  }, y = (d) => {
+    var P;
+    const w = (n == null ? void 0 : n.id) || (l == null ? void 0 : l.get("id")), a = fromLonLat([d == null ? void 0 : d.lon, d == null ? void 0 : d.lat]), M = ((P = r[d.id]) == null ? void 0 : P.blinkColors) || [], V = M[M.length - 1] || d.fill || "#04C900", O = getShipDirectPath(d), R = new Feature({
+      geometry: new Point(a),
       // 船舶数据
-      shipData: c,
-      id: c.id,
-      name: c.cnname || "未命名船舶",
-      selected: c.id === x,
+      shipData: d,
+      id: d.id,
+      name: d.cnname || d.enname || d.id || "未命名船舶",
+      selected: d.id === w,
       // 图标
-      rightIcons: getRightIcons(c),
+      rightIcons: getRightIcons(d),
       // 是否闪烁
-      blinking: o[c.id] || !1,
-      // 闪烁颜色
-      blinkingColor: r[c.id] || "",
+      // blinking: attentionShips[ship.id] || false,
+      // // 闪烁颜色
+      // blinkingColor: attentionShipsColor[ship.id].blinkColors || '',
       // 船舶颜色
-      color: M,
+      color: V,
       // 船艏向的方向
-      direct: D,
-      // shipType,
-      // scale:scaleNum,
-      // rotation,
+      direct: O,
       // 高亮
       isHighlight: !1
     });
-    return N.set("clickGeometry", new Circle(u)), N;
-  }, P = async () => {
-    if (!l || !e) return;
-    let x = e.getOverlays().getArray().find((u) => u.get("class") == "ship-overlay-selected");
-    if (console.log("selectedOverlay----------", x), x) {
-      const u = selectedShipElement(e, l);
-      await x.setElement(u), await x.setPosition(fromLonLat([l.lon, l.lat]));
+    return R.set("clickGeometry", new Circle(a)), R;
+  }, N = async () => {
+    if (!n || !e) return;
+    let w = e.getOverlays().getArray().find((a) => a.get("class") == "ship-overlay-selected");
+    if (console.log("selectedOverlay----------", w), w) {
+      const a = selectedShipElement(e, n);
+      await w.setElement(a), await w.setPosition(fromLonLat([n.lon, n.lat]));
     } else
-      x = selectedShipStyle(e, l), x && e.addOverlay(x);
+      w = selectedShipStyle(e, n), w && e.addOverlay(w);
     setTimeout(() => {
-      var u;
-      x && ((u = x.get("element")) != null && u.parentElement) && (x.get("element").parentElement.style.display = "block");
+      var a;
+      w && ((a = w.get("element")) != null && a.parentElement) && (w.get("element").parentElement.style.display = "block");
     }, 20);
-  }, V = () => {
-    e && n && (n.clear(), t.clear(), f());
-  }, f = (c) => {
-    const x = e.getOverlays().getArray().filter((u) => u.get("class") == "zh-map-ship-overlay");
-    if (x && x.length > 0) {
-      for (let u = 0; u < x.length; u++)
-        if (!c && x[u].get("class") !== "ship-overlay-selected") {
-          const M = x[u];
+  }, $ = () => {
+    e && s && (s.clear(), t.clear(), f());
+  }, f = (d) => {
+    const w = e.getOverlays().getArray().filter((a) => a.get("class") == "zh-map-ship-overlay");
+    if (w && w.length > 0) {
+      for (let a = 0; a < w.length; a++)
+        if (!d && w[a].get("class") !== "ship-overlay-selected") {
+          const M = w[a];
           M.setPosition(void 0), e.removeOverlay(M), M.dispose();
         }
     }
-  }, w = (c, x) => {
-    o = c, r = x;
-    const u = e.getOverlays().getArray(), M = n.getFeatures();
-    for (const D in o) {
-      const N = o[D], O = u.find((F) => F.getId() === "label-" + D), z = M.find((F) => D === F.get("id"));
-      if (O && z) {
-        z.set("blinking", N), z.set("blinkingColor", r[D] || "");
-        const F = O.getElement(), Z = createLabelElement(z), K = Z.querySelector(".ship-overlay-line"), Q = F == null ? void 0 : F.querySelector(".ship-overlay-line");
-        F && F !== Z && (Q && K && K.replaceWith(Q), O.setElement(Z));
+  }, v = (d, w) => {
+    o = d, r = w;
+    const a = e.getOverlays().getArray(), M = s.getFeatures();
+    for (const F in o) {
+      const V = o[F], O = a.find((P) => P.getId() === "label-" + F), R = M.find((P) => F === P.get("id"));
+      if (O && R) {
+        const P = w[F].blinkColors, { shipData: Z, name: K } = R == null ? void 0 : R.getProperties();
+        R.set("color", P[P.length - 1] || ""), R.set("blinking", V);
+        const Q = {
+          ...Z,
+          blinking: V,
+          blinkingColors: P || [],
+          name: K + "(" + w[F].shipState + ")"
+        }, U = O.getElement(), J = createLabelElement(Q);
+        U && U !== J && O.setElement(J);
       }
     }
-  }, k = (c) => {
+  }, k = (d) => {
     if (!e) return;
-    const x = n.getFeatures(), u = t.getFeatures(), M = s ? s.get("id") : "", D = x.filter((F) => F.get("id") !== M), N = u == null ? void 0 : u.filter((F) => F.get("id") !== M), O = /* @__PURE__ */ new Map();
-    c.forEach((F) => {
-      O.set(F.id, !0);
+    const w = s.getFeatures(), a = t.getFeatures(), M = l ? l.get("id") : "", F = w.filter((P) => P.get("id") !== M), V = a == null ? void 0 : a.filter((P) => P.get("id") !== M), O = /* @__PURE__ */ new Map();
+    d.forEach((P) => {
+      O.set(P.id, !0);
     });
-    const z = e.getOverlays().getArray();
-    D.forEach((F) => {
-      const Z = F.get("id");
+    const R = e.getOverlays().getArray();
+    F.forEach((P) => {
+      const Z = P.get("id");
       if (!O.has(Z))
-        F.setStyle([]);
+        P.setStyle([]);
       else {
-        const Q = F.getStyle();
-        (Q == null ? void 0 : Q.length) == 0 && F.setStyle(createShipStyle(e, F));
+        const Q = P.getStyle();
+        (Q == null ? void 0 : Q.length) == 0 && P.setStyle(createShipStyle(e, P));
       }
-      const K = z.find((Q) => Q.getId() === "label-" + Z);
+      const K = R.find((Q) => Q.getId() === "label-" + Z);
       K && K.setPosition(void 0);
-    }), N.forEach((F) => {
-      const Z = F.get("id");
+    }), V.forEach((P) => {
+      const Z = P.get("id");
       if (!O.has(Z))
-        F.setStyle([]);
+        P.setStyle([]);
       else {
-        const K = F.getStyle();
-        (K == null ? void 0 : K.length) == 0 && F.setStyle(createLabelFeatureStyle(F));
+        const K = P.getStyle();
+        (K == null ? void 0 : K.length) == 0 && P.setStyle(createLabelFeatureStyle(P));
       }
     });
-  }, L = (c) => {
-    if (c) {
-      console.log("选中", c);
-      const x = n.getFeatures().find((M) => M.get("id") === c.id), u = t.getFeatures().find((M) => M.get("id") === c.id);
-      x && (s = x), u && u.set("selected", !0), l = c, P();
+  }, x = (d) => {
+    if (d) {
+      console.log("选中", d);
+      const w = s.getFeatures().find((M) => M.get("id") === d.id), a = t.getFeatures().find((M) => M.get("id") === d.id);
+      w && (l = w), a && a.set("selected", !0), n = d, N();
     } else
-      console.log("取消选中"), l = null, s = null, H();
-  }, S = debounce((c, x, u) => {
-    if (c) {
-      const M = c.get("shipData"), D = c.get("id");
-      if (e.getTargetElement().style.cursor = D ? "pointer" : "", x === "click" && (L(M), u && u(D)), x === "hover") {
-        v && v !== D && _(), v = D;
-        const N = n.getFeatures().find((O) => O.get("id") === v);
-        N == null || N.set("isHighlight", !0), N == null || N.setStyle(createShipStyle(e, N));
+      console.log("取消选中"), n = null, l = null, H();
+  }, C = debounce((d, w, a) => {
+    if (d) {
+      const M = d.get("shipData"), F = d.get("id");
+      if (e.getTargetElement().style.cursor = F ? "pointer" : "", w === "click" && (x(M), a && a(F)), w === "hover") {
+        m && m !== F && A(), m = F;
+        const V = s.getFeatures().find((O) => O.get("id") === m);
+        V == null || V.set("isHighlight", !0), V == null || V.setStyle(createShipStyle(e, V));
       }
     } else
-      e.getTargetElement().style.cursor = "", _();
-  }, 10), _ = () => {
-    const c = v ? n.getFeatures().find((x) => x.get("id") === v) : null;
-    v = null, c == null || c.set("isHighlight", !1), c == null || c.setStyle(createShipStyle(e, c));
+      e.getTargetElement().style.cursor = "", A();
+  }, 10), A = () => {
+    const d = m ? s.getFeatures().find((w) => w.get("id") === m) : null;
+    m = null, d == null || d.set("isHighlight", !1), d == null || d.setStyle(createShipStyle(e, d));
   }, H = () => {
     try {
-      const x = e.getOverlays().getArray().find((u) => u.get("class") == "ship-overlay-selected");
-      x && x.setPosition(void 0);
-    } catch (c) {
-      console.log(c);
+      const w = e.getOverlays().getArray().find((a) => a.get("class") == "ship-overlay-selected");
+      w && w.setPosition(void 0);
+    } catch (d) {
+      console.log(d);
     }
-  }, B = (c) => {
-    const x = fromLonLat([c == null ? void 0 : c.lon, c == null ? void 0 : c.lat]), u = new Feature({
-      geometry: new Point(x),
-      name: c.cnname || c.enname || c.id || "未命名船舶",
+  }, B = (d) => {
+    const w = fromLonLat([d == null ? void 0 : d.lon, d == null ? void 0 : d.lat]), a = new Feature({
+      geometry: new Point(w),
+      name: d.cnname || d.enname || d.id || "未命名船舶",
       // 图标
-      rightIcons: getRightIcons(c),
-      selected: (c == null ? void 0 : c.id) === (l == null ? void 0 : l.id)
+      rightIcons: getRightIcons(d),
+      selected: (d == null ? void 0 : d.id) === (n == null ? void 0 : n.id),
+      shipData: d
     });
-    u.set("id", c.id);
-    const M = createLabelFeatureStyle(u);
-    return u.setStyle(M), u;
-  }, W = (c) => {
-    const x = e.getView().getZoom();
-    c.forEach((u) => {
-      const M = y(u);
-      if (M.setStyle(createShipStyle(e, M)), n.addFeature(M), (l == null ? void 0 : l.id) == u.id || x >= MAP_ZOOM.shipModelMin)
-        if (o[u.id])
-          createLabelStyle(e, M);
-        else {
-          const D = B(u);
-          t.addFeature(D);
+    a.set("id", d.id);
+    const M = createLabelFeatureStyle(a);
+    return a.setStyle(M), a;
+  }, W = (d) => {
+    const w = e.getView().getZoom();
+    d.forEach((a) => {
+      const M = y(a);
+      if (M.setStyle(createShipStyle(e, M)), s.addFeature(M), (n == null ? void 0 : n.id) == a.id || w >= MAP_ZOOM.shipModelMin)
+        if (o[a.id]) {
+          if (a.id && r[a == null ? void 0 : a.id]) {
+            const F = r[a == null ? void 0 : a.id] || {};
+            console.log(F);
+            const V = (F == null ? void 0 : F.blinkColors) || [], O = (F == null ? void 0 : F.shipState) || "", R = (a.cnname || a.enname || a.id || "未命名船舶") + "(" + O + ")", P = {
+              ...a,
+              name: R,
+              blinking: o[a.id],
+              blinkingColors: V || []
+            };
+            createLabelStyle(e, P);
+          }
+        } else {
+          const F = B(a);
+          t.addFeature(F);
         }
     });
   };
   return {
     render: p,
-    selected: L,
+    selected: x,
     filter: k,
-    blinking: w,
-    clear: V,
-    handleShipMapEvent: S
+    blinking: v,
+    clear: $,
+    handleShipMapEvent: C
   };
 }, useLayerManager = (e) => {
-  const s = () => e == null ? void 0 : e.getLayers(), l = ref("vector"), n = () => l.value, i = (o) => {
-    l.value = o;
-    const r = s();
+  const l = () => e == null ? void 0 : e.getLayers(), n = ref("vector"), s = () => n.value, c = (o) => {
+    n.value = o;
+    const r = l();
     r && (r == null || r.getArray().forEach((p) => {
       (p.className_ === "vector" || p.className_ === "satellite") && p.setVisible(p.className_ === o);
     }));
   }, t = ref(!1);
   return {
-    getLayers: s,
+    getLayers: l,
     getGreenTileVisible: () => t.value,
     setGreenTileVisible: (o) => {
       if (o !== t.value) {
         if (o) {
-          const r = s();
+          const r = l();
           if (!r.getArray().find((y) => y.className_ === "greenTile")) {
             const y = new TileLayer({
               source: new XYZ({ url: BASE_MAP_LINK.greenTile }),
@@ -1241,53 +1259,53 @@ const createLabelFeatureStyle = (e) => {
             r.push(y);
           }
         } else {
-          const r = s(), p = r.getArray().find((y) => y.className_ === "greenTile");
+          const r = l(), p = r.getArray().find((y) => y.className_ === "greenTile");
           p && r.remove(p);
         }
         t.value = o;
       }
     },
-    getShowLayerType: n,
-    setShowLayerType: i
+    getShowLayerType: s,
+    setShowLayerType: c
   };
 }, usePropsManager = () => {
   const e = ref();
   return {
-    setProps: (n) => {
-      e.value = n;
+    setProps: (s) => {
+      e.value = s;
     },
     getProps: () => e.value
   };
 }, usePositionManager = (e) => {
-  const s = "zh-map-location-layer";
-  let l, n, i = null, t = null;
-  const m = (f) => {
+  const l = "zh-map-location-layer";
+  let n, s, c = null, t = null;
+  const L = (f) => {
     if (!(!f || f.length === 0)) {
-      if (n || (n = new VectorSource()), n.clear(), t) {
-        const w = f.find((k) => k.id === t.id);
-        w ? t = w : f.push(t);
+      if (s || (s = new VectorSource()), s.clear(), t) {
+        const v = f.find((k) => k.id === t.id);
+        v ? t = v : f.push(t);
       }
-      f.forEach((w) => {
-        v(w);
-      }), l || (l = new VectorLayer({
-        className: s,
-        source: n,
+      f.forEach((v) => {
+        m(v);
+      }), n || (n = new VectorLayer({
+        className: l,
+        source: s,
         zIndex: 100
-      }), e == null || e.addLayer(l));
+      }), e == null || e.addLayer(n));
     }
-  }, v = (f) => {
-    const w = getZoom(), [k, L] = f.latLon.split(","), S = new Feature({
-      geometry: new Point(fromLonLat([Number(k), Number(L)]))
+  }, m = (f) => {
+    const v = e == null ? void 0 : e.getView().getZoom(), [k, x] = f.latLon.split(","), C = new Feature({
+      geometry: new Point(fromLonLat([Number(k), Number(x)]))
     });
-    S.setStyle(o(f, w, f.id === (t == null ? void 0 : t.id))), S.set("loactionData", f), n.addFeature(S);
-  }, o = (f, w, k) => {
-    const L = {
+    C.setStyle(o(f, v, f.id === (t == null ? void 0 : t.id))), C.set("loactionData", f), s.addFeature(C);
+  }, o = (f, v, k) => {
+    const x = {
       image: new Icon({
         src: k && f.selectedPath || f.defaultPath,
-        scale: 0.5 * w / 10
+        scale: 0.5 * v / 10
       })
     };
-    return f.name && (L.text = new Text({
+    return f.name && (x.text = new Text({
       text: f.name,
       font: "12px sans-serif",
       fill: new Fill({
@@ -1297,57 +1315,59 @@ const createLabelFeatureStyle = (e) => {
         color: "#FFFFFF"
       }),
       offsetY: 30
-    })), new Style(L);
+    })), new Style(x);
   }, r = () => {
-    if (i) {
-      const f = i.get("loactionData").id;
-      n.getFeatures().forEach((w) => {
-        w.get("loactionData").id !== f && n.removeFeature(w);
+    if (c) {
+      const f = c.get("loactionData").id;
+      s.getFeatures().forEach((v) => {
+        v.get("loactionData").id !== f && s.removeFeature(v);
       });
     } else
-      n.clear();
+      s.clear();
   }, p = () => {
-    const f = i.get("loactionData"), w = getZoom();
-    n.getFeatures().forEach((L) => {
-      L.get("loactionData").id === f.id && (L == null || L.setStyle(o(f, w, !1)));
-    }), t = null, i = null;
+    var x;
+    const f = c.get("loactionData"), v = (x = e == null ? void 0 : e.getView()) == null ? void 0 : x.getZoom();
+    s.getFeatures().forEach((C) => {
+      C.get("loactionData").id === f.id && (C == null || C.setStyle(o(f, v, !1)));
+    }), t = null, c = null;
   }, y = (f) => {
-    f ? (P(), V(f)) : clearSelectedPort();
-  }, P = () => {
-    if (i) {
-      const f = i.get("loactionData"), w = getZoom();
-      i.setStyle(o(f, w, !1));
+    f ? (N(), $(f)) : clearSelectedPort();
+  }, N = () => {
+    var f;
+    if (c) {
+      const v = c.get("loactionData"), k = (f = e == null ? void 0 : e.getView()) == null ? void 0 : f.getZoom();
+      c.setStyle(o(v, k, !1));
     }
-  }, V = (f) => {
-    const w = n.getFeatures();
-    t = f, i = w.find((k) => k.get("loactionData").id === f.id);
+  }, $ = (f) => {
+    const v = s.getFeatures();
+    t = f, c = v.find((k) => k.get("loactionData").id === f.id);
   };
   return {
-    render: m,
+    render: L,
     selected: y,
     clearSelected: p,
     clear: r
   };
 }, disableDoubleClickZoom = (e) => {
-  e.getInteractions().forEach((s) => {
-    s instanceof DoubleClickZoom && s.setActive(!1);
+  e.getInteractions().forEach((l) => {
+    l instanceof DoubleClickZoom && l.setActive(!1);
   });
 }, enableDoubleClickZoom = (e) => {
-  e.getInteractions().forEach((s) => {
-    s instanceof DoubleClickZoom && s.setActive(!0);
+  e.getInteractions().forEach((l) => {
+    l instanceof DoubleClickZoom && l.setActive(!0);
   });
-}, changeCursor = (e, s) => {
-  const l = e.getViewport();
-  l && (l.style.cursor = s);
-}, useDrawLineManager = (e, s) => {
-  const l = ref([]), n = ref("km"), i = (u) => {
-    n.value = u;
+}, changeCursor = (e, l) => {
+  const n = e.getViewport();
+  n && (n.style.cursor = l);
+}, useDrawLineManager = (e, l) => {
+  const n = ref([]), s = ref("km"), c = (a) => {
+    s.value = a;
   };
   let t;
-  const m = ref(!1), v = () => {
-    p(), disableDoubleClickZoom(e), changeCursor(e, "crosshair"), e.on("pointermove", V), e.getViewport().addEventListener("mouseout", () => {
+  const L = ref(!1), m = () => {
+    p(), disableDoubleClickZoom(e), changeCursor(e, "crosshair"), e.on("pointermove", $), e.getViewport().addEventListener("mouseout", () => {
       t && t.classList.add("hidden");
-    }), w(), m.value = !0;
+    }), v(), L.value = !0;
   };
   let o, r;
   const p = () => {
@@ -1363,15 +1383,15 @@ const createLabelFeatureStyle = (e) => {
       }
     }), e == null || e.addLayer(r);
   };
-  let y, P;
-  const V = (u) => {
-    if (u.dragging)
+  let y, N;
+  const $ = (a) => {
+    if (a.dragging)
       return;
     let M = "点击选择起点";
-    y && (M = "单击继续，双击结束"), t && (t.innerHTML = M, P.setPosition(u.coordinate), t.classList.remove("hidden"));
+    y && (M = "单击继续，双击结束"), t && (t.innerHTML = M, N.setPosition(a.coordinate), t.classList.remove("hidden"));
   };
   let f;
-  const w = () => {
+  const v = () => {
     f = new Draw({
       source: o,
       type: "LineString",
@@ -1396,108 +1416,108 @@ const createLabelFeatureStyle = (e) => {
       }),
       // 添加条件函数，判断是否应该出发点绘制
       condition: (M) => M.originalEvent.target.tagName !== "DIV"
-    }), e == null || e.addInteraction(f), _(), H();
-    let u;
+    }), e == null || e.addInteraction(f), A(), H();
+    let a;
     f.on("drawstart", function(M) {
-      var N;
+      var V;
       y = M.feature, y.set("randomId", k());
-      let D;
-      u = (N = y.getGeometry()) == null ? void 0 : N.on("change", function(O) {
-        const z = O.target, F = computedDistance(z, n.value);
-        D = z.getLastCoordinate(), L && F && (L.innerHTML = F), S.setPosition(D);
+      let F;
+      a = (V = y.getGeometry()) == null ? void 0 : V.on("change", function(O) {
+        const R = O.target, P = computedDistance(R, s.value);
+        F = R.getLastCoordinate(), x && P && (x.innerHTML = P), C.setPosition(F);
       });
     }), f.on("drawend", function() {
-      var M, D, N;
-      if (L && (L.className = "ol-tooltip ol-tooltip-static ol-tooltip-measure"), L != null && L.innerHTML) {
+      var M, F, V;
+      if (x && (x.className = "ol-tooltip ol-tooltip-static ol-tooltip-measure"), x != null && x.innerHTML) {
         const O = (y == null ? void 0 : y.get("randomId")) || k();
-        l.value.push({ id: O, value: L == null ? void 0 : L.innerHTML }), L.innerHTML = `${L.innerHTML}<div class="ol-tooltip-delete-button" data-id="${O}"><i class="map-iconfont icon-delete"></i></div>`;
+        n.value.push({ id: O, value: x == null ? void 0 : x.innerHTML }), x.innerHTML = `${x.innerHTML}<div class="ol-tooltip-delete-button" data-id="${O}"><i class="map-iconfont icon-delete"></i></div>`;
       }
       (M = document.querySelector(".ol-selectable:has(.ol-tooltip-delete-button):last-child .ol-tooltip-delete-button")) == null || M.addEventListener("click", (O) => {
-        var F;
+        var P;
         O.preventDefault(), O.stopPropagation();
-        const z = (F = O.target) == null ? void 0 : F.getAttribute("data-id");
-        z && W(z);
-      }), S.setOffset([0, -7]), y = null, L = null, _(), u && unByKey(u), (N = (D = s.getProps()) == null ? void 0 : D.lineDrawEnd) == null || N.call(D, l.value);
+        const R = (P = O.target) == null ? void 0 : P.getAttribute("data-id");
+        R && W(R);
+      }), C.setOffset([0, -7]), y = null, x = null, A(), a && unByKey(a), (V = (F = l.getProps()) == null ? void 0 : F.lineDrawEnd) == null || V.call(F, n.value);
     });
   }, k = () => Math.random().toString(36).substring(2, 9);
-  let L, S;
-  const _ = () => {
-    L != null && L.parentNode && L.parentNode.removeChild(L), L = document.createElement("div"), L.className = "ol-tooltip ol-tooltip-measure", S = new Overlay({
-      element: L,
+  let x, C;
+  const A = () => {
+    x != null && x.parentNode && x.parentNode.removeChild(x), x = document.createElement("div"), x.className = "ol-tooltip ol-tooltip-measure", C = new Overlay({
+      element: x,
       offset: [0, -15],
       positioning: "bottom-center",
       stopEvent: !1,
       insertFirst: !1
-    }), e == null || e.addOverlay(S);
+    }), e == null || e.addOverlay(C);
   }, H = () => {
-    t != null && t.parentNode && t.parentNode.removeChild(t), t = document.createElement("div"), t.className = "ol-tooltip hidden", P = new Overlay({
+    t != null && t.parentNode && t.parentNode.removeChild(t), t = document.createElement("div"), t.className = "ol-tooltip hidden", N = new Overlay({
       element: t,
       offset: [15, 0],
       positioning: "center-left"
-    }), e == null || e.addOverlay(P);
+    }), e == null || e.addOverlay(N);
   }, B = () => {
-    l.value.forEach((u, M) => {
-      var O, z;
-      const D = document.querySelectorAll(".ol-tooltip.ol-tooltip-static.ol-tooltip-measure");
-      D[M] && ((z = (O = D[M]) == null ? void 0 : O.parentNode) == null || z.removeChild(D[M]));
-      const N = o.getFeatures();
-      N[M] && o.removeFeature(N[M]);
-    }), c(), enableDoubleClickZoom(e), m.value = !1;
-  }, W = (u) => {
-    var D, N, O, z;
-    const M = l.value.findIndex((F) => F.id === u);
-    if (M !== -1) {
-      l.value.splice(M, 1);
+    n.value.forEach((a, M) => {
+      var O, R;
       const F = document.querySelectorAll(".ol-tooltip.ol-tooltip-static.ol-tooltip-measure");
-      F[M] && ((N = (D = F[M]) == null ? void 0 : D.parentNode) == null || N.removeChild(F[M]));
+      F[M] && ((R = (O = F[M]) == null ? void 0 : O.parentNode) == null || R.removeChild(F[M]));
+      const V = o.getFeatures();
+      V[M] && o.removeFeature(V[M]);
+    }), d(), enableDoubleClickZoom(e), L.value = !1;
+  }, W = (a) => {
+    var F, V, O, R;
+    const M = n.value.findIndex((P) => P.id === a);
+    if (M !== -1) {
+      n.value.splice(M, 1);
+      const P = document.querySelectorAll(".ol-tooltip.ol-tooltip-static.ol-tooltip-measure");
+      P[M] && ((V = (F = P[M]) == null ? void 0 : F.parentNode) == null || V.removeChild(P[M]));
       const Z = o.getFeatures();
       Z[M] && o.removeFeature(Z[M]);
     }
-    (z = (O = s.getProps()) == null ? void 0 : O.lineDrawEnd) == null || z.call(O, l.value);
-  }, c = () => {
-    if (l.value = [], document.querySelectorAll(".ol-tooltip.ol-tooltip-static").forEach((u) => {
+    (R = (O = l.getProps()) == null ? void 0 : O.lineDrawEnd) == null || R.call(O, n.value);
+  }, d = () => {
+    if (n.value = [], document.querySelectorAll(".ol-tooltip.ol-tooltip-static").forEach((a) => {
       var M;
-      (M = u == null ? void 0 : u.parentNode) == null || M.removeChild(u);
+      (M = a == null ? void 0 : a.parentNode) == null || M.removeChild(a);
     }), o.clear(), f) {
-      const u = e.getInteractions().getArray().find((M) => getUid(M) === getUid(f));
-      u && e.removeInteraction(u);
+      const a = e.getInteractions().getArray().find((M) => getUid(M) === getUid(f));
+      a && e.removeInteraction(a);
     }
-    e.removeLayer(r), t != null && t.parentNode && t.parentNode.removeChild(t), L != null && L.parentNode && L.parentNode.removeChild(L);
+    e.removeLayer(r), t != null && t.parentNode && t.parentNode.removeChild(t), x != null && x.parentNode && x.parentNode.removeChild(x);
   };
   return {
-    open: v,
+    open: m,
     close: B,
     deleteLine: W,
-    setUnit: i,
-    getState: () => m.value
+    setUnit: c,
+    getState: () => L.value
   };
-}, computedDistance = (e, s) => {
-  const n = getLength(e);
-  let i = "";
-  switch (s) {
+}, computedDistance = (e, l) => {
+  const s = getLength(e);
+  let c = "";
+  switch (l) {
     case "m":
-      i = `${Math.round(n * 100) / 100} m`;
+      c = `${Math.round(s * 100) / 100} m`;
       break;
     case "km":
-      i = `${Math.round(n / 1e3 * 100) / 100} km`;
+      c = `${Math.round(s / 1e3 * 100) / 100} km`;
       break;
     case "nm":
-      i = `${Math.round(n / 1.852 * 100) / 100} nm`;
+      c = `${Math.round(s / 1.852 * 100) / 100} nm`;
       break;
   }
-  return i;
-}, useDrawPolygonManager = (e, s) => {
-  let l, n;
-  const i = () => {
+  return c;
+}, useDrawPolygonManager = (e, l) => {
+  let n, s;
+  const c = () => {
     t(), changeCursor(e, "crosshair");
   }, t = () => {
-    o(), L(), H(), V();
+    o(), x(), H(), $();
   };
-  let m = null, v = null;
+  let L = null, m = null;
   const o = () => {
-    if (m && v) return;
-    const c = new VectorSource(), x = new VectorLayer({
-      source: c,
+    if (L && m) return;
+    const d = new VectorSource(), w = new VectorLayer({
+      source: d,
       style: new Style({
         stroke: new Stroke({
           color: "#fbcc33",
@@ -1505,45 +1525,45 @@ const createLabelFeatureStyle = (e) => {
         })
       })
     });
-    m = x, v = c, e.on("pointermove", p), e.addLayer(x), e.on(["dblclick"], function(u) {
-      y && (u.stopPropagation(), u.preventDefault());
+    L = w, m = d, e.on("pointermove", p), e.addLayer(w), e.on(["dblclick"], function(a) {
+      y && (a.stopPropagation(), a.preventDefault());
     });
   };
   let r;
-  const p = (c) => {
-    if (c.dragging) return;
-    const x = r ? "单击继续，双击结束" : "点击选择起点";
-    S && (S.innerHTML = x, _.setPosition(c.coordinate));
+  const p = (d) => {
+    if (d.dragging) return;
+    const w = r ? "单击继续，双击结束" : "点击选择起点";
+    C && (C.innerHTML = w, A.setPosition(d.coordinate));
   };
-  let y, P = !1;
-  const V = () => {
-    if (l) {
-      S != null && S.parentNode && S.parentNode.removeChild(S);
-      const c = l.getGeometry();
-      if (!c) return;
-      const x = f(c, "nm");
-      w && (w.innerHTML = `
-                    <span class="text">面积：${x}${P ? '<span class="error pl-12">超出可以绘画的距离</span>' : ""}</span>
-                `), w && (w.innerHTML += '<span class="delete-icon" ><i class="map-iconfont icon-delete" /></div>');
-      const u = c.getCoordinates(), M = u[0][u[0].length - 2];
-      if (k.setPosition(M), m) {
-        const N = m.getSource();
-        N && l && (N.clear(), N.addFeature(l));
+  let y, N = !1;
+  const $ = () => {
+    if (n) {
+      C != null && C.parentNode && C.parentNode.removeChild(C);
+      const d = n.getGeometry();
+      if (!d) return;
+      const w = f(d, "nm");
+      v && (v.innerHTML = `
+                    <span class="text">面积：${w}${N ? '<span class="error pl-12">超出可以绘画的距离</span>' : ""}</span>
+                `), v && (v.innerHTML += '<span class="delete-icon" ><i class="map-iconfont icon-delete" /></div>');
+      const a = d.getCoordinates(), M = a[0][a[0].length - 2];
+      if (k.setPosition(M), L) {
+        const V = L.getSource();
+        V && n && (V.clear(), V.addFeature(n));
       }
       setTimeout(() => {
-        var N;
-        (N = document.querySelector(".delete-icon")) == null || N.addEventListener("click", () => {
-          var O, z;
-          console.log("delete"), B(), (z = (O = s.getProps()) == null ? void 0 : O.areaDrawEnd) == null || z.call(O, []);
+        var V;
+        (V = document.querySelector(".delete-icon")) == null || V.addEventListener("click", () => {
+          var O, R;
+          console.log("delete"), B(), (R = (O = l.getProps()) == null ? void 0 : O.areaDrawEnd) == null || R.call(O, []);
         });
       }, 0);
-      const D = getCenter(l.getGeometry().getExtent());
-      e == null || e.getView().setCenter(D);
+      const F = getCenter(n.getGeometry().getExtent());
+      e == null || e.getView().setCenter(F);
       return;
     }
     y = new Draw({
       type: "Polygon",
-      source: v,
+      source: m,
       trace: !0,
       style: [new Style({
         stroke: new Stroke({
@@ -1561,29 +1581,29 @@ const createLabelFeatureStyle = (e) => {
             color: "rgb(51,112,255, 1)"
           })
         }),
-        geometry: function(c) {
-          const x = c.getGeometry().getCoordinates();
-          return new MultiPoint(x);
+        geometry: function(d) {
+          const w = d.getGeometry().getCoordinates();
+          return new MultiPoint(w);
         }
       })]
-    }), e == null || e.addInteraction(y), y.on("drawstart", (c) => {
-      var x;
-      r = c.feature, n = (x = r.getGeometry()) == null ? void 0 : x.on("change", (u) => {
-        const M = u.target, D = f(M, "nm"), O = M.getCoordinates()[0], z = new LineString([O[O.length - 2], O[O.length - 1]]), F = computedDistance(z, "nm");
-        if (P = Number(getLength(z) / 1e3) > 150, !D) return;
+    }), e == null || e.addInteraction(y), y.on("drawstart", (d) => {
+      var w;
+      r = d.feature, s = (w = r.getGeometry()) == null ? void 0 : w.on("change", (a) => {
+        const M = a.target, F = f(M, "nm"), O = M.getCoordinates()[0], R = new LineString([O[O.length - 2], O[O.length - 1]]), P = computedDistance(R, "nm");
+        if (N = Number(getLength(R) / 1e3) > 150, !F) return;
         const Z = '<span class="error pl-4">超出可以绘画的距离</span>';
-        w && (w.innerHTML = `
+        v && (v.innerHTML = `
                         <div class="text">
-                            面积：${D} 
-                            ${P ? Z : ""}
+                            面积：${F} 
+                            ${N ? Z : ""}
                         </div>
-                    `), S && (S.innerHTML = `
+                    `), C && (C.innerHTML = `
                         <div class="text">
-                            面积：${D}
+                            面积：${F}
                         </div>
-                        <div class="text ${P ? "error" : ""}">
-                            线段 ${O.length - 2}: ${F} 
-                            ${P ? Z : ""}
+                        <div class="text ${N ? "error" : ""}">
+                            线段 ${O.length - 2}: ${P} 
+                            ${N ? Z : ""}
                           
                         </div>
                           <div>
@@ -1591,84 +1611,84 @@ const createLabelFeatureStyle = (e) => {
                         </div>
                     `);
       });
-    }), y.on("drawend", (c) => {
-      var D, N, O, z;
-      if (!c.feature.getGeometry()) return;
-      l = c.feature, w && (w.innerHTML += '<span class="delete-icon"><i class="map-iconfont icon-delete" /></div>'), k.setOffset([10, 0]);
-      const u = c.feature.getGeometry().getCoordinates(), M = u[0][u[0].length - 2];
-      if (k.setPosition(M), S != null && S.parentNode && S.parentNode.removeChild(S), (D = s.getProps()) != null && D.areaDrawEnd) {
-        const F = u[0].map((Z) => transform(Z, projection.mercator, projection.data));
-        (O = (N = s.getProps()) == null ? void 0 : N.areaDrawEnd) == null || O.call(N, F);
+    }), y.on("drawend", (d) => {
+      var F, V, O, R;
+      if (!d.feature.getGeometry()) return;
+      n = d.feature, v && (v.innerHTML += '<span class="delete-icon"><i class="map-iconfont icon-delete" /></div>'), k.setOffset([10, 0]);
+      const a = d.feature.getGeometry().getCoordinates(), M = a[0][a[0].length - 2];
+      if (k.setPosition(M), C != null && C.parentNode && C.parentNode.removeChild(C), (F = l.getProps()) != null && F.areaDrawEnd) {
+        const P = a[0].map((Z) => transform(Z, projection.mercator, projection.data));
+        (O = (V = l.getProps()) == null ? void 0 : V.areaDrawEnd) == null || O.call(V, P);
       }
       y && (y.setActive(!1), e == null || e.removeInteraction(y), (e == null ? void 0 : e.getInteractions()).forEach((Z) => {
         Z instanceof Draw && (Z.setActive(!1), e == null || e.removeInteraction(Z));
-      })), n && unByKey(n), (z = document.querySelector(".delete-icon")) == null || z.addEventListener("click", () => {
-        var F, Z;
-        B(), (Z = (F = s.getProps()) == null ? void 0 : F.areaDrawEnd) == null || Z.call(F, []);
+      })), s && unByKey(s), (R = document.querySelector(".delete-icon")) == null || R.addEventListener("click", () => {
+        var P, Z;
+        B(), (Z = (P = l.getProps()) == null ? void 0 : P.areaDrawEnd) == null || Z.call(P, []);
       });
     });
-  }, f = (c, x) => {
-    const u = getArea(c);
-    switch (x) {
+  }, f = (d, w) => {
+    const a = getArea(d);
+    switch (w) {
       case "km":
-        return u > 1e4 ? Math.round(u / 1e6 * 100) / 100 + " km<sup>2</sup>" : Math.round(u * 100) / 100 + " m<sup>2</sup>";
+        return a > 1e4 ? Math.round(a / 1e6 * 100) / 100 + " km<sup>2</sup>" : Math.round(a * 100) / 100 + " m<sup>2</sup>";
       case "nm":
-        return u > 1e4 ? Math.round(u / 1e6 / Math.pow(1.852, 2) * 100) / 100 + " nm<sup>2</sup>" : Math.round(u * 100) / 100 + " m<sup>2</sup>";
+        return a > 1e4 ? Math.round(a / 1e6 / Math.pow(1.852, 2) * 100) / 100 + " nm<sup>2</sup>" : Math.round(a * 100) / 100 + " m<sup>2</sup>";
     }
   };
-  let w, k;
-  const L = () => {
-    w != null && w.parentNode && w.parentNode.removeChild(w), w = document.createElement("div"), w.style.display = "flex", w.className = "ol-tooltip ol-tooltip-draw-polygon", k = new Overlay({
-      element: w,
+  let v, k;
+  const x = () => {
+    v != null && v.parentNode && v.parentNode.removeChild(v), v = document.createElement("div"), v.style.display = "flex", v.className = "ol-tooltip ol-tooltip-draw-polygon", k = new Overlay({
+      element: v,
       offset: [0, -15],
       positioning: "bottom-center",
       stopEvent: !1,
       insertFirst: !1
     }), e == null || e.addOverlay(k);
   };
-  let S, _;
+  let C, A;
   const H = () => {
-    S != null && S.parentNode && S.parentNode.removeChild(S), S = document.createElement("div"), S.className = "ol-tooltip ol-help-tooltip", _ = new Overlay({
-      element: S,
+    C != null && C.parentNode && C.parentNode.removeChild(C), C = document.createElement("div"), C.className = "ol-tooltip ol-help-tooltip", A = new Overlay({
+      element: C,
       offset: [15, 0],
       positioning: "center-left"
-    }), e == null || e.addOverlay(_);
+    }), e == null || e.addOverlay(A);
   }, B = () => {
-    v == null || v.clear(), l = null, L(), H(), V();
+    m == null || m.clear(), n = null, x(), H(), $();
   };
   return {
-    open: i,
+    open: c,
     close: () => {
-      v == null || v.clear(), v = null, m && (e.removeLayer(m), m = null), r = null, y && (y.setActive(!1), (e == null ? void 0 : e.getInteractions()).forEach((x) => {
-        x instanceof Draw && (x.setActive(!1), e == null || e.removeInteraction(x));
-      }), y = null), n && unByKey(n), S != null && S.parentElement && S.parentElement.removeChild(S), w != null && w.parentElement && w.parentElement.removeChild(w), _ && e.removeOverlay(_), k && e.removeOverlay(k), changeCursor(e, "pointer");
+      m == null || m.clear(), m = null, L && (e.removeLayer(L), L = null), r = null, y && (y.setActive(!1), (e == null ? void 0 : e.getInteractions()).forEach((w) => {
+        w instanceof Draw && (w.setActive(!1), e == null || e.removeInteraction(w));
+      }), y = null), s && unByKey(s), C != null && C.parentElement && C.parentElement.removeChild(C), v != null && v.parentElement && v.parentElement.removeChild(v), A && e.removeOverlay(A), k && e.removeOverlay(k), changeCursor(e, "pointer");
     },
     reset: B
   };
 }, PORT_LAYER_CLASS_NAME = "zh-map-port-layer", usePortManager = (e) => {
-  const s = e.getInstall();
-  let l, n, i = null, t = null;
-  const m = (f, w = !0) => {
+  const l = e.getInstall();
+  let n, s, c = null, t = null;
+  const L = (f, v = !0) => {
     if (!(!f || f.length === 0)) {
-      if (n || (n = new VectorSource()), n.clear(), t) {
-        const k = f.find((L) => L.id === t.id);
+      if (s || (s = new VectorSource()), s.clear(), t) {
+        const k = f.find((x) => x.id === t.id);
         k ? t = k : f.push(t);
       }
       f.forEach((k) => {
-        v(k, w);
-      }), l || (l = new VectorLayer({
+        m(k, v);
+      }), n || (n = new VectorLayer({
         className: PORT_LAYER_CLASS_NAME,
-        source: n,
+        source: s,
         zIndex: 100
-      }), s.addLayer(l));
+      }), l.addLayer(n));
     }
-  }, v = (f, w = !0) => {
-    const k = e.getZoom(), [L, S] = f.latLon.split(","), _ = new Feature({
-      geometry: new Point(fromLonLat([Number(L), Number(S)]))
+  }, m = (f, v = !0) => {
+    const k = e.getZoom(), [x, C] = f.latLon.split(","), A = new Feature({
+      geometry: new Point(fromLonLat([Number(x), Number(C)]))
     });
-    _.setStyle(o(f, k, f.id === (t == null ? void 0 : t.id), w)), _.set("portData", f), n.addFeature(_);
-  }, o = (f, w, k, L = !0) => {
-    const S = (H) => `<svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
+    A.setStyle(o(f, k, f.id === (t == null ? void 0 : t.id), v)), A.set("portData", f), s.addFeature(A);
+  }, o = (f, v, k, x = !0) => {
+    const C = (H) => `<svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
                 <path fill-rule="evenodd" clip-rule="evenodd" d="M22.6563 44.9304C22.5453 44.8844 22.4445 44.817 22.3595 44.7321C22.3595 44.7321 9.36986 31.7424 9.32952 31.6913C7.09059 29.0791 5.64794 25.8802 5.17255 22.4736C4.69716 19.0671 5.20896 15.5957 6.64728 12.471C8.08561 9.34625 10.3902 6.69909 13.2878 4.84325C16.1855 2.98741 19.5548 2.00068 22.9965 2C26.4381 1.99932 29.8078 2.98473 32.7062 4.83943C35.6046 6.69414 37.9102 9.34039 39.3498 12.4646C40.7893 15.5888 41.3025 19.0599 40.8284 22.4666C40.3544 25.8734 38.913 29.0729 36.6751 31.686C36.6401 31.737 23.6531 44.7321 23.6531 44.7321C23.5682 44.817 23.4674 44.8844 23.3564 44.9304C23.2454 44.9763 23.1265 45 23.0063 45C22.8862 45 22.7673 44.9763 22.6563 44.9304Z" fill="${H}"/>
                 <g clip-path="url(#clip0_10059_122082)">
                     <path d="M34.8624 22.8687L32.5874 25.6313L33.4812 25.7125C33.4812 25.7125 30.5562 28.0687 27.9562 28.2312C25.3562 28.3937 24.1374 24.9 24.1374 24.9V19.1312H27.6312V17.425H24.2999V15.15C25.7624 14.6625 26.7374 13.2812 26.7374 11.6562C26.7374 9.625 25.1124 8 23.0812 8H22.9999C20.9687 8 19.3437 9.625 19.3437 11.6562C19.3437 13.2812 20.3999 14.6625 21.7812 15.15V17.425H18.4499V19.1312H21.9437V24.9C21.9437 24.9 20.6437 28.3125 18.0437 28.2312C15.4437 28.0687 12.5187 25.7125 12.5187 25.7125L13.4124 25.6313L11.0562 22.8687L10.2437 26.2812L11.2187 26.0375C11.2187 26.0375 13.1687 29.5313 16.1749 30.8313C19.1812 32.2125 22.1874 33.9187 22.8374 34C23.4874 33.9187 26.4937 32.2125 29.4187 30.8313C32.3437 29.45 34.3749 26.0375 34.3749 26.0375L35.3499 26.2812L34.8624 22.8687ZM23.0812 13.6875C21.9437 13.6875 21.0499 12.7937 21.0499 11.6562C21.0499 10.6 21.9437 9.70625 22.9999 9.70625H23.0812C24.1374 9.70625 25.0312 10.6 25.0312 11.6562C25.1124 12.7937 24.1374 13.6875 23.0812 13.6875Z" fill="white"/>
@@ -1679,8 +1699,8 @@ const createLabelFeatureStyle = (e) => {
                     </clipPath>
                 </defs>
                 </svg>
-            `, _ = () => `data:image/svg+xml;utf8,${encodeURIComponent(S(k ? "#FF5733" : "#3370FF"))}`;
-    return L ? new Style({
+            `, A = () => `data:image/svg+xml;utf8,${encodeURIComponent(C(k ? "#FF5733" : "#3370FF"))}`;
+    return x ? new Style({
       text: new Text({
         text: f.shortName,
         font: "12px sans-serif",
@@ -1693,111 +1713,113 @@ const createLabelFeatureStyle = (e) => {
         offsetY: 30
       }),
       image: new Icon({
-        src: _(),
-        scale: 0.5 * w / 10
+        src: A(),
+        scale: 0.5 * v / 10
       }),
       zIndex: k ? 110 : 100
     }) : new Style({
       image: new Icon({
-        src: _(),
-        scale: 0.5 * w / 10
+        src: A(),
+        scale: 0.5 * v / 10
       }),
       zIndex: k ? 110 : 100
     });
   }, r = () => {
-    if (i) {
+    if (c) {
       console.log("清除非选中的港口");
-      const f = i.get("portData").id;
-      n.getFeatures().forEach((w) => {
-        w.get("portData").id !== f && n.removeFeature(w);
+      const f = c.get("portData").id;
+      s.getFeatures().forEach((v) => {
+        v.get("portData").id !== f && s.removeFeature(v);
       });
     } else
-      console.log("清除所有港口", n), n == null || n.clear();
+      console.log("清除所有港口", s), s == null || s.clear();
   }, p = (f) => {
     if (!f)
       return y();
-    (i == null ? void 0 : i.get("portData").id) !== f.id && (y(), P(f));
+    (c == null ? void 0 : c.get("portData").id) !== f.id && (y(), N(f));
   }, y = () => {
-    if (i) {
-      const f = i == null ? void 0 : i.get("portData"), w = e.getZoom();
-      i.setStyle(o(f, w, !1));
+    if (c) {
+      const f = c == null ? void 0 : c.get("portData"), v = e.getZoom();
+      s.getFeatures().forEach((x) => {
+        x.get("portData").id === f.id && (x.setStyle(o(x.get("portData"), v, !1)), c = null);
+      });
     }
-  }, P = (f) => {
-    const w = n.getFeatures();
-    t = f, i = w.find((k) => k.get("portData").id === f.id), i == null || i.setStyle(o(f, e.getZoom(), !0));
+  }, N = (f) => {
+    const v = s.getFeatures();
+    t = f, c = v.find((k) => k.get("portData").id === f.id), c == null || c.setStyle(o(f, e.getZoom(), !0));
   };
   return {
-    render: m,
+    render: L,
     clear: r,
     selected: p,
     handlePortHover: (f) => {
-      const w = s == null ? void 0 : s.getTargetElement();
-      f && f.get("portData") && w && (w.style.cursor = "pointer");
+      const v = l == null ? void 0 : l.getTargetElement();
+      f && f.get("portData") && v && (v.style.cursor = "pointer");
     }
   };
-}, useEventManager = (e, s, l, n, i, t) => {
-  const m = e.getInstall();
-  m.on("moveend", () => {
+}, useEventManager = (e, l, n, s, c, t) => {
+  const L = e.getInstall();
+  L.on("moveend", () => {
     var o, r;
-    const v = e.getZoom();
-    (r = (o = s.getProps()).mapMoveEnd) == null || r.call(o, v), l.reRenderTrackLine();
-  }), m.on("pointermove", (v) => {
-    const o = m.getEventPixel(v.originalEvent), r = m.forEachFeatureAtPixel(o, (p) => p);
-    n.handleShipMapEvent(r, "hover"), l.handleTrackMapEvent(r, "hover", v), r && i.handlePortHover(r);
-  }), m.on("movestart", () => {
+    const m = e.getZoom();
+    (r = (o = l.getProps()).mapMoveEnd) == null || r.call(o, m), n.reRenderTrackLine();
+  }), L.on("pointermove", (m) => {
+    const o = L.getEventPixel(m.originalEvent), r = L.forEachFeatureAtPixel(o, (p) => p);
+    s.handleShipMapEvent(r, "hover"), n.handleTrackMapEvent(r, "hover", m), r && c.handlePortHover(r);
+  }), L.on("movestart", () => {
     console.log("movestart-----------------------");
-  }), m.on("click", debounce((v) => {
-    var p, y, P;
+  }), L.on("click", debounce((m) => {
+    var p, y, N;
     if (console.log("1", t.getState()), t.getState()) return;
-    const o = m.getEventPixel(v.originalEvent), r = m.forEachFeatureAtPixel(
+    const o = L.getEventPixel(m.originalEvent), r = L.forEachFeatureAtPixel(
       o,
-      (V) => {
-        if (V != null && V.get("shipData") || V != null && V.get("portData"))
-          return V;
+      ($) => {
+        if ($ != null && $.get("shipData") || $ != null && $.get("portData"))
+          return $;
       }
     );
     if (console.log("2", r), !!r) {
-      if (v.preventDefault(), v.stopPropagation(), r.get("shipData"))
-        n.handleShipMapEvent(r, "click", (p = s.getProps()) == null ? void 0 : p.selectShip);
+      if (m.preventDefault(), m.stopPropagation(), r.get("shipData"))
+        s.handleShipMapEvent(r, "click", (p = l.getProps()) == null ? void 0 : p.selectShip);
       else if (r.get("portData")) {
-        const V = r.get("portData");
-        i.selected(V), (P = (y = s.getProps()) == null ? void 0 : y.selectPort) == null || P.call(y, V);
+        const $ = r.get("portData");
+        c.selected($), (N = (y = l.getProps()) == null ? void 0 : y.selectPort) == null || N.call(y, $);
       }
     }
   }, 150));
 }, useMapController = () => {
   const e = reactive([]);
   return {
-    createInstance: (n, i) => {
+    createInstance: (s, c) => {
       const t = useMapInitializer();
-      t.initMap(n, i);
-      const m = t.getInstall(), v = useLayerManager(m), o = usePropsManager();
-      o.setProps(i), v.setShowLayerType(i.layerType), v.setGreenTileVisible(i.showGreenLayer);
-      const r = useTrackManager(m), p = useCarTrackManager(m, r), y = useShipManager(m), P = usePositionManager(m), V = useDrawLineManager(m, o), f = useDrawPolygonManager(m, o), w = usePortManager(t);
-      useEventManager(t, o, r, y, w, V);
+      t.initMap(s, c);
+      const L = t.getInstall(), m = useLayerManager(L), o = usePropsManager();
+      o.setProps(c), m.setShowLayerType(c.layerType), m.setGreenTileVisible(c.showGreenLayer);
+      const r = useTrackManager(L), p = useCarTrackManager(L, r), y = useShipManager(L), N = usePositionManager(L), $ = useDrawLineManager(L, o), f = useDrawPolygonManager(L, o), v = usePortManager(t);
+      useEventManager(t, o, r, y, v, $);
       const k = () => {
-        const S = m.getView().calculateExtent(t.getSize()), _ = transform([S[0], S[1]], projection.mercator, projection.data), H = transform([S[2], S[3]], projection.mercator, projection.data);
-        return [_[0], _[1], H[0], H[1]];
-      }, L = {
+        const C = L.getView().calculateExtent(t.getSize()), A = transform([C[0], C[1]], projection.mercator, projection.data), H = transform([C[2], C[3]], projection.mercator, projection.data);
+        return [A[0], A[1], H[0], H[1]];
+      }, x = {
         id: Symbol("map-instance"),
         innerMap: null,
         map: t.getInstall(),
         destroy: () => {
-          e.splice(e.indexOf(L), 1);
+          e.splice(e.indexOf(x), 1);
         },
         methods: {
           ...t,
-          layer: v,
+          layer: m,
           ship: y,
           track: r,
           carTrack: p,
           port: {
-            render: w.render,
-            clear: w.clear,
-            selected: w.selected
+            render: v.render,
+            clear: v.clear,
+            selected: v.selected
           },
-          position: P,
-          drawLine: V,
+          position: N,
+          drawLine: $,
           drawPolygon: f,
           // 子模块
           utils: {
@@ -1807,14 +1829,14 @@ const createLabelFeatureStyle = (e) => {
           }
         }
       };
-      return e.push(L), L;
+      return e.push(x), x;
     },
-    destroyInstance: (n) => {
-      const i = e.findIndex((t) => t.id === n);
-      i > -1 && (e[i].destroy(), e.splice(i, 1));
+    destroyInstance: (s) => {
+      const c = e.findIndex((t) => t.id === s);
+      c > -1 && (e[c].destroy(), e.splice(c, 1));
     },
     destroyAll: () => {
-      e.forEach((n) => n.destroy()), e.splice(0, e.length);
+      e.forEach((s) => s.destroy()), e.splice(0, e.length);
     },
     getAllInstances: () => [...e]
   };
@@ -1837,18 +1859,18 @@ const createLabelFeatureStyle = (e) => {
     selectPort: { type: Function, default: () => {
     } }
   },
-  setup(e, { expose: s }) {
-    const l = ref(), n = ref(), i = useMapController(), t = ref(), m = e, v = ref({
+  setup(e, { expose: l }) {
+    const n = ref(), s = ref(), c = useMapController(), t = ref(), L = e, m = ref({
       getInstall() {
       }
     });
     return onMounted(() => {
       var o;
-      t.value = i.createInstance(l.value, m), console.log(" instance.value?.methods", t.value.map), v.value = t.value.methods, (o = n.value) == null || o.setScaleLine(t.value.map, m.scaleLineUnit);
+      t.value = c.createInstance(n.value, L), console.log(" instance.value?.methods", t.value.map), m.value = t.value.methods, (o = s.value) == null || o.setScaleLine(t.value.map, L.scaleLineUnit);
     }), onUnmounted(() => {
       var o, r;
-      i.destroyInstance((o = t == null ? void 0 : t.value) == null ? void 0 : o.id), (r = t.value) == null || r.destroy();
-    }), s({
+      c.destroyInstance((o = t == null ? void 0 : t.value) == null ? void 0 : o.id), (r = t.value) == null || r.destroy();
+    }), l({
       getZoom: () => {
         var o;
         return (o = t.value) == null ? void 0 : o.methods.getZoom();
@@ -2056,12 +2078,12 @@ const createLabelFeatureStyle = (e) => {
       createElementVNode("div", {
         id: "map",
         ref_key: "zhMapRef",
-        ref: l,
+        ref: n,
         class: "zh-map"
       }, null, 512),
       createVNode(ScaleLine, {
         ref_key: "scaleLineRef",
-        ref: n
+        ref: s
       }, null, 512),
       createVNode(ZoomControl, {
         ref: "zoomControlRef",
@@ -2069,7 +2091,7 @@ const createLabelFeatureStyle = (e) => {
       }, null, 8, ["map-instance"])
     ]));
   }
-}), Map$1 = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-cb0faecb"]]), ZhMap = withInstall(Map$1);
+}), Map$1 = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-8370bb85"]]), ZhMap = withInstall(Map$1);
 export {
   ZhMap as Z
 };