gisviewer-vue3-arcgis 1.0.246 → 1.0.248

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

@@ -1,46 +1,55 @@
-import k from "@arcgis/core/Basemap";
-import u from "@arcgis/core/config";
-import * as T from "@arcgis/core/core/reactiveUtils";
-import { Multipoint as P, Polygon as W, Polyline as z, Point as C } from "@arcgis/core/geometry";
-import * as g from "@arcgis/core/geometry/support/webMercatorUtils";
-import x from "@arcgis/core/layers/FeatureLayer";
-import I from "@arcgis/core/layers/GeoJSONLayer";
-import R from "@arcgis/core/layers/GroupLayer";
-import G from "@arcgis/core/layers/IntegratedMesh3DTilesLayer";
-import H from "@arcgis/core/layers/MapImageLayer";
-import B from "@arcgis/core/layers/TileLayer";
-import O from "@arcgis/core/layers/WebTileLayer";
-import S from "@arcgis/core/Map";
-import N from "@arcgis/core/views/MapView";
-import E from "@arcgis/core/views/SceneView";
-import A from "@turf/destination";
-import * as J from "@turf/helpers";
-import K from "./custom-layer/custom-wmts-layer.mjs";
-function L(p, e) {
-  return p && (p.startsWith("http://") || p.startsWith("https://") ? p : e + p);
-}
+import M from "@arcgis/core/Basemap";
+import d from "@arcgis/core/config";
+import * as k from "@arcgis/core/core/reactiveUtils";
+import { Multipoint as L, Polygon as P, Polyline as C, Point as T } from "@arcgis/core/geometry";
+import * as w from "@arcgis/core/geometry/support/webMercatorUtils";
+import W from "@arcgis/core/layers/FeatureLayer";
+import z from "@arcgis/core/layers/GeoJSONLayer";
+import x from "@arcgis/core/layers/GroupLayer";
+import I from "@arcgis/core/layers/IntegratedMesh3DTilesLayer";
+import S from "@arcgis/core/layers/MapImageLayer";
+import G from "@arcgis/core/layers/TileLayer";
+import H from "@arcgis/core/layers/WebTileLayer";
+import R from "@arcgis/core/layers/WMSLayer";
+import B from "@arcgis/core/Map";
+import O from "@arcgis/core/views/MapView";
+import N from "@arcgis/core/views/SceneView";
+import U from "@turf/destination";
+import * as E from "@turf/helpers";
+import A from "./custom-layer/custom-wmts-layer.mjs";
 class oe {
   constructor() {
     this.mapConfig = {}, this.watchHandleMap = /* @__PURE__ */ new Map(), this.handleIndex = 0, this.zoomWatchHandle = null;
   }
+  processUrl(e) {
+    if (e) {
+      if (e.startsWith("http://") || e.startsWith("https://"))
+        return e;
+      if (e.startsWith("{{"))
+        return e.replace("{{geoServer}}", this.mapConfig.geoServer);
+      if (e.startsWith("/"))
+        return this.mapConfig.assetsRoot + e;
+    } else
+      return e;
+  }
   /**
    * 初始化地图
    * @param params 容器
    * @returns view
    */
   async initialize(e) {
-    var f, b, v, y;
+    var m, u, b, v;
     this.mapConfig = e.mapConfig;
-    const { container: i, markerClickCallback: o, mapClickCallback: a } = e;
-    u.assetsPath = `${this.mapConfig.assetsRoot}/ArcgisAssets`, u.fontsUrl = `${this.mapConfig.assetsRoot}/fonts`, u.apiKey = "AAPKf5a3e1044d7a4faeb3b1ec7060f5c68equIrP2KbRyL-t_b40Kk4GTWUQ1BFCyttvyQPQnWpFmBd7kp9gkrVihjfmcKBwxjW";
-    const r = new S();
-    if (((f = this.mapConfig) == null ? void 0 : f.mapOptions.mode.toLowerCase()) === "2d" ? (this.view = new N({
+    const { container: i, markerClickCallback: s, mapClickCallback: a } = e;
+    d.assetsPath = `${this.mapConfig.assetsRoot}/ArcgisAssets`, d.fontsUrl = `${this.mapConfig.assetsRoot}/fonts`, d.apiKey = "AAPKf5a3e1044d7a4faeb3b1ec7060f5c68equIrP2KbRyL-t_b40Kk4GTWUQ1BFCyttvyQPQnWpFmBd7kp9gkrVihjfmcKBwxjW";
+    const r = new B();
+    if (((m = this.mapConfig) == null ? void 0 : m.mapOptions.mode.toLowerCase()) === "2d" ? (this.view = new O({
       map: r,
       container: i,
       ...this.mapConfig.mapOptions
     }), this.view.on("drag", (t) => {
       t.button === 2 && t.stopPropagation();
-    })) : this.view = new E({
+    })) : this.view = new N({
       map: r,
       container: i,
       environment: {
@@ -49,7 +58,7 @@ class oe {
           type: "virtual"
         }
       },
-      ...(b = this.mapConfig) == null ? void 0 : b.mapOptions
+      ...(u = this.mapConfig) == null ? void 0 : u.mapOptions
     }), this.view.popup.visibleElements = {
       closeButton: !0,
       collapseButton: !1,
@@ -59,97 +68,104 @@ class oe {
       buttonEnabled: !1,
       breakpoint: !1
     }, this.view.on("click", async (t) => {
-      var h, M;
+      var h, y;
       if (a) {
-        let s = t.mapPoint;
-        s.spatialReference.isWebMercator && (s = g.webMercatorToGeographic(
-          s
+        let o = t.mapPoint;
+        o.spatialReference.isWebMercator && (o = w.webMercatorToGeographic(
+          o
         )), a(
-          [s.x, s.y],
+          [o.x, o.y],
           [t.screenPoint.x, t.screenPoint.y],
           t
         );
       }
       if (this.view.type === "3d") {
-        const s = this.view.camera;
+        const o = this.view.camera;
         if (this.view.spatialReference.isWebMercator) {
-          const m = g.webMercatorToGeographic(
-            s.position
-          ), w = {
-            heading: s.heading,
-            tilt: s.tilt,
-            position: m.toJSON()
+          const l = w.webMercatorToGeographic(
+            o.position
+          ), f = {
+            heading: o.heading,
+            tilt: o.tilt,
+            position: l.toJSON()
           };
-          console.log(w), (h = navigator.clipboard) == null || h.writeText(JSON.stringify(w));
+          console.log(f), (h = navigator.clipboard) == null || h.writeText(JSON.stringify(f));
         } else
-          console.log(s.toJSON());
+          console.log(o.toJSON());
         console.log(this.view.zoom, this.view.scale);
       } else {
-        let s = this.view.center;
-        this.view.spatialReference.isWebMercator && (s = g.webMercatorToGeographic(
-          s
+        let o = this.view.center;
+        this.view.spatialReference.isWebMercator && (o = w.webMercatorToGeographic(
+          o
         )), console.log({
-          center: s.toJSON(),
+          center: o.toJSON(),
           zoom: this.view.zoom,
           scale: this.view.scale
         });
       }
-      const n = (M = (await this.view.hitTest(t)).results) == null ? void 0 : M.filter(
-        (s) => s.type === "graphic"
+      const n = (y = (await this.view.hitTest(t)).results) == null ? void 0 : y.filter(
+        (o) => o.type === "graphic"
       );
-      n.length > 0 && n.forEach((s) => {
-        var w;
-        const m = s.graphic;
-        (w = m.attributes) != null && w.type && o && o(
-          m.attributes.type,
-          m.attributes.id,
-          m.attributes,
+      n.length > 0 && n.forEach((o) => {
+        var f;
+        const l = o.graphic;
+        (f = l.attributes) != null && f.type && s && s(
+          l.attributes.type,
+          l.attributes.id,
+          l.attributes,
           t
         );
       });
-    }), (v = this.mapConfig) != null && v.baseLayers ? this.mapConfig.baseLayers.forEach((t) => {
-      const c = L(t.url, this.mapConfig.assetsRoot);
+    }), (b = this.mapConfig) != null && b.baseLayers ? this.mapConfig.baseLayers.forEach((t) => {
+      const c = this.processUrl(t.url);
       let n = null;
       switch (t.type.toLowerCase()) {
         case "webTile".toLowerCase(): {
-          n = new O({
+          n = new H({
             urlTemplate: c,
             ...t.options
           });
           break;
         }
         case "tile": {
-          n = new B({
+          n = new G({
             url: c,
             ...t.options
           });
           break;
         }
         case "customWMTS".toLowerCase(): {
-          n = new K({
+          n = new A({
             urlTemplate: c,
             ...t.options
           });
           break;
         }
         case "mapImage".toLowerCase(): {
-          n = new H({
+          n = new S({
             url: c,
             ...t.options
           });
           break;
         }
         case "arcgis": {
-          const h = new k(t.options);
+          const h = new M(t.options);
           r.basemap = h;
           break;
         }
         case "feature": {
-          n = new x({ url: c, ...t.options });
+          n = new W({ url: c, ...t.options });
           break;
         }
         case "3dtiles": {
-          n = new G({
+          n = new I({
+            url: c,
+            ...t.options
+          });
+          break;
+        }
+        case "wms": {
+          n = new R({
             url: c,
             ...t.options
           });
@@ -162,25 +178,26 @@ class oe {
       if (n)
         if (t.group) {
           let h = r.findLayerById(t.group);
-          h && h.type === "group" ? h.add(n) : (h = new R({
+          h && h.type === "group" ? h.add(n) : (h = new x({
             id: t.group,
             title: t.groupTitle,
             visibilityMode: "inherited",
-            layers: [n]
+            layers: [n],
+            visible: t.groupVisible !== !1
           }), r.add(h));
         } else
           r.add(n);
-    }) : r.basemap = new k({
+    }) : r.basemap = new M({
       style: {
         id: "arcgis/light-gray",
         language: "zh-CN"
       }
-    }), (y = this.mapConfig) != null && y.hdLayers) {
+    }), (v = this.mapConfig) != null && v.hdLayers) {
       const t = this.mapConfig.hdLayers.map(
         (c) => (
           // 图层文件为GeoJson格式, renderer和symbol使用autocast配置
-          new I({
-            url: L(c.url, this.mapConfig.assetsRoot),
+          new z({
+            url: this.processUrl(c.url),
             ...c.options,
             title: c.options.id
           })
@@ -189,28 +206,28 @@ class oe {
       r.addMany(t);
     }
     this.view.ui.remove("attribution"), await this.view.when();
-    const d = this.mapConfig.camera;
-    let l;
+    const g = this.mapConfig.camera;
+    let p;
     if (this.view.type === "2d") {
       let t = this.view.center;
-      this.view.spatialReference.isWebMercator && (t = g.webMercatorToGeographic(
+      this.view.spatialReference.isWebMercator && (t = w.webMercatorToGeographic(
         t
-      )), l = { center: [t.x, t.y], zoom: this.view.zoom };
+      )), p = { center: [t.x, t.y], zoom: this.view.zoom };
     } else {
       let t = this.view.camera.position;
-      this.view.spatialReference.isWebMercator && (t = g.webMercatorToGeographic(
+      this.view.spatialReference.isWebMercator && (t = w.webMercatorToGeographic(
         t
-      )), l = {
+      )), p = {
         position: t,
         heading: this.view.camera.heading,
         tilt: this.view.camera.tilt
       };
     }
-    return d ? d.home = l : this.mapConfig.camera = { home: l }, this.view;
+    return g ? g.home = p : this.mapConfig.camera = { home: p }, this.view;
   }
   setLayerVisibility(e) {
-    const { id: i, visible: o } = e, a = this.view.map.findLayerById(i);
-    return a ? (a.visible = o, { status: 0, message: "ok" }) : { status: -1, message: "未找到图层" };
+    const { id: i, visible: s } = e, a = this.view.map.findLayerById(i);
+    return a ? (a.visible = s, { status: 0, message: "ok" }) : { status: -1, message: "未找到图层" };
   }
   /**
    * 设置地图中心点
@@ -224,16 +241,16 @@ class oe {
     if (e.center || e.target) {
       switch ((i = e.target) == null ? void 0 : i.type.toLowerCase()) {
         case "point":
-          e.target = new C(e.target);
+          e.target = new T(e.target);
           break;
         case "polyline":
-          e.target = new z(e.target);
+          e.target = new C(e.target);
           break;
         case "polygon":
-          e.target = new W(e.target);
+          e.target = new P(e.target);
           break;
         case "multipoint":
-          e.target = new P(e.target);
+          e.target = new L(e.target);
           break;
       }
       await this.view.goTo(e, { duration: (e.duration || 0) * 1e3 });
@@ -246,7 +263,7 @@ class oe {
   async lookAt(e) {
     if (this.view.type === "2d")
       return;
-    const i = e.tilt || 0, o = e.heading || 0;
+    const i = e.tilt || 0, s = e.heading || 0;
     if (i === 0)
       await this.view.goTo(
         {
@@ -255,16 +272,16 @@ class oe {
             y: e.center[1],
             z: e.height
           },
-          heading: o,
+          heading: s,
           tilt: 0
         },
         { duration: (e.duration || 2) * 1e3 }
       );
     else {
-      const a = Math.tan(i * Math.PI / 180) * e.height, r = A(
-        J.point(e.center),
+      const a = Math.tan(i * Math.PI / 180) * e.height, r = U(
+        E.point(e.center),
         a,
-        o + 180,
+        s + 180,
         {
           units: "meters"
         }
@@ -276,7 +293,7 @@ class oe {
             y: r.geometry.coordinates[1],
             z: e.height
           },
-          heading: o,
+          heading: s,
           tilt: i
         },
         { duration: (e.duration || 2) * 1e3 }
@@ -286,32 +303,32 @@ class oe {
   async setMapCamera(e) {
     if (!this.view)
       return { status: -1, message: "未初始化" };
-    const { name: i, duration: o = 0 } = e, { camera: a } = this.mapConfig;
+    const { name: i, duration: s = 0 } = e, { camera: a } = this.mapConfig;
     if (!a)
       return { status: -1, message: "未配置camera" };
     const r = a[i];
-    return r ? (await this.view.goTo(r, { duration: o * 1e3 }), { status: 0, message: "成功" }) : { status: -1, message: "未配置camera" };
+    return r ? (await this.view.goTo(r, { duration: s * 1e3 }), { status: 0, message: "成功" }) : { status: -1, message: "未配置camera" };
   }
   /**
    * 经纬度转像素坐标，在地图移动时回调
    * */
   requestCoordinateTransform(e, i) {
-    let o = 0;
-    const r = 1e3 / 30, d = T.watch(
+    let s = 0;
+    const r = 1e3 / 30, g = k.watch(
       () => this.view.center,
       () => {
-        const l = this.transformPoints(e), f = Date.now();
-        f - o > r && (i(l), o = f);
+        const p = this.transformPoints(e), m = Date.now();
+        m - s > r && (i(p), s = m);
       }
     );
-    return this.handleIndex++, this.watchHandleMap.set(this.handleIndex, d), { handle: this.handleIndex, points: this.transformPoints(e) };
+    return this.handleIndex++, this.watchHandleMap.set(this.handleIndex, g), { handle: this.handleIndex, points: this.transformPoints(e) };
   }
   transformPoints(e) {
     return e.map((i) => {
-      const o = new C({
+      const s = new T({
         x: i[0],
         y: i[1]
-      }), a = this.view.toScreen(o);
+      }), a = this.view.toScreen(s);
       return [a.x, a.y];
     });
   }
@@ -326,11 +343,11 @@ class oe {
    * 设置地图zoom范围
    * */
   setMapZoomRange(e) {
-    const { min: i, max: o } = e;
-    !i && !o || (this.zoomWatchHandle && this.zoomWatchHandle.remove(), this.zoomWatchHandle = T.watch(
+    const { min: i, max: s } = e;
+    !i && !s || (this.zoomWatchHandle && this.zoomWatchHandle.remove(), this.zoomWatchHandle = k.watch(
       () => this.view.zoom,
       (a) => {
-        i && a <= i && (this.view.zoom = i), o && a >= o && (this.view.zoom = o);
+        i && a <= i && (this.view.zoom = i), s && a >= s && (this.view.zoom = s);
       }
     ));
   }

package/es/src/gis-map/utils/police-jurisdiction.d.ts

@@ -0,0 +1,9 @@
+import { IResult, IShowJurisdictionParams } from '../../types';
+export default class PoliceJurisdiction {
+    private geoServer;
+    private view;
+    private maskLayer;
+    constructor(view: __esri.MapView | __esri.SceneView);
+    showJurisdiction(params: IShowJurisdictionParams): Promise<IResult>;
+    clearJurisdiction(): void;
+}

package/es/src/gis-map/utils/police-jurisdiction.mjs

@@ -0,0 +1,109 @@
+import { Polygon as L } from "@arcgis/core/geometry";
+import * as l from "@arcgis/core/geometry/geometryEngine";
+import i from "@arcgis/core/Graphic";
+import S from "@arcgis/core/layers/GraphicsLayer";
+import _ from "axios";
+import { toRaw as b } from "vue";
+import k from "../stores/index.mjs";
+class M {
+  constructor(e) {
+    this.view = e, this.maskLayer = new S({
+      id: "police-jurisdiction"
+    }), this.view.map.add(this.maskLayer);
+    const a = k.useAppDataStore, n = b(a.mapConfig);
+    this.geoServer = n.geoServer;
+  }
+  async showJurisdiction(e) {
+    if (!this.geoServer)
+      return { status: -1, message: "未配置GeoServer" };
+    const a = e.type.toLowerCase() === "zd" ? "VIEW_SH_ZD" : "VW_DWD_GEO_SH_DD", n = e.type.toLowerCase() === "zd" ? "ZD_CODE" : "DD_CODE", y = e.type.toLowerCase() === "zd" ? "ZD_NAME" : "DD_NAME", h = e.ids.join(","), s = await _.get(`${this.geoServer}/zd_edpass/wms`, {
+      params: {
+        service: "WFS",
+        version: "1.1.0",
+        request: "GetFeature",
+        typename: `zd_edpass:${a}`,
+        outputFormat: "application/json",
+        CQL_FILTER: `${n} IN (${h})`
+      }
+    });
+    if (s.status !== 200)
+      return { status: -1, message: s.status + " " + s.statusText };
+    const { features: c } = s.data;
+    if (!c || c.length === 0)
+      return { status: -1, message: "未查询到数据" };
+    this.maskLayer.removeAll();
+    const t = [], p = [], d = [];
+    c.forEach((o) => {
+      const w = o.geometry.coordinates, r = new L({
+        rings: w[0]
+      });
+      t.push(r);
+      const v = new i({
+        geometry: r,
+        symbol: {
+          type: "simple-line",
+          style: "dash",
+          color: [111, 100, 255],
+          width: 4
+        }
+      }), D = new i({
+        geometry: r,
+        symbol: {
+          type: "simple-line",
+          style: "solid",
+          color: [111, 100, 255, 0.6],
+          width: 4
+        }
+      });
+      p.push(v, D);
+      const G = new i({
+        geometry: r.centroid,
+        symbol: {
+          type: "text",
+          color: [0, 0, 0],
+          haloColor: [255, 255, 255],
+          haloSize: "1px",
+          text: o.properties[y],
+          font: {
+            size: "14px",
+            weight: "bold",
+            family: "msyh"
+          }
+        }
+      });
+      d.push(G);
+    });
+    const u = t[0].centroid, f = l.geodesicBuffer(
+      u,
+      100,
+      "kilometers"
+    );
+    let m = l.difference(
+      f,
+      t[0]
+    );
+    for (let o = 1; o < t.length; o++)
+      m = l.difference(
+        m,
+        t[o]
+      );
+    const g = new i({
+      geometry: m,
+      symbol: {
+        type: "simple-fill",
+        color: [100, 100, 100, 0.8],
+        outline: {
+          width: 0
+        }
+      },
+      attributes: { type: "mask" }
+    });
+    return this.maskLayer.add(g), this.maskLayer.addMany(p), this.maskLayer.addMany(d), await this.view.goTo(t), { status: 0, message: "ok" };
+  }
+  clearJurisdiction() {
+    this.maskLayer.removeAll();
+  }
+}
+export {
+  M as default
+};

package/es/src/types/index.d.ts

@@ -315,3 +315,13 @@ export interface IRoadLine {
     toNode: string;
     coordinates: number[][];
 }
+export interface IShowJurisdictionParams {
+    type: string;
+    ids: string[];
+}
+export interface IShowEdpassDeviceParams {
+    deviceType: string;
+    deviceState: string;
+    mode: string;
+    visible: boolean;
+}

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

@@ -1,16 +1,18 @@
 import MapView from '@arcgis/core/views/MapView';
 import SceneView from '@arcgis/core/views/SceneView';
-import { IEditSignalControlAreaParams, IFindSignalControlAreaParams, IFindSumoParams, ILaneNumberParams, ILayerVisibleParams, ILookAtParams, IMaskParam, IOverlayParam, IQueueLengthParams, ISetMapCameraParams, ISetMapCenterParams, IShowGreenWaveBandParams, IShowOpenDriveFromFileParams, IShowSignalControlAreaParams, ISignalCountdownProps, ISplitOpenDriveLaneParams, IStartCrossBufferParam, IToggleTrafficInfoParams, IUnselectSumoParams } from '../types';
+import { IEditSignalControlAreaParams, IFindSignalControlAreaParams, IFindSumoParams, ILaneNumberParams, ILayerVisibleParams, ILookAtParams, IMaskParam, IOverlayParam, IQueueLengthParams, ISetMapCameraParams, ISetMapCenterParams, IShowEdpassDeviceParams, IShowGreenWaveBandParams, IShowJurisdictionParams, IShowOpenDriveFromFileParams, IShowSignalControlAreaParams, ISignalCountdownProps, ISplitOpenDriveLaneParams, IStartCrossBufferParam, IToggleTrafficInfoParams, IUnselectSumoParams } from '../types';
 import GreenWaveBandController from './utils/green-wave-band-controller';
 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 PoliceJurisdiction from './utils/police-jurisdiction';
 import QueueLength from './utils/queue-length';
 import RoadConfigTool from './utils/road-config-tool';
 import EditSignalArea from './utils/signal-control-area/edit-area';
 import ShowSignalArea from './utils/signal-control-area/show-area';
 import TrafficFlow from './utils/traffic-flow';
+import EdpassDeviceController from './utils/edpass-device-controller';
 declare const _sfc_main: import("vue").DefineComponent<{
     config: {
         type: StringConstructor;
@@ -33,11 +35,14 @@ declare const _sfc_main: import("vue").DefineComponent<{
     editSignalAreaController: EditSignalArea;
     showSignalAreaController: ShowSignalArea;
     greenWaveBandController: GreenWaveBandController;
+    policeJurisdictionController: PoliceJurisdiction;
+    edpassDeviceController: EdpassDeviceController;
     showLogDiv: import("vue").Ref<boolean>;
     appDataStore: import("pinia").Store<"appData", {
         mapConfig: {};
         saveTrackLog: boolean;
         isSketching: boolean;
+        mapInitializer: MapInitializer;
         countdownPanels: ISignalCountdownProps[];
     }, {}, {}>;
     countdownPanelProps: {
@@ -162,6 +167,12 @@ declare const _sfc_main: import("vue").DefineComponent<{
         message: string;
     } | undefined;
     showGreenWaveBand: (params: IShowGreenWaveBandParams) => Promise<void>;
+    showPoliceArea: (params: IShowJurisdictionParams) => Promise<import("../types").IResult>;
+    clearPoliceArea: () => {
+        status: number;
+        message: string;
+    } | undefined;
+    setEdpassLayerVisibility: (params: IShowEdpassDeviceParams) => Promise<import("../types").IResult>;
     props: any;
     emit: (event: "mapLoaded" | "markerClick" | "mapClick", ...args: any[]) => void;
     SignalCountdownPanel: import("vue").DefineComponent<{
@@ -239,12 +250,6 @@ declare const _sfc_main: import("vue").DefineComponent<{
             animation: string;
         }>;
         rImage: import("vue").ComputedRef<string>;
-        /**
-         * 开始坐标转换，经纬度坐标转屏幕坐标。
-         * @param points
-         * @param callback 回调函数，参数为转换后的屏幕坐标。地图移动、缩放、缩放时，会多次调用该回调函数。
-         * @returns handle 坐标转换句柄，用于停止坐标转换。
-         * */
         rNumberStyle: import("vue").ComputedRef<any>;
         rLampStyle: import("vue").ComputedRef<{
             display: string;