zhihao-ui 1.2.7 → 1.2.9

package/dist/es/{Map-IjNHD4K5.js → Map-CMiThYaG.js}

@@ -1,10 +1,10 @@
-var x = Object.defineProperty;
-var R = (e, t, o) => t in e ? x(e, t, { enumerable: !0, configurable: !0, writable: !0, value: o }) : e[t] = o;
-var y = (e, t, o) => R(e, typeof t != "symbol" ? t + "" : t, o);
+var A = Object.defineProperty;
+var R = (e, t, o) => t in e ? A(e, t, { enumerable: !0, configurable: !0, writable: !0, value: o }) : e[t] = o;
+var T = (e, t, o) => R(e, typeof t != "symbol" ? t + "" : t, o);
 import { ref, defineComponent, useModel, watch, resolveComponent, openBlock, createElementBlock, createElementVNode, createVNode, withCtx, Fragment, renderList, unref, createBlock, toDisplayString, createCommentVNode, mergeModels, normalizeClass, nextTick, onMounted } from "vue";
-import { m as getLength, V as VectorSource, n as VectorLayer, S as Style, C as CircleStyle, F as Fill, o as Stroke, D as Draw, O as Overlay, u as unByKey, p as ElOption, q as ScaleLine$1, T as Text, r as Feature, P as Point, s as fromLonLat, d as cloneDeep, G as GeoJSON, W as WebGLPointsLayer, t as transform, h as hooks, L as LineString, v as TileLayer, X as XYZ, M as Map$1, w as View } from "./vendor-Cu-cEPs_.js";
-import { _ as _export_sfc } from "./Button-C1Q6WvkI.js";
-import { w as withInstall } from "./utils-B1dH8Kx6.js";
+import { n as getArea, o as getLength, V as VectorSource, p as VectorLayer, S as Style, C as CircleStyle, F as Fill, q as Stroke, D as Draw, O as Overlay, u as unByKey, r as ElOption, s as ScaleLine$1, T as Text, t as Feature, P as Point, v as fromLonLat, e as cloneDeep, G as GeoJSON, W as WebGLPointsLayer, w as transform, h as hooks, L as LineString, I as Icon, x as Translate, y as toLonLat, M as MultiPoint, z as getCenter, A as TileLayer, X as XYZ, B as Map$1, H as View } from "./vendor-BY-fHNA3.js";
+import { _ as _export_sfc } from "./Button-DBbUF88w.js";
+import { w as withInstall } from "./utils-DZ8-2Fg2.js";
 var BaseMapType = /* @__PURE__ */ ((e) => (e[e.vector = 0] = "vector", e[e.satellite = 1] = "satellite", e))(BaseMapType || {}), CAR_COLOR = /* @__PURE__ */ ((e) => (e[e.BLUE = 1] = "BLUE", e[e.YELLOW = 2] = "YELLOW", e[e.Y_GREEN = 3] = "Y_GREEN", e))(CAR_COLOR || {}), DEVICE_TYPE = /* @__PURE__ */ ((e) => (e[e.HOST = 1] = "HOST", e[e.TALK = 2] = "TALK", e[e.STORAGE = 3] = "STORAGE", e[e.INTERNET = 4] = "INTERNET", e[e.CAMERA = 5] = "CAMERA", e[e.LOAD = 6] = "LOAD", e))(DEVICE_TYPE || {}), LENGTH_UNIT = /* @__PURE__ */ ((e) => (e[e.M = 1] = "M", e[e.KM = 2] = "KM", e[e.NM = 3] = "NM", e))(LENGTH_UNIT || {});
 const LENGTH_UNIT_LABEL = {
   1: "M",
@@ -16,47 +16,47 @@ const LENGTH_UNIT_LABEL = {
 };
 var SWITCH_BTN = /* @__PURE__ */ ((e) => (e.Camera = "camera", e.Mobile = "mobile", e.WaterGauge = "waterGauge", e))(SWITCH_BTN || {});
 class ShipMapData {
-  constructor(t, o, n, a, r, l, s, c, d, u, m, i, h, w, L, I, T, b, p, v, f, M) {
-    y(this, "id");
+  constructor(t, o, n, a, r, l, s, i, d, u, p, c, f, g, y, k, L, E, m, v, h, I) {
+    T(this, "id");
     // mmsi
-    y(this, "mmsi");
+    T(this, "mmsi");
     // 船舶三角形填充色
-    y(this, "fill");
+    T(this, "fill");
     // 船类型 "7": "货船",
-    y(this, "shipType");
+    T(this, "shipType");
     // 船名
-    y(this, "name");
+    T(this, "name");
     // 长度
-    y(this, "length");
+    T(this, "length");
     // 宽度
-    y(this, "breadth");
+    T(this, "breadth");
     // 经度
-    y(this, "lon");
+    T(this, "lon");
     // 纬度
-    y(this, "lat");
+    T(this, "lat");
     // 时间
-    y(this, "createdAt");
+    T(this, "createdAt");
     // 速度
-    y(this, "speed");
+    T(this, "speed");
     // 来源
-    y(this, "from");
+    T(this, "from");
     // 船状态 "stop":"静止","sail":"航行","work":"作业","danger":"危险","other":"其他"
-    y(this, "sailStatus");
+    T(this, "sailStatus");
     // 船艏向
-    y(this, "hdg");
+    T(this, "hdg");
     // 航迹向
-    y(this, "cog");
+    T(this, "cog");
     // 设备定位类型
-    y(this, "posType");
-    y(this, "type");
+    T(this, "posType");
+    T(this, "type");
     // 航向角度
-    y(this, "angle");
+    T(this, "angle");
     // 左侧是否显示色块
-    y(this, "leftIconColor");
-    y(this, "existDevice");
-    y(this, "existMobile");
-    y(this, "existWaterGauge");
-    this.id = t, this.mmsi = o, this.fill = n, this.shipType = a, this.name = r, this.length = l, this.breadth = s, this.lon = c, this.lat = d, this.createdAt = u, this.speed = m, this.from = i, this.sailStatus = h, this.hdg = w, this.cog = L, this.posType = I, this.type = T, this.angle = b, this.leftIconColor = p, this.existDevice = v, this.existMobile = f, this.existWaterGauge = M;
+    T(this, "leftIconColor");
+    T(this, "existDevice");
+    T(this, "existMobile");
+    T(this, "existWaterGauge");
+    this.id = t, this.mmsi = o, this.fill = n, this.shipType = a, this.name = r, this.length = l, this.breadth = s, this.lon = i, this.lat = d, this.createdAt = u, this.speed = p, this.from = c, this.sailStatus = f, this.hdg = g, this.cog = y, this.posType = k, this.type = L, this.angle = E, this.leftIconColor = m, this.existDevice = v, this.existMobile = h, this.existWaterGauge = I;
   }
 }
 const formatLength = function(e, t) {
@@ -77,6 +77,19 @@ const formatLength = function(e, t) {
 }, convertSixHundredThousandToLatLng = function(e, t) {
   const o = Number(t) / 6e5;
   return [Number(e) / 6e5, o];
+}, formatArea = (e, t) => {
+  const n = getArea(e);
+  let a;
+  switch (t) {
+    case LENGTH_UNIT.KM:
+      n > 1e4 ? a = Math.round(n / 1e6 * 100) / 100 + " km<sup>2</sup>" : a = Math.round(n * 100) / 100 + " m<sup>2</sup>";
+      break;
+    case LENGTH_UNIT.NM:
+      const r = Math.pow(1.852, 2);
+      n > 1e4 ? a = Math.round(n / 1e6 / r * 100) / 100 + " nm<sup>2</sup>" : a = Math.round(n * 100) / 100 + " m<sup>2</sup>";
+      break;
+  }
+  return a;
 }, convertShipMapData = (e) => {
   const t = (o) => new ShipMapData(
     o.id,
@@ -97,7 +110,11 @@ const formatLength = function(e, t) {
     o.cog,
     Number(o.postype),
     "other",
-    o.cog
+    o.cog,
+    o.leftIconColor,
+    o.existDevice,
+    o.existMobile,
+    o.existWaterGauge
   );
   return Array.isArray(e) ? e.map((o) => t(o)) : t(e);
 }, mapInstance = ref(), shipsLayer = ref(), selectShipsLayer = ref(), allShips = ref([]), largeAmountShipsLayer = ref();
@@ -116,10 +133,10 @@ const labels = ref([]), _hoisted_1$4 = {
   },
   emits: /* @__PURE__ */ mergeModels(["close"], ["update:visible"]),
   setup(e, { expose: t, emit: o }) {
-    const n = o, a = useModel(e, "visible"), r = ref(LENGTH_UNIT.NM), l = ref([]), s = ref(!1), c = new VectorSource();
-    let d, u, m, i, h;
-    const w = new VectorLayer({
-      source: c,
+    const n = o, a = useModel(e, "visible"), r = ref(LENGTH_UNIT.NM), l = ref([]), s = ref(!1), i = new VectorSource();
+    let d, u, p, c, f;
+    const g = new VectorLayer({
+      source: i,
       style: {
         "fill-color": "rgba(255, 255, 255, 0.2)",
         "stroke-color": "#ffcc33",
@@ -127,19 +144,19 @@ const labels = ref([]), _hoisted_1$4 = {
         "circle-radius": 7,
         "circle-fill-color": "#ffcc33"
       }
-    }), L = function(g) {
-      if (g.dragging)
+    }), y = function(S) {
+      if (S.dragging)
         return;
-      let S = "点击选择起点";
-      d && (S = "单击继续，双击结束"), u && (u.innerHTML = S, m.setPosition(g.coordinate), u.classList.remove("hidden"));
-    }, I = () => {
-      mapInstance.value && (mapInstance.value.on("pointermove", L), mapInstance.value.getViewport().addEventListener("mouseout", function() {
-        var g;
-        (g = u == null ? void 0 : u.classList) == null || g.add("hidden");
+      let w = "点击选择起点";
+      d && (w = "单击继续，双击结束"), u && (u.innerHTML = w, p.setPosition(S.coordinate), u.classList.remove("hidden"));
+    }, k = () => {
+      mapInstance.value && (mapInstance.value.on("pointermove", y), mapInstance.value.getViewport().addEventListener("mouseout", function() {
+        var S;
+        (S = u == null ? void 0 : u.classList) == null || S.add("hidden");
       }), s.value = !0);
     };
-    let T;
-    const b = new Style({
+    let L;
+    const E = new Style({
       fill: new Fill({
         color: "rgba(255, 255, 255, 0.2)"
       }),
@@ -158,110 +175,110 @@ const labels = ref([]), _hoisted_1$4 = {
         })
       })
     });
-    function p() {
-      var g, S;
+    function m() {
+      var S, w;
       l.value = [], document.querySelectorAll(".ol-tooltip.ol-tooltip-static").forEach((_) => {
-        var k;
-        (k = _ == null ? void 0 : _.parentNode) == null || k.removeChild(_);
-      }), c.clear(), (g = mapInstance.value) == null || g.removeInteraction(T), (S = mapInstance.value) == null || S.removeLayer(w), u != null && u.parentNode && u.parentNode.removeChild(u);
+        var M;
+        (M = _ == null ? void 0 : _.parentNode) == null || M.removeChild(_);
+      }), i.clear(), (S = mapInstance.value) == null || S.removeInteraction(L), (w = mapInstance.value) == null || w.removeLayer(g), u != null && u.parentNode && u.parentNode.removeChild(u);
     }
     function v() {
-      var S, _;
-      p(), (S = mapInstance.value) == null || S.addLayer(w), T = new Draw({
-        source: c,
+      var w, _;
+      m(), (w = mapInstance.value) == null || w.addLayer(g), L = new Draw({
+        source: i,
         type: "LineString",
         style: function() {
-          return b;
+          return E;
         }
-      }), (_ = mapInstance.value) == null || _.addInteraction(T), M(), f();
-      let g;
-      T.on("drawstart", function(k) {
+      }), (_ = mapInstance.value) == null || _.addInteraction(L), I(), h();
+      let S;
+      L.on("drawstart", function(M) {
         var F;
-        d = k.feature;
-        let V;
-        g = (F = d.getGeometry()) == null ? void 0 : F.on("change", function(A) {
-          const N = A.target;
-          let P = formatLength(N, r.value);
-          V = N.getLastCoordinate(), i && P && (i.innerHTML = P), h.setPosition(V);
+        d = M.feature;
+        let b;
+        S = (F = d.getGeometry()) == null ? void 0 : F.on("change", function(P) {
+          const N = P.target;
+          let x = formatLength(N, r.value);
+          b = N.getLastCoordinate(), c && x && (c.innerHTML = x), f.setPosition(b);
         });
-      }), T.on("drawend", function() {
-        i && (i.className = "ol-tooltip ol-tooltip-static ol-tooltip-measure"), i != null && i.innerHTML && l.value.push(i == null ? void 0 : i.innerHTML), h.setOffset([0, -7]), d = null, i = null, M(), g && unByKey(g);
+      }), L.on("drawend", function() {
+        c && (c.className = "ol-tooltip ol-tooltip-static ol-tooltip-measure"), c != null && c.innerHTML && l.value.push(c == null ? void 0 : c.innerHTML), f.setOffset([0, -7]), d = null, c = null, I(), S && unByKey(S);
       });
     }
-    function f() {
-      var g;
-      u != null && u.parentNode && u.parentNode.removeChild(u), u = document.createElement("div"), u.className = "ol-tooltip hidden", m = new Overlay({
+    function h() {
+      var S;
+      u != null && u.parentNode && u.parentNode.removeChild(u), u = document.createElement("div"), u.className = "ol-tooltip hidden", p = new Overlay({
         element: u,
         offset: [15, 0],
         positioning: "center-left"
-      }), (g = mapInstance.value) == null || g.addOverlay(m);
+      }), (S = mapInstance.value) == null || S.addOverlay(p);
     }
-    function M() {
-      var g;
-      i != null && i.parentNode && i.parentNode.removeChild(i), i = document.createElement("div"), i.className = "ol-tooltip ol-tooltip-measure", h = new Overlay({
-        element: i,
+    function I() {
+      var S;
+      c != null && c.parentNode && c.parentNode.removeChild(c), c = document.createElement("div"), c.className = "ol-tooltip ol-tooltip-measure", f = new Overlay({
+        element: c,
         offset: [0, -15],
         positioning: "bottom-center",
         stopEvent: !1,
         insertFirst: !1
-      }), (g = mapInstance.value) == null || g.addOverlay(h);
+      }), (S = mapInstance.value) == null || S.addOverlay(f);
     }
-    const E = (g) => {
-      var k, V;
-      l.value[g] && l.value.splice(g, 1);
-      const S = document.querySelectorAll(".ol-tooltip.ol-tooltip-static.ol-tooltip-measure");
-      S[g] && ((V = (k = S[g]) == null ? void 0 : k.parentNode) == null || V.removeChild(S[g]));
-      const _ = c.getFeatures();
-      _[g] && c.removeFeature(_[g]);
-    }, C = () => {
+    const C = (S) => {
+      var M, b;
+      l.value[S] && l.value.splice(S, 1);
+      const w = document.querySelectorAll(".ol-tooltip.ol-tooltip-static.ol-tooltip-measure");
+      w[S] && ((b = (M = w[S]) == null ? void 0 : M.parentNode) == null || b.removeChild(w[S]));
+      const _ = i.getFeatures();
+      _[S] && i.removeFeature(_[S]);
+    }, V = () => {
       n("close");
     };
     return watch(() => a, () => {
-      a && !s.value && (I(), v());
+      a && !s.value && (k(), v());
     }, { deep: !0, immediate: !0 }), t({
       addInteraction: v,
-      removeInteraction: p
-    }), (g, S) => {
+      removeInteraction: m
+    }), (S, w) => {
       const _ = resolveComponent("el-select");
       return a.value ? (openBlock(), createElementBlock("div", _hoisted_1$4, [
         createElementVNode("div", { class: "header" }, [
-          S[1] || (S[1] = createElementVNode("div", { class: "title" }, "测量", -1)),
+          w[1] || (w[1] = createElementVNode("div", { class: "title" }, "测量", -1)),
           createElementVNode("i", {
-            onClick: C,
+            onClick: V,
             class: "map-iconfont icon-close"
           })
         ]),
         createElementVNode("div", _hoisted_2$2, [
-          S[2] || (S[2] = createElementVNode("div", { class: "tips" }, "在地图上点击多个点测量距离，距离单位", -1)),
+          w[2] || (w[2] = createElementVNode("div", { class: "tips" }, "在地图上点击多个点测量距离，距离单位", -1)),
           createVNode(_, {
             class: "select-length-unit",
             modelValue: r.value,
-            "onUpdate:modelValue": S[0] || (S[0] = (k) => r.value = k)
+            "onUpdate:modelValue": w[0] || (w[0] = (M) => r.value = M)
           }, {
             default: withCtx(() => [
-              (openBlock(!0), createElementBlock(Fragment, null, renderList(unref(LENGTH_UNIT_LABEL), (k) => (openBlock(), createBlock(unref(ElOption), {
-                key: unref(LENGTH_UNIT)[k],
-                label: k,
-                value: unref(LENGTH_UNIT)[k]
+              (openBlock(!0), createElementBlock(Fragment, null, renderList(unref(LENGTH_UNIT_LABEL), (M) => (openBlock(), createBlock(unref(ElOption), {
+                key: unref(LENGTH_UNIT)[M],
+                label: M,
+                value: unref(LENGTH_UNIT)[M]
               }, null, 8, ["label", "value"]))), 128))
             ]),
             _: 1
           }, 8, ["modelValue"])
         ]),
         createElementVNode("div", _hoisted_3$1, [
-          (openBlock(!0), createElementBlock(Fragment, null, renderList(l.value, (k, V) => (openBlock(), createElementBlock("div", {
+          (openBlock(!0), createElementBlock(Fragment, null, renderList(l.value, (M, b) => (openBlock(), createElementBlock("div", {
             class: "measure-history-item",
-            key: V
+            key: b
           }, [
             createElementVNode("div", _hoisted_4, [
-              S[3] || (S[3] = createElementVNode("i", { class: "map-iconfont icon-a-Frame-11" }, null, -1)),
-              createElementVNode("span", _hoisted_5, "线段" + toDisplayString(V + 1), 1),
-              createElementVNode("span", _hoisted_6, toDisplayString(k), 1)
+              w[3] || (w[3] = createElementVNode("i", { class: "map-iconfont icon-a-Frame-11" }, null, -1)),
+              createElementVNode("span", _hoisted_5, "线段" + toDisplayString(b + 1), 1),
+              createElementVNode("span", _hoisted_6, toDisplayString(M), 1)
             ]),
             createElementVNode("div", {
               class: "delete-button",
-              onClick: (F) => E(V)
-            }, S[4] || (S[4] = [
+              onClick: (F) => C(b)
+            }, w[4] || (w[4] = [
               createElementVNode("i", { class: "map-iconfont icon-a-delete1" }, null, -1)
             ]), 8, _hoisted_7)
           ]))), 128))
@@ -269,7 +286,7 @@ const labels = ref([]), _hoisted_1$4 = {
       ])) : createCommentVNode("", !0);
     };
   }
-}), Measure = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["__scopeId", "data-v-8e976a28"]]), _hoisted_1$3 = { class: "tool-panel" }, _hoisted_2$1 = { class: "tool-components" }, _sfc_main$5 = /* @__PURE__ */ defineComponent({
+}), Measure = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["__scopeId", "data-v-650abf6f"]]), _hoisted_1$3 = { class: "tool-panel" }, _hoisted_2$1 = { class: "tool-components" }, _sfc_main$5 = /* @__PURE__ */ defineComponent({
   __name: "toolPanel",
   props: {
     vehicleMode: {}
@@ -278,36 +295,37 @@ const labels = ref([]), _hoisted_1$4 = {
   setup(e, { emit: t }) {
     const o = t, n = ref(!1), a = ref(null), r = ref(!0), l = () => {
       r.value = !r.value, o("switchGreenDot", r.value);
-    }, s = ref(BaseMapType.vector), c = () => {
+    }, s = ref(BaseMapType.vector), i = () => {
       s.value = s.value === BaseMapType.vector ? BaseMapType.satellite : BaseMapType.vector, o("switchMapTile", s.value);
     }, d = () => {
-      var m, i;
-      n.value ? (m = a.value) == null || m.removeInteraction() : (i = a.value) == null || i.addInteraction(), n.value = !n.value;
+      var p, c;
+      n.value ? (p = a.value) == null || p.removeInteraction() : (c = a.value) == null || c.addInteraction(), n.value = !n.value;
     }, u = () => {
-      var m;
-      (m = a.value) == null || m.removeInteraction(), n.value = !1;
+      var p;
+      (p = a.value) == null || p.removeInteraction(), n.value = !1;
     };
-    return (m, i) => (openBlock(), createElementBlock(Fragment, null, [
+    return (p, c) => (openBlock(), createElementBlock(Fragment, null, [
       createElementVNode("div", _hoisted_1$3, [
-        m.vehicleMode === "ship" ? (openBlock(), createElementBlock("div", {
-          key: 0,
-          class: normalizeClass(["switch-btn", `${n.value && "active"}`]),
-          onClick: d
-        }, i[1] || (i[1] = [
-          createElementVNode("i", { class: "map-iconfont icon-measure" }, null, -1),
-          createElementVNode("div", { class: "button-text" }, "测距", -1)
-        ]), 2)) : createCommentVNode("", !0),
-        createElementVNode("div", {
-          class: normalizeClass(["switch-btn", { active: r.value }]),
-          onClick: l
-        }, i[2] || (i[2] = [
-          createElementVNode("i", { class: "map-iconfont icon-ship" }, null, -1),
-          createElementVNode("div", { class: "button-text" }, "绿点", -1)
-        ]), 2),
+        p.vehicleMode === "ship" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+          createElementVNode("div", {
+            class: normalizeClass(["switch-btn", `${n.value && "active"}`]),
+            onClick: d
+          }, c[1] || (c[1] = [
+            createElementVNode("i", { class: "map-iconfont icon-measure" }, null, -1),
+            createElementVNode("div", { class: "button-text" }, "测距", -1)
+          ]), 2),
+          createElementVNode("div", {
+            class: normalizeClass(["switch-btn", { active: r.value }]),
+            onClick: l
+          }, c[2] || (c[2] = [
+            createElementVNode("i", { class: "map-iconfont icon-ship" }, null, -1),
+            createElementVNode("div", { class: "button-text" }, "绿点", -1)
+          ]), 2)
+        ], 64)) : createCommentVNode("", !0),
         createElementVNode("div", {
           class: normalizeClass(["switch-btn", { active: s.value === unref(BaseMapType).satellite }]),
-          onClick: c
-        }, i[3] || (i[3] = [
+          onClick: i
+        }, c[3] || (c[3] = [
           createElementVNode("i", { class: "map-iconfont icon-space" }, null, -1),
           createElementVNode("div", { class: "button-text" }, "卫星", -1)
         ]), 2)
@@ -318,13 +336,13 @@ const labels = ref([]), _hoisted_1$4 = {
           ref_key: "measureRef",
           ref: a,
           visible: n.value,
-          "onUpdate:visible": i[0] || (i[0] = (h) => n.value = h),
+          "onUpdate:visible": c[0] || (c[0] = (f) => n.value = f),
           onClose: u
         }, null, 8, ["visible"])) : createCommentVNode("", !0)
       ])
     ], 64));
   }
-}), ToolPanel = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["__scopeId", "data-v-6072039b"]]), _hoisted_1$2 = { id: "scale-line-container" }, _sfc_main$4 = /* @__PURE__ */ defineComponent({
+}), ToolPanel = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["__scopeId", "data-v-9c83c550"]]), _hoisted_1$2 = { id: "scale-line-container" }, _sfc_main$4 = /* @__PURE__ */ defineComponent({
   __name: "scaleLine",
   setup(e, { expose: t }) {
     const o = new ScaleLine$1({
@@ -386,6 +404,8 @@ const labels = ref([]), _hoisted_1$4 = {
   findShip: 13,
   // 船舶绿点图最大显示层级
   shipGreenDotMax: 11,
+  // 查车图标显示层级
+  truckDefault: 14,
   // 船形图标最小渲染层级
   shipModelMin: 16,
   // 船形图标最大渲染层级
@@ -484,7 +504,7 @@ function createPoint(e, t, o) {
   }, t, o);
 }
 function calculateAngle(e, t, o) {
-  const n = convertToRadians(e), a = convertToRadians(t), r = n[0] % 360 * (Math.PI / 180), l = a[0] % 360 * (Math.PI / 180), s = n[1] % 360 * (Math.PI / 180), c = a[1] % 360 * (Math.PI / 180), d = Math.sin(l - r) * Math.cos(c), u = Math.cos(s) * Math.sin(c) - Math.sin(s) * Math.cos(c) * Math.cos(l - r);
+  const n = convertToRadians(e), a = convertToRadians(t), r = n[0] % 360 * (Math.PI / 180), l = a[0] % 360 * (Math.PI / 180), s = n[1] % 360 * (Math.PI / 180), i = a[1] % 360 * (Math.PI / 180), d = Math.sin(l - r) * Math.cos(i), u = Math.cos(s) * Math.sin(i) - Math.sin(s) * Math.cos(i) * Math.cos(l - r);
   return 180 * Math.atan2(d, u) % (2 * Math.PI) / Math.PI;
 }
 const getAngle = (e, t) => {
@@ -505,8 +525,8 @@ const getAngle = (e, t) => {
   let t = 0, o = 0, n = 0;
   const a = e.length;
   for (let s = 0; s < a - 1; s++) {
-    const [c, d] = e[s], [u, m] = e[s + 1], i = c * m - u * d;
-    n += i, t += (c + u) * i, o += (d + m) * i;
+    const [i, d] = e[s], [u, p] = e[s + 1], c = i * p - u * d;
+    n += c, t += (i + u) * c, o += (d + p) * c;
   }
   if (n *= 0.5, n === 0)
     throw new Error("多边形面积为零");
@@ -514,40 +534,40 @@ const getAngle = (e, t) => {
   return [r, l];
 }, rotateShapeModel = (e, t) => {
   const [o, n] = calculatePolygonCentroid(e), a = t * Math.PI / 180, r = Math.cos(a), l = Math.sin(a);
-  return e.map(([s, c]) => {
-    const d = s - o, u = c - n, m = d * r - u * l + o, i = d * l + u * r + n;
-    return [m, i];
+  return e.map(([s, i]) => {
+    const d = s - o, u = i - n, p = d * r - u * l + o, c = d * l + u * r + n;
+    return [p, c];
   });
 }, getTopLeftPoint = (e) => [e[0], e[3]], getBottomLeftPoint = (e) => [e[2], e[3]], getBottomRightPoint = (e) => [e[2], e[1]], getTopRighttPoint = (e) => [e[0], e[1]];
 function calculateBounds(e, t, o, n, a) {
-  let r, l, s, c, d = e[0], u = e[1];
+  let r, l, s, i, d = e[0], u = e[1];
   switch (t) {
     case 0:
-      r = d + a, l = r + o, c = u - a, s = c - n;
+      r = d + a, l = r + o, i = u - a, s = i - n;
       break;
     case 1:
-      r = d + a, l = r + o, c = u + n / 2, s = c - n;
+      r = d + a, l = r + o, i = u + n / 2, s = i - n;
       break;
     case 2:
-      r = d + a, l = r + o, c = u + a + n, s = c - n;
+      r = d + a, l = r + o, i = u + a + n, s = i - n;
       break;
     case 3:
-      r = d - o / 2, l = r + o, c = u + a + n, s = c - n;
+      r = d - o / 2, l = r + o, i = u + a + n, s = i - n;
       break;
     case 4:
-      l = d, r = l - o, c = u + a + n, s = c - n;
+      l = d, r = l - o, i = u + a + n, s = i - n;
       break;
     case 5:
-      l = d - a, r = l - o, c = u + n / 2, s = c - n;
+      l = d - a, r = l - o, i = u + n / 2, s = i - n;
       break;
     case 6:
-      l = d, r = l - o, c = u - a, s = c - n;
+      l = d, r = l - o, i = u - a, s = i - n;
       break;
     case 7:
-      r = d - o / 2, l = r + o, c = u - a, s = c - n;
+      r = d - o / 2, l = r + o, i = u - a, s = i - n;
   }
-  if (!(!r || !s || !l || !c))
-    return [Math.min(r, l), Math.min(s, c), Math.max(r, l), Math.max(s, c) + 1];
+  if (!(!r || !s || !l || !i))
+    return [Math.min(r, l), Math.min(s, i), Math.max(r, l), Math.max(s, i) + 1];
 }
 function calculateAnchorPoint(e, t, o = 70, n = 20, a = 20) {
   let r = [0, 0];
@@ -586,45 +606,104 @@ function drawLabelBody(e, t, o) {
     labelHeight: r,
     center: l,
     text: s,
-    lineLength: c = 20
+    leftIcon: i,
+    shipColor: d,
+    lineLength: u = 20
   } = o;
   e.save(), n && (e.font = n);
-  let d = e.measureText(s).width + 2 * a;
-  e.restore();
-  let u, m = -1, i = r + 3 * a;
-  if (m = 0, u = calculateBounds(l, m, d, i, c), u && m > -1) {
-    let h = getBottomLeftPoint(u), w = getTopRighttPoint(u);
+  let p = e.measureText(s).width + 2 * a;
+  (i || d) && (p += r + 4 * a), e.restore();
+  let c, f = -1, g = r + 3 * a;
+  if (f = 0, c = calculateBounds(l, f, p, g, u), c && f > -1) {
+    let y = getBottomLeftPoint(c), k = getTopRighttPoint(c);
     return {
       center: l,
-      x: calculateAnchorPoint(l, m, d, i, c),
-      l: w,
-      r: h,
-      bounds: u,
-      position: m
+      x: calculateAnchorPoint(l, f, p, g, u),
+      l: k,
+      r: y,
+      bounds: c,
+      position: f
     };
   }
   return null;
 }
-const drawText = (e, t, o, n, a, r, l) => {
+const drawText = (e, t) => {
   if (!e) return;
+  const { center: o, text: n, textColor: a, leftIcon: r, rightIcons: l, font: s } = t;
   e.save();
-  let [s, c] = t;
-  s += labelOutSize, e.font = labelFont, e.fillStyle = n, e.fillText(o, s, c), e.restore();
-}, drawPolygon = (e, t, o, n, a, r = null, l, s, c, d) => {
-  if (t && e) {
-    e.save(), e.beginPath(), l && l !== 0 && s == null && e.rotate(l), r && e.translate(r[0], r[1]), l && (s != null && s.length) && e.rotate(l), c && e.scale(c, c), e.moveTo(t[0][0], t[0][1]);
-    for (let u = 1; u < t.length; u++)
-      e.lineTo(t[u][0], t[u][1]);
-    a && e.closePath(), o && (e.strokeStyle = o, e.stroke()), n && a && (d && (e.globalAlpha = d), e.fillStyle = n, e.fill()), e.restore();
+  let [i, d] = o;
+  if (r) {
+    e.font = "21px map-iconfont";
+    let u = getIconFont(r.icon);
+    e.fillStyle = r.color, e.fillText(u, i + labelOutSize - 4, d + 3), i += 22;
+  }
+  if (l != null && l.length) {
+    e.font = "12px map-iconfont", e.fillStyle = "#3370ff";
+    let u = e.measureText(n).width + 6;
+    l.forEach((p, c) => {
+      let f = getIconFont(p), g = 20 * c;
+      e.fillText(f, i + u + g, d);
+    });
+  }
+  e.font = s || labelFont, e.fillStyle = a, e.fillText(n, i, d), e.restore();
+}, drawPolygon = (e, t) => {
+  let {
+    points: o,
+    strokeColor: n,
+    fillColor: a,
+    shouldClosePath: r,
+    translation: l,
+    rotation: s,
+    rotationCenter: i,
+    scale: d,
+    globalAlpha: u
+  } = t;
+  if (u || (u = 1), o && e) {
+    e.save(), e.beginPath(), s && s !== 0 && i == null && e.rotate(s), l && e.translate(l[0], l[1]), s && (i != null && i.length) && e.rotate(s), d && e.scale(d, d), e.moveTo(o[0][0], o[0][1]);
+    for (let p = 1; p < o.length; p++)
+      e.lineTo(o[p][0], o[p][1]);
+    r && e.closePath(), n && (e.strokeStyle = n, e.stroke()), a && r && (u && (e.globalAlpha = u), e.fillStyle = a, e.fill()), e.restore();
   }
-}, drawLabel = (e, t, o, n, a, r, l, s) => {
-  if (t && o) {
-    let c = { font: labelFont, labelOutSize, labelHeight, center: t, text: o }, d = drawLabelBody(e, labels.value, c);
-    if (d) {
-      const { x: u, bounds: m, l: i } = d, h = [getTopLeftPoint(m), getBottomLeftPoint(m), getBottomRightPoint(m), getTopRighttPoint(m)];
-      labels.value.push(d), drawPolygon(e, [t, u], n, "#000", !1, null, null, null, null, labelAlpha), drawPolygon(e, h, n, r, !0);
-      const [w, L] = i;
-      drawText(e, [w, L + labelOutSize + labelHeight + 1], o, a);
+}, drawLabel = (e, t) => {
+  const { center: o, text: n, color: a, textColor: r, bgColor: l, leftIcon: s, rightIcons: i } = t;
+  if (o && n) {
+    let d = {
+      font: labelFont,
+      labelOutSize,
+      labelHeight,
+      center: o,
+      text: n,
+      leftIcon: s
+    }, u = drawLabelBody(e, labels.value, d);
+    if (u) {
+      const { x: p, bounds: c, l: f } = u;
+      let g = [getTopLeftPoint(c), getBottomLeftPoint(c), getBottomRightPoint(c), getTopRighttPoint(c)];
+      labels.value.push(u), drawPolygon(e, {
+        points: [o, p],
+        strokeColor: a,
+        fillColor: "#000",
+        shouldClosePath: !0,
+        translation: void 0,
+        rotation: void 0,
+        rotationCenter: void 0,
+        scale: void 0,
+        globalAlpha: labelAlpha
+      }), i != null && i.length && i.forEach(() => {
+        g[1][0] += 20, g[2][0] += 20;
+      }), drawPolygon(e, {
+        points: g,
+        strokeColor: a,
+        fillColor: l,
+        shouldClosePath: !0
+      });
+      const [L, E] = f, m = {
+        center: [L, E + labelOutSize + labelHeight + 1],
+        text: n,
+        textColor: r,
+        leftIcon: s,
+        rightIcons: i
+      };
+      drawText(e, m);
     }
   }
   return null;
@@ -646,25 +725,25 @@ const setTruckStyle = (e, t, o, n) => new Style({
     l.save();
     let s = 1;
     l.scale(s, s);
-    let [c, d] = a;
-    c = c / s - 20, d = d / s;
-    const u = c - 70, m = d - 68;
-    let i = 180;
-    const h = 56, w = "#FFFFFF";
-    let L = 176;
-    const I = 52;
-    let T = "#164AFF", b = "#FFFFFF";
-    o === CAR_COLOR.YELLOW ? (L = 176, T = "#FFC81E", b = "rgba(0,0,0,0.88)") : o === CAR_COLOR.Y_GREEN && (i = 200, L = 196, T = "#8FED7C", b = "rgba(0,0,0,0.88)"), n != null && n.length && (i += n.length * 56), fillRectRadius(l, u, m, i, h, w), fillRectRadius(l, u + 2, m + 2, L, I, T), o === CAR_COLOR.Y_GREEN && fillRectRadius(l, u + 2, m + 2, 68, I, "#FFC81E"), l.save(), l.restore(), l.fillStyle = b, l.font = "bold 28px Arial", l.textAlign = "left", l.textBaseline = "middle";
-    const p = `${t.slice(0, 2) + " · " + t.slice(2)}`;
-    if (l.fillText(p, u + 12, m + 32), l.save(), l.restore(), n != null && n.length) {
-      const f = l.measureText(p).width + 12;
-      let M = 0;
-      n.forEach((E) => {
-        E === DEVICE_TYPE.CAMERA && (l.drawImage(cameraImage, c - 54 + f + M * 56, d - 64, 50, 50), ++M), E === DEVICE_TYPE.LOAD && (l.drawImage(loadImage, c - 54 + f + M * 56, d - 64, 50, 50), ++M);
+    let [i, d] = a;
+    i = i / s - 20, d = d / s;
+    const u = i - 70, p = d - 68;
+    let c = 180;
+    const f = 56, g = "#FFFFFF";
+    let y = 176;
+    const k = 52;
+    let L = "#164AFF", E = "#FFFFFF";
+    o === CAR_COLOR.YELLOW ? (y = 176, L = "#FFC81E", E = "rgba(0,0,0,0.88)") : o === CAR_COLOR.Y_GREEN && (c = 200, y = 196, L = "#8FED7C", E = "rgba(0,0,0,0.88)"), n != null && n.length && (c += n.length * 56), fillRectRadius(l, u, p, c, f, g), fillRectRadius(l, u + 2, p + 2, y, k, L), o === CAR_COLOR.Y_GREEN && fillRectRadius(l, u + 2, p + 2, 68, k, "#FFC81E"), l.save(), l.restore(), l.fillStyle = E, l.font = "bold 28px Arial", l.textAlign = "left", l.textBaseline = "middle";
+    const m = `${t.slice(0, 2) + " · " + t.slice(2)}`;
+    if (l.fillText(m, u + 12, p + 32), l.save(), l.restore(), n != null && n.length) {
+      const h = l.measureText(m).width + 12;
+      let I = 0;
+      n.forEach((C) => {
+        C === DEVICE_TYPE.CAMERA && (l.drawImage(cameraImage, i - 54 + h + I * 56, d - 64, 50, 50), ++I), C === DEVICE_TYPE.LOAD && (l.drawImage(loadImage, i - 54 + h + I * 56, d - 64, 50, 50), ++I);
       });
     }
     const v = dotImage;
-    l.drawImage(v, c + i / 2 - 90, d, 50 / s, 50 / s), l.restore();
+    l.drawImage(v, i + c / 2 - 90, d, 50 / s, 50 / s), l.restore();
   }
 });
 ref([]);
@@ -770,17 +849,17 @@ const renderTrucksMarker = (e) => {
   const n = mapInstance.value.getView().getZoom();
   if (!n) return;
   let a = [];
-  const [r, l] = drawShipModelByZoom[n] || [0, 0], [s, c] = o;
+  const [r, l] = drawShipModelByZoom[n] || [0, 0], [s, i] = o;
   if (n <= mapZoom.shipModelMax && n > mapZoom.shipModelMin && t.length >= r && t.breadth >= l)
     a = rotateShapeModel(drawCurrentShipShapeModel(t, n), t.angle).map((u) => {
-      const [m, i] = u;
-      return [s + m, c + i];
+      const [p, c] = u;
+      return [s + p, i + c];
     });
   else {
     const d = rotateShapeModel(triangleModel, t.angle);
     o.length === 2 && (a = d.map((u) => {
-      const [m, i] = u;
-      return [s + m, c + i];
+      const [p, c] = u;
+      return [s + p, i + c];
     }));
   }
   if (!(a.length > 2)) return !1;
@@ -792,8 +871,8 @@ const renderTrucksMarker = (e) => {
   const [n, a] = o[0], r = getShipDirectPath(t);
   if (r) {
     let l = r.map(function(s) {
-      let [c, d] = s;
-      return [c + n, d + a];
+      let [i, d] = s;
+      return [i + n, d + a];
     });
     if (e.save(), e.beginPath(), t.angle > 0) {
       e.translate(n, a);
@@ -802,8 +881,8 @@ const renderTrucksMarker = (e) => {
     }
     e.moveTo(n, a);
     for (let s = 1; s < l.length; s++) {
-      let [c, d] = l[s];
-      e.lineTo(c, d);
+      let [i, d] = l[s];
+      e.lineTo(i, d);
     }
     e.strokeStyle = "#000", e.lineWidth = 1, e.stroke(), e.restore();
   }
@@ -815,7 +894,18 @@ const renderTrucksMarker = (e) => {
   e.beginPath(), e.moveTo(o + s, r), e.lineTo(o, r), e.lineTo(o, r - s), e.moveTo(o, n + s), e.lineTo(o, n), e.lineTo(o + s, n), e.moveTo(a - s, n), e.lineTo(a, n), e.lineTo(a, n + s), e.moveTo(a, r - s), e.lineTo(a, r), e.lineTo(a - s, r), e.stroke(), e.restore();
 }, drawShipLabel = (e, t, o) => {
   const [n, a] = o, r = n - 0, l = a - 0, s = t.name;
-  drawLabel(e, [r, l], s, "#fff", "#000", "#fff");
+  let i;
+  t.leftIconColor && (i = { color: t.leftIconColor, icon: "&#xe599;" });
+  let d = getShipCustomIcon(t);
+  drawLabel(e, {
+    center: [r, l],
+    text: s,
+    color: "#fff",
+    textColor: "#000",
+    bgColor: "#fff",
+    leftIcon: i,
+    rightIcons: d
+  });
 }, drawCurrentShipShapeModel = (e, t) => {
   let o = 0;
   t === 17 ? o = 0.425 : t === 18 && (o = 0.857);
@@ -833,6 +923,9 @@ const renderTrucksMarker = (e) => {
       }
     }
   return r;
+}, getShipCustomIcon = (e) => {
+  let t = [];
+  return e.existDevice && t.push("&#xe687;"), e.existMobile && t.push("&#xe688;"), e.existWaterGauge && t.push("&#xe686;"), t || [];
 };
 let shipsMarkerList = [], shipsVectorSource, largeAmountShipsSource;
 const selectedShipData = ref(null);
@@ -904,7 +997,7 @@ const renderShips = (e) => {
   let t = cloneDeep(e);
   return t = t.filter((o) => {
     var a, r, l;
-    let n = getFilterItem(o).every(({ btnShow: s, value: c }) => s ? !!c : !0);
+    let n = getFilterItem(o).every(({ btnShow: s, value: i }) => s ? !!i : !0);
     return switchBtnShow.value.camera || switchBtnShow.value.mobile || switchBtnShow.value.waterGauge ? ((a = selectedShipData.value) == null ? void 0 : a.id) === o.id && clearSelectFeature() : (r = selectedShipData.value) != null && r.id && findShip((l = selectedShipData.value) == null ? void 0 : l.id, selectedShipData.value, !1), n;
   }), t;
 }, getFilterItem = (e) => [
@@ -926,13 +1019,13 @@ const renderShips = (e) => {
     ship: t,
     lonlat: o,
     feature: n
-  }), selectShipsVectorSource = new VectorSource({
+  }), selectShipsVectorSource == null || selectShipsVectorSource.clear(), selectShipsVectorSource = new VectorSource({
     features: [n]
   }), selectShipsLayer.value = new VectorLayer({
     source: selectShipsVectorSource
   }), mapInstance.value.addLayer(selectShipsLayer.value), selectShipsLayer.value.setVisible(!0), selectShipsLayer.value;
 }, findShip = (e, t, o = !0) => {
-  var a, r, l, s, c;
+  var a, r, l, s, i;
   if (!e || !mapInstance.value) return;
   const n = (l = (r = (a = shipsLayer.value) == null ? void 0 : a.getSource()) == null ? void 0 : r.getFeatures()) == null ? void 0 : l.find((d) => {
     var u;
@@ -941,16 +1034,16 @@ const renderShips = (e) => {
   if (n)
     selectedShipData.value = n;
   else if (t)
-    selectedShipData.value = t, selectSingleShipMarker(t);
+    selectedShipData.value = t;
   else {
     console.error("找不到船舶");
     return;
   }
-  if (o && ((s = selectedShipData.value) != null && s.lon) && ((c = selectedShipData.value) != null && c.lat)) {
+  if (selectSingleShipMarker(t), o && ((s = selectedShipData.value) != null && s.lon) && ((i = selectedShipData.value) != null && i.lat)) {
     const d = mapInstance.value.getView(), u = new Point([selectedShipData.value.lon, selectedShipData.value.lat]);
     d.setCenter(transform(u.getCoordinates(), projection.data, projection.mercator));
-    const m = d.getZoom(), i = m < mapZoom.findShip ? mapZoom.findShip : m;
-    d.setZoom(i);
+    const p = d.getZoom(), c = p < mapZoom.findShip ? mapZoom.findShip : p;
+    d.setZoom(c);
   }
   return n;
 }, clearSelectFeature = () => {
@@ -975,21 +1068,21 @@ const renderShips = (e) => {
   var r, l;
   const n = e[t];
   if (!n) return;
-  (r = trackLineVectorSource.value) == null || r.clear(), trackList$1.value = [], trackList$1.value = n.reverse().map((s, c) => (s.center = [s.lon, s.lat], s.centerPoint = lonLatToMercator(s.center), s.id = t, s.index = c, s.time = hooks(s.createdAt).format("YYYY-MM-DD HH:mm:ss"), s));
+  (r = trackLineVectorSource.value) == null || r.clear(), trackList$1.value = [], trackList$1.value = n.reverse().map((s, i) => (s.center = [s.lon, s.lat], s.centerPoint = lonLatToMercator(s.center), s.id = t, s.index = i, s.time = hooks(s.createdAt).format("YYYY-MM-DD HH:mm:ss"), s));
   let a = trackList$1.value.map((s) => s.centerPoint);
   if (a.length >= 2) {
     let s = new LineString(a);
-    const c = new Feature({ geometry: s });
-    c.setStyle(
+    const i = new Feature({ geometry: s });
+    i.setStyle(
       new Style({
         stroke: new Stroke({
           color: o,
           width: 2
         })
       })
-    ), c.setId(t), c.set("type", "line");
+    ), i.setId(t), i.set("type", "line");
     const d = shipTrackLineFeatures.value.findIndex((u) => u.getId() === t);
-    d >= 0 ? shipTrackLineFeatures.value[d] = c : shipTrackLineFeatures.value.push(c), trackLineVectorSource.value = new VectorSource({
+    d >= 0 ? shipTrackLineFeatures.value[d] = i : shipTrackLineFeatures.value.push(i), trackLineVectorSource.value = new VectorSource({
       features: shipTrackLineFeatures.value
     }), shipTrackVectorLayer.value = new VectorLayer({
       source: trackLineVectorSource.value
@@ -1004,34 +1097,34 @@ const renderShips = (e) => {
   let o = { 16: 24, 17: 15, default: 4 }, n = [], a = t.length;
   for (let s = 0; s < a; s++) {
     t[s].index = s;
-    let c = mapInstance.value.getPixelFromCoordinate(t[s].centerPoint);
-    if (c) {
-      let d = c.concat(c);
+    let i = mapInstance.value.getPixelFromCoordinate(t[s].centerPoint);
+    if (i) {
+      let d = i.concat(i);
       d = adjustBounds(d, [20, 20]);
       let u = mapInstance.value.getView().getZoom();
       if (!u) return;
       if (u > 15) {
-        let i = o[u] || o.default;
-        d = adjustBounds(d, [i, i]);
+        let c = o[u] || o.default;
+        d = adjustBounds(d, [c, c]);
       }
-      let m = !0;
+      let p = !0;
       if (t[s].state !== "0") {
-        for (let i = 0; i < n.length; i++)
-          if (isOverlapping(d, n[i].bounds)) {
-            m = !1;
+        for (let c = 0; c < n.length; c++)
+          if (isOverlapping(d, n[c].bounds)) {
+            p = !1;
             break;
           }
       }
-      m && (t[s].bounds = d, n.push(t[s]));
+      p && (t[s].bounds = d, n.push(t[s]));
     }
   }
   const r = getIconStyle(stopIcon), l = getIconStyle(slowIcon);
   n.forEach((s) => {
-    var u, m;
-    let c = new Feature({
+    var u, p;
+    let i = new Feature({
       geometry: new Point(s.centerPoint)
     });
-    c.set("type", "track_point"), c.set("data", s), c.setStyle(
+    i.set("type", "track_point"), i.set("data", s), i.setStyle(
       new Style({
         image: new CircleStyle({
           fill: new Fill({ color: e }),
@@ -1039,26 +1132,26 @@ const renderShips = (e) => {
           radius: 3
         })
       })
-    ), trackLineVectorSource.value.addFeature(c);
+    ), trackLineVectorSource.value.addFeature(i);
     const d = new Feature({
       geometry: new Point(fromLonLat(s.center))
     });
     if (d.set("type", "track_label"), d.setStyle(
       setTrackLabelStyle(s, e)
     ), console.log("trackLabelFeature"), trackLineVectorSource.value.addFeature(d), typeof s == "object" && s.hasOwnProperty("state")) {
-      let i = new Feature({
+      let c = new Feature({
         geometry: new Point(s.centerPoint)
       });
-      i.set("type", "track_icon");
-      let h = new Style({
+      c.set("type", "track_icon");
+      let f = new Style({
         text: new Text({
-          font: "Normal 22px iconfont",
+          font: "Normal 22px map-iconfont",
           text: getIconFont(dropletsIcon),
           offsetY: -10
         }),
         zIndex: 99
-      }), w = [];
-      s.state === "0" ? ((u = h.getText()) == null || u.setFill(new Fill({ color: stopColor })), w.push(r)) : ((m = h.getText()) == null || m.setFill(new Fill({ color: slowColor })), w.push(l)), w.push(h), i.setStyle(w), trackLineVectorSource.value.addFeature(i);
+      }), g = [];
+      s.state === "0" ? ((u = f.getText()) == null || u.setFill(new Fill({ color: stopColor })), g.push(r)) : ((p = f.getText()) == null || p.setFill(new Fill({ color: slowColor })), g.push(l)), g.push(f), c.setStyle(g), trackLineVectorSource.value.addFeature(c);
     }
   }), renderArrow(n, e), renderIconPoint();
 }, renderArrow = (e, t) => {
@@ -1069,10 +1162,10 @@ const renderShips = (e) => {
     if (l % 2 === 0)
       a = trackList$1.value[l].centerPoint;
     else {
-      let s = trackList$1.value[Math.floor(l)], c = trackList$1.value[Math.ceil(l)];
-      if (s && c) {
-        let [d, u] = s.centerPoint, [m, i] = c.centerPoint;
-        a = [(d + m) / 2, (u + i) / 2];
+      let s = trackList$1.value[Math.floor(l)], i = trackList$1.value[Math.ceil(l)];
+      if (s && i) {
+        let [d, u] = s.centerPoint, [p, c] = i.centerPoint;
+        a = [(d + p) / 2, (u + c) / 2];
       }
     }
     if (a) {
@@ -1082,7 +1175,7 @@ const renderShips = (e) => {
       s.set("type", "track_arrow"), s.setStyle(
         new Style({
           text: new Text({
-            font: "700 14px iconfont",
+            font: "700 14px map-iconfont",
             text: getIconFont("&#xe6bc;"),
             fill: new Fill({ color: t }),
             rotation: getAngle(
@@ -1105,7 +1198,7 @@ const renderShips = (e) => {
     r.setStyle(
       new Style({
         text: new Text({
-          font: "Normal 14px iconfont",
+          font: "Normal 14px map-iconfont",
           text: getIconFont(e),
           fill: new Fill({ color: l })
         }),
@@ -1115,8 +1208,14 @@ const renderShips = (e) => {
   });
 }, setTrackLabelStyle = (e, t) => new Style({
   renderer: (o, n) => {
-    const a = n.context;
-    drawLabel(a, o, e.time, t, "#000", "rgba(255,255,255,.8)");
+    const a = n.context, s = {
+      center: o,
+      text: e.time,
+      color: t,
+      textColor: "#000",
+      bgColor: "rgba(255,255,255,.8)"
+    };
+    drawLabel(a, s);
   }
 }), showTracks = ref([]), trackList = ref([]);
 ref(null);
@@ -1124,22 +1223,22 @@ const trackId = ref(""), cursor = ref(0), renderTrack = (e, t, o, n, a = "ship")
   var u;
   if (nextTick(() => {
     hiddenAllShips();
-  }).then((m) => {
+  }).then((p) => {
   }), (t == null ? void 0 : t.length) < 2) {
-    ((u = showTracks.value) == null ? void 0 : u.findIndex((m) => m.id === e)) < 0 && showTracks.value.push({ id: e, length: "" });
+    ((u = showTracks.value) == null ? void 0 : u.findIndex((p) => p.id === e)) < 0 && showTracks.value.push({ id: e, length: "" });
     return;
   }
   let r = {};
-  t.forEach((m) => {
-    m.state ? m.state = Number(m.state) : delete m.state;
+  t.forEach((p) => {
+    p.state ? p.state = Number(p.state) : delete p.state;
   }), trackId.value = e, r[e] = t, trackList.value = t;
   const l = ["#ff0000", "#00ff00", "#0079ff", "#ffa500", "#800080", "#008080", "#ffc0cb", "#800000", "#000080", "#808000"], s = r[e].map(
-    (m) => transform([m.lon, m.lat], projection.data, projection.mercator)
-  ), c = new LineString(s), d = formatLength(c, n) || "--";
+    (p) => transform([p.lon, p.lat], projection.data, projection.mercator)
+  ), i = new LineString(s), d = formatLength(i, n) || "--";
   nextTick(() => {
-    var i;
-    const m = (i = showTracks.value) == null ? void 0 : i.findIndex((h) => h.id === e);
-    m < 0 ? showTracks.value.push({ id: e, length: d }) : showTracks.value[m].length = d, renderTrackLine(r, e, o), ++cursor.value, cursor.value > l.length && (cursor.value = 0), resetTrackView(e);
+    var c;
+    const p = (c = showTracks.value) == null ? void 0 : c.findIndex((f) => f.id === e);
+    p < 0 ? showTracks.value.push({ id: e, length: d }) : showTracks.value[p].length = d, renderTrackLine(r, e, o), ++cursor.value, cursor.value > l.length && (cursor.value = 0), resetTrackView(e);
   }).then(() => {
   });
 }, removeAllTrackLayer = () => {
@@ -1155,9 +1254,9 @@ const trackId = ref(""), cursor = ref(0), renderTrack = (e, t, o, n, a = "ship")
       console.log(r);
     }
 }, drawCustomContent = (e, t, o, n = "top-left", a = !1) => {
-  var u, m;
+  var u, p;
   if (!t || !mapInstance.value) return;
-  document.querySelectorAll(".truck-custom-content").forEach((i) => i.parentNode.removeChild(i));
+  document.querySelectorAll(".truck-custom-content").forEach((c) => c.parentNode.removeChild(c));
   const r = document.createElement("div");
   r.innerHTML = o;
   const l = new Overlay({
@@ -1169,31 +1268,31 @@ const trackId = ref(""), cursor = ref(0), renderTrack = (e, t, o, n, a = "ship")
     // 设置不阻拦事件
   });
   if (a) {
-    let i = !1, h = [0, 0], w = [0, 0];
-    r.addEventListener("mousedown", function(L) {
-      var I;
-      i = !0, L.clientX, L.clientY, h = (I = mapInstance.value) == null ? void 0 : I.getCoordinateFromPixel([L.clientX - 200, L.clientY - 200]), w = [
-        L.clientX - r.getBoundingClientRect().left + 160,
-        L.clientY - r.getBoundingClientRect().top + 84
-      ], L.preventDefault();
-    }), document.addEventListener("mousemove", function(L) {
-      var I;
-      if (i) {
-        let T = (I = mapInstance.value) == null ? void 0 : I.getCoordinateFromPixel([L.clientX - w[0], L.clientY - w[1]]), b = T[0] - h[0], p = T[1] - h[1];
-        l.setPosition([h[0] + b, h[1] + p]);
+    let c = !1, f = [0, 0], g = [0, 0];
+    r.addEventListener("mousedown", function(y) {
+      var k;
+      c = !0, y.clientX, y.clientY, f = (k = mapInstance.value) == null ? void 0 : k.getCoordinateFromPixel([y.clientX - 200, y.clientY - 200]), g = [
+        y.clientX - r.getBoundingClientRect().left + 160,
+        y.clientY - r.getBoundingClientRect().top + 84
+      ], y.preventDefault();
+    }), document.addEventListener("mousemove", function(y) {
+      var k;
+      if (c) {
+        let L = (k = mapInstance.value) == null ? void 0 : k.getCoordinateFromPixel([y.clientX - g[0], y.clientY - g[1]]), E = L[0] - f[0], m = L[1] - f[1];
+        l.setPosition([f[0] + E, f[1] + m]);
       }
     }), document.addEventListener("mouseup", function() {
-      i = !1;
+      c = !1;
     });
   }
   (u = mapInstance.value) == null || u.addOverlay(l);
   const s = r.querySelector(".close-button");
   s && s.addEventListener("click", () => {
-    var i, h;
-    (i = mapInstance.value) == null || i.removeOverlay(l), (h = r.parentNode) == null || h.removeChild(r);
+    var c, f;
+    (c = mapInstance.value) == null || c.removeOverlay(l), (f = r.parentNode) == null || f.removeChild(r);
   });
-  let c = JSON.parse(JSON.stringify(t));
-  const d = (m = mapInstance.value) == null ? void 0 : m.getCoordinateFromPixel(c);
+  let i = JSON.parse(JSON.stringify(t));
+  const d = (p = mapInstance.value) == null ? void 0 : p.getCoordinateFromPixel(i);
   return l.setPosition(d), l;
 }, vehicle = ref(null), focusShipData = ref(), currentTruckOverlay = ref(null), findTruck = async (e) => {
   if (!mapInstance.value) return;
@@ -1224,6 +1323,226 @@ const trackId = ref(""), cursor = ref(0), renderTrack = (e, t, o, n, a = "ship")
   (r = document.querySelectorAll(".truck-custom-content")) == null || r.forEach((l) => {
     l.style.width = `${a}px`, l.style.height = `${a}px`;
   });
+}, markerPosition = ref(""), marker = ref(), createIconStyle = (e) => new Style({
+  image: new Icon({
+    src: CDN_URL + "map/poi-marker-default.png",
+    anchor: [0.5, 1]
+  }),
+  text: new Text({
+    text: e,
+    offsetY: -90,
+    // 调整文本位置，使其位于标记上方
+    font: "12px",
+    fill: new Fill({
+      color: "#000"
+    }),
+    stroke: new Stroke({
+      color: "#fff",
+      width: 2
+    }),
+    backgroundFill: new Fill({
+      color: "#fff"
+      // 设置文本背景填充颜色
+    }),
+    backgroundStroke: new Stroke({
+      color: "#000",
+      // 设置文本背景描边颜色
+      width: 1
+    }),
+    padding: [2, 2, 2, 2]
+    // 设置文本背景的内边距
+  })
+}), renderMarker = (e, t = !0, o = !0) => {
+  var u;
+  if (!mapInstance.value || !e || e.split(",").length !== 2) return;
+  const [n, a] = e.split(",").map(Number);
+  marker.value = new Feature({
+    geometry: new Point(fromLonLat([n, a]))
+  });
+  const r = o ? `${n}, ${a}` : "";
+  (u = marker.value) == null || u.setStyle(createIconStyle(r));
+  const l = new VectorSource({
+    features: [marker.value]
+  }), s = new VectorLayer({
+    source: l
+  }), i = mapInstance.value.getView();
+  if (mapInstance.value.addLayer(s), t) {
+    const p = new Translate({
+      layers: [s]
+    });
+    p.on("translating", function(c) {
+      var y;
+      const f = c.features.item(0).getGeometry().getCoordinates(), g = toLonLat(f);
+      markerPosition.value = `${g[0].toFixed(6)}, ${g[1].toFixed(6)}`, (y = marker.value) == null || y.setStyle(createIconStyle(markerPosition.value));
+    }), mapInstance.value.addInteraction(p);
+  }
+  const d = new Point([n, a]);
+  i.setCenter(transform(d.getCoordinates(), projection.data, projection.mercator)), i.setZoom(mapZoom.findShip);
+}, setMarkerPosition = (e) => {
+  var a, r;
+  if (!mapInstance.value) return;
+  const t = mapInstance.value.getView(), o = e.split(",").map(Number);
+  (r = (a = marker.value) == null ? void 0 : a.getGeometry()) == null || r.setCoordinates(fromLonLat([o[0], o[1]]));
+  const n = new Point([o[0], o[1]]);
+  t.setCenter(transform(n.getCoordinates(), projection.data, projection.mercator));
+};
+let layerState = "drawn", drawnState = "undrawn";
+const source = new VectorSource();
+let sketch, helpTooltipElement, helpTooltip, measureTooltipElement, measureTooltip;
+const circleStyle = {
+  image: new CircleStyle({
+    radius: 5,
+    fill: new Fill({
+      color: "rgb(51,112,255, 1)"
+    })
+  }),
+  geometry: function(e) {
+    const t = e.getGeometry().getCoordinates();
+    return new MultiPoint(t);
+  }
+}, drawVector = new VectorLayer({
+  source,
+  style: [
+    {
+      "stroke-color": "rgba(255, 255, 255, 1)",
+      "stroke-width": 2,
+      "fill-color": "rgba(255, 255, 255, 0.3)"
+    },
+    new Style(circleStyle)
+  ]
+});
+let draw;
+function createMeasureTooltip() {
+  var e;
+  measureTooltipElement != null && measureTooltipElement.parentNode && measureTooltipElement.parentNode.removeChild(measureTooltipElement), measureTooltipElement = document.createElement("div"), measureTooltipElement.className = "ol-tooltip ol-tooltip-draw-polygon", measureTooltip = new Overlay({
+    element: measureTooltipElement,
+    offset: [0, -15],
+    positioning: "bottom-center",
+    stopEvent: !1,
+    insertFirst: !1
+  }), (e = mapInstance.value) == null || e.addOverlay(measureTooltip);
+}
+function createHelpTooltip() {
+  var e;
+  helpTooltipElement != null && helpTooltipElement.parentNode && helpTooltipElement.parentNode.removeChild(helpTooltipElement), helpTooltipElement = document.createElement("div"), helpTooltipElement.className = "ol-tooltip ol-help-tooltip hidden", helpTooltip = new Overlay({
+    element: helpTooltipElement,
+    offset: [15, 0],
+    positioning: "center-left"
+  }), (e = mapInstance.value) == null || e.addOverlay(helpTooltip);
+}
+let squareLimitError = !1, lineLimitError = !1;
+const validateSquareLimit = (e) => {
+  let o = 1 / 0, n = -1 / 0, a = 1 / 0, r = -1 / 0;
+  e == null || e.forEach((i) => {
+    const d = transform(i, projection.mercator, projection.data), u = d[0], p = d[1];
+    o = Math.min(o, p), n = Math.max(n, p), a = Math.min(a, u), r = Math.max(r, u);
+  });
+  const l = (n - o) * 111, s = (r - a) * 111;
+  squareLimitError = l > 150 || s > 150;
+};
+let storeFeature;
+function addInteraction(e) {
+  var o, n;
+  mapInstance.value || init(), drawnState = "undrawn", layerState = "drawn", (o = mapInstance.value) == null || o.addLayer(drawVector), draw = new Draw({
+    type: "Polygon",
+    // source: drawVector.getSource(),
+    source,
+    trace: !0,
+    style: [
+      {
+        "stroke-color": "rgba(255, 255, 255, 1)",
+        "stroke-width": 1.5,
+        "stroke-line-dash": [10, 10],
+        "fill-color": "rgba(255, 255, 255, 0.25)"
+        // "circle-radius": 6,
+        // "circle-fill-color": "rgb(51,112,255, 1)"
+      },
+      new Style(circleStyle)
+    ]
+  }), (n = mapInstance.value) == null || n.addInteraction(draw), createMeasureTooltip(), createHelpTooltip();
+  let t;
+  draw.on("drawstart", function(a) {
+    var r;
+    layerState = "drawn", sketch = a.feature, t = (r = sketch.getGeometry()) == null ? void 0 : r.on("change", function(l) {
+      const s = l.target;
+      let i = formatArea(s, LENGTH_UNIT.NM);
+      const u = s.getCoordinates()[0], p = new LineString([u[u.length - 2], u[u.length - 1]]);
+      let c = formatLength(p, LENGTH_UNIT.NM);
+      if (lineLimitError = Number(getLength(p) / 1e3) > 150, validateSquareLimit(u), measureTooltipElement && i && (measureTooltipElement.innerHTML = `
+                <span class="text">面积：${i}${lineLimitError || squareLimitError ? '<span class="error pl-12">超出可以绘画的距离</span>' : ""}</span>
+            `), helpTooltipElement && i) {
+        let f = "";
+        parseFloat(i) > 0 && (f = `
+                        <div class="text ${squareLimitError ? "error" : ""}">面积：${i}${squareLimitError ? '<span class="error pl-12">超出可以绘画的距离</span>' : ""}</div>`), helpTooltipElement.innerHTML = `${f}
+                    <span class="text ${lineLimitError ? "error" : ""}">线段${u.length - 2}：${c}${lineLimitError ? '<span class="error pl-4">超出可以绘画的距离</span>' : ""}</span>
+                    <div><span class="text">单击继续，双击结束</span></div>
+                `;
+      }
+    }), drawnState = "drawing";
+  }), draw.on("drawend", function(a) {
+    if (a.feature.getGeometry()) {
+      storeFeature = a.feature;
+      const r = endFn(a.feature);
+      r != null && r.length && e && e(r);
+    }
+    sketch = null, measureTooltipElement = null, createMeasureTooltip(), t && unByKey(t), drawnState = "drawend";
+  });
+}
+function removeInteraction() {
+  var e, t, o;
+  mapInstance.value && (document.querySelectorAll(".ol-tooltip.ol-tooltip-draw-polygon").forEach((n) => {
+    var a;
+    (a = n == null ? void 0 : n.parentNode) == null || a.removeChild(n);
+  }), source.clear(), (e = mapInstance.value) == null || e.removeInteraction(draw), (t = mapInstance.value) == null || t.removeLayer(drawVector), helpTooltipElement != null && helpTooltipElement.parentNode && helpTooltipElement.parentNode.removeChild(helpTooltipElement), ((o = mapInstance.value) == null ? void 0 : o.getTargetElement()).style.cursor = "", document.querySelector("#map").style.cursor = "", drawnState = "undrawn", layerState = "destroyed");
+}
+const endFn = (e) => {
+  var t, o, n;
+  if (e.getGeometry()) {
+    const a = [], l = e.getGeometry().getCoordinates();
+    (t = l[0]) == null || t.forEach((i) => {
+      a.push(transform(i, projection.mercator, projection.data));
+    });
+    const s = l[0][l[0].length - 2];
+    if (s && measureTooltip.setPosition(s), measureTooltip.setOffset([10, 0]), measureTooltipElement && (measureTooltipElement.innerHTML += '<span class="delete-icon"><i class="iconfont icon-delete" /></div>'), (o = document.querySelector(".delete-icon")) == null || o.addEventListener("click", () => {
+      reset();
+    }), !lineLimitError && !squareLimitError)
+      return a;
+    draw && ((n = mapInstance.value) == null || n.removeInteraction(draw)), helpTooltipElement != null && helpTooltipElement.parentNode && helpTooltipElement.parentNode.removeChild(helpTooltipElement);
+  }
+}, initFeature = (e) => {
+  var t, o;
+  if (layerState = "drawn", storeFeature) {
+    const n = storeFeature.getGeometry();
+    if (!n) return;
+    const a = formatArea(n, LENGTH_UNIT.NM);
+    measureTooltipElement && (measureTooltipElement.innerHTML = `
+                <span class="text">面积：${a}${lineLimitError || squareLimitError ? '<span class="error pl-12">超出可以绘画的距离</span>' : ""}</span>
+            `), (t = drawVector.getSource()) == null || t.addFeature(storeFeature);
+    const r = endFn(storeFeature);
+    r != null && r.length && e && e(r);
+    const l = getCenter(storeFeature.getGeometry().getExtent());
+    (o = mapInstance.value) == null || o.getView().setCenter(l);
+  }
+}, pointerMoveHandler = function(e) {
+  var o;
+  if (e.dragging)
+    return;
+  let t = "点击选择起点";
+  sketch && (t = "单击继续，双击结束"), helpTooltipElement && (helpTooltipElement.innerHTML = t, helpTooltip.setPosition(e.coordinate), helpTooltipElement.classList.remove("hidden")), layerState === "drawn" && (((o = mapInstance.value) == null ? void 0 : o.getTargetElement()).style.cursor = "crosshair");
+}, init = () => {
+  mapInstance.value && (mapInstance.value.on("pointermove", pointerMoveHandler), mapInstance.value.getViewport().addEventListener("mouseout", function() {
+    var e;
+    (e = helpTooltipElement == null ? void 0 : helpTooltipElement.classList) == null || e.add("hidden");
+  }), mapInstance.value.on("dblclick", function(e) {
+    drawnState !== "undrawn" && (e.stopPropagation(), e.preventDefault());
+  }));
+}, reset = () => {
+  removeInteraction(), addInteraction(), storeFeature = null;
+}, drawPolygonTool = {
+  addInteraction,
+  removeInteraction,
+  initFeature,
+  reset
 }, _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "Map",
   props: {
@@ -1233,17 +1552,17 @@ const trackId = ref(""), cursor = ref(0), renderTrack = (e, t, o, n, a = "ship")
   },
   emits: ["zoomChanged", "extentChanged"],
   setup(e, { expose: t, emit: o }) {
-    const n = ref(null), a = ref(null), r = ref(null), l = o, s = e, c = ref(s.zoom || mapZoom.default), d = ref(!1), u = ref(!0), m = ref(!0);
-    let i;
-    ((p) => {
-      p[p.tiandituTile = new TileLayer({ source: new XYZ({ url: baseMap.tiandituTile }) })] = "tiandituTile", p[p.tiandituTileMark = new TileLayer({ source: new XYZ({ url: baseMap.tiandituTileMark }) })] = "tiandituTileMark", p[p.tiandituImgTile = new TileLayer({ source: new XYZ({ url: baseMap.tiandituImgTile }), visible: !1 })] = "tiandituImgTile", p[p.tiandituImgTileMark = new TileLayer({ source: new XYZ({ url: baseMap.tiandituImgTileMark }), visible: !1 })] = "tiandituImgTileMark", p[p.greenMark = new TileLayer({ source: new XYZ({ url: baseMap.greenTile }) })] = "greenMark";
-    })(i || (i = {}));
-    const h = () => {
-      var v;
-      const p = {
+    const n = ref(null), a = ref(null), r = ref(null), l = o, s = e, i = ref(s.zoom || mapZoom.default), d = ref(!1), u = ref(!0), p = ref(!0);
+    let c;
+    ((m) => {
+      m[m.tiandituTile = new TileLayer({ source: new XYZ({ url: baseMap.tiandituTile }) })] = "tiandituTile", m[m.tiandituTileMark = new TileLayer({ source: new XYZ({ url: baseMap.tiandituTileMark }) })] = "tiandituTileMark", m[m.tiandituImgTile = new TileLayer({ source: new XYZ({ url: baseMap.tiandituImgTile }), visible: !1 })] = "tiandituImgTile", m[m.tiandituImgTileMark = new TileLayer({ source: new XYZ({ url: baseMap.tiandituImgTileMark }), visible: !1 })] = "tiandituImgTileMark", m[m.greenMark = new TileLayer({ source: new XYZ({ url: baseMap.greenTile }) })] = "greenMark";
+    })(c || (c = {}));
+    const f = () => {
+      var v, h;
+      const m = {
         projection: projection.mercator,
         // 地图投影坐标系
-        zoom: s.zoom || mapZoom.default,
+        zoom: s.zoom || (s.vehicleMode === "ship" ? mapZoom.default : mapZoom.truckDefault),
         // 地图缩放级别（打开页面时默认级别）
         minZoom: mapZoom.min,
         // 地图缩放最小级别
@@ -1259,45 +1578,45 @@ const trackId = ref(""), cursor = ref(0), renderTrack = (e, t, o, n, a = "ship")
         // 对应页面里 id 为 map 的元素
         layers: [
           // 图层
-          i.tiandituTile,
-          i.tiandituTileMark,
-          i.tiandituImgTile,
-          i.tiandituImgTileMark,
-          i.greenMark
+          c.tiandituTile,
+          c.tiandituTileMark,
+          c.tiandituImgTile,
+          c.tiandituImgTileMark,
+          c.greenMark
         ],
-        view: new View(p)
-      }), a.value.setScaleLine(), console.log(mapInstance.value.getLayers().getArray()), (v = mapInstance.value) == null || v.on("moveend", I);
+        view: new View(m)
+      }), (v = a.value) == null || v.setScaleLine(), (h = mapInstance.value) == null || h.on("moveend", k), g(s.vehicleMode === "ship"), y(s.vehicleMode === "ship" ? BaseMapType.satellite : BaseMapType.vector);
     };
     onMounted(() => {
-      h();
+      f();
     });
-    const w = (p) => {
+    const g = (m) => {
       var v;
-      (v = mapInstance.value) == null || v.getLayers().forEach((f) => {
-        f.ol_uid === i.greenMark.ol_uid && (f.setVisible(p), u.value = p);
+      (v = mapInstance.value) == null || v.getLayers().forEach((h) => {
+        h.ol_uid === c.greenMark.ol_uid && (h.setVisible(m), u.value = m);
       });
-    }, L = (p) => {
+    }, y = (m) => {
       var v;
-      console.log("mode", p), (v = mapInstance.value) == null || v.getLayers().forEach((f) => {
-        (f.ol_uid === i.tiandituTile.ol_uid || f.ol_uid === i.tiandituTileMark.ol_uid || f.ol_uid === i.tiandituImgTile.ol_uid || f.ol_uid === i.tiandituImgTileMark.ol_uid) && f.setVisible(!1), (p === BaseMapType.vector && f.ol_uid === i.tiandituTile.ol_uid || f.ol_uid === i.tiandituTileMark.ol_uid || p === BaseMapType.satellite && f.ol_uid === i.tiandituImgTile.ol_uid || f.ol_uid === i.tiandituImgTileMark.ol_uid) && (console.log(p, f.ol_uid), f.setVisible(!0));
+      console.log("mode", m), (v = mapInstance.value) == null || v.getLayers().forEach((h) => {
+        (h.ol_uid === c.tiandituTile.ol_uid || h.ol_uid === c.tiandituTileMark.ol_uid || h.ol_uid === c.tiandituImgTile.ol_uid || h.ol_uid === c.tiandituImgTileMark.ol_uid) && h.setVisible(!1), (m === BaseMapType.vector && h.ol_uid === c.tiandituTile.ol_uid || h.ol_uid === c.tiandituTileMark.ol_uid || m === BaseMapType.satellite && h.ol_uid === c.tiandituImgTile.ol_uid || h.ol_uid === c.tiandituImgTileMark.ol_uid) && (console.log(m, h.ol_uid), h.setVisible(!0));
       });
-    }, I = () => {
-      const p = mapInstance.value.getView(), v = p.getZoom();
-      v && T(v);
-      const f = p.calculateExtent(mapInstance.value.getSize());
-      f && v && b(f, v);
-    }, T = (p) => {
-      var M, E, C, g;
-      c.value = p;
-      const v = (M = mapInstance.value) == null ? void 0 : M.getLayers(), f = s.vehicleMode === "ship" ? v == null ? void 0 : v.getArray().find((S) => S.ol_uid === i.greenMark.ol_uid) : void 0;
-      !d.value && u.value && p < mapZoom.shipGreenDotMax ? (m.value = !0, f == null || f.setVisible(!0), (E = shipsLayer.value) == null || E.setVisible(!1), (C = largeAmountShipsLayer.value) == null || C.setVisible(!1)) : (m.value = !1, f == null || f.setVisible(!1), (g = largeAmountShipsLayer.value) == null || g.setVisible(!0)), l("zoomChanged", p);
-    }, b = (p, v) => {
-      const f = transform([p[0], p[1]], projection.mercator, projection.data), M = transform([p[2], p[3]], projection.mercator, projection.data);
-      l("extentChanged", { extent: [f, M], zoom: v });
+    }, k = () => {
+      const m = mapInstance.value.getView(), v = m.getZoom();
+      v && L(v);
+      const h = m.calculateExtent(mapInstance.value.getSize());
+      h && v && E(h, v);
+    }, L = (m) => {
+      var I, C, V, S;
+      i.value = m;
+      const v = (I = mapInstance.value) == null ? void 0 : I.getLayers(), h = s.vehicleMode === "ship" ? v == null ? void 0 : v.getArray().find((w) => w.ol_uid === c.greenMark.ol_uid) : void 0;
+      !d.value && u.value && m < mapZoom.shipGreenDotMax ? (p.value = !0, h == null || h.setVisible(!0), (C = shipsLayer.value) == null || C.setVisible(!1), (V = largeAmountShipsLayer.value) == null || V.setVisible(!1)) : (p.value = !1, h == null || h.setVisible(!1), (S = largeAmountShipsLayer.value) == null || S.setVisible(!0)), l("zoomChanged", m);
+    }, E = (m, v) => {
+      const h = transform([m[0], m[1]], projection.mercator, projection.data), I = transform([m[2], m[3]], projection.mercator, projection.data);
+      l("extentChanged", { extent: [h, I], zoom: v });
     };
     return t({
       mapInstance,
-      initMap: h,
+      initMap: f,
       renderTrucksMarker,
       renderShip: renderShips,
       renderTrack,
@@ -1305,25 +1624,32 @@ const trackId = ref(""), cursor = ref(0), renderTrack = (e, t, o, n, a = "ship")
       removeTruckIcon,
       clearAllTruck,
       closeTrack: () => {
-        var p;
-        (p = shipTrackVectorLayer.value) == null || p.setVisible(!1);
+        var m;
+        (m = shipTrackVectorLayer.value) == null || m.setVisible(!1);
       },
       closeTruckTrack: () => {
-        var p;
-        (p = shipTrackVectorLayer.value) == null || p.setVisible(!1);
+        var m;
+        (m = shipTrackVectorLayer.value) == null || m.setVisible(!1);
       },
       clearSelectFeature,
       findShip,
+      focusShip: (m, v) => {
+        var h, I;
+        (h = shipsLayer.value) == null || h.setVisible(!1), (I = largeAmountShipsLayer.value) == null || I.setVisible(!1), findShip(m, v);
+      },
       showTracks,
       removeAllTrackLayer,
       switchFilterItem,
       rerenderShip,
-      switchGreenDot: () => w(!1),
+      switchGreenDot: () => g(!1),
       zoomTruckIcon,
-      renderTruckTrack: (p, v, f) => {
-        renderTrack(p, v, f, LENGTH_UNIT.KM, "truck");
-      }
-    }), (p, v) => (openBlock(), createElementBlock("div", {
+      renderTruckTrack: (m, v, h) => {
+        renderTrack(m, v, h, LENGTH_UNIT.KM, "truck");
+      },
+      renderMarker,
+      setMarkerPosition,
+      drawPolygonTool
+    }), (m, v) => (openBlock(), createElementBlock("div", {
       class: "map-page map-container",
       ref_key: "pageRef",
       ref: n
@@ -1333,9 +1659,9 @@ const trackId = ref(""), cursor = ref(0), renderTrack = (e, t, o, n, a = "ship")
         class: "map"
       }, null, -1)),
       createVNode(ToolPanel, {
-        "vehicle-mode": p.vehicleMode,
-        onSwitchGreenDot: w,
-        onSwitchMapTile: L
+        "vehicle-mode": m.vehicleMode,
+        onSwitchGreenDot: g,
+        onSwitchMapTile: y
       }, null, 8, ["vehicle-mode"]),
       createVNode(ScaleLine, {
         ref_key: "scaleLineControl",
@@ -1349,7 +1675,7 @@ const trackId = ref(""), cursor = ref(0), renderTrack = (e, t, o, n, a = "ship")
       createVNode(Fullscreen, { page: n.value }, null, 8, ["page"])
     ], 512));
   }
-}), Map = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-1bfdec9b"]]), ZhMap = withInstall(Map);
+}), Map = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-08679314"]]), ZhMap = withInstall(Map);
 export {
   ZhMap as Z
 };