gisviewer-vue3-arcgis 1.0.85

package/README.md

@@ -0,0 +1,103 @@
+## 给项目设置包作用域
+
+在应用中引入私服的包， 项目根目录下 新建文件 .npmrc  在 .npmrc 中对包源进行配置：
+
+```
+@yzc:registry=http://121.4.178.108:10023/
+```
+
+## Install
+
+```bash
+$ npm install @yzc/gisviewer-vue3-arcgis
+```
+
+Using bower:
+
+```bash
+$ bower install @yzc/gisviewer-vue3-arcgis
+```
+
+Using yarn:
+
+```bash
+$ yarn add @yzc/gisviewer-vue3-arcgis
+```
+
+Using pnpm:
+
+```bash
+$ pnpm add @yzc/gisviewer-vue3-arcgis
+```
+
+## 其它
+
+可使用 nrm 管理本地 包地址
+
+```
+nrm ls
+nrm add registry http://121.4.178.108:10023/
+nrm use registry
+```
+
+## Quick Start
+
+```js
+import Vue from "vue";
+
+import gisviewerVue3Arcgis from "@yzc/gisviewer-vue3-arcgis";
+
+const app = createApp(App);
+
+app.use(gisviewerVue3Arcgis, {
+  openDriveServer: "http://192.168.0.205:28081/", //openDriveServer地址
+  ws: "ws://192.168.0.208:28086/", //ws 服务地址
+  assetsRoot: "http://192.168.0.205:8081/GisViewerAssets", //静态资源地址
+});
+
+app.mount("#app");
+```
+
+## 使用
+
+```js
+<template>
+  <div class="index">
+    <gis-map :config="GIS_CONFIG_PATH" ref="gisMapRef" @map-loaded="mapLoaded"
+        @marker-click="markerClicked"></gis-map>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { GisMap } from "@yzc/gisviewer-vue3-arcgis";
+
+const GIS_CONFIG_PATH: string = "./config/HuZhou/gis-config.json";
+
+const gisMapRef = ref<InstanceType<typeof GisMap> | null>(null);
+
+const jobId=''
+
+
+const  wshost=''
+
+const haldclick = () => {
+  gisMapRef.value?.connectCarFlow(wshost + "crossdt-api/websocket/pw_rt_trace/" + jobId, 
+  {
+      showVehiclePlate: false
+  });
+};
+
+const mapLoaded=()=>{
+
+}
+
+const  markerClicked=()=>{
+
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>
+
+```

package/es/index.d.ts

@@ -0,0 +1,8 @@
+import { App } from 'vue';
+export * from './src/index';
+import MapUtils from './src/gis-map/utils';
+export { MapUtils };
+declare const _default: {
+    install: (app: App, options: any) => void;
+};
+export default _default;

package/es/index.mjs

@@ -0,0 +1,16 @@
+import * as o from "./src/index.mjs";
+import { default as f } from "./src/gis-map/utils/index.mjs";
+import { GisMap as c } from "./src/gis-map/index.mjs";
+const r = {
+  install: (s, e) => {
+    for (const i in o)
+      s.use(o[i]);
+    const { gisviewerAssetsRoot: t } = e;
+    s.config.globalProperties.$gisviewerAssetsRoot = t || "";
+  }
+};
+export {
+  c as GisMap,
+  f as MapUtils,
+  r as default
+};

package/es/src/components.d.ts

@@ -0,0 +1,9 @@
+import * as components from './index';
+declare module '@vue/runtime-core' {
+  export interface GlobalComponents {
+    EaButton: typeof components.Button;
+    EaIcon: typeof components.Icon;
+    GisMap: typeof components.GisMap;
+  }
+}
+export {};

package/es/src/gis-map/gis-map.vue.d.ts

@@ -0,0 +1,91 @@
+import MapView from '@arcgis/core/views/MapView';
+import SceneView from '@arcgis/core/views/SceneView';
+import { ILaneNumberParams, ILookAtParams, IOverlayParam, IQueueLengthParams, ISetMapCameraParams, ISetMapCenterParams, IStartCrossBufferParam } from '../types';
+import HoloFlow from './utils/holo-flow';
+import MapInitializer from './utils/map-initializer';
+import OpenDriveRenderer from './utils/open-drive-renderer';
+import Overlay from './utils/overlay';
+import QueueLength from './utils/queue-length';
+import RoadConfigTool from './utils/road-config-tool';
+import TrafficFlow from './utils/traffic-flow';
+declare const _sfc_main: import("vue").DefineComponent<{
+    config: {
+        type: StringConstructor;
+        required: true;
+    };
+    assetsRoot: {
+        type: StringConstructor;
+        required: false;
+    };
+}, {
+    mapContainer: any;
+    view: MapView | SceneView;
+    mapInitializer: MapInitializer;
+    roadConfigTool: RoadConfigTool;
+    trafficFlow: TrafficFlow;
+    holoFlow: HoloFlow;
+    overlay: Overlay;
+    queueLength: QueueLength;
+    openDriveRenderer: OpenDriveRenderer;
+    mapViewer: import("vue").ComputedRef<MapView | SceneView>;
+    setMapCenter: (params: ISetMapCenterParams) => Promise<import("../types").IResult>;
+    setMapCamera: (params: ISetMapCameraParams) => Promise<import("../types").IResult>;
+    lookAt: (params: ILookAtParams) => Promise<void>;
+    requestCoordinateTransform: (points: number[][], callback: (points: number[][]) => void) => {
+        handle: number;
+        points: number[][];
+    };
+    cancelCoordinateTransform: (handle: number) => void;
+    setMapZoomRange: (zoomRange: {
+        min?: number;
+        max?: number;
+    }) => void;
+    showLaneNumber: (params: ILaneNumberParams) => import("../types").IResult;
+    clearLaneNumber: () => void;
+    initializeAreaTool: (params: IStartCrossBufferParam) => Promise<import("../types").IResult>;
+    calCrossIndicatorArea: () => Promise<void>;
+    calRoadIndicatorArea: () => Promise<void>;
+    connectCarFlow: (url: string, options?: any) => Promise<void>;
+    disconnectCarFlow: () => void;
+    handleHoloVehicleTraceData: (vehicleTrace: any) => void;
+    clearHoloTrace: () => void;
+    handleHoloSignalData: (signalData: any) => Promise<void>;
+    clearHoloSignal: () => void;
+    toggleTrafficInfo: (params: {
+        name: string;
+        visible: boolean;
+    }) => void;
+    toggleVehicleInfo: (contentType: string) => void;
+    addOverlays: (params: IOverlayParam) => void;
+    removeOverlaysByType: (types: string[]) => void;
+    removeOverlaysById: (ids: string[]) => void;
+    removeAllOverlays: () => void;
+    showAllOverlays: () => void;
+    updateQueueLength: (params: IQueueLengthParams[]) => void;
+    removeQueueLength: () => void;
+    showOpenDrive: (server: string, projectName: string) => Promise<void>;
+    hideOpenDrive: () => Promise<void>;
+    props: {
+        config: string;
+        assetsRoot?: string | undefined;
+    };
+    emit: {
+        (e: 'mapLoaded'): void;
+        (e: 'markerClick', type: string, id: string, detail: any, event: any): void;
+        (e: 'mapClick', mapPoint: number[], screenPoint: number[], event: any): void;
+    };
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("mapLoaded" | "markerClick" | "mapClick")[], "mapLoaded" | "markerClick" | "mapClick", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    config: {
+        type: StringConstructor;
+        required: true;
+    };
+    assetsRoot: {
+        type: StringConstructor;
+        required: false;
+    };
+}>> & {
+    onMapLoaded?: ((...args: any[]) => any) | undefined;
+    onMarkerClick?: ((...args: any[]) => any) | undefined;
+    onMapClick?: ((...args: any[]) => any) | undefined;
+}, {}>;
+export default _sfc_main;

package/es/src/gis-map/gis-map.vue.mjs

@@ -0,0 +1,124 @@
+import { defineComponent as A, ref as I, onMounted as L, getCurrentInstance as D, computed as b, openBlock as M, createElementBlock as S, createElementVNode as H } from "vue";
+import R, { registerStore as B } from "./stores/index.mjs";
+import "./style/index.css";
+import v from "./utils/holo-flow/index.mjs";
+import V from "./utils/map-initializer.mjs";
+import N from "./utils/open-drive-renderer/index.mjs";
+import Q from "./utils/overlay.mjs";
+import _ from "./utils/queue-length.mjs";
+import C from "./utils/road-config-tool/index.mjs";
+import z from "./utils/traffic-flow.mjs";
+const x = { class: "gis-viewer" }, Ae = /* @__PURE__ */ A({
+  name: "gis-map",
+  props: {
+    config: null,
+    assetsRoot: null
+  },
+  emits: ["mapLoaded", "markerClick", "mapClick"],
+  setup(h, { expose: y, emit: m }) {
+    const w = h, p = I(null);
+    let o, s, t, r, a, n, i, l;
+    B(), L(async () => {
+      if (!p.value)
+        return;
+      const e = D(), { $gisviewerAssetsRoot: c } = e.appContext.config.globalProperties, g = await (await fetch(w.config)).json();
+      g.assetsRoot = w.assetsRoot || c;
+      const T = R.useAppDataStore;
+      T.mapConfig = g, s = new V(), o = await s.initialize({
+        container: p.value,
+        markerClickCallback: (d, u, f, k) => {
+          m("markerClick", d, u, f, k);
+        },
+        mapClickCallback: (d, u, f) => {
+          m("mapClick", d, u, f);
+        }
+      }), a = new v(o), m("mapLoaded");
+    });
+    const O = b(() => o);
+    return y({
+      mapViewer: O,
+      setMapCenter: async (e) => await s.setMapCenter(e),
+      lookAt: async (e) => await s.lookAt(e),
+      setMapCamera: async (e) => await s.setMapCamera(e),
+      setMapZoomRange: (e) => {
+        s.setMapZoomRange(e);
+      },
+      requestCoordinateTransform: (e, c) => s.requestCoordinateTransform(e, c),
+      cancelCoordinateTransform: (e) => {
+        s.cancelCoordinateTransform(e);
+      },
+      addOverlays: (e) => {
+        n || (n = new Q(o)), n.addOverlays(e);
+      },
+      showAllOverlays: () => {
+        n == null || n.showAllOverlays();
+      },
+      removeOverlaysByType: (e) => {
+        n == null || n.removeOverlaysByType(e);
+      },
+      removeOverlaysById: (e) => {
+        n == null || n.removeOverlaysById(e);
+      },
+      removeAllOverlays: () => {
+        n == null || n.removeAllOverlays();
+      },
+      showLaneNumber: (e) => (t || (t = new C(o)), t.showLaneNumber(e)),
+      clearLaneNumber: () => {
+        t == null || t.clearLaneNumber();
+      },
+      initializeAreaTool: async (e) => (t || (t = new C(o)), await t.initializeSearch(e)),
+      calCrossIndicatorArea: async () => t == null ? void 0 : t.calCrossIndicatorArea(),
+      calRoadIndicatorArea: async () => {
+      },
+      connectCarFlow: async (e, c) => {
+        r || (r = new z(o)), r.connectTrafficFlow(e, c);
+      },
+      disconnectCarFlow: () => {
+        r == null || r.disconnectTrafficFlow();
+      },
+      handleHoloVehicleTraceData: (e) => {
+        a || (a = new v(o)), a.handleVehicleTraceData(e);
+      },
+      clearHoloTrace: () => {
+        a == null || a.clearHoloTrace();
+      },
+      handleHoloSignalData: async (e) => {
+        a || (a = new v(o)), await a.handleSignalData(e);
+      },
+      clearHoloSignal: () => {
+        a == null || a.clearHoloSignal();
+      },
+      toggleTrafficInfo: (e) => {
+        switch (e.name.toLowerCase()) {
+          case "vehiclePlate".toLowerCase():
+            r == null || r.toggleVehiclePlate(e.visible);
+            break;
+        }
+      },
+      toggleVehicleInfo: (e) => {
+        a == null || a.updatePanelContent(e);
+      },
+      updateQueueLength: (e) => {
+        i || (i = new _(o)), i.updateQueueLength(e);
+      },
+      removeQueueLength: () => {
+        i == null || i.removeQueueLength();
+      },
+      showOpenDrive: async (e, c) => {
+        l || (l = new N(o)), await l.showOpenDrive(e, c);
+      },
+      hideOpenDrive: async () => {
+        await (l == null ? void 0 : l.hideOpenDrive());
+      }
+    }), (e, c) => (M(), S("div", x, [
+      H("div", {
+        class: "gis-viewer-main",
+        ref_key: "mapContainer",
+        ref: p
+      }, null, 512)
+    ]));
+  }
+});
+export {
+  Ae as default
+};

package/es/src/gis-map/gis-map.vue2.mjs

@@ -0,0 +1,4 @@
+import f from "./gis-map.vue.mjs";
+export {
+  f as default
+};

package/es/src/gis-map/index.d.ts

@@ -0,0 +1,81 @@
+export declare const GisMap: import("@easyest/utils/dist/lib/withinstall").SFCWithInstall<import("vue").DefineComponent<{
+    config: {
+        type: StringConstructor;
+        required: true;
+    };
+    assetsRoot: {
+        type: StringConstructor;
+        required: false;
+    };
+}, {
+    mapContainer: any;
+    view: __esri.MapView | __esri.SceneView;
+    mapInitializer: import("./utils/map-initializer").default;
+    roadConfigTool: import("./utils/road-config-tool").default;
+    trafficFlow: import("./utils/traffic-flow").default;
+    holoFlow: import("./utils/holo-flow").default;
+    overlay: import("./utils/overlay").default;
+    queueLength: import("./utils/queue-length").default;
+    openDriveRenderer: import("./utils/open-drive-renderer").default;
+    mapViewer: import("vue").ComputedRef<__esri.MapView | __esri.SceneView>;
+    setMapCenter: (params: import("../types").ISetMapCenterParams) => Promise<import("../types").IResult>;
+    setMapCamera: (params: import("../types").ISetMapCameraParams) => Promise<import("../types").IResult>;
+    lookAt: (params: import("../types").ILookAtParams) => Promise<void>;
+    requestCoordinateTransform: (points: number[][], callback: (points: number[][]) => void) => {
+        handle: number;
+        points: number[][];
+    };
+    cancelCoordinateTransform: (handle: number) => void;
+    setMapZoomRange: (zoomRange: {
+        min?: number | undefined;
+        max?: number | undefined;
+    }) => void;
+    showLaneNumber: (params: import("../types").ILaneNumberParams) => import("../types").IResult;
+    clearLaneNumber: () => void;
+    initializeAreaTool: (params: import("../types").IStartCrossBufferParam) => Promise<import("../types").IResult>;
+    calCrossIndicatorArea: () => Promise<void>;
+    calRoadIndicatorArea: () => Promise<void>;
+    connectCarFlow: (url: string, options?: any) => Promise<void>;
+    disconnectCarFlow: () => void;
+    handleHoloVehicleTraceData: (vehicleTrace: any) => void;
+    clearHoloTrace: () => void;
+    handleHoloSignalData: (signalData: any) => Promise<void>;
+    clearHoloSignal: () => void;
+    toggleTrafficInfo: (params: {
+        name: string;
+        visible: boolean;
+    }) => void;
+    toggleVehicleInfo: (contentType: string) => void;
+    addOverlays: (params: import("../types").IOverlayParam) => void;
+    removeOverlaysByType: (types: string[]) => void;
+    removeOverlaysById: (ids: string[]) => void;
+    removeAllOverlays: () => void;
+    showAllOverlays: () => void;
+    updateQueueLength: (params: import("../types").IQueueLengthParams[]) => void;
+    removeQueueLength: () => void;
+    showOpenDrive: (server: string, projectName: string) => Promise<void>;
+    hideOpenDrive: () => Promise<void>;
+    props: {
+        config: string;
+        assetsRoot?: string | undefined;
+    };
+    emit: {
+        (e: "mapLoaded"): void;
+        (e: "markerClick", type: string, id: string, detail: any, event: any): void;
+        (e: "mapClick", mapPoint: number[], screenPoint: number[], event: any): void;
+    };
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("mapLoaded" | "markerClick" | "mapClick")[], "mapLoaded" | "markerClick" | "mapClick", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    config: {
+        type: StringConstructor;
+        required: true;
+    };
+    assetsRoot: {
+        type: StringConstructor;
+        required: false;
+    };
+}>> & {
+    onMapLoaded?: ((...args: any[]) => any) | undefined;
+    onMarkerClick?: ((...args: any[]) => any) | undefined;
+    onMapClick?: ((...args: any[]) => any) | undefined;
+}, {}>>;
+export default GisMap;

package/es/src/gis-map/index.mjs

@@ -0,0 +1,7 @@
+import { withInstall as t } from "@easyest/utils";
+import o from "./gis-map.vue.mjs";
+const m = t(o);
+export {
+  m as GisMap,
+  m as default
+};

package/es/src/gis-map/stores/appData.d.ts

@@ -0,0 +1,3 @@
+export declare const useAppDataStore: import("pinia").StoreDefinition<"appData", {
+    mapConfig: {};
+}, {}, {}>;

package/es/src/gis-map/stores/appData.mjs

@@ -0,0 +1,9 @@
+import { defineStore as t } from "pinia";
+const e = t("appData", {
+  state: () => ({
+    mapConfig: {}
+  })
+});
+export {
+  e as useAppDataStore
+};

package/es/src/gis-map/stores/index.d.ts

@@ -0,0 +1,7 @@
+import { useAppDataStore } from './appData';
+export interface IAppStore {
+    useAppDataStore: ReturnType<typeof useAppDataStore>;
+}
+declare const appStore: IAppStore;
+export declare const registerStore: () => void;
+export default appStore;

package/es/src/gis-map/stores/index.mjs

@@ -0,0 +1,10 @@
+import { createPinia as e } from "pinia";
+import { useAppDataStore as o } from "./appData.mjs";
+const r = {}, i = () => {
+  const t = e();
+  r.useAppDataStore = o(t);
+};
+export {
+  r as default,
+  i as registerStore
+};

package/es/src/gis-map/style/index.css

@@ -0,0 +1,13 @@
+@import url('@arcgis/core/assets/esri/themes/dark/main.css');
+.gis-viewer {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+.gis-viewer-main {
+  width: 100%;
+  height: 100%;
+}
+.esri-view .esri-view-surface:focus::after {
+  outline: none !important;
+}

package/es/src/gis-map/utils/FlyToPoints.d.ts

@@ -0,0 +1,37 @@
+import MapView from '@arcgis/core/views/MapView';
+import Extent from '@arcgis/core/geometry/Extent.js';
+interface FlyToPointsOptions {
+    viewer: MapView;
+    points: {
+        longitude: number;
+        latitude: number;
+    }[];
+    duration?: number;
+    paddingRatio?: number;
+    onComplete?: () => void;
+}
+/**
+ * 动态点位 计算可视范围
+ *
+ * @export
+ * @class FlyToPoints
+ */
+export default class FlyToPoints {
+    private viewer;
+    private points;
+    constructor(options: FlyToPointsOptions);
+    /**
+     * 移动到可视角度
+     *
+     * @returns
+     * @memberof FlyToPoints
+     */
+    flyToPoints(): void;
+    calculateZoomLevel(extent: Extent, viewWidth: number, viewHeight: number): number;
+    calculateExtent(points: string | any[]): Extent;
+    calculateCenterPoint(points: string | any[]): {
+        longitude: number;
+        latitude: number;
+    };
+}
+export {};

package/es/src/gis-map/utils/FlyToPoints.mjs

@@ -0,0 +1,67 @@
+import c from "@arcgis/core/geometry/Extent.js";
+class u {
+  //   private duration: number;
+  constructor(t) {
+    this.viewer = t.viewer, this.points = t.points;
+  }
+  /**
+   * 移动到可视角度
+   *
+   * @returns
+   * @memberof FlyToPoints
+   */
+  flyToPoints() {
+    if (this.points.length == 0)
+      return;
+    const t = this.calculateExtent(this.points), n = t.center, i = Math.abs(t.xmax - t.xmin), o = Math.abs(t.ymax - t.ymin), a = 0.6, e = i * a, l = o * a, h = new c({
+      xmin: t.xmin - e,
+      ymin: t.ymin - l,
+      xmax: t.xmax + e,
+      ymax: t.ymax + l,
+      spatialReference: t.spatialReference
+    }), m = this.calculateZoomLevel(
+      h,
+      this.viewer.width,
+      this.viewer.height
+    );
+    this.viewer.goTo({
+      target: h,
+      zoom: m,
+      center: n
+    });
+  }
+  calculateZoomLevel(t, n, i) {
+    const o = Math.abs(t.xmax - t.xmin), a = Math.abs(t.ymax - t.ymin), e = Math.log2(360 * (n / o) / 256), l = Math.log2(180 * (i / a) / 256);
+    return Math.floor(Math.min(e, l));
+  }
+  calculateExtent(t) {
+    let n = Number.MAX_VALUE, i = Number.MAX_VALUE, o = Number.MIN_VALUE, a = Number.MIN_VALUE;
+    for (let e = 0; e < t.length; e++) {
+      const l = t[e];
+      n = Math.min(n, l.longitude), i = Math.min(i, l.latitude), o = Math.max(o, l.longitude), a = Math.max(a, l.latitude);
+    }
+    return new c({
+      xmin: n,
+      ymin: i,
+      xmax: o,
+      ymax: a,
+      spatialReference: {
+        wkid: 4326
+        // Assuming WGS84 spatial reference system
+      }
+    });
+  }
+  calculateCenterPoint(t) {
+    let n = 0, i = 0;
+    for (let e = 0; e < t.length; e++)
+      n += t[e].longitude, i += t[e].latitude;
+    const o = n / t.length, a = i / t.length;
+    return {
+      longitude: o,
+      latitude: a
+    };
+  }
+}
+export {
+  u as default
+};