zhihao-ui 1.2.11 → 1.2.12

package/dist/es/{Map-B8_d8utt.js → Map-CjPsc0XI.js}

@@ -1,10 +1,10 @@
 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 { 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 B = (e, t, o) => t in e ? A(e, t, { enumerable: !0, configurable: !0, writable: !0, value: o }) : e[t] = o;
+var k = (e, t, o) => B(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, nextTick, normalizeClass, renderSlot, onMounted } from "vue";
+import { n as getArea, o as getLength, V as VectorSource, p as VectorLayer, S as Style, C as CircleStyle, F as Fill, q as Stroke, D as Draw, O as Overlay, u as unByKey, r as ElOption, T as Text, h as hooks, L as LineString, s as Feature, P as Point, t as fromLonLat, e as cloneDeep, G as GeoJSON, W as WebGLPointsLayer, v as transform, w as ScaleLine$1, 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-qv9XzgYI.js";
+import { _ as _export_sfc } from "./Button-Dayz-XVx.js";
+import { w as withInstall } from "./utils-DR-4CNcy.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, i, d, u, p, c, f, v, y, k, L, E, m, g, h, I) {
-    T(this, "id");
+  constructor(t, o, n, a, r, l, i, s, u, c, m, d, f, g, p, T, L, E, b, h, y, v) {
+    k(this, "id");
     // mmsi
-    T(this, "mmsi");
+    k(this, "mmsi");
     // 船舶三角形填充色
-    T(this, "fill");
+    k(this, "fill");
     // 船类型 "7": "货船",
-    T(this, "shipType");
+    k(this, "shipType");
     // 船名
-    T(this, "name");
+    k(this, "name");
     // 长度
-    T(this, "length");
+    k(this, "length");
     // 宽度
-    T(this, "breadth");
+    k(this, "breadth");
     // 经度
-    T(this, "lon");
+    k(this, "lon");
     // 纬度
-    T(this, "lat");
+    k(this, "lat");
     // 时间
-    T(this, "createdAt");
+    k(this, "createdAt");
     // 速度
-    T(this, "speed");
+    k(this, "speed");
     // 来源
-    T(this, "from");
+    k(this, "from");
     // 船状态 "stop":"静止","sail":"航行","work":"作业","danger":"危险","other":"其他"
-    T(this, "sailStatus");
+    k(this, "sailStatus");
     // 船艏向
-    T(this, "hdg");
+    k(this, "hdg");
     // 航迹向
-    T(this, "cog");
+    k(this, "cog");
     // 设备定位类型
-    T(this, "posType");
-    T(this, "type");
+    k(this, "posType");
+    k(this, "type");
     // 航向角度
-    T(this, "angle");
+    k(this, "angle");
     // 左侧是否显示色块
-    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 = v, this.cog = y, this.posType = k, this.type = L, this.angle = E, this.leftIconColor = m, this.existDevice = g, this.existMobile = h, this.existWaterGauge = I;
+    k(this, "leftIconColor");
+    k(this, "existDevice");
+    k(this, "existMobile");
+    k(this, "existWaterGauge");
+    this.id = t, this.mmsi = o, this.fill = n, this.shipType = a, this.name = r, this.length = l, this.breadth = i, this.lon = s, this.lat = u, this.createdAt = c, this.speed = m, this.from = d, this.sailStatus = f, this.hdg = g, this.cog = p, this.posType = T, this.type = L, this.angle = E, this.leftIconColor = b, this.existDevice = h, this.existMobile = y, this.existWaterGauge = v;
   }
 }
 const formatLength = function(e, t) {
@@ -125,7 +125,7 @@ ref();
 const labels = ref([]), _hoisted_1$4 = {
   key: 0,
   class: "measure-panel"
-}, _hoisted_2$2 = { class: "d-flex justify-content-between align-content-start w-100" }, _hoisted_3$1 = { class: "measure-history-list" }, _hoisted_4 = { class: "left-panel" }, _hoisted_5 = { class: "text index" }, _hoisted_6 = { class: "text" }, _hoisted_7 = ["onClick"], _sfc_main$6 = /* @__PURE__ */ defineComponent({
+}, _hoisted_2$2 = { class: "d-flex justify-content-between align-content-start w-100" }, _hoisted_3$2 = { class: "measure-history-list" }, _hoisted_4$1 = { class: "left-panel" }, _hoisted_5 = { class: "text index" }, _hoisted_6 = { class: "text" }, _hoisted_7 = ["onClick"], _sfc_main$6 = /* @__PURE__ */ defineComponent({
   __name: "measure",
   props: {
     visible: { type: Boolean },
@@ -133,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), i = new VectorSource();
-    let d, u, p, c, f;
-    const v = new VectorLayer({
-      source: i,
+    const n = o, a = useModel(e, "visible"), r = ref(LENGTH_UNIT.NM), l = ref([]), i = ref(!1), s = new VectorSource();
+    let u, c, m, d, f;
+    const g = new VectorLayer({
+      source: s,
       style: {
         "fill-color": "rgba(255, 255, 255, 0.2)",
         "stroke-color": "#ffcc33",
@@ -144,16 +144,16 @@ const labels = ref([]), _hoisted_1$4 = {
         "circle-radius": 7,
         "circle-fill-color": "#ffcc33"
       }
-    }), y = function(S) {
-      if (S.dragging)
+    }), p = function(w) {
+      if (w.dragging)
         return;
-      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 S = "点击选择起点";
+      u && (S = "单击继续，双击结束"), c && (c.innerHTML = S, m.setPosition(w.coordinate), c.classList.remove("hidden"));
+    }, T = () => {
+      mapInstance.value && (mapInstance.value.on("pointermove", p), mapInstance.value.getViewport().addEventListener("mouseout", function() {
+        var w;
+        (w = c == null ? void 0 : c.classList) == null || w.add("hidden");
+      }), i.value = !0);
     };
     let L;
     const E = new Style({
@@ -175,110 +175,110 @@ const labels = ref([]), _hoisted_1$4 = {
         })
       })
     });
-    function m() {
-      var S, w;
-      l.value = [], document.querySelectorAll(".ol-tooltip.ol-tooltip-static").forEach((_) => {
-        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(v), u != null && u.parentNode && u.parentNode.removeChild(u);
+    function b() {
+      var w, S;
+      l.value = [], document.querySelectorAll(".ol-tooltip.ol-tooltip-static").forEach((M) => {
+        var I;
+        (I = M == null ? void 0 : M.parentNode) == null || I.removeChild(M);
+      }), s.clear(), (w = mapInstance.value) == null || w.removeInteraction(L), (S = mapInstance.value) == null || S.removeLayer(g), c != null && c.parentNode && c.parentNode.removeChild(c);
     }
-    function g() {
-      var w, _;
-      m(), (w = mapInstance.value) == null || w.addLayer(v), L = new Draw({
-        source: i,
+    function h() {
+      var S, M;
+      b(), (S = mapInstance.value) == null || S.addLayer(g), L = new Draw({
+        source: s,
         type: "LineString",
         style: function() {
           return E;
         }
-      }), (_ = mapInstance.value) == null || _.addInteraction(L), I(), h();
-      let S;
-      L.on("drawstart", function(M) {
-        var F;
-        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);
+      }), (M = mapInstance.value) == null || M.addInteraction(L), v(), y();
+      let w;
+      L.on("drawstart", function(I) {
+        var N;
+        u = I.feature;
+        let _;
+        w = (N = u.getGeometry()) == null ? void 0 : N.on("change", function(P) {
+          const F = P.target;
+          let x = formatLength(F, r.value);
+          _ = F.getLastCoordinate(), d && x && (d.innerHTML = x), f.setPosition(_);
         });
       }), 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);
+        d && (d.className = "ol-tooltip ol-tooltip-static ol-tooltip-measure"), d != null && d.innerHTML && l.value.push(d == null ? void 0 : d.innerHTML), f.setOffset([0, -7]), u = null, d = null, v(), w && unByKey(w);
       });
     }
-    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,
+    function y() {
+      var w;
+      c != null && c.parentNode && c.parentNode.removeChild(c), c = document.createElement("div"), c.className = "ol-tooltip hidden", m = new Overlay({
+        element: c,
         offset: [15, 0],
         positioning: "center-left"
-      }), (S = mapInstance.value) == null || S.addOverlay(p);
+      }), (w = mapInstance.value) == null || w.addOverlay(m);
     }
-    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,
+    function v() {
+      var w;
+      d != null && d.parentNode && d.parentNode.removeChild(d), d = document.createElement("div"), d.className = "ol-tooltip ol-tooltip-measure", f = new Overlay({
+        element: d,
         offset: [0, -15],
         positioning: "bottom-center",
         stopEvent: !1,
         insertFirst: !1
-      }), (S = mapInstance.value) == null || S.addOverlay(f);
+      }), (w = mapInstance.value) == null || w.addOverlay(f);
     }
-    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]);
+    const C = (w) => {
+      var I, _;
+      l.value[w] && l.value.splice(w, 1);
+      const S = document.querySelectorAll(".ol-tooltip.ol-tooltip-static.ol-tooltip-measure");
+      S[w] && ((_ = (I = S[w]) == null ? void 0 : I.parentNode) == null || _.removeChild(S[w]));
+      const M = s.getFeatures();
+      M[w] && s.removeFeature(M[w]);
     }, V = () => {
       n("close");
     };
     return watch(() => a, () => {
-      a && !s.value && (k(), g());
+      a && !i.value && (T(), h());
     }, { deep: !0, immediate: !0 }), t({
-      addInteraction: g,
-      removeInteraction: m
-    }), (S, w) => {
-      const _ = resolveComponent("el-select");
+      addInteraction: h,
+      removeInteraction: b
+    }), (w, S) => {
+      const M = resolveComponent("el-select");
       return a.value ? (openBlock(), createElementBlock("div", _hoisted_1$4, [
         createElementVNode("div", { class: "header" }, [
-          w[1] || (w[1] = createElementVNode("div", { class: "title" }, "测量", -1)),
+          S[1] || (S[1] = createElementVNode("div", { class: "title" }, "测量", -1)),
           createElementVNode("i", {
             onClick: V,
             class: "map-iconfont icon-close"
           })
         ]),
         createElementVNode("div", _hoisted_2$2, [
-          w[2] || (w[2] = createElementVNode("div", { class: "tips" }, "在地图上点击多个点测量距离，距离单位", -1)),
-          createVNode(_, {
+          S[2] || (S[2] = createElementVNode("div", { class: "tips" }, "在地图上点击多个点测量距离，距离单位", -1)),
+          createVNode(M, {
             class: "select-length-unit",
             modelValue: r.value,
-            "onUpdate:modelValue": w[0] || (w[0] = (M) => r.value = M)
+            "onUpdate:modelValue": S[0] || (S[0] = (I) => r.value = I)
           }, {
             default: withCtx(() => [
-              (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]
+              (openBlock(!0), createElementBlock(Fragment, null, renderList(unref(LENGTH_UNIT_LABEL), (I) => (openBlock(), createBlock(unref(ElOption), {
+                key: unref(LENGTH_UNIT)[I],
+                label: I,
+                value: unref(LENGTH_UNIT)[I]
               }, null, 8, ["label", "value"]))), 128))
             ]),
             _: 1
           }, 8, ["modelValue"])
         ]),
-        createElementVNode("div", _hoisted_3$1, [
-          (openBlock(!0), createElementBlock(Fragment, null, renderList(l.value, (M, b) => (openBlock(), createElementBlock("div", {
+        createElementVNode("div", _hoisted_3$2, [
+          (openBlock(!0), createElementBlock(Fragment, null, renderList(l.value, (I, _) => (openBlock(), createElementBlock("div", {
             class: "measure-history-item",
-            key: b
+            key: _
           }, [
-            createElementVNode("div", _hoisted_4, [
-              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", _hoisted_4$1, [
+              S[3] || (S[3] = createElementVNode("i", { class: "map-iconfont icon-a-Frame-11" }, null, -1)),
+              createElementVNode("span", _hoisted_5, "线段" + toDisplayString(_ + 1), 1),
+              createElementVNode("span", _hoisted_6, toDisplayString(I), 1)
             ]),
             createElementVNode("div", {
               class: "delete-button",
-              onClick: (F) => C(b)
-            }, w[4] || (w[4] = [
+              onClick: (N) => C(_)
+            }, S[4] || (S[4] = [
               createElementVNode("i", { class: "map-iconfont icon-a-delete1" }, null, -1)
             ]), 8, _hoisted_7)
           ]))), 128))
@@ -286,103 +286,7 @@ const labels = ref([]), _hoisted_1$4 = {
       ])) : createCommentVNode("", !0);
     };
   }
-}), 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: {}
-  },
-  emits: ["switchGreenDot", "switchMapTile"],
-  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), i = () => {
-      s.value = s.value === BaseMapType.vector ? BaseMapType.satellite : BaseMapType.vector, o("switchMapTile", s.value);
-    }, d = () => {
-      var p, c;
-      n.value ? (p = a.value) == null || p.removeInteraction() : (c = a.value) == null || c.addInteraction(), n.value = !n.value;
-    }, u = () => {
-      var p;
-      (p = a.value) == null || p.removeInteraction(), n.value = !1;
-    };
-    return (p, c) => (openBlock(), createElementBlock(Fragment, null, [
-      createElementVNode("div", _hoisted_1$3, [
-        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: i
-        }, c[3] || (c[3] = [
-          createElementVNode("i", { class: "map-iconfont icon-space" }, null, -1),
-          createElementVNode("div", { class: "button-text" }, "卫星", -1)
-        ]), 2)
-      ]),
-      createElementVNode("div", _hoisted_2$1, [
-        n.value ? (openBlock(), createBlock(Measure, {
-          key: 0,
-          ref_key: "measureRef",
-          ref: a,
-          visible: n.value,
-          "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-9c83c550"]]), _hoisted_1$2 = { id: "scale-line-container" }, _sfc_main$4 = /* @__PURE__ */ defineComponent({
-  __name: "scaleLine",
-  setup(e, { expose: t }) {
-    const o = new ScaleLine$1({
-      units: "nautical"
-    });
-    return t({
-      setScaleLine: () => {
-        o.setTarget(document.getElementById("scale-line-container")), mapInstance.value.addControl(o);
-      }
-    }), (a, r) => (openBlock(), createElementBlock("div", _hoisted_1$2));
-  }
-}), ScaleLine = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["__scopeId", "data-v-e51b19b1"]]), _hoisted_1$1 = { class: "zoom" }, _sfc_main$3 = /* @__PURE__ */ defineComponent({
-  __name: "zoomControl",
-  props: {
-    map: {
-      type: Object
-    }
-  },
-  setup(e) {
-    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 (n, a) => (openBlock(), createElementBlock("div", _hoisted_1$1, [
-      createElementVNode("div", {
-        onClick: t,
-        class: "button big-button"
-      }, "+"),
-      createElementVNode("div", {
-        onClick: o,
-        class: "button small-button"
-      }, "-")
-    ]));
-  }
-}), ZoomControl = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["__scopeId", "data-v-f2b62b21"]]), CDN_URL = "https://static.zhihaoscm.cn/", tiandituKey = "a6e8f78974f2581f2ca00485b40c948f", baseMap = {
+}), Measure = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["__scopeId", "data-v-650abf6f"]]), 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}`,
   // 矢量注记
@@ -402,10 +306,14 @@ const labels = ref([]), _hoisted_1$4 = {
   max: 18,
   // 查看船舶详情时地图缩放层级
   findShip: 13,
+  // 查看车辆详情时地图缩放层级
+  findTruck: 14,
   // 船舶绿点图最大显示层级
   shipGreenDotMax: 11,
   // 查车图标显示层级
   truckDefault: 14,
+  // 统计图标显示层级
+  truckStatistics: 8,
   // 船形图标最小渲染层级
   shipModelMin: 16,
   // 船形图标最大渲染层级
@@ -415,49 +323,7 @@ const labels = ref([]), _hoisted_1$4 = {
   data: "EPSG:4326",
   // 墨卡托投影坐标 渲染坐标
   mercator: "EPSG:3857"
-}, _hoisted_1 = { class: "copyright" }, _hoisted_2 = { class: "tdt-control-copyright tdt-control" }, _hoisted_3 = ["src"], _sfc_main$2 = /* @__PURE__ */ defineComponent({
-  __name: "copyright",
-  setup(e) {
-    return (t, o) => (openBlock(), createElementBlock("div", _hoisted_1, [
-      createElementVNode("div", _hoisted_2, [
-        createElementVNode("img", {
-          src: unref(CDN_URL) + "map/tdt-logo.png",
-          width: "53px",
-          height: "22px",
-          class: "logo",
-          alt: ""
-        }, null, 8, _hoisted_3),
-        o[0] || (o[0] = createElementVNode("div", { class: "copyright-text" }, "GS（2024）0568号 - 甲测资字1100471", -1))
-      ]),
-      o[1] || (o[1] = createElementVNode("div", {
-        id: "dataSource",
-        class: "tdt-control data-source"
-      }, "数据来源：自然资源部 & NavInfo", -1))
-    ]));
-  }
-}), Copyright = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-9c5c2f7b"]]), _sfc_main$1 = /* @__PURE__ */ defineComponent({
-  __name: "fullscreen",
-  props: {
-    pageRef: {
-      type: Object,
-      default: () => ({})
-    }
-  },
-  setup(e) {
-    const t = e, o = ref(!1), n = () => {
-      var a;
-      o.value ? document.exitFullscreen() : (console.log(t.pageRef), (a = t.pageRef) == null || a.requestFullscreen()), o.value = !o.value;
-    };
-    return (a, r) => (openBlock(), createElementBlock("div", {
-      class: "fullscreen-btn",
-      onClick: n
-    }, [
-      createElementVNode("i", {
-        class: normalizeClass(`map-iconfont ${o.value ? "icon-quxiaoquanping" : "icon-quanping"} `)
-      }, null, 2)
-    ]));
-  }
-}), Fullscreen = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-ed59d7cb"]]), equatorialCircumference = 2003750834e-2;
+}, 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);
@@ -504,8 +370,8 @@ 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), 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 n = convertToRadians(e), a = convertToRadians(t), r = n[0] % 360 * (Math.PI / 180), l = a[0] % 360 * (Math.PI / 180), i = n[1] % 360 * (Math.PI / 180), s = a[1] % 360 * (Math.PI / 180), u = Math.sin(l - r) * Math.cos(s), c = Math.cos(i) * Math.sin(s) - Math.sin(i) * Math.cos(s) * Math.cos(l - r);
+  return 180 * Math.atan2(u, c) % (2 * Math.PI) / Math.PI;
 }
 const getAngle = (e, t) => {
   let o = calculateAngle(createPoint(e), createPoint(t));
@@ -524,9 +390,9 @@ const getAngle = (e, t) => {
     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 [i, d] = e[s], [u, p] = e[s + 1], c = i * p - u * d;
-    n += c, t += (i + u) * c, o += (d + p) * c;
+  for (let i = 0; i < a - 1; i++) {
+    const [s, u] = e[i], [c, m] = e[i + 1], d = s * m - c * u;
+    n += d, t += (s + c) * d, o += (u + m) * d;
   }
   if (n *= 0.5, n === 0)
     throw new Error("多边形面积为零");
@@ -534,40 +400,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, i]) => {
-    const d = s - o, u = i - n, p = d * r - u * l + o, c = d * l + u * r + n;
-    return [p, c];
+  return e.map(([i, s]) => {
+    const u = i - o, c = s - n, m = u * r - c * l + o, d = u * l + c * r + n;
+    return [m, d];
   });
 }, 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, i, d = e[0], u = e[1];
+  let r, l, i, s, u = e[0], c = e[1];
   switch (t) {
     case 0:
-      r = d + a, l = r + o, i = u - a, s = i - n;
+      r = u + a, l = r + o, s = c - a, i = s - n;
       break;
     case 1:
-      r = d + a, l = r + o, i = u + n / 2, s = i - n;
+      r = u + a, l = r + o, s = c + n / 2, i = s - n;
       break;
     case 2:
-      r = d + a, l = r + o, i = u + a + n, s = i - n;
+      r = u + a, l = r + o, s = c + a + n, i = s - n;
       break;
     case 3:
-      r = d - o / 2, l = r + o, i = u + a + n, s = i - n;
+      r = u - o / 2, l = r + o, s = c + a + n, i = s - n;
       break;
     case 4:
-      l = d, r = l - o, i = u + a + n, s = i - n;
+      l = u, r = l - o, s = c + a + n, i = s - n;
       break;
     case 5:
-      l = d - a, r = l - o, i = u + n / 2, s = i - n;
+      l = u - a, r = l - o, s = c + n / 2, i = s - n;
       break;
     case 6:
-      l = d, r = l - o, i = u - a, s = i - n;
+      l = u, r = l - o, s = c - a, i = s - n;
       break;
     case 7:
-      r = d - o / 2, l = r + o, i = u - a, s = i - n;
+      r = u - o / 2, l = r + o, s = c - a, i = s - n;
   }
-  if (!(!r || !s || !l || !i))
-    return [Math.min(r, l), Math.min(s, i), Math.max(r, l), Math.max(s, i) + 1];
+  if (!(!r || !i || !l || !s))
+    return [Math.min(r, l), Math.min(i, s), Math.max(r, l), Math.max(i, s) + 1];
 }
 function calculateAnchorPoint(e, t, o = 70, n = 20, a = 20) {
   let r = [0, 0];
@@ -605,23 +471,23 @@ function drawLabelBody(e, t, o) {
     labelOutSize: a = 2,
     labelHeight: r,
     center: l,
-    text: s,
-    leftIcon: i,
-    shipColor: d,
-    lineLength: u = 20
+    text: i,
+    leftIcon: s,
+    shipColor: u,
+    lineLength: c = 20
   } = o;
   e.save(), n && (e.font = n);
-  let p = e.measureText(s).width + 2 * a;
-  (i || d) && (p += r + 4 * a), e.restore();
-  let c, f = -1, v = r + 3 * a;
-  if (f = 0, c = calculateBounds(l, f, p, v, u), c && f > -1) {
-    let y = getBottomLeftPoint(c), k = getTopRighttPoint(c);
+  let m = e.measureText(i).width + 2 * a;
+  (s || u) && (m += r + 4 * a), e.restore();
+  let d, f = -1, g = r + 3 * a;
+  if (f = 0, d = calculateBounds(l, f, m, g, c), d && f > -1) {
+    let p = getBottomLeftPoint(d), T = getTopRighttPoint(d);
     return {
       center: l,
-      x: calculateAnchorPoint(l, f, p, v, u),
-      l: k,
-      r: y,
-      bounds: c,
+      x: calculateAnchorPoint(l, f, m, g, c),
+      l: T,
+      r: p,
+      bounds: d,
       position: f
     };
   }
@@ -629,23 +495,23 @@ function drawLabelBody(e, t, o) {
 }
 const drawText = (e, t) => {
   if (!e) return;
-  const { center: o, text: n, textColor: a, leftIcon: r, rightIcons: l, font: s } = t;
+  const { center: o, text: n, textColor: a, leftIcon: r, rightIcons: l, font: i } = t;
   e.save();
-  let [i, d] = o;
+  let [s, u] = 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;
+    let c = getIconFont(r.icon);
+    e.fillStyle = r.color, e.fillText(c, s + labelOutSize - 4, u + 3), s += 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), v = 20 * c;
-      e.fillText(f, i + u + v, d);
+    let c = e.measureText(n).width + 6;
+    l.forEach((m, d) => {
+      let f = getIconFont(m), g = 20 * d;
+      e.fillText(f, s + c + g, u);
     });
   }
-  e.font = s || labelFont, e.fillStyle = a, e.fillText(n, i, d), e.restore();
+  e.font = i || labelFont, e.fillStyle = a, e.fillText(n, s, u), e.restore();
 }, drawPolygon = (e, t) => {
   let {
     points: o,
@@ -653,33 +519,33 @@ const drawText = (e, t) => {
     fillColor: a,
     shouldClosePath: r,
     translation: l,
-    rotation: s,
-    rotationCenter: i,
-    scale: d,
-    globalAlpha: u
+    rotation: i,
+    rotationCenter: s,
+    scale: u,
+    globalAlpha: c
   } = 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();
+  if (c || (c = 1), o && e) {
+    e.save(), e.beginPath(), i && i !== 0 && s == null && e.rotate(i), l && e.translate(l[0], l[1]), i && (s != null && s.length) && e.rotate(i), u && e.scale(u, u), e.moveTo(o[0][0], o[0][1]);
+    for (let m = 1; m < o.length; m++)
+      e.lineTo(o[m][0], o[m][1]);
+    r && e.closePath(), n && (e.strokeStyle = n, e.stroke()), a && r && (c && (e.globalAlpha = c), e.fillStyle = a, e.fill()), e.restore();
   }
 }, drawLabel = (e, t) => {
-  const { center: o, text: n, color: a, textColor: r, bgColor: l, leftIcon: s, rightIcons: i } = t;
+  const { center: o, text: n, color: a, textColor: r, bgColor: l, leftIcon: i, rightIcons: s } = t;
   if (o && n) {
-    let d = {
+    let u = {
       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 v = [getTopLeftPoint(c), getBottomLeftPoint(c), getBottomRightPoint(c), getTopRighttPoint(c)];
-      labels.value.push(u), drawPolygon(e, {
-        points: [o, p],
+      leftIcon: i
+    }, c = drawLabelBody(e, labels.value, u);
+    if (c) {
+      const { x: m, bounds: d, l: f } = c;
+      let g = [getTopLeftPoint(d), getBottomLeftPoint(d), getBottomRightPoint(d), getTopRighttPoint(d)];
+      labels.value.push(c), drawPolygon(e, {
+        points: [o, m],
         strokeColor: a,
         fillColor: "#000",
         shouldClosePath: !0,
@@ -688,89 +554,213 @@ const drawText = (e, t) => {
         rotationCenter: void 0,
         scale: void 0,
         globalAlpha: labelAlpha
-      }), i != null && i.length && i.forEach(() => {
-        v[1][0] += 20, v[2][0] += 20;
+      }), s != null && s.length && s.forEach(() => {
+        g[1][0] += 20, g[2][0] += 20;
       }), drawPolygon(e, {
-        points: v,
+        points: g,
         strokeColor: a,
         fillColor: l,
         shouldClosePath: !0
       });
-      const [L, E] = f, m = {
+      const [L, E] = f, b = {
         center: [L, E + labelOutSize + labelHeight + 1],
         text: n,
         textColor: r,
-        leftIcon: s,
-        rightIcons: i
+        leftIcon: i,
+        rightIcons: s
       };
-      drawText(e, m);
+      drawText(e, b);
     }
   }
   return null;
-}, dotImage = new Image();
-dotImage.src = `${CDN_URL}/map/truck-dot.svg`;
-dotImage.crossOrigin = "anonymous";
-const dotActiveImage = new Image();
-dotActiveImage.src = `${CDN_URL}/map/truck-dot-active.svg`;
-dotActiveImage.crossOrigin = "anonymous";
-const cameraImage = new Image();
-cameraImage.src = `${CDN_URL}/map/map-camera.svg`;
-cameraImage.crossOrigin = "anonymous";
-const loadImage = new Image();
-loadImage.src = `${CDN_URL}/map/map-load.svg`;
-loadImage.crossOrigin = "anonymous";
-const setTruckStyle = (e, t, o, n) => new Style({
-  renderer: (a, r) => {
-    const l = r.context;
-    l.save();
-    let s = 1;
-    l.scale(s, s);
-    let [i, d] = a;
-    i = i / s - 20, d = d / s;
-    const u = i - 70, p = d - 68;
-    let c = 180;
-    const f = 56, v = "#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, v), 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);
-      });
+}, stopIcon = "&#xe6e2;", stopColor = "#E31818", slowIcon = "&#xe703;", slowColor = "#1890FF", dropletsIcon = "&#xe6d2", trackList$1 = ref([]);
+let animationFeature, animationId;
+const renderTrackLine = (e, t, o) => {
+  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((i, s) => (i.center = [i.lon, i.lat], i.centerPoint = lonLatToMercator(i.center), i.id = t, i.index = s, i.time = hooks(i.createdAt).format("YYYY-MM-DD HH:mm:ss"), i));
+  let a = trackList$1.value.map((i) => i.centerPoint);
+  if (a.length >= 2) {
+    let i = new LineString(a);
+    const s = new Feature({ geometry: i });
+    s.setStyle(
+      new Style({
+        stroke: new Stroke({
+          color: o,
+          width: 2
+        })
+      })
+    ), s.setId(t), s.set("type", "line");
+    const u = shipTrackLineFeatures.value.findIndex((m) => m.getId() === t);
+    u >= 0 ? shipTrackLineFeatures.value[u] = s : shipTrackLineFeatures.value.push(s);
+    const c = createAnimatedIconFeature(o, a);
+    trackLineVectorSource.value = new VectorSource({
+      features: [...shipTrackLineFeatures.value, c]
+    }), animationFeature = c, shipTrackVectorLayer.value = new VectorLayer({
+      source: trackLineVectorSource.value
+    }), setTimeout(() => {
+      renderPoint(o);
+    }, 500), (l = mapInstance.value) == null || l.addLayer(shipTrackVectorLayer.value);
+  }
+}, handlePlay = (e) => {
+  const t = trackLineVectorSource.value.getFeatures().filter((o) => {
+    var n;
+    return !!((n = o.get("data")) != null && n.lon);
+  }).map((o) => lonLatToMercator([o.get("data").lon, o.get("data").lat]));
+  startAnimation(t);
+}, createAnimatedIconFeature = (e, t) => {
+  const o = new Feature({
+    geometry: new Point(fromLonLat([t[0][0], t[0][1]]))
+    // 初始位置
+  }), n = new Style({
+    text: new Text({
+      font: "700 14px map-iconfont",
+      text: getIconFont("&#xe6bc;"),
+      fill: new Fill({ color: e })
+    })
+  });
+  return o.setStyle(n), o;
+}, startAnimation = (e) => {
+  if (!animationFeature || !(e != null && e.length)) return;
+  let t = 0;
+  const o = e.length;
+  function n() {
+    if (t < o) {
+      const [a, r] = e[t];
+      animationFeature.getGeometry().setCoordinates(fromLonLat([a, r])), t++, animationId = requestAnimationFrame(n);
+    } else
+      cancelAnimationFrame(animationId), t = 0, startAnimation();
+  }
+  n();
+}, renderPoint = (e) => {
+  if (!mapInstance.value) return;
+  let t = trackList$1.value || [];
+  if (!(t && t.length > 2)) return [];
+  let o = { 16: 24, 17: 15, default: 4 }, n = [], a = t.length;
+  for (let i = 0; i < a; i++) {
+    t[i].index = i;
+    let s = mapInstance.value.getPixelFromCoordinate(t[i].centerPoint);
+    if (s) {
+      let u = s.concat(s);
+      u = adjustBounds(u, [20, 20]);
+      let c = mapInstance.value.getView().getZoom();
+      if (!c) return;
+      if (c > 15) {
+        let d = o[c] || o.default;
+        u = adjustBounds(u, [d, d]);
+      }
+      let m = !0;
+      if (t[i].state !== "0") {
+        for (let d = 0; d < n.length; d++)
+          if (isOverlapping(u, n[d].bounds)) {
+            m = !1;
+            break;
+          }
+      }
+      m && (t[i].bounds = u, n.push(t[i]));
     }
-    const g = dotImage;
-    l.drawImage(g, i + c / 2 - 90, d, 50 / s, 50 / s), l.restore();
   }
-});
-ref([]);
-let truckMarkerList = [], trucksVectorSource;
-const renderTrucksMarker = (e) => {
-  if (deleteAllTruckMarkers(), !!mapInstance.value)
-    return e.forEach((t) => {
-      const o = convertSixHundredThousandToLatLng(t.lon, t.lat), n = new Feature({
-        geometry: new Point(fromLonLat(o))
+  const r = getIconStyle(stopIcon), l = getIconStyle(slowIcon);
+  n.forEach((i) => {
+    var c, m;
+    let s = new Feature({
+      geometry: new Point(i.centerPoint)
+    });
+    s.set("type", "track_point"), s.set("data", i), s.setStyle(
+      new Style({
+        image: new CircleStyle({
+          fill: new Fill({ color: e }),
+          stroke: new Stroke({ color: "#fff", width: 2 }),
+          radius: 3
+        })
+      })
+    ), trackLineVectorSource.value.addFeature(s);
+    const u = new Feature({
+      geometry: new Point(fromLonLat(i.center))
+    });
+    if (u.set("type", "track_label"), u.setStyle(
+      setTrackLabelStyle(i, e)
+    ), console.log("trackLabelFeature"), trackLineVectorSource.value.addFeature(u), typeof i == "object" && i.hasOwnProperty("state")) {
+      let d = new Feature({
+        geometry: new Point(i.centerPoint)
       });
-      n.set("data", t), n.setStyle(
-        setTruckStyle(!1, t.vno, t == null ? void 0 : t.vclColor, t == null ? void 0 : t.icons)
-      ), truckMarkerList.push({
-        name: t.vno,
-        lonlat: o,
-        feature: n
+      d.set("type", "track_icon");
+      let f = new Style({
+        text: new Text({
+          font: "Normal 22px map-iconfont",
+          text: getIconFont(dropletsIcon),
+          offsetY: -10
+        }),
+        zIndex: 99
+      }), g = [];
+      i.state === "0" ? ((c = f.getText()) == null || c.setFill(new Fill({ color: stopColor })), g.push(r)) : ((m = f.getText()) == null || m.setFill(new Fill({ color: slowColor })), g.push(l)), g.push(f), d.setStyle(g), trackLineVectorSource.value.addFeature(d);
+    }
+  }), renderArrow(n, e), renderIconPoint();
+}, renderArrow = (e, t) => {
+  const o = e.length;
+  o || (e.push(trackList$1.value[0]), e.push(trackList$1.value[trackList$1.value.length - 1]));
+  for (let n = 0; n < o - 1; n++) {
+    let a, r = e[n], l = (e[n + 1].index + r.index) / 2;
+    if (l % 2 === 0)
+      a = trackList$1.value[l].centerPoint;
+    else {
+      let i = trackList$1.value[Math.floor(l)], s = trackList$1.value[Math.ceil(l)];
+      if (i && s) {
+        let [u, c] = i.centerPoint, [m, d] = s.centerPoint;
+        a = [(u + m) / 2, (c + d) / 2];
+      }
+    }
+    if (a) {
+      let i = new Feature({
+        geometry: new Point(a)
       });
-    }), trucksVectorSource = new VectorSource({
-      features: truckMarkerList.map((t) => t.feature)
-    }), trucksLayer.value = new VectorLayer({
-      source: trucksVectorSource
-    }), mapInstance.value.addLayer(trucksLayer.value), trucksLayer.value;
-}, deleteAllTruckMarkers = () => {
-  truckMarkerList.forEach((e) => {
-    e.feature && (trucksVectorSource == null || trucksVectorSource.removeFeature(e.feature));
-  }), truckMarkerList = [];
-}, triangleModel = multiplyPixelRatio([
+      i.set("type", "track_arrow"), i.setStyle(
+        new Style({
+          text: new Text({
+            font: "700 14px map-iconfont",
+            text: getIconFont("&#xe6bc;"),
+            fill: new Fill({ color: t }),
+            rotation: getAngle(
+              e[n].center,
+              e[n + 1].center
+            )
+          })
+        })
+      ), trackLineVectorSource.value.addFeature(i);
+    }
+  }
+}, renderIconPoint = () => {
+  const e = "&#xe69b;", t = "#fcdc3f", o = "#ff0000";
+  (trackList$1.value.length < 2 ? [trackList$1.value[0]] : [trackList$1.value[0], trackList$1.value[trackList$1.value.length - 1]]).forEach((a) => {
+    let r = new Feature({
+      geometry: new Point(a.centerPoint)
+    });
+    r.set("type", "track_begin"), r.set("data", a);
+    const l = a.index === 0 && trackList$1.value.length >= 2 ? t : o;
+    r.setStyle(
+      new Style({
+        text: new Text({
+          font: "Normal 14px map-iconfont",
+          text: getIconFont(e),
+          fill: new Fill({ color: l })
+        }),
+        zIndex: 101
+      })
+    ), trackLineVectorSource.value.addFeature(r);
+  });
+}, setTrackLabelStyle = (e, t) => new Style({
+  renderer: (o, n) => {
+    const a = n.context, i = {
+      center: o,
+      text: e.time,
+      color: t,
+      textColor: "#000",
+      bgColor: "rgba(255,255,255,.8)"
+    };
+    drawLabel(a, i);
+  }
+}), triangleModel = multiplyPixelRatio([
   [0, -8],
   [5, 8],
   [-5, 8]
@@ -849,40 +839,40 @@ const renderTrucksMarker = (e) => {
   const n = mapInstance.value.getView().getZoom();
   if (!n) return;
   let a = [];
-  const [r, l] = drawShipModelByZoom[n] || [0, 0], [s, i] = o;
+  const [r, l] = drawShipModelByZoom[n] || [0, 0], [i, s] = o;
   if (n <= mapZoom.shipModelMax && n > mapZoom.shipModelMin && t.length >= r && t.breadth >= l)
-    a = rotateShapeModel(drawCurrentShipShapeModel(t, n), t.angle).map((u) => {
-      const [p, c] = u;
-      return [s + p, i + c];
+    a = rotateShapeModel(drawCurrentShipShapeModel(t, n), t.angle).map((c) => {
+      const [m, d] = c;
+      return [i + m, s + d];
     });
   else {
-    const d = rotateShapeModel(triangleModel, t.angle);
-    o.length === 2 && (a = d.map((u) => {
-      const [p, c] = u;
-      return [s + p, i + c];
+    const u = rotateShapeModel(triangleModel, t.angle);
+    o.length === 2 && (a = u.map((c) => {
+      const [m, d] = c;
+      return [i + m, s + d];
     }));
   }
   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++)
-    e.lineTo(a[d][0], a[d][1]);
+  for (let u = 1; u < a.length; u++)
+    e.lineTo(a[u][0], a[u][1]);
   return e.closePath(), e.strokeStyle = "#000", e.lineWidth = 1, e.stroke(), e.fillStyle = t.fill, e.fill(), e.restore(), a;
 }, drawHeading = (e, t, o) => {
   const [n, a] = o[0], r = getShipDirectPath(t);
   if (r) {
-    let l = r.map(function(s) {
-      let [i, d] = s;
-      return [i + n, d + a];
+    let l = r.map(function(i) {
+      let [s, u] = i;
+      return [s + n, u + a];
     });
     if (e.save(), e.beginPath(), t.angle > 0) {
       e.translate(n, a);
-      const s = t.angle * Math.PI / 180;
-      e.rotate(s), e.translate(-n, -a);
+      const i = t.angle * Math.PI / 180;
+      e.rotate(i), e.translate(-n, -a);
     }
     e.moveTo(n, a);
-    for (let s = 1; s < l.length; s++) {
-      let [i, d] = l[s];
-      e.lineTo(i, d);
+    for (let i = 1; i < l.length; i++) {
+      let [s, u] = l[i];
+      e.lineTo(s, u);
     }
     e.strokeStyle = "#000", e.lineWidth = 1, e.stroke(), e.restore();
   }
@@ -890,34 +880,34 @@ const renderTrucksMarker = (e) => {
   let [o, n, a, r] = getPixelFromCoordinate(t);
   const l = 4;
   o -= l, n -= l, a += l, r += l, e.save(), e.strokeStyle = "#ff0000", e.lineWidth = 4;
-  const s = 8;
-  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();
+  const i = 8;
+  e.beginPath(), e.moveTo(o + i, r), e.lineTo(o, r), e.lineTo(o, r - i), e.moveTo(o, n + i), e.lineTo(o, n), e.lineTo(o + i, n), e.moveTo(a - i, n), e.lineTo(a, n), e.lineTo(a, n + i), e.moveTo(a, r - i), e.lineTo(a, r), e.lineTo(a - i, r), e.stroke(), e.restore();
 }, drawShipLabel = (e, t, o) => {
-  const [n, a] = o, r = n - 0, l = a - 0, s = t.name;
-  let i;
-  t.leftIconColor && (i = { color: t.leftIconColor, icon: "&#xe599;" });
-  let d = getShipCustomIcon(t);
+  const [n, a] = o, r = n - 0, l = a - 0, i = t.name;
+  let s;
+  t.leftIconColor && (s = { color: t.leftIconColor, icon: "&#xe599;" });
+  let u = getShipCustomIcon(t);
   drawLabel(e, {
     center: [r, l],
-    text: s,
+    text: i,
     color: "#fff",
     textColor: "#000",
     bgColor: "#fff",
-    leftIcon: i,
-    rightIcons: d
+    leftIcon: s,
+    rightIcons: u
   });
 }, drawCurrentShipShapeModel = (e, t) => {
   let o = 0;
   t === 17 ? o = 0.425 : t === 18 && (o = 0.857);
   const n = e.length / 4 * o, a = e.breadth * o;
   let r = cloneDeep(shipShapeModel);
-  return r = r.map(([l, s]) => [l * a, s * n]), r;
+  return r = r.map(([l, i]) => [l * a, i * n]), r;
 }, getShipDirectPath = (e) => {
   let { speed: t, hdg: o, cog: n } = e, a = "", r = null;
   if (t && t > 1 && (o !== null && o != 511 && n !== null ? n - o >= 3 ? a = "left" : n - o <= -3 ? a = "right" : a = "front" : a = "front", a && t))
     for (let l in speedCondition) {
-      let s = speedCondition[l];
-      if (t >= s[0] && t < s[1]) {
+      let i = speedCondition[l];
+      if (t >= i[0] && t < i[1]) {
         r = shipDirectPath[a][l];
         break;
       }
@@ -997,7 +987,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: i }) => s ? !!i : !0);
+    let n = getFilterItem(o).every(({ btnShow: i, value: s }) => i ? !!s : !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) => [
@@ -1025,11 +1015,11 @@ const renderShips = (e) => {
     source: selectShipsVectorSource
   }), mapInstance.value.addLayer(selectShipsLayer.value), selectShipsLayer.value.setVisible(!0), selectShipsLayer.value;
 }, findShip = (e, t, o = !0) => {
-  var a, r, l, s, i;
+  var a, r, l, i, s;
   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;
+  const n = (l = (r = (a = shipsLayer.value) == null ? void 0 : a.getSource()) == null ? void 0 : r.getFeatures()) == null ? void 0 : l.find((u) => {
+    var c;
+    return ((c = u.get("data")) == null ? void 0 : c.id) === e;
   });
   if (n)
     selectedShipData.value = n;
@@ -1039,11 +1029,11 @@ const renderShips = (e) => {
     console.error("找不到船舶");
     return;
   }
-  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 p = d.getZoom(), c = p < mapZoom.findShip ? mapZoom.findShip : p;
-    d.setZoom(c);
+  if (selectSingleShipMarker(t), o && ((i = selectedShipData.value) != null && i.lon) && ((s = selectedShipData.value) != null && s.lat)) {
+    const u = mapInstance.value.getView(), c = new Point([selectedShipData.value.lon, selectedShipData.value.lat]);
+    u.setCenter(transform(c.getCoordinates(), projection.data, projection.mercator));
+    const m = u.getZoom(), d = m < mapZoom.findShip ? mapZoom.findShip : m;
+    u.setZoom(d);
   }
   return n;
 }, clearSelectFeature = () => {
@@ -1064,199 +1054,313 @@ const renderShips = (e) => {
   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, l;
-  const n = e[t];
-  if (!n) return;
-  (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 i = new Feature({ geometry: s });
-    i.setStyle(
-      new Style({
-        stroke: new Stroke({
-          color: o,
-          width: 2
-        })
-      })
-    ), i.setId(t), i.set("type", "line");
-    const d = shipTrackLineFeatures.value.findIndex((u) => u.getId() === t);
-    d >= 0 ? shipTrackLineFeatures.value[d] = i : shipTrackLineFeatures.value.push(i), trackLineVectorSource.value = new VectorSource({
-      features: shipTrackLineFeatures.value
-    }), shipTrackVectorLayer.value = new VectorLayer({
-      source: trackLineVectorSource.value
-    }), setTimeout(() => {
-      renderPoint(o);
-    }, 500), (l = mapInstance.value) == null || l.addLayer(shipTrackVectorLayer.value);
-  }
-}, renderPoint = (e) => {
-  if (!mapInstance.value) return;
-  let t = trackList$1.value || [];
-  if (!(t && t.length > 2)) return [];
-  let o = { 16: 24, 17: 15, default: 4 }, n = [], a = t.length;
-  for (let s = 0; s < a; s++) {
-    t[s].index = s;
-    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 c = o[u] || o.default;
-        d = adjustBounds(d, [c, c]);
-      }
-      let p = !0;
-      if (t[s].state !== "0") {
-        for (let c = 0; c < n.length; c++)
-          if (isOverlapping(d, n[c].bounds)) {
-            p = !1;
-            break;
-          }
-      }
-      p && (t[s].bounds = d, n.push(t[s]));
-    }
-  }
-  const r = getIconStyle(stopIcon), l = getIconStyle(slowIcon);
-  n.forEach((s) => {
-    var u, p;
-    let i = new Feature({
-      geometry: new Point(s.centerPoint)
-    });
-    i.set("type", "track_point"), i.set("data", s), i.setStyle(
-      new Style({
-        image: new CircleStyle({
-          fill: new Fill({ color: e }),
-          stroke: new Stroke({ color: "#fff", width: 2 }),
-          radius: 3
-        })
-      })
-    ), 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 c = new Feature({
-        geometry: new Point(s.centerPoint)
-      });
-      c.set("type", "track_icon");
-      let f = new Style({
-        text: new Text({
-          font: "Normal 22px map-iconfont",
-          text: getIconFont(dropletsIcon),
-          offsetY: -10
-        }),
-        zIndex: 99
-      }), v = [];
-      s.state === "0" ? ((u = f.getText()) == null || u.setFill(new Fill({ color: stopColor })), v.push(r)) : ((p = f.getText()) == null || p.setFill(new Fill({ color: slowColor })), v.push(l)), v.push(f), c.setStyle(v), trackLineVectorSource.value.addFeature(c);
-    }
-  }), renderArrow(n, e), renderIconPoint();
-}, renderArrow = (e, t) => {
-  const o = e.length;
-  o || (e.push(trackList$1.value[0]), e.push(trackList$1.value[trackList$1.value.length - 1]));
-  for (let n = 0; n < o - 1; n++) {
-    let a, r = e[n], l = (e[n + 1].index + r.index) / 2;
-    if (l % 2 === 0)
-      a = trackList$1.value[l].centerPoint;
-    else {
-      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) {
-      let s = new Feature({
-        geometry: new Point(a)
-      });
-      s.set("type", "track_arrow"), s.setStyle(
-        new Style({
-          text: new Text({
-            font: "700 14px map-iconfont",
-            text: getIconFont("&#xe6bc;"),
-            fill: new Fill({ color: t }),
-            rotation: getAngle(
-              e[n].center,
-              e[n + 1].center
-            )
-          })
-        })
-      ), trackLineVectorSource.value.addFeature(s);
-    }
-  }
-}, renderIconPoint = () => {
-  const e = "&#xe69b;", t = "#fcdc3f", o = "#ff0000";
-  (trackList$1.value.length < 2 ? [trackList$1.value[0]] : [trackList$1.value[0], trackList$1.value[trackList$1.value.length - 1]]).forEach((a) => {
-    let r = new Feature({
-      geometry: new Point(a.centerPoint)
-    });
-    r.set("type", "track_begin"), r.set("data", a);
-    const l = a.index === 0 && trackList$1.value.length >= 2 ? t : o;
-    r.setStyle(
-      new Style({
-        text: new Text({
-          font: "Normal 14px map-iconfont",
-          text: getIconFont(e),
-          fill: new Fill({ color: l })
-        }),
-        zIndex: 101
-      })
-    ), trackLineVectorSource.value.addFeature(r);
-  });
-}, setTrackLabelStyle = (e, t) => new Style({
-  renderer: (o, n) => {
-    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([]);
+}, showTracks = ref([]), trackList = ref([]);
 ref(null);
 const trackId = ref(""), cursor = ref(0), renderTrack = (e, t, o, n, a = "ship") => {
-  var u;
+  var c;
   if (nextTick(() => {
     hiddenAllShips();
-  }).then((p) => {
+  }).then((m) => {
   }), (t == null ? void 0 : t.length) < 2) {
-    ((u = showTracks.value) == null ? void 0 : u.findIndex((p) => p.id === e)) < 0 && showTracks.value.push({ id: e, length: "" });
+    ((c = showTracks.value) == null ? void 0 : c.findIndex((m) => m.id === e)) < 0 && showTracks.value.push({ id: e, length: "" });
     return;
   }
   let r = {};
-  t.forEach((p) => {
-    p.state ? p.state = Number(p.state) : delete p.state;
+  t.forEach((m) => {
+    m.state ? m.state = Number(m.state) : delete m.state;
   }), trackId.value = e, r[e] = t, trackList.value = t;
-  const l = ["#ff0000", "#00ff00", "#0079ff", "#ffa500", "#800080", "#008080", "#ffc0cb", "#800000", "#000080", "#808000"], s = r[e].map(
-    (p) => transform([p.lon, p.lat], projection.data, projection.mercator)
-  ), i = new LineString(s), d = formatLength(i, n) || "--";
+  const l = ["#ff0000", "#00ff00", "#0079ff", "#ffa500", "#800080", "#008080", "#ffc0cb", "#800000", "#000080", "#808000"], i = r[e].map(
+    (m) => transform([m.lon, m.lat], projection.data, projection.mercator)
+  ), s = new LineString(i), u = formatLength(s, n) || "--";
   nextTick(() => {
-    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);
+    var d;
+    const m = (d = showTracks.value) == null ? void 0 : d.findIndex((f) => f.id === e);
+    m < 0 ? showTracks.value.push({ id: e, length: u }) : showTracks.value[m].length = u, renderTrackLine(r, e, o), ++cursor.value, cursor.value > l.length && (cursor.value = 0), resetTrackView(e);
   }).then(() => {
   });
 }, removeAllTrackLayer = () => {
   var e;
   showTracks.value = [], (e = trackLineVectorSource.value) == null || e.clear();
+}, playTrack = (e, t) => {
+  handlePlay();
 }, 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();
-  if (o != null && o.length)
+  var a;
+  const t = mapInstance.value.getView(), o = e ? shipTrackLineFeatures.value.find((r) => r.getId() === e) : shipTrackLineFeatures.value[0];
+  if (!o) return;
+  const n = (a = o == null ? void 0 : o.getGeometry()) == null ? void 0 : a.getExtent();
+  if (n != null && n.length)
     try {
-      t.fit(o);
+      t.fit(n);
     } catch (r) {
       console.log(r);
     }
+}, _hoisted_1$3 = { class: "tool-panel" }, _hoisted_2$1 = {
+  key: 0,
+  class: "more-tool-panel"
+}, _hoisted_3$1 = { class: "switch-buttons" }, _hoisted_4 = { class: "tool-components" }, _sfc_main$5 = /* @__PURE__ */ defineComponent({
+  __name: "toolPanel",
+  props: {
+    vehicleMode: {},
+    viewMode: {},
+    disableGreenDot: { type: Boolean },
+    showTrackLayer: { type: Boolean }
+  },
+  emits: ["switchGreenDot", "switchMapTile"],
+  setup(e, { emit: t }) {
+    var d, f;
+    const o = t, n = ref(((f = (d = mapInstance.value) == null ? void 0 : d.getView()) == null ? void 0 : f.getZoom()) || mapZoom.default), a = ref(!1), r = ref(null), l = ref(!0), i = () => {
+      l.value = !l.value, o("switchGreenDot", l.value);
+    }, s = ref(BaseMapType.vector), u = () => {
+      s.value = s.value === BaseMapType.vector ? BaseMapType.satellite : BaseMapType.vector, o("switchMapTile", s.value);
+    }, c = () => {
+      var g, p;
+      a.value ? (g = r.value) == null || g.removeInteraction() : (p = r.value) == null || p.addInteraction(), a.value = !a.value;
+    }, m = () => {
+      var g;
+      (g = r.value) == null || g.removeInteraction(), a.value = !1;
+    };
+    return (g, p) => (openBlock(), createElementBlock(Fragment, null, [
+      createElementVNode("div", _hoisted_1$3, [
+        g.viewMode === "WxMiniprogram" ? (openBlock(), createElementBlock("div", _hoisted_2$1, [
+          createElementVNode("div", _hoisted_3$1, [
+            g.vehicleMode === "ship" ? (openBlock(), createElementBlock("div", {
+              key: 0,
+              class: normalizeClass(["switch-btn", `${a.value && "active"}`]),
+              onClick: c
+            }, p[5] || (p[5] = [
+              createElementVNode("i", { class: "map-iconfont icon-measure" }, null, -1),
+              createElementVNode("div", { class: "button-text" }, "测距", -1)
+            ]), 2)) : createCommentVNode("", !0),
+            g.vehicleMode === "ship" ? (openBlock(), createElementBlock("div", {
+              key: 1,
+              "<div": "",
+              class: normalizeClass(`switch-btn ${l.value && "active"} ${(g.disableGreenDot || n.value >= unref(mapZoom).shipGreenDotMax) && "disabled"}`),
+              onClick: i
+            }, p[6] || (p[6] = [
+              createElementVNode("i", { class: "map-iconfont icon-ship" }, null, -1),
+              createElementVNode("div", { class: "button-text" }, "绿点", -1)
+            ]), 2)) : createCommentVNode("", !0),
+            g.vehicleMode === "ship" ? (openBlock(), createElementBlock("div", {
+              key: 2,
+              class: normalizeClass(`switch-btn ${s.value === unref(BaseMapType).vector && "active"}`),
+              onClick: p[0] || (p[0] = (T) => u())
+            }, p[7] || (p[7] = [
+              createElementVNode("i", { class: "map-iconfont icon-space" }, null, -1),
+              createElementVNode("div", { class: "button-text" }, "图层", -1)
+            ]), 2)) : createCommentVNode("", !0),
+            g.vehicleMode === "truck" ? (openBlock(), createElementBlock("div", {
+              key: 3,
+              class: normalizeClass(`switch-btn ${s.value === unref(BaseMapType).satellite && "active"}`),
+              onClick: p[1] || (p[1] = (T) => u())
+            }, p[8] || (p[8] = [
+              createElementVNode("i", { class: "map-iconfont icon-space" }, null, -1),
+              createElementVNode("div", { class: "button-text" }, "卫星", -1)
+            ]), 2)) : createCommentVNode("", !0),
+            g.showTrackLayer ? (openBlock(), createElementBlock(Fragment, { key: 4 }, [
+              createElementVNode("div", {
+                class: "switch-btn multiple",
+                onClick: p[2] || (p[2] = (T) => unref(playTrack)(0, 1))
+              }, p[9] || (p[9] = [
+                createElementVNode("i", { class: "iconfont icon-play" }, null, -1),
+                createElementVNode("div", { class: "button-text" }, "播放轨迹", -1)
+              ])),
+              createElementVNode("div", {
+                class: "switch-btn multiple",
+                onClick: p[3] || (p[3] = (T) => unref(resetTrackView)())
+              }, p[10] || (p[10] = [
+                createElementVNode("i", { class: "iconfont icon-center" }, null, -1),
+                createElementVNode("div", { class: "button-text" }, "轨迹居中", -1)
+              ]))
+            ], 64)) : createCommentVNode("", !0),
+            renderSlot(g.$slots, "toolPanel", {}, void 0, !0)
+          ])
+        ])) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+          g.vehicleMode === "ship" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+            createElementVNode("div", {
+              class: normalizeClass(["switch-btn", `${a.value && "active"}`]),
+              onClick: c
+            }, p[11] || (p[11] = [
+              createElementVNode("i", { class: "map-iconfont icon-measure" }, null, -1),
+              createElementVNode("div", { class: "button-text" }, "测距", -1)
+            ]), 2),
+            createElementVNode("div", {
+              class: normalizeClass(["switch-btn", { active: l.value }]),
+              onClick: i
+            }, p[12] || (p[12] = [
+              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: u
+          }, p[13] || (p[13] = [
+            createElementVNode("i", { class: "map-iconfont icon-space" }, null, -1),
+            createElementVNode("div", { class: "button-text" }, "卫星", -1)
+          ]), 2)
+        ], 64))
+      ]),
+      createElementVNode("div", _hoisted_4, [
+        a.value ? (openBlock(), createBlock(Measure, {
+          key: 0,
+          ref_key: "measureRef",
+          ref: r,
+          visible: a.value,
+          "onUpdate:visible": p[4] || (p[4] = (T) => a.value = T),
+          onClose: m
+        }, null, 8, ["visible"])) : createCommentVNode("", !0)
+      ])
+    ], 64));
+  }
+}), ToolPanel = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["__scopeId", "data-v-ddfa6649"]]), _hoisted_1$2 = { id: "scale-line-container" }, _sfc_main$4 = /* @__PURE__ */ defineComponent({
+  __name: "scaleLine",
+  setup(e, { expose: t }) {
+    const o = new ScaleLine$1({
+      units: "nautical"
+    });
+    return t({
+      setScaleLine: () => {
+        o.setTarget(document.getElementById("scale-line-container")), mapInstance.value.addControl(o);
+      }
+    }), (a, r) => (openBlock(), createElementBlock("div", _hoisted_1$2));
+  }
+}), ScaleLine = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["__scopeId", "data-v-e51b19b1"]]), _hoisted_1$1 = { class: "zoom" }, _sfc_main$3 = /* @__PURE__ */ defineComponent({
+  __name: "zoomControl",
+  props: {
+    map: {
+      type: Object
+    }
+  },
+  setup(e) {
+    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 (n, a) => (openBlock(), createElementBlock("div", _hoisted_1$1, [
+      createElementVNode("div", {
+        onClick: t,
+        class: "button big-button"
+      }, "+"),
+      createElementVNode("div", {
+        onClick: o,
+        class: "button small-button"
+      }, "-")
+    ]));
+  }
+}), ZoomControl = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["__scopeId", "data-v-f2b62b21"]]), _hoisted_1 = { class: "copyright" }, _hoisted_2 = { class: "tdt-control-copyright tdt-control" }, _hoisted_3 = ["src"], _sfc_main$2 = /* @__PURE__ */ defineComponent({
+  __name: "copyright",
+  setup(e) {
+    return (t, o) => (openBlock(), createElementBlock("div", _hoisted_1, [
+      createElementVNode("div", _hoisted_2, [
+        createElementVNode("img", {
+          src: unref(CDN_URL) + "map/tdt-logo.png",
+          width: "53px",
+          height: "22px",
+          class: "logo",
+          alt: ""
+        }, null, 8, _hoisted_3),
+        o[0] || (o[0] = createElementVNode("div", { class: "copyright-text" }, "GS（2024）0568号 - 甲测资字1100471", -1))
+      ]),
+      o[1] || (o[1] = createElementVNode("div", {
+        id: "dataSource",
+        class: "tdt-control data-source"
+      }, "数据来源：自然资源部 & NavInfo", -1))
+    ]));
+  }
+}), Copyright = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-9c5c2f7b"]]), _sfc_main$1 = /* @__PURE__ */ defineComponent({
+  __name: "fullscreen",
+  props: {
+    pageRef: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  setup(e) {
+    const t = e, o = ref(!1), n = () => {
+      var a;
+      o.value ? document.exitFullscreen() : (console.log(t.pageRef), (a = t.pageRef) == null || a.requestFullscreen()), o.value = !o.value;
+    };
+    return (a, r) => (openBlock(), createElementBlock("div", {
+      class: "fullscreen-btn",
+      onClick: n
+    }, [
+      createElementVNode("i", {
+        class: normalizeClass(`map-iconfont ${o.value ? "icon-quxiaoquanping" : "icon-quanping"} `)
+      }, null, 2)
+    ]));
+  }
+}), Fullscreen = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-ed59d7cb"]]), dotImage = new Image();
+dotImage.src = `${CDN_URL}/map/truck-dot.svg`;
+dotImage.crossOrigin = "anonymous";
+const dotActiveImage = new Image();
+dotActiveImage.src = `${CDN_URL}/map/truck-dot-active.svg`;
+dotActiveImage.crossOrigin = "anonymous";
+const cameraImage = new Image();
+cameraImage.src = `${CDN_URL}/map/map-camera.svg`;
+cameraImage.crossOrigin = "anonymous";
+const loadImage = new Image();
+loadImage.src = `${CDN_URL}/map/map-load.svg`;
+loadImage.crossOrigin = "anonymous";
+const setTruckStyle = (e, t, o, n) => new Style({
+  renderer: (a, r) => {
+    const l = r.context;
+    l.save();
+    let i = 1;
+    l.scale(i, i);
+    let [s, u] = a;
+    s = s / i - 20, u = u / i;
+    const c = s - 70, m = u - 68;
+    let d = 180;
+    const f = 56, g = "#FFFFFF";
+    let p = 176;
+    const T = 52;
+    let L = "#164AFF", E = "#FFFFFF";
+    o === CAR_COLOR.YELLOW ? (p = 176, L = "#FFC81E", E = "rgba(0,0,0,0.88)") : o === CAR_COLOR.Y_GREEN && (d = 200, p = 196, L = "#8FED7C", E = "rgba(0,0,0,0.88)"), n != null && n.length && (d += n.length * 56), fillRectRadius(l, c, m, d, f, g), fillRectRadius(l, c + 2, m + 2, p, T, L), o === CAR_COLOR.Y_GREEN && fillRectRadius(l, c + 2, m + 2, 68, T, "#FFC81E"), l.save(), l.restore(), l.fillStyle = E, l.font = "bold 28px Arial", l.textAlign = "left", l.textBaseline = "middle";
+    const b = `${t.slice(0, 2) + " · " + t.slice(2)}`;
+    if (l.fillText(b, c + 12, m + 32), l.save(), l.restore(), n != null && n.length) {
+      const y = l.measureText(b).width + 12;
+      let v = 0;
+      n.forEach((C) => {
+        C === DEVICE_TYPE.CAMERA && (l.drawImage(cameraImage, s - 54 + y + v * 56, u - 64, 50, 50), ++v), C === DEVICE_TYPE.LOAD && (l.drawImage(loadImage, s - 54 + y + v * 56, u - 64, 50, 50), ++v);
+      });
+    }
+    const h = dotImage;
+    l.drawImage(h, s + d / 2 - 90, u, 50 / i, 50 / i), l.restore();
+  }
+});
+ref([]);
+let truckMarkerList = [], trucksVectorSource;
+const renderTrucksMarker = (e) => {
+  if (deleteAllTruckMarkers(), !!mapInstance.value)
+    return e.forEach((t) => {
+      const o = convertSixHundredThousandToLatLng(t.lon, t.lat), n = new Feature({
+        geometry: new Point(fromLonLat(o))
+      });
+      n.set("data", t), n.setStyle(
+        setTruckStyle(!1, t.vno, t == null ? void 0 : t.vclColor, t == null ? void 0 : t.icons)
+      ), truckMarkerList.push({
+        name: t.vno,
+        lonlat: o,
+        feature: n
+      });
+    }), trucksVectorSource = new VectorSource({
+      features: truckMarkerList.map((t) => t.feature)
+    }), trucksLayer.value = new VectorLayer({
+      source: trucksVectorSource
+    }), mapInstance.value.addLayer(trucksLayer.value), trucksLayer.value;
+}, deleteAllTruckMarkers = () => {
+  truckMarkerList.forEach((e) => {
+    e.feature && (trucksVectorSource == null || trucksVectorSource.removeFeature(e.feature));
+  }), truckMarkerList = [];
 }, drawCustomContent = (e, t, o, n = "top-left", a = !1) => {
-  var u, p;
+  var c, m;
   if (!t || !mapInstance.value) return;
-  document.querySelectorAll(".truck-custom-content").forEach((c) => c.parentNode.removeChild(c));
+  document.querySelectorAll(".truck-custom-content").forEach((d) => d.parentNode.removeChild(d));
   const r = document.createElement("div");
   r.innerHTML = o;
   const l = new Overlay({
@@ -1268,32 +1372,32 @@ const trackId = ref(""), cursor = ref(0), renderTrack = (e, t, o, n, a = "ship")
     // 设置不阻拦事件
   });
   if (a) {
-    let c = !1, f = [0, 0], v = [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]), v = [
-        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 - v[0], y.clientY - v[1]]), E = L[0] - f[0], m = L[1] - f[1];
-        l.setPosition([f[0] + E, f[1] + m]);
+    let d = !1, f = [0, 0], g = [0, 0];
+    r.addEventListener("mousedown", function(p) {
+      var T;
+      d = !0, p.clientX, p.clientY, f = (T = mapInstance.value) == null ? void 0 : T.getCoordinateFromPixel([p.clientX - 200, p.clientY - 200]), g = [
+        p.clientX - r.getBoundingClientRect().left + 160,
+        p.clientY - r.getBoundingClientRect().top + 84
+      ], p.preventDefault();
+    }), document.addEventListener("mousemove", function(p) {
+      var T;
+      if (d) {
+        let L = (T = mapInstance.value) == null ? void 0 : T.getCoordinateFromPixel([p.clientX - g[0], p.clientY - g[1]]), E = L[0] - f[0], b = L[1] - f[1];
+        l.setPosition([f[0] + E, f[1] + b]);
       }
     }), document.addEventListener("mouseup", function() {
-      c = !1;
+      d = !1;
     });
   }
-  (u = mapInstance.value) == null || u.addOverlay(l);
-  const s = r.querySelector(".close-button");
-  s && s.addEventListener("click", () => {
-    var c, f;
-    (c = mapInstance.value) == null || c.removeOverlay(l), (f = r.parentNode) == null || f.removeChild(r);
+  (c = mapInstance.value) == null || c.addOverlay(l);
+  const i = r.querySelector(".close-button");
+  i && i.addEventListener("click", () => {
+    var d, f;
+    (d = mapInstance.value) == null || d.removeOverlay(l), (f = r.parentNode) == null || f.removeChild(r);
   });
-  let i = JSON.parse(JSON.stringify(t));
-  const d = (p = mapInstance.value) == null ? void 0 : p.getCoordinateFromPixel(i);
-  return l.setPosition(d), l;
+  let s = JSON.parse(JSON.stringify(t));
+  const u = (m = mapInstance.value) == null ? void 0 : m.getCoordinateFromPixel(s);
+  return l.setPosition(u), l;
 }, vehicle = ref(null), focusShipData = ref(), currentTruckOverlay = ref(null), findTruck = async (e) => {
   if (!mapInstance.value) return;
   focusShipData.value = e;
@@ -1353,31 +1457,31 @@ const trackId = ref(""), cursor = ref(0), renderTrack = (e, t, o, n, a = "ship")
     // 设置文本背景的内边距
   })
 }), renderMarker = (e, t = !0, o = !0) => {
-  var u;
+  var c;
   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));
+  (c = marker.value) == null || c.setStyle(createIconStyle(r));
   const l = new VectorSource({
     features: [marker.value]
-  }), s = new VectorLayer({
+  }), i = new VectorLayer({
     source: l
-  }), i = mapInstance.value.getView();
-  if (mapInstance.value.addLayer(s), t) {
-    const p = new Translate({
-      layers: [s]
+  }), s = mapInstance.value.getView();
+  if (mapInstance.value.addLayer(i), t) {
+    const m = new Translate({
+      layers: [i]
     });
-    p.on("translating", function(c) {
-      var y;
-      const f = c.features.item(0).getGeometry().getCoordinates(), v = toLonLat(f);
-      markerPosition.value = `${v[0].toFixed(6)}, ${v[1].toFixed(6)}`, (y = marker.value) == null || y.setStyle(createIconStyle(markerPosition.value));
-    }), mapInstance.value.addInteraction(p);
+    m.on("translating", function(d) {
+      var p;
+      const f = d.features.item(0).getGeometry().getCoordinates(), g = toLonLat(f);
+      markerPosition.value = `${g[0].toFixed(6)}, ${g[1].toFixed(6)}`, (p = marker.value) == null || p.setStyle(createIconStyle(markerPosition.value));
+    }), mapInstance.value.addInteraction(m);
   }
-  const d = new Point([n, a]);
-  i.setCenter(transform(d.getCoordinates(), projection.data, projection.mercator)), i.setZoom(mapZoom.findShip);
+  const u = new Point([n, a]);
+  s.setCenter(transform(u.getCoordinates(), projection.data, projection.mercator)), s.setZoom(mapZoom.findShip);
 }, setMarkerPosition = (e) => {
   var a, r;
   if (!mapInstance.value) return;
@@ -1423,12 +1527,12 @@ function createHelpTooltip() {
 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);
+  e == null || e.forEach((s) => {
+    const u = transform(s, projection.mercator, projection.data), c = u[0], m = u[1];
+    o = Math.min(o, m), n = Math.max(n, m), a = Math.min(a, c), r = Math.max(r, c);
   });
-  const l = (n - o) * 111, s = (r - a) * 111;
-  squareLimitError = l > 150 || s > 150;
+  const l = (n - o) * 111, i = (r - a) * 111;
+  squareLimitError = l > 150 || i > 150;
 };
 let storeFeature;
 function addInteraction(e) {
@@ -1454,17 +1558,17 @@ function addInteraction(e) {
   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) {
+      const i = l.target;
+      let s = formatArea(i, LENGTH_UNIT.NM);
+      const c = i.getCoordinates()[0], m = new LineString([c[c.length - 2], c[c.length - 1]]);
+      let d = formatLength(m, LENGTH_UNIT.NM);
+      if (lineLimitError = Number(getLength(m) / 1e3) > 150, validateSquareLimit(c), measureTooltipElement && s && (measureTooltipElement.innerHTML = `
+                <span class="text">面积：${s}${lineLimitError || squareLimitError ? '<span class="error pl-12">超出可以绘画的距离</span>' : ""}</span>
+            `), helpTooltipElement && s) {
         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>
+        parseFloat(s) > 0 && (f = `
+                        <div class="text ${squareLimitError ? "error" : ""}">面积：${s}${squareLimitError ? '<span class="error pl-12">超出可以绘画的距离</span>' : ""}</div>`), helpTooltipElement.innerHTML = `${f}
+                    <span class="text ${lineLimitError ? "error" : ""}">线段${c.length - 2}：${d}${lineLimitError ? '<span class="error pl-4">超出可以绘画的距离</span>' : ""}</span>
                     <div><span class="text">单击继续，双击结束</span></div>
                 `;
       }
@@ -1489,11 +1593,11 @@ 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));
+    (t = l[0]) == null || t.forEach((s) => {
+      a.push(transform(s, 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", () => {
+    const i = l[0][l[0].length - 2];
+    if (i && measureTooltip.setPosition(i), 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;
@@ -1522,14 +1626,15 @@ const endFn = (e) => {
 }, init = () => {
   mapInstance.value && (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)
-    ]
+    style: new Style({
+      stroke: new Stroke({
+        color: "rgba(255, 255, 255, 1)",
+        width: 2
+      }),
+      fill: new Fill({
+        color: "rgba(255, 255, 255, 0.3)"
+      })
+    })
   }), mapInstance.value.on("pointermove", pointerMoveHandler), mapInstance.value.getViewport().addEventListener("mouseout", function() {
     var e;
     (e = helpTooltipElement == null ? void 0 : helpTooltipElement.classList) == null || e.add("hidden");
@@ -1548,27 +1653,28 @@ const endFn = (e) => {
   props: {
     zoom: {},
     center: {},
-    vehicleMode: {}
+    vehicleMode: {},
+    viewMode: {}
   },
   emits: ["zoomChanged", "extentChanged"],
   setup(e, { expose: t, emit: o }) {
-    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 g, h;
-      const m = {
+    const n = ref(null), a = ref(null), r = ref(null), l = o, i = e, s = ref(i.zoom || mapZoom.default), u = ref(!1), c = ref(!0), m = ref(!0), d = ref(!1);
+    let f;
+    ((h) => {
+      h[h.tiandituTile = new TileLayer({ source: new XYZ({ url: baseMap.tiandituTile }) })] = "tiandituTile", h[h.tiandituTileMark = new TileLayer({ source: new XYZ({ url: baseMap.tiandituTileMark }) })] = "tiandituTileMark", h[h.tiandituImgTile = new TileLayer({ source: new XYZ({ url: baseMap.tiandituImgTile }), visible: !1 })] = "tiandituImgTile", h[h.tiandituImgTileMark = new TileLayer({ source: new XYZ({ url: baseMap.tiandituImgTileMark }), visible: !1 })] = "tiandituImgTileMark", h[h.greenMark = new TileLayer({ source: new XYZ({ url: baseMap.greenTile }) })] = "greenMark";
+    })(f || (f = {}));
+    const g = () => {
+      var y, v;
+      const h = {
         projection: projection.mercator,
         // 地图投影坐标系
-        zoom: s.zoom || (s.vehicleMode === "ship" ? mapZoom.default : mapZoom.truckDefault),
+        zoom: i.zoom || (i.vehicleMode === "ship" ? mapZoom.default : mapZoom.truckDefault),
         // 地图缩放级别（打开页面时默认级别）
         minZoom: mapZoom.min,
         // 地图缩放最小级别
         maxZoom: mapZoom.max,
         // 地图缩放最大级别
-        center: lonLatToMercator(s.center || mapDefaultCenter),
+        center: lonLatToMercator(i.center || mapDefaultCenter),
         // 深圳坐标
         constrainResolution: !0,
         multiWorld: !0
@@ -1578,104 +1684,113 @@ const endFn = (e) => {
         // 对应页面里 id 为 map 的元素
         layers: [
           // 图层
-          c.tiandituTile,
-          c.tiandituTileMark,
-          c.tiandituImgTile,
-          c.tiandituImgTileMark,
-          c.greenMark
+          f.tiandituTile,
+          f.tiandituTileMark,
+          f.tiandituImgTile,
+          f.tiandituImgTileMark,
+          f.greenMark
         ],
-        view: new View(m)
-      }), (g = a.value) == null || g.setScaleLine(), (h = mapInstance.value) == null || h.on("moveend", k), v(s.vehicleMode === "ship"), y(s.vehicleMode === "ship" ? BaseMapType.satellite : BaseMapType.vector);
+        view: new View(h)
+      }), (y = a.value) == null || y.setScaleLine(), (v = mapInstance.value) == null || v.on("moveend", L), p(i.vehicleMode === "ship"), T(i.vehicleMode === "ship" ? BaseMapType.satellite : BaseMapType.vector);
     };
     onMounted(() => {
-      f();
+      g();
     });
-    const v = (m) => {
-      var g;
-      (g = mapInstance.value) == null || g.getLayers().forEach((h) => {
-        h.ol_uid === c.greenMark.ol_uid && (h.setVisible(m), u.value = m);
+    const p = (h) => {
+      var y;
+      (y = mapInstance.value) == null || y.getLayers().forEach((v) => {
+        v.ol_uid === f.greenMark.ol_uid && (v.setVisible(h), c.value = h);
       });
-    }, y = (m) => {
-      var g;
-      console.log("mode", m), (g = mapInstance.value) == null || g.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));
+    }, T = (h) => {
+      var y;
+      console.log("mode", h), (y = mapInstance.value) == null || y.getLayers().forEach((v) => {
+        (v.ol_uid === f.tiandituTile.ol_uid || v.ol_uid === f.tiandituTileMark.ol_uid || v.ol_uid === f.tiandituImgTile.ol_uid || v.ol_uid === f.tiandituImgTileMark.ol_uid) && v.setVisible(!1), (h === BaseMapType.vector && v.ol_uid === f.tiandituTile.ol_uid || v.ol_uid === f.tiandituTileMark.ol_uid || h === BaseMapType.satellite && v.ol_uid === f.tiandituImgTile.ol_uid || v.ol_uid === f.tiandituImgTileMark.ol_uid) && (console.log(h, v.ol_uid), v.setVisible(!0));
       });
-    }, k = () => {
-      const m = mapInstance.value.getView(), g = m.getZoom();
-      g && L(g);
-      const h = m.calculateExtent(mapInstance.value.getSize());
-      h && g && E(h, g);
-    }, L = (m) => {
-      var I, C, V, S;
-      i.value = m;
-      const g = (I = mapInstance.value) == null ? void 0 : I.getLayers(), h = s.vehicleMode === "ship" ? g == null ? void 0 : g.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, g) => {
-      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: g });
+    }, L = () => {
+      const h = mapInstance.value.getView(), y = h.getZoom();
+      y && E(y);
+      const v = h.calculateExtent(mapInstance.value.getSize());
+      v && y && b(v, y);
+    }, E = (h) => {
+      var C, V, w, S;
+      s.value = h;
+      const y = (C = mapInstance.value) == null ? void 0 : C.getLayers(), v = i.vehicleMode === "ship" ? y == null ? void 0 : y.getArray().find((M) => M.ol_uid === f.greenMark.ol_uid) : void 0;
+      !u.value && c.value && h < mapZoom.shipGreenDotMax ? (m.value = !0, v == null || v.setVisible(!0), (V = shipsLayer.value) == null || V.setVisible(!1), (w = largeAmountShipsLayer.value) == null || w.setVisible(!1)) : (m.value = !1, v == null || v.setVisible(!1), (S = largeAmountShipsLayer.value) == null || S.setVisible(!0)), l("zoomChanged", h);
+    }, b = (h, y) => {
+      const v = transform([h[0], h[1]], projection.mercator, projection.data), C = transform([h[2], h[3]], projection.mercator, projection.data);
+      l("extentChanged", { extent: [v, C], zoom: y });
     };
     return t({
       mapInstance,
-      initMap: f,
+      initMap: g,
       renderTrucksMarker,
       renderShip: renderShips,
-      renderTrack,
+      renderTrack: (h, y, v) => {
+        d.value = !0, u.value = !0, renderTrack(h, y, v, LENGTH_UNIT.NM);
+      },
       findTruck,
       removeTruckIcon,
       clearAllTruck,
       closeTrack: () => {
-        var m;
-        (m = shipTrackVectorLayer.value) == null || m.setVisible(!1);
+        var h;
+        d.value = !1, (h = shipTrackVectorLayer.value) == null || h.setVisible(!1);
       },
       closeTruckTrack: () => {
-        var m;
-        (m = shipTrackVectorLayer.value) == null || m.setVisible(!1);
+        var h;
+        d.value = !1, (h = shipTrackVectorLayer.value) == null || h.setVisible(!1);
       },
+      resetTrackView,
+      playTrack,
       clearSelectFeature,
       findShip,
-      focusShip: (m, g) => {
-        var h, I;
-        (h = shipsLayer.value) == null || h.setVisible(!1), (I = largeAmountShipsLayer.value) == null || I.setVisible(!1), findShip(m, g);
+      focusShip: (h, y) => {
+        var v, C;
+        (v = shipsLayer.value) == null || v.setVisible(!1), (C = largeAmountShipsLayer.value) == null || C.setVisible(!1), findShip(h, y);
       },
       showTracks,
       removeAllTrackLayer,
       switchFilterItem,
       rerenderShip,
-      switchGreenDot: () => v(!1),
+      switchGreenDot: () => p(!1),
       zoomTruckIcon,
-      renderTruckTrack: (m, g, h) => {
-        renderTrack(m, g, h, LENGTH_UNIT.KM, "truck");
+      renderTruckTrack: (h, y, v) => {
+        d.value = !0, renderTrack(h, y, v, LENGTH_UNIT.KM, "truck");
       },
       renderMarker,
       setMarkerPosition,
       drawPolygonTool
-    }), (m, g) => (openBlock(), createElementBlock("div", {
+    }), (h, y) => (openBlock(), createElementBlock("div", {
       class: "map-page map-container",
       ref_key: "pageRef",
       ref: n
     }, [
-      g[0] || (g[0] = createElementVNode("div", {
+      y[0] || (y[0] = createElementVNode("div", {
         id: "map",
         class: "map"
       }, null, -1)),
       createVNode(ToolPanel, {
-        "vehicle-mode": m.vehicleMode,
-        onSwitchGreenDot: v,
-        onSwitchMapTile: y
-      }, null, 8, ["vehicle-mode"]),
-      createVNode(ScaleLine, {
-        ref_key: "scaleLineControl",
-        ref: a
-      }, null, 512),
-      createVNode(ZoomControl, {
-        ref_key: "zoomControl",
-        ref: r
-      }, null, 512),
-      createVNode(Copyright),
-      createVNode(Fullscreen, { page: n.value }, null, 8, ["page"])
+        "vehicle-mode": h.vehicleMode,
+        "view-mode": h.viewMode,
+        "disable-green-dot": u.value,
+        "show-track-layer": d.value,
+        onSwitchGreenDot: p,
+        onSwitchMapTile: T
+      }, null, 8, ["vehicle-mode", "view-mode", "disable-green-dot", "show-track-layer"]),
+      h.viewMode !== "WxMiniprogram" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+        createVNode(ScaleLine, {
+          ref_key: "scaleLineControl",
+          ref: a
+        }, null, 512),
+        createVNode(ZoomControl, {
+          ref_key: "zoomControl",
+          ref: r
+        }, null, 512),
+        createVNode(Fullscreen, { page: n.value }, null, 8, ["page"])
+      ], 64)) : createCommentVNode("", !0),
+      createVNode(Copyright)
     ], 512));
   }
-}), Map = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-08679314"]]), ZhMap = withInstall(Map);
+}), Map = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-51c9ddf4"]]), ZhMap = withInstall(Map);
 export {
   ZhMap as Z
 };