zhihao-ui 1.2.4 → 1.2.7

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

@@ -1,10 +1,10 @@
-var A = Object.defineProperty;
-var x = (e, t, o) => t in e ? A(e, t, { enumerable: !0, configurable: !0, writable: !0, value: o }) : e[t] = o;
-var L = (e, t, o) => x(e, typeof t != "symbol" ? t + "" : t, o);
+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);
 import { ref, defineComponent, useModel, watch, resolveComponent, openBlock, createElementBlock, createElementVNode, createVNode, withCtx, Fragment, renderList, unref, createBlock, toDisplayString, createCommentVNode, mergeModels, normalizeClass, nextTick, onMounted } from "vue";
-import { g as getLength, V as VectorSource, e as VectorLayer, S as Style, C as CircleStyle, F as Fill, f as Stroke, D as Draw, O as Overlay, u as unByKey, i as ElOption, j as ScaleLine$1, T as Text, k as Feature, P as Point, l as fromLonLat, m as cloneDeep, G as GeoJSON, W as WebGLPointsLayer, h as hooks, L as LineString, t as transform, n as TileLayer, X as XYZ, M as Map$1, o as View } from "./vendor-BXx3MaXc.js";
-import { _ as _export_sfc } from "./Button-CSkwolvy.js";
-import { w as withInstall } from "./utils-BMWHW3o7.js";
+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";
 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",
@@ -13,7 +13,53 @@ const LENGTH_UNIT_LABEL = {
   // km
   3: "NM"
   // nm
-}, formatLength = function(e, t) {
+};
+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");
+    // mmsi
+    y(this, "mmsi");
+    // 船舶三角形填充色
+    y(this, "fill");
+    // 船类型 "7": "货船",
+    y(this, "shipType");
+    // 船名
+    y(this, "name");
+    // 长度
+    y(this, "length");
+    // 宽度
+    y(this, "breadth");
+    // 经度
+    y(this, "lon");
+    // 纬度
+    y(this, "lat");
+    // 时间
+    y(this, "createdAt");
+    // 速度
+    y(this, "speed");
+    // 来源
+    y(this, "from");
+    // 船状态 "stop":"静止","sail":"航行","work":"作业","danger":"危险","other":"其他"
+    y(this, "sailStatus");
+    // 船艏向
+    y(this, "hdg");
+    // 航迹向
+    y(this, "cog");
+    // 设备定位类型
+    y(this, "posType");
+    y(this, "type");
+    // 航向角度
+    y(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;
+  }
+}
+const formatLength = function(e, t) {
   const n = getLength(e);
   let a = "";
   switch (t) {
@@ -31,7 +77,30 @@ const LENGTH_UNIT_LABEL = {
 }, convertSixHundredThousandToLatLng = function(e, t) {
   const o = Number(t) / 6e5;
   return [Number(e) / 6e5, o];
-}, mapInstance = ref(), shipsLayer = ref(), largeAmountShipsLayer = ref();
+}, convertShipMapData = (e) => {
+  const t = (o) => new ShipMapData(
+    o.id,
+    o.id,
+    // 船舶三角形填充色
+    o.fill || "#04C900",
+    "70",
+    o.cnname || o.name,
+    o.len,
+    o.wid,
+    o.lon,
+    o.lat,
+    (/* @__PURE__ */ new Date()).getTime(),
+    o.spd,
+    o.from,
+    o.status,
+    Number(o.hdg),
+    o.cog,
+    Number(o.postype),
+    "other",
+    o.cog
+  );
+  return Array.isArray(e) ? e.map((o) => t(o)) : t(e);
+}, mapInstance = ref(), shipsLayer = ref(), selectShipsLayer = ref(), allShips = ref([]), largeAmountShipsLayer = ref();
 ref();
 const trucksLayer = ref(), shipTrackLineFeatures = ref([]), trackLineVectorSource = ref(), shipTrackVectorLayer = ref();
 ref();
@@ -48,8 +117,8 @@ 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, v;
-    const k = new VectorLayer({
+    let d, u, m, i, h;
+    const w = new VectorLayer({
       source: c,
       style: {
         "fill-color": "rgba(255, 255, 255, 0.2)",
@@ -58,19 +127,19 @@ const labels = ref([]), _hoisted_1$4 = {
         "circle-radius": 7,
         "circle-fill-color": "#ffcc33"
       }
-    }), I = function(h) {
-      if (h.dragging)
+    }), L = function(g) {
+      if (g.dragging)
         return;
-      let y = "点击选择起点";
-      d && (y = "单击继续，双击结束"), u && (u.innerHTML = y, m.setPosition(h.coordinate), u.classList.remove("hidden"));
-    }, E = () => {
-      mapInstance.value && (mapInstance.value.on("pointermove", I), mapInstance.value.getViewport().addEventListener("mouseout", function() {
-        var h;
-        (h = u == null ? void 0 : u.classList) == null || h.add("hidden");
+      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");
       }), s.value = !0);
     };
-    let w;
-    const _ = new Style({
+    let T;
+    const b = new Style({
       fill: new Fill({
         color: "rgba(255, 255, 255, 0.2)"
       }),
@@ -90,117 +159,117 @@ const labels = ref([]), _hoisted_1$4 = {
       })
     });
     function p() {
-      var h, y;
-      l.value = [], document.querySelectorAll(".ol-tooltip.ol-tooltip-static").forEach((M) => {
-        var T;
-        (T = M == null ? void 0 : M.parentNode) == null || T.removeChild(M);
-      }), c.clear(), (h = mapInstance.value) == null || h.removeInteraction(w), (y = mapInstance.value) == null || y.removeLayer(k), u != null && u.parentNode && u.parentNode.removeChild(u);
+      var g, S;
+      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);
     }
-    function g() {
-      var y, M;
-      p(), (y = mapInstance.value) == null || y.addLayer(k), w = new Draw({
+    function v() {
+      var S, _;
+      p(), (S = mapInstance.value) == null || S.addLayer(w), T = new Draw({
         source: c,
         type: "LineString",
         style: function() {
-          return _;
+          return b;
         }
-      }), (M = mapInstance.value) == null || M.addInteraction(w), S(), f();
-      let h;
-      w.on("drawstart", function(T) {
-        var N;
-        d = T.feature;
-        let b;
-        h = (N = d.getGeometry()) == null ? void 0 : N.on("change", function(R) {
-          const F = R.target;
-          let C = formatLength(F, r.value);
-          b = F.getLastCoordinate(), i && C && (i.innerHTML = C), v.setPosition(b);
+      }), (_ = mapInstance.value) == null || _.addInteraction(T), M(), f();
+      let g;
+      T.on("drawstart", function(k) {
+        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);
         });
-      }), w.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), v.setOffset([0, -7]), d = null, i = null, S(), h && unByKey(h);
+      }), 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);
       });
     }
     function f() {
-      var h;
+      var g;
       u != null && u.parentNode && u.parentNode.removeChild(u), u = document.createElement("div"), u.className = "ol-tooltip hidden", m = new Overlay({
         element: u,
         offset: [15, 0],
         positioning: "center-left"
-      }), (h = mapInstance.value) == null || h.addOverlay(m);
+      }), (g = mapInstance.value) == null || g.addOverlay(m);
     }
-    function S() {
-      var h;
-      i != null && i.parentNode && i.parentNode.removeChild(i), i = document.createElement("div"), i.className = "ol-tooltip ol-tooltip-measure", v = new Overlay({
+    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,
         offset: [0, -15],
         positioning: "bottom-center",
         stopEvent: !1,
         insertFirst: !1
-      }), (h = mapInstance.value) == null || h.addOverlay(v);
+      }), (g = mapInstance.value) == null || g.addOverlay(h);
     }
-    const V = (h) => {
-      var T, b;
-      l.value[h] && l.value.splice(h, 1);
-      const y = document.querySelectorAll(".ol-tooltip.ol-tooltip-static.ol-tooltip-measure");
-      y[h] && ((b = (T = y[h]) == null ? void 0 : T.parentNode) == null || b.removeChild(y[h]));
-      const M = c.getFeatures();
-      M[h] && c.removeFeature(M[h]);
-    }, P = () => {
+    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 = () => {
       n("close");
     };
     return watch(() => a, () => {
-      a && !s.value && (E(), g());
+      a && !s.value && (I(), v());
     }, { deep: !0, immediate: !0 }), t({
-      addInteraction: g,
+      addInteraction: v,
       removeInteraction: p
-    }), (h, y) => {
-      const M = resolveComponent("el-select");
+    }), (g, S) => {
+      const _ = resolveComponent("el-select");
       return a.value ? (openBlock(), createElementBlock("div", _hoisted_1$4, [
         createElementVNode("div", { class: "header" }, [
-          y[1] || (y[1] = createElementVNode("div", { class: "title" }, "测量", -1)),
+          S[1] || (S[1] = createElementVNode("div", { class: "title" }, "测量", -1)),
           createElementVNode("i", {
-            onClick: P,
+            onClick: C,
             class: "map-iconfont icon-close"
           })
         ]),
         createElementVNode("div", _hoisted_2$2, [
-          y[2] || (y[2] = createElementVNode("div", { class: "tips" }, "在地图上点击多个点测量距离，距离单位", -1)),
-          createVNode(M, {
+          S[2] || (S[2] = createElementVNode("div", { class: "tips" }, "在地图上点击多个点测量距离，距离单位", -1)),
+          createVNode(_, {
             class: "select-length-unit",
             modelValue: r.value,
-            "onUpdate:modelValue": y[0] || (y[0] = (T) => r.value = T)
+            "onUpdate:modelValue": S[0] || (S[0] = (k) => r.value = k)
           }, {
             default: withCtx(() => [
-              (openBlock(!0), createElementBlock(Fragment, null, renderList(unref(LENGTH_UNIT_LABEL), (T) => (openBlock(), createBlock(unref(ElOption), {
-                key: unref(LENGTH_UNIT)[T],
-                label: T,
-                value: unref(LENGTH_UNIT)[T]
+              (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]
               }, null, 8, ["label", "value"]))), 128))
             ]),
             _: 1
           }, 8, ["modelValue"])
         ]),
         createElementVNode("div", _hoisted_3$1, [
-          (openBlock(!0), createElementBlock(Fragment, null, renderList(l.value, (T, b) => (openBlock(), createElementBlock("div", {
+          (openBlock(!0), createElementBlock(Fragment, null, renderList(l.value, (k, V) => (openBlock(), createElementBlock("div", {
             class: "measure-history-item",
-            key: b
+            key: V
           }, [
             createElementVNode("div", _hoisted_4, [
-              y[3] || (y[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(T), 1)
+              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)
             ]),
             createElementVNode("div", {
               class: "delete-button",
-              onClick: (N) => V(b)
-            }, y[4] || (y[4] = [
-              createElementVNode("i", { class: "map-iconfont icon-delete" }, null, -1)
+              onClick: (F) => E(V)
+            }, S[4] || (S[4] = [
+              createElementVNode("i", { class: "map-iconfont icon-a-delete1" }, null, -1)
             ]), 8, _hoisted_7)
           ]))), 128))
         ])
       ])) : createCommentVNode("", !0);
     };
   }
-}), Measure = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["__scopeId", "data-v-6318713d"]]), _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-8e976a28"]]), _hoisted_1$3 = { class: "tool-panel" }, _hoisted_2$1 = { class: "tool-components" }, _sfc_main$5 = /* @__PURE__ */ defineComponent({
   __name: "toolPanel",
   props: {
     vehicleMode: {}
@@ -225,20 +294,16 @@ const labels = ref([]), _hoisted_1$4 = {
           class: normalizeClass(["switch-btn", `${n.value && "active"}`]),
           onClick: d
         }, i[1] || (i[1] = [
-          createElementVNode("i", { class: "map-iconfont icon-a-Frame1" }, null, -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-a-Frame19" }, null, -1),
+          createElementVNode("i", { class: "map-iconfont icon-ship" }, null, -1),
           createElementVNode("div", { class: "button-text" }, "绿点", -1)
         ]), 2),
-        i[4] || (i[4] = createElementVNode("div", { class: "switch-btn" }, [
-          createElementVNode("i", { class: "map-iconfont icon-Frame-13" }),
-          createElementVNode("div", { class: "button-text" }, "图层")
-        ], -1)),
         createElementVNode("div", {
           class: normalizeClass(["switch-btn", { active: s.value === unref(BaseMapType).satellite }]),
           onClick: c
@@ -253,13 +318,13 @@ const labels = ref([]), _hoisted_1$4 = {
           ref_key: "measureRef",
           ref: a,
           visible: n.value,
-          "onUpdate:visible": i[0] || (i[0] = (v) => n.value = v),
+          "onUpdate:visible": i[0] || (i[0] = (h) => n.value = h),
           onClose: u
         }, null, 8, ["visible"])) : createCommentVNode("", !0)
       ])
     ], 64));
   }
-}), ToolPanel = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["__scopeId", "data-v-d5e1b71d"]]), _hoisted_1$2 = { id: "scale-line-container" }, _sfc_main$4 = /* @__PURE__ */ defineComponent({
+}), ToolPanel = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["__scopeId", "data-v-6072039b"]]), _hoisted_1$2 = { id: "scale-line-container" }, _sfc_main$4 = /* @__PURE__ */ defineComponent({
   __name: "scaleLine",
   setup(e, { expose: t }) {
     const o = new ScaleLine$1({
@@ -279,25 +344,27 @@ const labels = ref([]), _hoisted_1$4 = {
     }
   },
   setup(e) {
-    const t = e, o = () => {
-      const a = t.map.getView(), r = a.getZoom();
-      a.setZoom(r + 1);
-    }, n = () => {
-      const a = t.map.getView(), r = a.getZoom();
-      a.setZoom(r - 1);
+    const t = () => {
+      if (!mapInstance.value) return;
+      const n = mapInstance.value.getView(), a = n.getZoom();
+      a && n.setZoom(a + 1);
+    }, o = () => {
+      if (!mapInstance.value) return;
+      const n = mapInstance.value.getView(), a = n.getZoom();
+      a && n.setZoom(a - 1);
     };
-    return (a, r) => (openBlock(), createElementBlock("div", _hoisted_1$1, [
+    return (n, a) => (openBlock(), createElementBlock("div", _hoisted_1$1, [
       createElementVNode("div", {
-        onClick: o,
+        onClick: t,
         class: "button big-button"
       }, "+"),
       createElementVNode("div", {
-        onClick: n,
+        onClick: o,
         class: "button small-button"
       }, "-")
     ]));
   }
-}), ZoomControl = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["__scopeId", "data-v-fc659cee"]]), CDN_URL = "https://static.zhihaoscm.cn/", tiandituKey = "a6e8f78974f2581f2ca00485b40c948f", baseMap = {
+}), ZoomControl = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["__scopeId", "data-v-f2b62b21"]]), CDN_URL = "https://static.zhihaoscm.cn/", tiandituKey = "a6e8f78974f2581f2ca00485b40c948f", baseMap = {
   // 矢量底图
   tiandituTile: `http://t0.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&TILEMATRIXSET=w&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=${tiandituKey}`,
   // 矢量注记
@@ -315,6 +382,8 @@ const labels = ref([]), _hoisted_1$4 = {
   min: 3,
   // 地图缩放最大层级
   max: 18,
+  // 查看船舶详情时地图缩放层级
+  findShip: 13,
   // 船舶绿点图最大显示层级
   shipGreenDotMax: 11,
   // 船形图标最小渲染层级
@@ -346,7 +415,7 @@ const labels = ref([]), _hoisted_1$4 = {
       }, "数据来源：自然资源部 & NavInfo", -1))
     ]));
   }
-}), Copyright = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-0b80cd67"]]), _sfc_main$1 = /* @__PURE__ */ defineComponent({
+}), Copyright = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-9c5c2f7b"]]), _sfc_main$1 = /* @__PURE__ */ defineComponent({
   __name: "fullscreen",
   props: {
     pageRef: {
@@ -364,11 +433,11 @@ const labels = ref([]), _hoisted_1$4 = {
       onClick: n
     }, [
       createElementVNode("i", {
-        class: normalizeClass(`map-iconfont ${o.value ? "icon-quxiaoquanping" : "icon-quanping1"} `)
+        class: normalizeClass(`map-iconfont ${o.value ? "icon-quxiaoquanping" : "icon-quanping"} `)
       }, null, 2)
     ]));
   }
-}), Fullscreen = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-adf8fd0c"]]), equatorialCircumference = 2003750834e-2;
+}), Fullscreen = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-ed59d7cb"]]), equatorialCircumference = 2003750834e-2;
 function lonLatToMercator(e) {
   const t = e[0] * equatorialCircumference / 180;
   let o = Math.log(Math.tan((90 + e[1]) * Math.PI / 360)) / (Math.PI / 180);
@@ -430,8 +499,21 @@ const getAngle = (e, t) => {
   for (const [r, l] of e)
     r < t && (t = r), l < o && (o = l), r > n && (n = r), l > a && (a = l);
   return [t, o, n, a];
+}, calculatePolygonCentroid = (e) => {
+  if (!Array.isArray(e) || e.length < 3)
+    throw new Error("A polygon must have at least 3 coordinates.");
+  let t = 0, o = 0, n = 0;
+  const 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;
+  }
+  if (n *= 0.5, n === 0)
+    throw new Error("多边形面积为零");
+  const r = t / (6 * n), l = o / (6 * n);
+  return [r, l];
 }, rotateShapeModel = (e, t) => {
-  const [o, n] = e[0], a = t * Math.PI / 180, r = Math.cos(a), l = Math.sin(a);
+  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];
@@ -511,12 +593,12 @@ function drawLabelBody(e, t, o) {
   e.restore();
   let u, m = -1, i = r + 3 * a;
   if (m = 0, u = calculateBounds(l, m, d, i, c), u && m > -1) {
-    let v = getBottomLeftPoint(u), k = getTopRighttPoint(u);
+    let h = getBottomLeftPoint(u), w = getTopRighttPoint(u);
     return {
       center: l,
       x: calculateAnchorPoint(l, m, d, i, c),
-      l: k,
-      r: v,
+      l: w,
+      r: h,
       bounds: u,
       position: m
     };
@@ -539,10 +621,10 @@ const drawText = (e, t, o, n, a, r, l) => {
   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, v = [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, v, n, r, !0);
-      const [k, I] = i;
-      drawText(e, [k, I + labelOutSize + labelHeight + 1], o, a);
+      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);
     }
   }
   return null;
@@ -568,21 +650,21 @@ const setTruckStyle = (e, t, o, n) => new Style({
     c = c / s - 20, d = d / s;
     const u = c - 70, m = d - 68;
     let i = 180;
-    const v = 56, k = "#FFFFFF";
-    let I = 176;
-    const E = 52;
-    let w = "#164AFF", _ = "#FFFFFF";
-    o === CAR_COLOR.YELLOW ? (I = 176, w = "#FFC81E", _ = "rgba(0,0,0,0.88)") : o === CAR_COLOR.Y_GREEN && (i = 200, I = 196, w = "#8FED7C", _ = "rgba(0,0,0,0.88)"), n != null && n.length && (i += n.length * 56), fillRectRadius(l, u, m, i, v, k), fillRectRadius(l, u + 2, m + 2, I, E, w), o === CAR_COLOR.Y_GREEN && fillRectRadius(l, u + 2, m + 2, 68, E, "#FFC81E"), l.save(), l.restore(), l.fillStyle = _, l.font = "bold 28px Arial", l.textAlign = "left", l.textBaseline = "middle";
+    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 S = 0;
-      n.forEach((V) => {
-        V === DEVICE_TYPE.CAMERA && (l.drawImage(cameraImage, c - 54 + f + S * 56, d - 64, 50, 50), ++S), V === DEVICE_TYPE.LOAD && (l.drawImage(loadImage, c - 54 + f + S * 56, d - 64, 50, 50), ++S);
+      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);
       });
     }
-    const g = dotImage;
-    l.drawImage(g, c + i / 2 - 90, d, 50 / s, 50 / s), l.restore();
+    const v = dotImage;
+    l.drawImage(v, c + i / 2 - 90, d, 50 / s, 50 / s), l.restore();
   }
 });
 ref([]);
@@ -609,48 +691,7 @@ const renderTrucksMarker = (e) => {
   truckMarkerList.forEach((e) => {
     e.feature && (trucksVectorSource == null || trucksVectorSource.removeFeature(e.feature));
   }), truckMarkerList = [];
-};
-class ShipMapData {
-  constructor(t, o, n, a, r, l, s, c, d, u, m, i, v, k, I, E, w, _, p = 1) {
-    L(this, "id");
-    // mmsi
-    L(this, "mmsi");
-    // 船舶三角形填充色
-    L(this, "fill");
-    // 船类型 "7": "货船",
-    L(this, "shipType");
-    // 船名
-    L(this, "name");
-    // 长度
-    L(this, "length");
-    // 宽度
-    L(this, "breadth");
-    // 经度
-    L(this, "lon");
-    // 纬度
-    L(this, "lat");
-    // 时间
-    L(this, "createdAt");
-    // 速度
-    L(this, "speed");
-    // 来源
-    L(this, "from");
-    // 船状态 "stop":"静止","sail":"航行","work":"作业","danger":"危险","other":"其他"
-    L(this, "sailStatus");
-    // 船艏向
-    L(this, "hdg");
-    // 航迹向
-    L(this, "cog");
-    // 设备定位类型
-    L(this, "posType");
-    L(this, "type");
-    // 航向角度
-    L(this, "angle");
-    L(this, "isShow");
-    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 = v, this.hdg = k, this.cog = I, this.posType = E, this.type = w, this.angle = _, this.isShow = p;
-  }
-}
-const triangleModel = multiplyPixelRatio([
+}, triangleModel = multiplyPixelRatio([
   [0, -8],
   [5, 8],
   [-5, 8]
@@ -714,12 +755,12 @@ const triangleModel = multiplyPixelRatio([
       [0, -24]
     ]
   }
-}, speedCondition = [[1, 10], [10, 20], [20, 1 / 0]], drawShipModelByZoom = { 16: [200, 30], 17: [50, 5], 18: [1, 1] }, setShipStyle = (e, t) => new Style({
-  renderer: (o, n) => {
-    const a = n.context, r = n.feature.get("data");
+}, speedCondition = [[1, 10], [10, 20], [20, 1 / 0]], drawShipModelByZoom = { 16: [200, 30], 17: [50, 5], 18: [1, 1] }, setShipStyle = (e) => new Style({
+  renderer: (t, o) => {
+    const n = o.context, a = o.feature.get("data");
     try {
-      const l = drawShipBody(a, r, o);
-      l && drawHeading(a, r, l), drawShipLabel(a, r, o);
+      const r = drawShipBody(n, a, t);
+      r && (drawHeading(n, a, r), e && drawSelectBounds(n, r)), drawShipLabel(n, a, t);
     } catch {
       return !1;
     }
@@ -730,17 +771,18 @@ const triangleModel = multiplyPixelRatio([
   if (!n) return;
   let a = [];
   const [r, l] = drawShipModelByZoom[n] || [0, 0], [s, c] = o;
-  if (n <= mapZoom.shipModelMax && n > mapZoom.shipModelMin && t.length >= r && t.breadth >= l) {
-    const d = drawCurrentShipShapeModel(t, n);
-    a = rotateShapeModel(d.map((u) => {
+  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];
+    });
+  else {
+    const d = rotateShapeModel(triangleModel, t.angle);
+    o.length === 2 && (a = d.map((u) => {
       const [m, i] = u;
       return [s + m, c + i];
-    }), t.angle);
-  } else
-    o.length === 2 && (a = rotateShapeModel(triangleModel.map((d) => {
-      const [u, m] = d;
-      return [s + u, c + m];
-    }), t.angle));
+    }));
+  }
   if (!(a.length > 2)) return !1;
   e.save(), e.beginPath(), e.moveTo(a[0][0], a[0][1]);
   for (let d = 1; d < a.length; d++)
@@ -793,11 +835,16 @@ const triangleModel = multiplyPixelRatio([
   return r;
 };
 let shipsMarkerList = [], shipsVectorSource, largeAmountShipsSource;
+const selectedShipData = ref(null);
+let selectShipsVectorSource;
 const renderShips = (e) => {
   if (!mapInstance.value) return;
   const t = mapInstance.value.getView().getZoom();
-  if (!(!t || t <= mapZoom.shipGreenDotMax))
-    return t > mapZoom.shipGreenDotMax && t < mapZoom.shipModelMin || e.length > 500 ? (deleteAllShipMarkers(), renderLargeAmountShips(e)) : (largeAmountShipsSource == null || largeAmountShipsSource.clear(), renderShipsMarker(e));
+  if (selectedShipData.value && nextTick(() => {
+    selectSingleShipMarker(selectedShipData.value);
+  }).then((o) => {
+  }), !(!t || t < mapZoom.shipGreenDotMax))
+    return allShips.value = e, t > mapZoom.shipGreenDotMax && t < mapZoom.shipModelMin || e.length > 500 ? (deleteAllShipMarkers(), renderLargeAmountShips(e)) : (largeAmountShipsSource == null || largeAmountShipsSource.clear(), renderShipsMarker(e));
 }, renderLargeAmountShips = (e) => {
   if (!mapInstance.value) return;
   const t = e.map((o) => ({
@@ -828,88 +875,127 @@ const renderShips = (e) => {
         // 获取 'cog' 属性值
         0
         // 如果 'cog' 属性不存在，使用默认值 0
-      ]
+      ],
+      "shape-scale": [0.8, 1.2]
     }
   }), mapInstance.value.addLayer(largeAmountShipsLayer.value), largeAmountShipsLayer.value;
 }, renderShipsMarker = (e) => {
-  if (mapInstance.value)
-    return deleteAllShipMarkers(), e.forEach((t) => {
-      const o = [t.lon, t.lat], n = new Feature({
-        geometry: new Point(fromLonLat(o))
-      }), a = new ShipMapData(
-        t.id,
-        t.id,
-        // 船舶三角形填充色
-        t.fill || "#04C900",
-        "70",
-        t.cnname || t.name,
-        t.len,
-        t.wid,
-        t.lon,
-        t.lat,
-        (/* @__PURE__ */ new Date()).getTime(),
-        t.spd,
-        t.from,
-        t.status,
-        Number(t.hdg),
-        t.cog,
-        Number(t.postype),
-        "other",
-        t.cog,
-        1
-      );
-      n.set("data", a), n.setStyle(
-        setShipStyle(!1, t.id)
+  if (!mapInstance.value) return;
+  deleteAllShipMarkers();
+  let t = convertShipMapData(e);
+  if (t = customFilterShips(t), !!(t != null && t.length))
+    return t.forEach((o) => {
+      const n = [o.lon, o.lat], a = new Feature({
+        geometry: new Point(fromLonLat(n))
+      });
+      a.set("data", o), a.setStyle(
+        setShipStyle(!1, o.id)
       ), shipsMarkerList.push({
-        ship: t,
-        lonlat: o,
-        feature: n
+        ship: o,
+        lonlat: n,
+        feature: a
       });
     }), shipsVectorSource = new VectorSource({
-      features: shipsMarkerList.map((t) => t.feature)
+      features: shipsMarkerList.map((o) => o.feature)
     }), shipsLayer.value = new VectorLayer({
       source: shipsVectorSource
     }), mapInstance.value.addLayer(shipsLayer.value), shipsLayer.value;
-}, deleteAllShipMarkers = () => {
+}, customFilterShips = (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);
+    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) => [
+  { btnShow: switchBtnShow.value.camera, value: e == null ? void 0 : e.existDevice },
+  { btnShow: switchBtnShow.value.mobile, value: e == null ? void 0 : e.existMobile },
+  { btnShow: switchBtnShow.value.waterGauge, value: e == null ? void 0 : e.existWaterGauge }
+], deleteAllShipMarkers = () => {
   shipsMarkerList.forEach((e) => {
     e.feature && (shipsVectorSource == null || shipsVectorSource.removeFeature(e.feature));
   }), shipsMarkerList = [];
-}, findShip = (e) => {
-  var t, o, n;
-  return (n = (o = (t = shipsLayer.value) == null ? void 0 : t.getSource()) == null ? void 0 : o.getFeatures()) == null ? void 0 : n.find((a) => {
-    var r;
-    return ((r = a.get("data")) == null ? void 0 : r.id) === e;
+}, selectSingleShipMarker = (e) => {
+  if (!mapInstance.value) return;
+  const t = convertShipMapData(e), o = [t.lon, t.lat], n = new Feature({
+    geometry: new Point(fromLonLat(o))
+  });
+  return n.set("data", t), n.setStyle(
+    setShipStyle(!0, t.id)
+  ), shipsMarkerList.push({
+    ship: t,
+    lonlat: o,
+    feature: n
+  }), 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;
+  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;
+    return ((u = d.get("data")) == null ? void 0 : u.id) === e;
   });
+  if (n)
+    selectedShipData.value = n;
+  else if (t)
+    selectedShipData.value = t, selectSingleShipMarker(t);
+  else {
+    console.error("找不到船舶");
+    return;
+  }
+  if (o && ((s = selectedShipData.value) != null && s.lon) && ((c = selectedShipData.value) != null && c.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);
+  }
+  return n;
+}, clearSelectFeature = () => {
+  selectedShipData.value = null, mapInstance.value && (selectShipsVectorSource == null || selectShipsVectorSource.clear(), selectShipsLayer.value = new VectorLayer({
+    source: selectShipsVectorSource
+  }), mapInstance.value.addLayer(selectShipsLayer.value), selectShipsLayer.value.setVisible(!1));
+}, hiddenAllShips = () => {
+  var e, t;
+  (e = shipsLayer.value) == null || e.setVisible(!1), (t = largeAmountShipsLayer.value) == null || t.setVisible(!1);
+}, switchBtnShow = ref({
+  // 船舶摄像头过滤开关
+  [SWITCH_BTN.Camera]: !1,
+  // 船舶联系方式过滤开关
+  [SWITCH_BTN.Mobile]: !1,
+  // 船舶水尺过滤开关
+  [SWITCH_BTN.WaterGauge]: !1
+}), switchFilterItem = (e, t) => {
+  switchBtnShow.value[e] = t, renderShips(allShips.value);
+}, rerenderShip = () => {
+  renderShips(allShips.value);
 }, stopIcon = "&#xe6e2;", stopColor = "#E31818", slowIcon = "&#xe703;", slowColor = "#1890FF", dropletsIcon = "&#xe6d2", trackList$1 = ref([]), renderTrackLine = (e, t, o) => {
-  var r;
+  var r, l;
   const n = e[t];
   if (!n) return;
-  trackList$1.value = n.reverse().map((l, s) => (l.center = [l.lon, l.lat], l.centerPoint = lonLatToMercator(l.center), l.id = t, l.index = s, l.time = hooks(l.createdAt).format("YYYY-MM-DD HH:mm:ss"), l));
-  let a = trackList$1.value.map((l) => l.centerPoint);
+  (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));
+  let a = trackList$1.value.map((s) => s.centerPoint);
   if (a.length >= 2) {
-    let l = new LineString(a);
-    const s = new Feature({ geometry: l });
-    s.setStyle(
+    let s = new LineString(a);
+    const c = new Feature({ geometry: s });
+    c.setStyle(
       new Style({
         stroke: new Stroke({
           color: o,
           width: 2
         })
       })
-    ), s.setId(t), s.set("type", "line");
-    const c = shipTrackLineFeatures.value.findIndex((d) => d.getId() === t);
-    c >= 0 ? shipTrackLineFeatures.value[c] = s : shipTrackLineFeatures.value.push(s), trackLineVectorSource.value = new VectorSource({
+    ), c.setId(t), c.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({
       features: shipTrackLineFeatures.value
     }), shipTrackVectorLayer.value = new VectorLayer({
-      source: trackLineVectorSource.value,
-      style: {
-        "fill-color": "rgba(255, 255, 255, 0.2)",
-        "stroke-color": "#ffcc33",
-        "stroke-width": 2,
-        "circle-radius": 7,
-        "circle-fill-color": "#ffcc33"
-      }
-    }), renderPoint(o), (r = mapInstance.value) == null || r.addLayer(shipTrackVectorLayer.value);
+      source: trackLineVectorSource.value
+    }), setTimeout(() => {
+      renderPoint(o);
+    }, 500), (l = mapInstance.value) == null || l.addLayer(shipTrackVectorLayer.value);
   }
 }, renderPoint = (e) => {
   if (!mapInstance.value) return;
@@ -964,15 +1050,15 @@ const renderShips = (e) => {
         geometry: new Point(s.centerPoint)
       });
       i.set("type", "track_icon");
-      let v = new Style({
+      let h = new Style({
         text: new Text({
           font: "Normal 22px iconfont",
           text: getIconFont(dropletsIcon),
           offsetY: -10
         }),
         zIndex: 99
-      }), k = [];
-      s.state === "0" ? ((u = v.getText()) == null || u.setFill(new Fill({ color: stopColor })), k.push(r)) : ((m = v.getText()) == null || m.setFill(new Fill({ color: slowColor })), k.push(l)), k.push(v), i.setStyle(k), trackLineVectorSource.value.addFeature(i);
+      }), 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);
     }
   }), renderArrow(n, e), renderIconPoint();
 }, renderArrow = (e, t) => {
@@ -1032,9 +1118,14 @@ const renderShips = (e) => {
     const a = n.context;
     drawLabel(a, o, e.time, t, "#000", "rgba(255,255,255,.8)");
   }
-}), showTracks = ref([]), trackList = ref([]), trackLayer = ref(null), trackId = ref(""), cursor = ref(0), renderTrack = (e, t, o, n, a = "ship") => {
+}), showTracks = ref([]), trackList = ref([]);
+ref(null);
+const trackId = ref(""), cursor = ref(0), renderTrack = (e, t, o, n, a = "ship") => {
   var u;
-  if (removeAllTrackLayer(), (t == null ? void 0 : t.length) < 2) {
+  if (nextTick(() => {
+    hiddenAllShips();
+  }).then((m) => {
+  }), (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: "" });
     return;
   }
@@ -1047,13 +1138,13 @@ const renderShips = (e) => {
   ), c = new LineString(s), d = formatLength(c, n) || "--";
   nextTick(() => {
     var i;
-    const m = (i = showTracks.value) == null ? void 0 : i.findIndex((v) => v.id === e);
+    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);
   }).then(() => {
   });
 }, removeAllTrackLayer = () => {
   var e;
-  (e = trackLayer.value) == null || e.removeAllLayer();
+  showTracks.value = [], (e = trackLineVectorSource.value) == null || e.clear();
 }, resetTrackView = (e) => {
   var n, a;
   const t = mapInstance.value.getView(), o = (a = (n = shipTrackLineFeatures.value.find((r) => r.getId() === e)) == null ? void 0 : n.getGeometry()) == null ? void 0 : a.getExtent();
@@ -1063,6 +1154,76 @@ const renderShips = (e) => {
     } catch (r) {
       console.log(r);
     }
+}, drawCustomContent = (e, t, o, n = "top-left", a = !1) => {
+  var u, m;
+  if (!t || !mapInstance.value) return;
+  document.querySelectorAll(".truck-custom-content").forEach((i) => i.parentNode.removeChild(i));
+  const r = document.createElement("div");
+  r.innerHTML = o;
+  const l = new Overlay({
+    element: r,
+    position: t,
+    // 初始位置
+    positioning: n,
+    stopEvent: a
+    // 设置不阻拦事件
+  });
+  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]);
+      }
+    }), document.addEventListener("mouseup", function() {
+      i = !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);
+  });
+  let c = JSON.parse(JSON.stringify(t));
+  const d = (m = mapInstance.value) == null ? void 0 : m.getCoordinateFromPixel(c);
+  return l.setPosition(d), l;
+}, vehicle = ref(null), focusShipData = ref(), currentTruckOverlay = ref(null), findTruck = async (e) => {
+  if (!mapInstance.value) return;
+  focusShipData.value = e;
+  const t = convertSixHundredThousandToLatLng(e.lon, e.lat), o = mapInstance.value.getPixelFromCoordinate(transform(t, projection.data, projection.mercator));
+  currentTruckOverlay.value = drawTruckIcon(e.vno, o, e == null ? void 0 : e.drc);
+  const n = mapInstance.value.getView(), a = new Point(t);
+  n.setCenter(transform(a.getCoordinates(), projection.data, projection.mercator));
+}, clearAllTruck = () => {
+  vehicle.value.clearAllShip();
+}, drawTruckIcon = (e, t, o) => {
+  const n = `<div id="${e}" class="ol-custom-content truck-custom-content" style="width: 80px; height: 80px; transform: rotate(${o}deg);">
+          <img src="${CDN_URL}map/car-icon.gif" width="100%" height="100%" />
+        </div>`;
+  return drawCustomContent(e, t, n, "center-center");
+}, removeTruckIcon = () => {
+  var t;
+  const e = (t = currentTruckOverlay.value) == null ? void 0 : t.getElement();
+  e && (e.innerHTML = "");
+}, zoomTruckIcon = () => {
+  var r;
+  if (!mapInstance.value) return;
+  const e = mapInstance.value.getView().getZoom(), t = 120, o = 60;
+  function n(l) {
+    return l < 14 ? o : l >= 14 && l <= 18 ? Math.round((l - 14) * (t - o) / 4 + o) : t;
+  }
+  const a = n(e);
+  (r = document.querySelectorAll(".truck-custom-content")) == null || r.forEach((l) => {
+    l.style.width = `${a}px`, l.style.height = `${a}px`;
+  });
 }, _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "Map",
   props: {
@@ -1077,8 +1238,8 @@ const renderShips = (e) => {
     ((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 v = () => {
-      var g;
+    const h = () => {
+      var v;
       const p = {
         projection: projection.mercator,
         // 地图投影坐标系
@@ -1105,59 +1266,76 @@ const renderShips = (e) => {
           i.greenMark
         ],
         view: new View(p)
-      }), a.value.setScaleLine(), console.log(mapInstance.value.getLayers().getArray()), (g = mapInstance.value) == null || g.on("moveend", E);
+      }), a.value.setScaleLine(), console.log(mapInstance.value.getLayers().getArray()), (v = mapInstance.value) == null || v.on("moveend", I);
     };
     onMounted(() => {
-      v();
+      h();
     });
-    const k = (p) => {
-      var g;
-      (g = mapInstance.value) == null || g.getLayers().forEach((f) => {
+    const w = (p) => {
+      var v;
+      (v = mapInstance.value) == null || v.getLayers().forEach((f) => {
         f.ol_uid === i.greenMark.ol_uid && (f.setVisible(p), u.value = p);
       });
-    }, I = (p) => {
-      var g;
-      console.log("mode", p), (g = mapInstance.value) == null || g.getLayers().forEach((f) => {
+    }, L = (p) => {
+      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));
       });
-    }, E = () => {
-      const p = mapInstance.value.getView(), g = p.getZoom();
-      g && w(g);
+    }, I = () => {
+      const p = mapInstance.value.getView(), v = p.getZoom();
+      v && T(v);
       const f = p.calculateExtent(mapInstance.value.getSize());
-      f && g && _(f, g);
-    }, w = (p) => {
-      var S;
+      f && v && b(f, v);
+    }, T = (p) => {
+      var M, E, C, g;
       c.value = p;
-      const g = (S = mapInstance.value) == null ? void 0 : S.getLayers(), f = s.vehicleMode === "ship" ? g == null ? void 0 : g.getArray().find((V) => V.ol_uid === i.greenMark.ol_uid) : void 0;
-      !d.value && u.value && p < mapZoom.shipGreenDotMax ? (m.value = !0, f == null || f.setVisible(!0)) : (m.value = !1, f == null || f.setVisible(!1)), l("zoomChanged", p);
-    }, _ = (p, g) => {
-      const f = transform([p[0], p[1]], projection.mercator, projection.data), S = transform([p[2], p[3]], projection.mercator, projection.data);
-      l("extentChanged", { extent: [f, S], zoom: g });
+      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 });
     };
     return t({
       mapInstance,
-      initMap: v,
+      initMap: h,
       renderTrucksMarker,
-      renderShips,
+      renderShip: renderShips,
       renderTrack,
+      findTruck,
+      removeTruckIcon,
+      clearAllTruck,
       closeTrack: () => {
         var p;
         (p = shipTrackVectorLayer.value) == null || p.setVisible(!1);
       },
-      findShip
-    }), (p, g) => (openBlock(), createElementBlock("div", {
+      closeTruckTrack: () => {
+        var p;
+        (p = shipTrackVectorLayer.value) == null || p.setVisible(!1);
+      },
+      clearSelectFeature,
+      findShip,
+      showTracks,
+      removeAllTrackLayer,
+      switchFilterItem,
+      rerenderShip,
+      switchGreenDot: () => w(!1),
+      zoomTruckIcon,
+      renderTruckTrack: (p, v, f) => {
+        renderTrack(p, v, f, LENGTH_UNIT.KM, "truck");
+      }
+    }), (p, v) => (openBlock(), createElementBlock("div", {
       class: "map-page map-container",
       ref_key: "pageRef",
       ref: n
     }, [
-      g[0] || (g[0] = createElementVNode("div", {
+      v[0] || (v[0] = createElementVNode("div", {
         id: "map",
         class: "map"
       }, null, -1)),
       createVNode(ToolPanel, {
         "vehicle-mode": p.vehicleMode,
-        onSwitchGreenDot: k,
-        onSwitchMapTile: I
+        onSwitchGreenDot: w,
+        onSwitchMapTile: L
       }, null, 8, ["vehicle-mode"]),
       createVNode(ScaleLine, {
         ref_key: "scaleLineControl",
@@ -1165,19 +1343,13 @@ const renderShips = (e) => {
       }, null, 512),
       createVNode(ZoomControl, {
         ref_key: "zoomControl",
-        ref: r,
-        map: unref(mapInstance)
-      }, null, 8, ["map"]),
+        ref: r
+      }, null, 512),
       createVNode(Copyright),
-      createVNode(Fullscreen, { page: n.value }, null, 8, ["page"]),
-      g[1] || (g[1] = createElementVNode("span", {
-        class: "icon map-iconfont",
-        style: { "user-select": "text" }
-      }, " ", -1)),
-      g[2] || (g[2] = createElementVNode("span", { class: "icon map-iconfont icon-arrow" }, null, -1))
+      createVNode(Fullscreen, { page: n.value }, null, 8, ["page"])
     ], 512));
   }
-}), Map = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-e4db8f6e"]]), ZhMap = withInstall(Map);
+}), Map = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-1bfdec9b"]]), ZhMap = withInstall(Map);
 export {
   ZhMap as Z
 };