@cmeslib/components 0.1.14 → 0.3.0-beta.0

package/es/_virtual/_plugin-vue_export-helper.mjs

@@ -0,0 +1,9 @@
+var _export_sfc = (sfc, props) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props) {
+    target[key] = val;
+  }
+  return target;
+};
+
+export { _export_sfc as default };

package/es/components/demo/index.mjs

@@ -1,5 +1,3 @@
-import './src/demo-button.vue.mjs';
-import './src/demo-button-setup-tsx.vue.mjs';
-export { default as DemoButtonTsx } from './src/demo-button-tsx.mjs';
-export { default as DemoButton } from './src/demo-button.vue2.mjs';
+export { default as DemoButton } from './src/demo-button.vue.mjs';
 export { default as DemoButtonSetupTsx } from './src/demo-button-setup-tsx.vue2.mjs';
+export { default as DemoButtonTsx } from './src/demo-button-tsx.mjs';

package/es/components/demo/src/demo-button-setup-tsx.vue.mjs

@@ -1,5 +1,5 @@
-import script from './demo-button-setup-tsx.vue2.mjs';
+import _sfc_main from './demo-button-setup-tsx.vue2.mjs';
 
-script.__file = "packages/cmeslib-components/components/demo/src/demo-button-setup-tsx.vue";
 
-export { script as default };
+
+export { _sfc_main as default };

package/es/components/demo/src/demo-button-setup-tsx.vue2.mjs

@@ -1,8 +1,8 @@
 import { jsxs, jsx } from 'vue/jsx-runtime';
-import { defineComponent, ref, createElementBlock, openBlock, createVNode } from 'vue';
+import { defineComponent, ref, openBlock, createElementBlock, createVNode } from 'vue';
 import { ElButton } from 'element-plus';
 
-var script = /* @__PURE__ */ defineComponent({
+var _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "demo-button-setup-tsx",
   setup(__props) {
     const count = ref(0);
@@ -21,4 +21,4 @@ var script = /* @__PURE__ */ defineComponent({
   }
 });
 
-export { script as default };
+export { _sfc_main as default };

package/es/components/demo/src/demo-button.vue.mjs

@@ -1,6 +1,6 @@
-import script from './demo-button.vue2.mjs';
+import _sfc_main from './demo-button.vue2.mjs';
+import _export_sfc from '../../../_virtual/_plugin-vue_export-helper.mjs';
 
-script.__scopeId = "data-v-45226689";
-script.__file = "packages/cmeslib-components/components/demo/src/demo-button.vue";
+var demoButton = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-eab32df7"]]);
 
-export { script as default };
+export { demoButton as default };

package/es/components/demo/src/demo-button.vue2.mjs

@@ -1,8 +1,8 @@
-import { defineComponent, onMounted, createBlock, openBlock, unref, withCtx, createTextVNode } from 'vue';
+import { defineComponent, onMounted, openBlock, createBlock, unref, withCtx, createTextVNode } from 'vue';
 import { ElButton } from 'element-plus';
-import { initHiFleet } from '@cmeslib/utils';
+import { loadHiFleetResources } from '@cmeslib/utils';
 
-var script = /* @__PURE__ */ defineComponent({
+var _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "demo-button",
   props: {
     type: { type: String, required: false }
@@ -12,7 +12,7 @@ var script = /* @__PURE__ */ defineComponent({
       console.log("Button clicked");
     };
     onMounted(() => {
-      initHiFleet("demo-button", 34);
+      loadHiFleetResources();
     });
     return (_ctx, _cache) => {
       return openBlock(), createBlock(unref(ElButton), {
@@ -34,4 +34,4 @@ var script = /* @__PURE__ */ defineComponent({
   }
 });
 
-export { script as default };
+export { _sfc_main as default };

package/es/components/hifleet/index.d.ts

@@ -0,0 +1,4 @@
+import HiFleetMap from './src/index.vue';
+import type { HiFleetMapInitResponse } from './src/types';
+export { HiFleetMap };
+export type { HiFleetMapInitResponse };

package/es/components/hifleet/index.mjs

@@ -0,0 +1 @@
+export { default as HiFleetMap } from './src/index.vue.mjs';

package/es/components/hifleet/src/helper.d.ts

@@ -0,0 +1,32 @@
+import type { LayerGroup, LatLngExpression } from 'leaflet';
+import { LineOptions, MapObj } from './types';
+export declare function init(mapId: string, defaultMapType?: string): MapObj;
+export declare const mapType: import("vue").Ref<string, string>;
+export declare function changMapType(type: string, map: any, app: any): string;
+export declare function mathLngFn(lnglng: number, multiple: number): any;
+/**
+ * @param points [[维度，经度]]
+ * @param options // 更多配置详阅 https://leafletjs.com/reference.html#polyline
+ * @param layer 图层
+ */
+export declare function displayPredictLine(points: LatLngExpression[], layer: LayerGroup, options?: LineOptions): void;
+/**
+ * @param points [[维度，经度]]
+ * @param options // 更多配置详阅 https://leafletjs.com/reference.html#polyline
+ * @param layer 图层
+ */
+export declare function displayRealLine(points: LatLngExpression[], layer: LayerGroup, options?: LineOptions): void;
+/**
+ * @param points [[经度，维度]]
+ * @param type [经，纬]字段 key值
+ */
+export declare function objectDayLineTransform(points: any, type: any): any[];
+/**
+ * @param points [[经度，维度]]
+ */
+export declare function dayLineTransform(points: any): any[];
+export declare function convertLines(arg: any): any[];
+/**
+ * 设置图标
+ */
+export declare function setPointIcon(type: string): import("leaflet").Icon<import("leaflet").IconOptions>;

package/es/components/hifleet/src/helper.mjs

@@ -0,0 +1,261 @@
+import { ref, nextTick } from 'vue';
+
+function init(mapId, defaultMapType = "normal") {
+  const app = window.hifleet.create({ el: mapId });
+  const map = app.getMap();
+  const featureLayer = window.L.layerGroup();
+  const solidLineLayer = window.L.layerGroup();
+  const dottedLineLayer = window.L.layerGroup();
+  const lineLayer = window.L.layerGroup();
+  const tooltipLayer = window.L.layerGroup();
+  const markerLayer = window.L.layerGroup();
+  const mapEle = document.getElementsByClassName("leaflet-control-attribution");
+  for (let i = 0; i < mapEle.length; i++) {
+    const item = mapEle[i];
+    item.style.display = "none";
+  }
+  if (defaultMapType === "satellite") {
+    changMapType("satellite", map, app);
+  } else {
+    changMapType("normal", map, app);
+    app.setSeaMapMode();
+  }
+  featureLayer.addTo(map);
+  solidLineLayer.addTo(map);
+  dottedLineLayer.addTo(map);
+  lineLayer.addTo(map);
+  tooltipLayer.addTo(map);
+  markerLayer.addTo(map);
+  const EVENT = app.EVENT;
+  const latlngInfoObj = ref();
+  latlngInfoObj.value = {
+    lng: "",
+    lat: "",
+    lngDegree: "",
+    latDegree: ""
+  };
+  map.on("mousemove", (result) => {
+    const lnglng = +result.latlng.lng;
+    const latlng = +result.latlng.lat;
+    const multiple = Math.abs(+(lnglng / 360 + "").split(".")[0]);
+    const lng = mathLngFn(lnglng, multiple);
+    const lngDegreeArr = (lng + "").split(".");
+    const lngX = Math.abs(+lngDegreeArr[0]);
+    const lngY = ((Math.abs(lng) - lngX) * 60).toFixed(3);
+    const lngDegree = lngX + "\xB0" + lngY + " " + (lng >= 0 ? "E" : "W");
+    const latDegreeArr = (latlng + "").split(".");
+    const latX = Math.abs(+latDegreeArr[0]);
+    const latY = ((Math.abs(latlng) - latX) * 60).toFixed(3);
+    const latDegree = latX + "\xB0" + latY + " " + (latlng >= 0 ? "N" : "S");
+    latlngInfoObj.value = {
+      lng: lng.toFixed(5),
+      lat: latlng.toFixed(5),
+      lngDegree,
+      latDegree
+    };
+  });
+  const mapObj = {
+    mapInfo: {
+      // 地图对象
+      app,
+      map,
+      EVENT
+    },
+    latlngInfoObj,
+    // 经纬度信息
+    layerGroup: {
+      // 默认建图层
+      featureLayer,
+      solidLineLayer,
+      dottedLineLayer,
+      lineLayer,
+      tooltipLayer,
+      markerLayer
+    }
+  };
+  return mapObj;
+}
+let globalLayer;
+const mapType = ref("normal");
+function changMapType(type = mapType.value, map, app) {
+  switch (type) {
+    case "normal":
+      if (globalLayer) {
+        map.removeLayer(globalLayer);
+        globalLayer = null;
+      }
+      app.openMap();
+      app.changeMap({ lang: "cn", key: "global" });
+      break;
+    case "satellite":
+      if (globalLayer) {
+        map.removeLayer(globalLayer);
+        globalLayer = null;
+      }
+      app.openMap();
+      app.changeMap({ lang: "cn", key: "satellite" });
+      break;
+    case "global":
+      app.closeMap();
+      globalLayer = window.L.tileLayer(
+        "https://api.hifleet.com/nauticalmap/en/token?usertoken=uhzt76EZeisfeaj9mfjRe7wUhvQbokxgEYkBlfnXlR53HDfWXhpBuiIp7ZwY00S8&x={x}&y={y}&z={z}"
+      ).addTo(map);
+      break;
+  }
+  nextTick(() => {
+    if (map) {
+      map.invalidateSize(true);
+    }
+  });
+  mapType.value = type;
+  return type;
+}
+function mathLngFn(lnglng, multiple) {
+  let lng;
+  if (lnglng >= 0) {
+    lng = Math.abs(lnglng - 360 * multiple) < 180 ? lnglng - 360 * multiple : lnglng - 360 * multiple - 360;
+  } else {
+    lng = Math.abs(lnglng + 360 * multiple) < 180 ? lnglng + 360 * multiple : lnglng + 360 * multiple + 360;
+  }
+  return lng;
+}
+function displayPredictLine(points, layer, options = { weight: 2, color: "#F95E5A" }) {
+  const predictFeature = window.L.polyline(points, {
+    // snakingPause: 200,
+    color: options.color,
+    // 线的颜色
+    weight: options.weight,
+    // 线的宽度
+    dashArray: [10, 10]
+    // 虚线间隔的设置
+    // zIndex: 9
+  }).addTo(layer);
+  window.L.polylineDecorator(predictFeature, {
+    patterns: [
+      // defines a pattern of 10px-wide dashes, repeated every 20px on the line
+      {
+        offset: 30,
+        repeat: 100,
+        symbol: window.L.Symbol.arrowHead({
+          pixelSize: 8,
+          polygon: false,
+          pathOptions: { color: "#F95E5A", weight: 2, stroke: true }
+        })
+      }
+    ]
+  }).addTo(layer);
+}
+function displayRealLine(points, layer, options = { weight: 2, color: "#F95E5A" }) {
+  const realFeature = window.L.polyline(points, {
+    // snakingPause: 200,
+    color: options.color,
+    // 线的颜色
+    weight: options.weight
+    // 线的宽度
+    // zIndex: 9
+  }).addTo(layer);
+  window.L.polylineDecorator(realFeature, {
+    patterns: [
+      // defines a pattern of 10px-wide dashes, repeated every 20px on the line
+      {
+        offset: 30,
+        repeat: 100,
+        symbol: window.L.Symbol.arrowHead({
+          pixelSize: 8,
+          polygon: false,
+          pathOptions: { color: "#F95E5A", weight: 2, stroke: true }
+        })
+      }
+    ]
+  }).addTo(layer);
+}
+function objectDayLineTransform(points, type) {
+  if (!type || !type.length) {
+    return [];
+  }
+  const result = [];
+  let iscrossdaylineleft = false;
+  let iscrossdaylineright = false;
+  for (let i = 0; i < points.length; i++) {
+    const firstcoor = [points[i][type[1]], points[i][type[0]]];
+    let subFCoords = {};
+    if (iscrossdaylineleft) {
+      subFCoords = { ...points[i], [type[0]]: firstcoor[1] + 360, [type[1]]: firstcoor[0] };
+    } else if (iscrossdaylineright) {
+      subFCoords = { ...points[i], [type[0]]: firstcoor[1] - 360, [type[1]]: firstcoor[0] };
+    } else {
+      subFCoords = { ...points[i] };
+    }
+    result.push(subFCoords);
+    if (i < points.length - 1) {
+      const secondcoor = [points[i + 1][type[1]], points[i + 1][type[0]]];
+      const diff = Math.abs(firstcoor[1] - secondcoor[1]);
+      if (diff > 240) {
+        if (firstcoor[1] > 0) {
+          if (iscrossdaylineright) {
+            iscrossdaylineright = false;
+          } else iscrossdaylineleft = true;
+        } else {
+          if (iscrossdaylineleft) {
+            iscrossdaylineleft = false;
+          } else {
+            iscrossdaylineright = true;
+          }
+        }
+      }
+    }
+  }
+  return result;
+}
+function dayLineTransform(points) {
+  const result = [];
+  let iscrossdaylineleft = false;
+  let iscrossdaylineright = false;
+  for (let i = 0; i < points.length; i++) {
+    const firstcoor = [points[i][1], points[i][0]];
+    let subFCoords = [];
+    if (iscrossdaylineleft) {
+      subFCoords = [firstcoor[1] + 360, firstcoor[0]];
+    } else if (iscrossdaylineright) {
+      subFCoords = [firstcoor[1] - 360, firstcoor[0]];
+    } else {
+      subFCoords = [firstcoor[1], firstcoor[0]];
+    }
+    result.push(subFCoords);
+    if (i < points.length - 1) {
+      const secondcoor = [points[i + 1][1], points[i + 1][0]];
+      const diff = Math.abs(firstcoor[1] - secondcoor[1]);
+      if (diff > 240) {
+        if (firstcoor[1] > 0) {
+          if (iscrossdaylineright) {
+            iscrossdaylineright = false;
+          } else iscrossdaylineleft = true;
+        } else {
+          if (iscrossdaylineleft) {
+            iscrossdaylineleft = false;
+          } else {
+            iscrossdaylineright = true;
+          }
+        }
+      }
+    }
+  }
+  return result;
+}
+function convertLines(arg) {
+  const arr = [];
+  arg.map((item) => {
+    const _arr = [item[1], item[0]];
+    arr.push(_arr);
+  });
+  return arr;
+}
+function setPointIcon(type) {
+  return window.L.icon({
+    iconUrl: type === "ship" || type === "repair" ? "./img/" + type + ".png" : "./img/" + type + ".svg",
+    iconSize: [30, 30],
+    iconAnchor: [15, 15]
+  });
+}
+
+export { changMapType, convertLines, dayLineTransform, displayPredictLine, displayRealLine, init, mapType, mathLngFn, objectDayLineTransform, setPointIcon };

package/es/components/hifleet/src/index.vue.d.ts

@@ -0,0 +1,37 @@
+import type { HiFleetMapInitResponse } from './types';
+declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    mapId: {
+        type: StringConstructor;
+        required: true;
+    };
+    height: {
+        type: StringConstructor;
+        default: string;
+    };
+    width: {
+        type: StringConstructor;
+        default: string;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    init: (obj: HiFleetMapInitResponse) => any;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    mapId: {
+        type: StringConstructor;
+        required: true;
+    };
+    height: {
+        type: StringConstructor;
+        default: string;
+    };
+    width: {
+        type: StringConstructor;
+        default: string;
+    };
+}>> & Readonly<{
+    onInit?: (obj: HiFleetMapInitResponse) => any;
+}>, {
+    height: string;
+    width: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/es/components/hifleet/src/index.vue.mjs

@@ -0,0 +1,6 @@
+import _sfc_main from './index.vue2.mjs';
+import _export_sfc from '../../../_virtual/_plugin-vue_export-helper.mjs';
+
+var index = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-0b224a81"]]);
+
+export { index as default };

package/es/components/hifleet/src/index.vue2.mjs

@@ -0,0 +1,123 @@
+import { defineComponent, ref, onMounted, resolveDirective, withDirectives, openBlock, createElementBlock, normalizeStyle, createElementVNode, Fragment, renderList, unref, toDisplayString } from 'vue';
+import { loadHiFleetResources } from '@cmeslib/utils';
+import { init, changMapType, mapType } from './helper.mjs';
+import { useGlobalSingleFlight } from '../../../hooks/common/src/globalSingleFlight.mjs';
+
+const _hoisted_1 = ["id"];
+const _hoisted_2 = { class: "hifleet-map-container-maptype" };
+const _hoisted_3 = ["onClick"];
+const _hoisted_4 = { class: "map__position--wrapper" };
+var _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "index",
+  props: {
+    mapId: {
+      type: String,
+      required: true
+    },
+    height: {
+      type: String,
+      default: "400px"
+    },
+    width: {
+      type: String,
+      default: "100%"
+    }
+  },
+  emits: ["init"],
+  setup(__props, { emit: __emit }) {
+    const sf = useGlobalSingleFlight("hifleet", loadHiFleetResources, { cache: true, cloneOnHit: true });
+    defineComponent({
+      name: "HiFleetMap"
+    });
+    const props = __props;
+    const emit = __emit;
+    const mapLoading = ref(false);
+    const mapTypeList = [
+      { label: "Map", prop: "normal" },
+      { label: "Global Map", prop: "global" },
+      { label: "Satellite Map", prop: "satellite" }
+    ];
+    const toggleIcon = ref(false);
+    let app;
+    let map;
+    let latlngInfoObj = {
+      lat: "",
+      latDegree: "",
+      lng: "",
+      lngDegree: ""
+    };
+    onMounted(async () => {
+      await sf.run();
+      const mapObj = init(props.mapId);
+      app = mapObj.mapInfo.app;
+      map = mapObj.mapInfo.map;
+      latlngInfoObj = mapObj.latlngInfoObj;
+      toggleIcon.value = true;
+      emit("init", { app, map, L: window.L });
+    });
+    return (_ctx, _cache) => {
+      const _directive_loading = resolveDirective("loading");
+      return withDirectives((openBlock(), createElementBlock(
+        "div",
+        {
+          class: "hifleet-map-container",
+          style: normalizeStyle({ width: __props.width, height: __props.height })
+        },
+        [
+          createElementVNode("div", {
+            id: __props.mapId,
+            style: { width: "100%", height: "100%" }
+          }, null, 8, _hoisted_1),
+          createElementVNode("ul", _hoisted_2, [
+            (openBlock(), createElementBlock(
+              Fragment,
+              null,
+              renderList(mapTypeList, (item) => {
+                return createElementVNode("li", {
+                  key: item.prop,
+                  style: normalizeStyle({ color: unref(mapType) === item.prop ? "var(--el-color-primary)" : "#666" }),
+                  class: "map__type--li",
+                  onClick: ($event) => unref(changMapType)(item.prop, unref(map), unref(app))
+                }, toDisplayString(item.label), 13, _hoisted_3);
+              }),
+              64
+              /* STABLE_FRAGMENT */
+            ))
+          ]),
+          createElementVNode("div", _hoisted_4, [
+            createElementVNode(
+              "div",
+              {
+                class: "map__position--des",
+                onClick: _cache[0] || (_cache[0] = ($event) => toggleIcon.value = !toggleIcon.value)
+              },
+              toDisplayString(toggleIcon.value ? "DD" : "DM"),
+              1
+              /* TEXT */
+            ),
+            createElementVNode(
+              "div",
+              null,
+              "\u7EAC\u5EA6: " + toDisplayString(toggleIcon.value ? unref(latlngInfoObj).lat : unref(latlngInfoObj).latDegree),
+              1
+              /* TEXT */
+            ),
+            createElementVNode(
+              "div",
+              null,
+              "\u7ECF\u5EA6: " + toDisplayString(toggleIcon.value ? unref(latlngInfoObj).lng : unref(latlngInfoObj).lngDegree),
+              1
+              /* TEXT */
+            )
+          ])
+        ],
+        4
+        /* STYLE */
+      )), [
+        [_directive_loading, mapLoading.value]
+      ]);
+    };
+  }
+});
+
+export { _sfc_main as default };

package/es/components/hifleet/src/map-data.d.ts

@@ -0,0 +1,18 @@
+export declare const solidLineData: {
+    code: number;
+    message: string;
+    data: {
+        mmsi: string;
+        posTime: string;
+        lon: number;
+        lat: number;
+        cog: number;
+        heading: number;
+        sog: number;
+    }[];
+};
+export declare const dottedLineData: {
+    code: number;
+    data: string;
+    message: string;
+};