zhihao-ui 1.2.3 → 1.2.5

package/dist/es/Map-BLQnapy4.js

@@ -0,0 +1,1183 @@
+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);
+import { ref, defineComponent, useModel, watch, resolveComponent, openBlock, createElementBlock, createElementVNode, createVNode, withCtx, Fragment, renderList, unref, createBlock, toDisplayString, createCommentVNode, mergeModels, normalizeClass, nextTick, onMounted } from "vue";
+import { m as getLength, V as VectorSource, n as VectorLayer, S as Style, C as CircleStyle, F as Fill, o as Stroke, D as Draw, O as Overlay, u as unByKey, p as ElOption, q as ScaleLine$1, T as Text, r as Feature, P as Point, s as fromLonLat, d as cloneDeep, G as GeoJSON, W as WebGLPointsLayer, h as hooks, L as LineString, t as transform, 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",
+  // m
+  2: "KM",
+  // km
+  3: "NM"
+  // nm
+}, formatLength = function(e, t) {
+  const n = getLength(e);
+  let a = "";
+  switch (t) {
+    case LENGTH_UNIT.M:
+      a = Math.round(n * 100) / 100 + " m";
+      break;
+    case LENGTH_UNIT.KM:
+      a = Math.round(n / 1e3 * 100) / 100 + " km";
+      break;
+    case LENGTH_UNIT.NM:
+      a = (Math.round(n / 1e3 * 100) / 100 / 1.852).toFixed(2) + " nm";
+      break;
+  }
+  return a;
+}, convertSixHundredThousandToLatLng = function(e, t) {
+  const o = Number(t) / 6e5;
+  return [Number(e) / 6e5, o];
+}, mapInstance = ref(), shipsLayer = ref(), largeAmountShipsLayer = ref();
+ref();
+const trucksLayer = ref(), shipTrackLineFeatures = ref([]), trackLineVectorSource = ref(), shipTrackVectorLayer = ref();
+ref();
+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({
+  __name: "measure",
+  props: {
+    visible: { type: Boolean },
+    visibleModifiers: {}
+  },
+  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({
+      source: c,
+      style: {
+        "fill-color": "rgba(255, 255, 255, 0.2)",
+        "stroke-color": "#ffcc33",
+        "stroke-width": 2,
+        "circle-radius": 7,
+        "circle-fill-color": "#ffcc33"
+      }
+    }), I = function(h) {
+      if (h.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");
+      }), s.value = !0);
+    };
+    let w;
+    const _ = new Style({
+      fill: new Fill({
+        color: "rgba(255, 255, 255, 0.2)"
+      }),
+      stroke: new Stroke({
+        color: "rgba(255,204,51)",
+        lineDash: [10, 10],
+        width: 2
+      }),
+      image: new CircleStyle({
+        radius: 5,
+        stroke: new Stroke({
+          color: "rgba(0, 0, 0, 0.7)"
+        }),
+        fill: new Fill({
+          color: "rgba(255, 255, 255, 0.2)"
+        })
+      })
+    });
+    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);
+    }
+    function g() {
+      var y, M;
+      p(), (y = mapInstance.value) == null || y.addLayer(k), w = new Draw({
+        source: c,
+        type: "LineString",
+        style: function() {
+          return _;
+        }
+      }), (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);
+        });
+      }), 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);
+      });
+    }
+    function f() {
+      var h;
+      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);
+    }
+    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({
+        element: i,
+        offset: [0, -15],
+        positioning: "bottom-center",
+        stopEvent: !1,
+        insertFirst: !1
+      }), (h = mapInstance.value) == null || h.addOverlay(v);
+    }
+    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 = () => {
+      n("close");
+    };
+    return watch(() => a, () => {
+      a && !s.value && (E(), g());
+    }, { deep: !0, immediate: !0 }), t({
+      addInteraction: g,
+      removeInteraction: p
+    }), (h, y) => {
+      const M = 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)),
+          createElementVNode("i", {
+            onClick: P,
+            class: "map-iconfont icon-close"
+          })
+        ]),
+        createElementVNode("div", _hoisted_2$2, [
+          y[2] || (y[2] = createElementVNode("div", { class: "tips" }, "在地图上点击多个点测量距离，距离单位", -1)),
+          createVNode(M, {
+            class: "select-length-unit",
+            modelValue: r.value,
+            "onUpdate:modelValue": y[0] || (y[0] = (T) => r.value = T)
+          }, {
+            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]
+              }, 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", {
+            class: "measure-history-item",
+            key: b
+          }, [
+            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)
+            ]),
+            createElementVNode("div", {
+              class: "delete-button",
+              onClick: (N) => V(b)
+            }, y[4] || (y[4] = [
+              createElementVNode("i", { class: "map-iconfont icon-delete" }, 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({
+  __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), c = () => {
+      s.value = s.value === BaseMapType.vector ? BaseMapType.satellite : BaseMapType.vector, o("switchMapTile", s.value);
+    }, d = () => {
+      var m, i;
+      n.value ? (m = a.value) == null || m.removeInteraction() : (i = a.value) == null || i.addInteraction(), n.value = !n.value;
+    }, u = () => {
+      var m;
+      (m = a.value) == null || m.removeInteraction(), n.value = !1;
+    };
+    return (m, i) => (openBlock(), createElementBlock(Fragment, null, [
+      createElementVNode("div", _hoisted_1$3, [
+        m.vehicleMode === "ship" ? (openBlock(), createElementBlock("div", {
+          key: 0,
+          class: normalizeClass(["switch-btn", `${n.value && "active"}`]),
+          onClick: d
+        }, i[1] || (i[1] = [
+          createElementVNode("i", { class: "map-iconfont icon-a-Frame1" }, 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("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
+        }, i[3] || (i[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": i[0] || (i[0] = (v) => n.value = v),
+          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({
+  __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 = 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);
+    };
+    return (a, r) => (openBlock(), createElementBlock("div", _hoisted_1$1, [
+      createElementVNode("div", {
+        onClick: o,
+        class: "button big-button"
+      }, "+"),
+      createElementVNode("div", {
+        onClick: n,
+        class: "button small-button"
+      }, "-")
+    ]));
+  }
+}), ZoomControl = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["__scopeId", "data-v-fc659cee"]]), 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}`,
+  // 矢量注记
+  tiandituTileMark: `http://t0.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&TILEMATRIXSET=w&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=${tiandituKey}`,
+  // 影像底图
+  tiandituImgTile: `http://t0.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&TILEMATRIXSET=w&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=${tiandituKey}`,
+  // 影像注记
+  tiandituImgTileMark: `http://t0.tianditu.gov.cn/cia_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&TILEMATRIXSET=w&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=${tiandituKey}`,
+  // 绿点图
+  greenTile: `${CDN_URL}/map/tile/{z}/{x}/{y}.png`
+}, mapZoom = {
+  // 地图默认层级
+  default: 6,
+  // 地图缩放最小层级
+  min: 3,
+  // 地图缩放最大层级
+  max: 18,
+  // 船舶绿点图最大显示层级
+  shipGreenDotMax: 11,
+  // 船形图标最小渲染层级
+  shipModelMin: 16,
+  // 船形图标最大渲染层级
+  shipModelMax: 18
+}, mapDefaultCenter = [114.84, 30.52], projection = {
+  // 经纬度 源数据 地理坐标 WGS84
+  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-0b80cd67"]]), _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-quanping1"} `)
+      }, null, 2)
+    ]));
+  }
+}), Fullscreen = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-adf8fd0c"]]), equatorialCircumference = 2003750834e-2;
+function lonLatToMercator(e) {
+  const t = e[0] * equatorialCircumference / 180;
+  let o = Math.log(Math.tan((90 + e[1]) * Math.PI / 360)) / (Math.PI / 180);
+  return o = o * equatorialCircumference / 180, [t, o];
+}
+function getIconFont(unicode = "") {
+  return unicode.indexOf("&") !== -1 && (unicode = unicode.replace("&", "&")), unicode.indexOf("&amp") !== -1 && (unicode = unicode.replace("&amp", "&")), eval('("' + unicode.replace("&#x", "\\u").replace(";", "") + '")');
+}
+const multiplyPixelRatio = (e) => {
+  const t = window.devicePixelRatio || 1;
+  return e.map((o) => o.map((n) => n * t));
+}, adjustBounds = (e, t) => t.length === 2 ? [e[0] - t[0], e[1] - t[1], e[2] + t[0], e[3] + t[1]] : [e[0] + t[0], e[1] + t[1], e[2] + t[2], e[3] + t[3]], isOverlapping = (e, t) => e[0] <= t[2] && e[2] >= t[0] && e[1] <= t[3] && e[3] >= t[1], getIconStyle = (e) => new Style({
+  text: new Text({
+    font: "Normal 14px map-iconfont",
+    text: getIconFont(e),
+    fill: new Fill({ color: "#fff" }),
+    offsetY: -14
+  }),
+  zIndex: 100
+});
+function convertToRadians(e) {
+  if (!e)
+    throw new Error("coord is required");
+  if (!Array.isArray(e)) {
+    if (e.type === "Feature" && e.geometry !== null && e.geometry.type === "Point")
+      return e.geometry.coordinates;
+    if (e.type === "Point")
+      return e.coordinates;
+  }
+  if (Array.isArray(e) && e.length >= 2 && !Array.isArray(e[0]) && !Array.isArray(e[1]))
+    return e;
+  throw new Error("coord must be GeoJSON Point or an Array of numbers");
+}
+function createFeature(e, t, o = {}) {
+  const n = {
+    type: "Feature"
+  };
+  return o.id !== void 0 && (n.id = o.id), o.bbox && (n.bbox = o.bbox), n.properties = {}, n.geometry = e, n;
+}
+function createPoint(e, t, o) {
+  return createFeature({
+    type: "Point",
+    coordinates: e
+  }, t, o);
+}
+function calculateAngle(e, t, o) {
+  const n = convertToRadians(e), a = convertToRadians(t), r = n[0] % 360 * (Math.PI / 180), l = a[0] % 360 * (Math.PI / 180), s = n[1] % 360 * (Math.PI / 180), c = a[1] % 360 * (Math.PI / 180), d = Math.sin(l - r) * Math.cos(c), u = Math.cos(s) * Math.sin(c) - Math.sin(s) * Math.cos(c) * Math.cos(l - r);
+  return 180 * Math.atan2(d, u) % (2 * Math.PI) / Math.PI;
+}
+const getAngle = (e, t) => {
+  let o = calculateAngle(createPoint(e), createPoint(t));
+  return o = o < 0 ? 360 + o : o, o % 360 * Math.PI / 180;
+}, labelAlpha = 0.8, labelFont = "500 12px Arial", labelOutSize = 2, labelHeight = 10, fillRectRadius = (e, t, o, n, a, r, l = 4) => {
+  e.beginPath(), e.moveTo(t + l, o), e.arcTo(t + n, o, t + n, o + l, l), e.arcTo(t + n, o + a, t + n - l, o + a, l), e.arcTo(t, o + a, t, o + a - l, l), e.arcTo(t, o, t + l, o, l), e.closePath(), e.fillStyle = r, e.fill();
+}, getPixelFromCoordinate = (e) => {
+  if (!e || e.length === 0)
+    throw new Error("Points array is empty or invalid.");
+  let t = 1 / 0, o = 1 / 0, n = -1 / 0, a = -1 / 0;
+  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];
+}, rotateShapeModel = (e, t) => {
+  const [o, n] = e[0], 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];
+  });
+}, getTopLeftPoint = (e) => [e[0], e[3]], getBottomLeftPoint = (e) => [e[2], e[3]], getBottomRightPoint = (e) => [e[2], e[1]], getTopRighttPoint = (e) => [e[0], e[1]];
+function calculateBounds(e, t, o, n, a) {
+  let r, l, s, c, d = e[0], u = e[1];
+  switch (t) {
+    case 0:
+      r = d + a, l = r + o, c = u - a, s = c - n;
+      break;
+    case 1:
+      r = d + a, l = r + o, c = u + n / 2, s = c - n;
+      break;
+    case 2:
+      r = d + a, l = r + o, c = u + a + n, s = c - n;
+      break;
+    case 3:
+      r = d - o / 2, l = r + o, c = u + a + n, s = c - n;
+      break;
+    case 4:
+      l = d, r = l - o, c = u + a + n, s = c - n;
+      break;
+    case 5:
+      l = d - a, r = l - o, c = u + n / 2, s = c - n;
+      break;
+    case 6:
+      l = d, r = l - o, c = u - a, s = c - n;
+      break;
+    case 7:
+      r = d - o / 2, l = r + o, c = u - a, s = c - n;
+  }
+  if (!(!r || !s || !l || !c))
+    return [Math.min(r, l), Math.min(s, c), Math.max(r, l), Math.max(s, c) + 1];
+}
+function calculateAnchorPoint(e, t, o = 70, n = 20, a = 20) {
+  let r = [0, 0];
+  switch (t) {
+    case 0:
+      r[0] = e[0] + a, r[1] = e[1] - a - n / 2;
+      break;
+    case 1:
+      r[0] = e[0] + a, r[1] = e[1];
+      break;
+    case 2:
+      r[0] = e[0] + a, r[1] = e[1] + a + n / 2;
+      break;
+    case 3:
+      r[0] = e[0], r[1] = e[1] + a + n / 4;
+      break;
+    case 4:
+      r[0] = Math.max(e[0] - a, e[0] - o / 2), r[1] = e[1] + a + n / 4;
+      break;
+    case 5:
+      r[0] = e[0] - a, r[1] = e[1];
+      break;
+    case 6:
+      r[0] = Math.max(e[0] - a, e[0] - o / 2), r[1] = e[1] - a - n / 4;
+      break;
+    case 7:
+      r[0] = e[0], r[1] = e[1] - a - n / 4;
+  }
+  return r;
+}
+function drawLabelBody(e, t, o) {
+  if (!e) return;
+  const {
+    font: n,
+    labelOutSize: a = 2,
+    labelHeight: r,
+    center: l,
+    text: s,
+    lineLength: c = 20
+  } = o;
+  e.save(), n && (e.font = n);
+  let d = e.measureText(s).width + 2 * a;
+  e.restore();
+  let u, m = -1, i = r + 3 * a;
+  if (m = 0, u = calculateBounds(l, m, d, i, c), u && m > -1) {
+    let v = getBottomLeftPoint(u), k = getTopRighttPoint(u);
+    return {
+      center: l,
+      x: calculateAnchorPoint(l, m, d, i, c),
+      l: k,
+      r: v,
+      bounds: u,
+      position: m
+    };
+  }
+  return null;
+}
+const drawText = (e, t, o, n, a, r, l) => {
+  if (!e) return;
+  e.save();
+  let [s, c] = t;
+  s += labelOutSize, e.font = labelFont, e.fillStyle = n, e.fillText(o, s, c), e.restore();
+}, drawPolygon = (e, t, o, n, a, r = null, l, s, c, d) => {
+  if (t && e) {
+    e.save(), e.beginPath(), l && l !== 0 && s == null && e.rotate(l), r && e.translate(r[0], r[1]), l && (s != null && s.length) && e.rotate(l), c && e.scale(c, c), e.moveTo(t[0][0], t[0][1]);
+    for (let u = 1; u < t.length; u++)
+      e.lineTo(t[u][0], t[u][1]);
+    a && e.closePath(), o && (e.strokeStyle = o, e.stroke()), n && a && (d && (e.globalAlpha = d), e.fillStyle = n, e.fill()), e.restore();
+  }
+}, drawLabel = (e, t, o, n, a, r, l, s) => {
+  if (t && o) {
+    let c = { font: labelFont, labelOutSize, labelHeight, center: t, text: o }, d = drawLabelBody(e, labels.value, c);
+    if (d) {
+      const { x: u, bounds: m, l: i } = d, 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);
+    }
+  }
+  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 [c, d] = a;
+    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 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);
+      });
+    }
+    const g = dotImage;
+    l.drawImage(g, c + i / 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))
+      });
+      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 = [];
+};
+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([
+  [0, -8],
+  [5, 8],
+  [-5, 8]
+]), shipShapeModel = multiplyPixelRatio([
+  [0, -4.545],
+  [-0.56, -3.909],
+  [-1, -2.727],
+  [-1, 3.636],
+  [-0.8, 4.545],
+  [0.8, 4.545],
+  [1, 3.636],
+  [1, -2.727],
+  [0.56, -3.909],
+  [0, -4.545]
+]), shipDirectPath = {
+  left: {
+    0: [
+      [0, 0],
+      [0, -8],
+      [-4, -8]
+    ],
+    1: [
+      [0, 0],
+      [0, -16],
+      [-6, -16]
+    ],
+    2: [
+      [0, 0],
+      [0, -24],
+      [-8, -24]
+    ]
+  },
+  right: {
+    0: [
+      [0, 0],
+      [0, -8],
+      [-4, -8]
+    ],
+    1: [
+      [0, 0],
+      [0, -16],
+      [-6, -16]
+    ],
+    2: [
+      [0, 0],
+      [0, -24],
+      [-8, -24]
+    ]
+  },
+  front: {
+    0: [
+      [0, 0],
+      [0, -8]
+    ],
+    1: [
+      [0, 0],
+      [0, -16]
+    ],
+    2: [
+      [0, 0],
+      [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");
+    try {
+      const l = drawShipBody(a, r, o);
+      l && drawHeading(a, r, l), drawShipLabel(a, r, o);
+    } catch {
+      return !1;
+    }
+  }
+}), drawShipBody = (e, t, o) => {
+  if (!mapInstance.value) return;
+  const n = mapInstance.value.getView().getZoom();
+  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) => {
+      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++)
+    e.lineTo(a[d][0], a[d][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 [c, d] = s;
+      return [c + n, d + 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);
+    }
+    e.moveTo(n, a);
+    for (let s = 1; s < l.length; s++) {
+      let [c, d] = l[s];
+      e.lineTo(c, d);
+    }
+    e.strokeStyle = "#000", e.lineWidth = 1, e.stroke(), e.restore();
+  }
+}, drawSelectBounds = (e, t) => {
+  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();
+}, drawShipLabel = (e, t, o) => {
+  const [n, a] = o, r = n - 0, l = a - 0, s = t.name;
+  drawLabel(e, [r, l], s, "#fff", "#000", "#fff");
+}, 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;
+}, 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]) {
+        r = shipDirectPath[a][l];
+        break;
+      }
+    }
+  return r;
+};
+let shipsMarkerList = [], shipsVectorSource, largeAmountShipsSource;
+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));
+}, renderLargeAmountShips = (e) => {
+  if (!mapInstance.value) return;
+  const t = e.map((o) => ({
+    type: "Feature",
+    geometry: {
+      type: "Point",
+      coordinates: [o.lon, o.lat]
+    },
+    properties: o
+  }));
+  return largeAmountShipsSource == null || largeAmountShipsSource.clear(), largeAmountShipsSource = new VectorSource({
+    features: new GeoJSON().readFeatures({
+      type: "FeatureCollection",
+      features: t
+    }, {
+      featureProjection: projection.mercator
+    })
+  }), largeAmountShipsLayer.value = new WebGLPointsLayer({
+    source: largeAmountShipsSource,
+    style: {
+      "shape-points": 3,
+      "shape-radius": 9,
+      "shape-fill-color": "#04C900",
+      "shape-rotate-with-view": !1,
+      "shape-rotation": [
+        "get",
+        "cog",
+        // 获取 'cog' 属性值
+        0
+        // 如果 'cog' 属性不存在，使用默认值 0
+      ]
+    }
+  }), 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)
+      ), shipsMarkerList.push({
+        ship: t,
+        lonlat: o,
+        feature: n
+      });
+    }), shipsVectorSource = new VectorSource({
+      features: shipsMarkerList.map((t) => t.feature)
+    }), shipsLayer.value = new VectorLayer({
+      source: shipsVectorSource
+    }), mapInstance.value.addLayer(shipsLayer.value), shipsLayer.value;
+}, 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;
+  });
+}, stopIcon = "&#xe6e2;", stopColor = "#E31818", slowIcon = "&#xe703;", slowColor = "#1890FF", dropletsIcon = "&#xe6d2", trackList$1 = ref([]), renderTrackLine = (e, t, o) => {
+  var r;
+  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);
+  if (a.length >= 2) {
+    let l = new LineString(a);
+    const s = new Feature({ geometry: l });
+    s.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({
+      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);
+  }
+}, 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 c = mapInstance.value.getPixelFromCoordinate(t[s].centerPoint);
+    if (c) {
+      let d = c.concat(c);
+      d = adjustBounds(d, [20, 20]);
+      let u = mapInstance.value.getView().getZoom();
+      if (!u) return;
+      if (u > 15) {
+        let i = o[u] || o.default;
+        d = adjustBounds(d, [i, i]);
+      }
+      let m = !0;
+      if (t[s].state !== "0") {
+        for (let i = 0; i < n.length; i++)
+          if (isOverlapping(d, n[i].bounds)) {
+            m = !1;
+            break;
+          }
+      }
+      m && (t[s].bounds = d, n.push(t[s]));
+    }
+  }
+  const r = getIconStyle(stopIcon), l = getIconStyle(slowIcon);
+  n.forEach((s) => {
+    var u, m;
+    let c = new Feature({
+      geometry: new Point(s.centerPoint)
+    });
+    c.set("type", "track_point"), c.set("data", s), c.setStyle(
+      new Style({
+        image: new CircleStyle({
+          fill: new Fill({ color: e }),
+          stroke: new Stroke({ color: "#fff", width: 2 }),
+          radius: 3
+        })
+      })
+    ), trackLineVectorSource.value.addFeature(c);
+    const d = new Feature({
+      geometry: new Point(fromLonLat(s.center))
+    });
+    if (d.set("type", "track_label"), d.setStyle(
+      setTrackLabelStyle(s, e)
+    ), console.log("trackLabelFeature"), trackLineVectorSource.value.addFeature(d), typeof s == "object" && s.hasOwnProperty("state")) {
+      let i = new Feature({
+        geometry: new Point(s.centerPoint)
+      });
+      i.set("type", "track_icon");
+      let v = 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);
+    }
+  }), 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)], c = trackList$1.value[Math.ceil(l)];
+      if (s && c) {
+        let [d, u] = s.centerPoint, [m, i] = c.centerPoint;
+        a = [(d + m) / 2, (u + i) / 2];
+      }
+    }
+    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 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 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;
+    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") => {
+  var u;
+  if (removeAllTrackLayer(), (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;
+  }
+  let r = {};
+  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(
+    (m) => transform([m.lon, m.lat], projection.data, projection.mercator)
+  ), 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);
+    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();
+}, 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)
+    try {
+      t.fit(o);
+    } catch (r) {
+      console.log(r);
+    }
+}, _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "Map",
+  props: {
+    zoom: {},
+    center: {},
+    vehicleMode: {}
+  },
+  emits: ["zoomChanged", "extentChanged"],
+  setup(e, { expose: t, emit: o }) {
+    const n = ref(null), a = ref(null), r = ref(null), l = o, s = e, c = ref(s.zoom || mapZoom.default), d = ref(!1), u = ref(!0), m = ref(!0);
+    let i;
+    ((p) => {
+      p[p.tiandituTile = new TileLayer({ source: new XYZ({ url: baseMap.tiandituTile }) })] = "tiandituTile", p[p.tiandituTileMark = new TileLayer({ source: new XYZ({ url: baseMap.tiandituTileMark }) })] = "tiandituTileMark", p[p.tiandituImgTile = new TileLayer({ source: new XYZ({ url: baseMap.tiandituImgTile }), visible: !1 })] = "tiandituImgTile", p[p.tiandituImgTileMark = new TileLayer({ source: new XYZ({ url: baseMap.tiandituImgTileMark }), visible: !1 })] = "tiandituImgTileMark", p[p.greenMark = new TileLayer({ source: new XYZ({ url: baseMap.greenTile }) })] = "greenMark";
+    })(i || (i = {}));
+    const v = () => {
+      var g;
+      const p = {
+        projection: projection.mercator,
+        // 地图投影坐标系
+        zoom: s.zoom || mapZoom.default,
+        // 地图缩放级别（打开页面时默认级别）
+        minZoom: mapZoom.min,
+        // 地图缩放最小级别
+        maxZoom: mapZoom.max,
+        // 地图缩放最大级别
+        center: lonLatToMercator(s.center || mapDefaultCenter),
+        // 深圳坐标
+        constrainResolution: !0,
+        multiWorld: !0
+      };
+      mapInstance.value = new Map$1({
+        target: "map",
+        // 对应页面里 id 为 map 的元素
+        layers: [
+          // 图层
+          i.tiandituTile,
+          i.tiandituTileMark,
+          i.tiandituImgTile,
+          i.tiandituImgTileMark,
+          i.greenMark
+        ],
+        view: new View(p)
+      }), a.value.setScaleLine(), console.log(mapInstance.value.getLayers().getArray()), (g = mapInstance.value) == null || g.on("moveend", E);
+    };
+    onMounted(() => {
+      v();
+    });
+    const k = (p) => {
+      var g;
+      (g = mapInstance.value) == null || g.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) => {
+        (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);
+      const f = p.calculateExtent(mapInstance.value.getSize());
+      f && g && _(f, g);
+    }, w = (p) => {
+      var S;
+      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 });
+    };
+    return t({
+      mapInstance,
+      initMap: v,
+      renderTrucksMarker,
+      renderShips,
+      renderTrack,
+      closeTrack: () => {
+        var p;
+        (p = shipTrackVectorLayer.value) == null || p.setVisible(!1);
+      },
+      findShip
+    }), (p, g) => (openBlock(), createElementBlock("div", {
+      class: "map-page map-container",
+      ref_key: "pageRef",
+      ref: n
+    }, [
+      g[0] || (g[0] = createElementVNode("div", {
+        id: "map",
+        class: "map"
+      }, null, -1)),
+      createVNode(ToolPanel, {
+        "vehicle-mode": p.vehicleMode,
+        onSwitchGreenDot: k,
+        onSwitchMapTile: I
+      }, null, 8, ["vehicle-mode"]),
+      createVNode(ScaleLine, {
+        ref_key: "scaleLineControl",
+        ref: a
+      }, null, 512),
+      createVNode(ZoomControl, {
+        ref_key: "zoomControl",
+        ref: r,
+        map: unref(mapInstance)
+      }, null, 8, ["map"]),
+      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))
+    ], 512));
+  }
+}), Map = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-e4db8f6e"]]), ZhMap = withInstall(Map);
+export {
+  ZhMap as Z
+};