gisviewer-vue3-arcgis 1.0.164 → 1.0.166

package/es/src/gis-map/utils/holo-flow/trace-renderer-layer.mjs

@@ -39,17 +39,17 @@ class f {
   async init() {
   }
   addVehicles(i) {
-    return new Promise((e) => {
+    return new Promise((t) => {
       if (this.isPaused) {
-        e();
+        t();
         return;
       }
-      const t = i.map((s) => {
-        const { vehicleId: r, heading: a, localTimestamp: h } = s, l = Number(s.x), n = Number(s.y);
-        this.historyPositionMap.set(r, [
+      const e = i.map((s) => {
+        const { vehicleId: o, heading: a, localTimestamp: h } = s, l = Number(s.x), n = Number(s.y);
+        this.historyPositionMap.set(o, [
           { pos: [l, n, 0], heading: a, time: h }
         ]);
-        const o = new c({
+        const r = new c({
           geometry: {
             type: "point",
             x: l,
@@ -61,42 +61,42 @@ class f {
           },
           symbol: this.createCIMSymbol(s)
         });
-        return o.visible = !1, this.vehicleObjectMap.set(r, {
-          graphic: o,
+        return r.visible = !1, this.vehicleObjectMap.set(o, {
+          graphic: r,
           data: s,
           waitForDelete: !1,
           isMoving: !1
-        }), o;
+        }), r;
       });
-      this.vehicleLayer.addMany(t), e();
+      this.vehicleLayer.addMany(e), t();
     });
   }
   updateVehicles(i) {
-    return new Promise((e) => {
+    return new Promise((t) => {
       if (this.isPaused) {
-        e();
+        t();
         return;
       }
-      const t = [];
+      const e = [];
       i.forEach((s) => {
-        const { vehicleId: r, heading: a, localTimestamp: h } = s, l = Number(s.x), n = Number(s.y), o = this.vehicleObjectMap.get(r);
-        o ? (o.data = s, o.graphic.attributes = {
+        const { vehicleId: o, heading: a, localTimestamp: h } = s, l = Number(s.x), n = Number(s.y), r = this.vehicleObjectMap.get(o);
+        r ? (r.data = s, r.graphic.attributes = {
           ...s,
           type: "trackVehicle"
         }, this.historyPositionMap.get(
-          r
+          o
         ).push({
           pos: [l, n, 0],
           heading: a,
           time: h
-        })) : t.push(s);
-      }), this.addVehicles(t), e();
+        })) : e.push(s);
+      }), this.addVehicles(e), t();
     });
   }
   deleteVehicles(i) {
-    this.isPaused || i.forEach((e) => {
-      const t = this.vehicleObjectMap.get(e);
-      t && (t.waitForDelete = !0);
+    this.isPaused || i.forEach((t) => {
+      const e = this.vehicleObjectMap.get(t);
+      e && (e.waitForDelete = !0);
     });
   }
   clearVehicles() {
@@ -129,36 +129,36 @@ class f {
     this.needInterpolate = i;
   }
   render() {
-    this.isPaused || this.vehicleObjectMap.forEach((i, e) => {
-      this.updatePosition(e);
+    this.isPaused || this.vehicleObjectMap.forEach((i, t) => {
+      this.updatePosition(t);
     }), this.rafSignal = requestAnimationFrame(() => this.render());
   }
   updatePosition(i) {
-    const e = this.historyPositionMap.get(i), t = this.vehicleObjectMap.get(i);
-    if (!e || !t || !t.isMoving && e.length <= 2)
+    const t = this.historyPositionMap.get(i), e = this.vehicleObjectMap.get(i);
+    if (!t || !e || !e.isMoving && t.length <= 2)
       return;
-    t.isMoving = !0, (t.graphic.getAttribute("roadLayer") || "1") === "1" ? t.graphic.visible = this.showGroundVehicle : t.graphic.visible = this.showElevatedVehicle, t.segmentStartTime || (t.segmentStartTime = Date.now(), t.segmentTotalTime = e[1].time - e[0].time);
-    const r = Date.now() - t.segmentStartTime, a = Math.min(
+    e.isMoving = !0, (e.graphic.getAttribute("roadLayer") || "1") === "1" ? e.graphic.visible = this.showGroundVehicle : e.graphic.visible = this.showElevatedVehicle, e.segmentStartTime || (e.segmentStartTime = Date.now(), e.segmentTotalTime = t[1].time - t[0].time);
+    const o = Date.now() - e.segmentStartTime, a = Math.min(
       1,
-      r / t.segmentTotalTime
+      o / e.segmentTotalTime
     );
     if (a === 1)
-      if (e.shift(), e.length === 1) {
-        t.waitForDelete ? (this.vehicleLayer.remove(t.graphic), this.vehicleObjectMap.delete(i), this.historyPositionMap.delete(i)) : (t.segmentStartTime = void 0, t.segmentTotalTime = void 0, t.graphic.visible = !1, t.isMoving = !1);
+      if (t.shift(), t.length === 1) {
+        e.waitForDelete ? (this.vehicleLayer.remove(e.graphic), this.vehicleObjectMap.delete(i), this.historyPositionMap.delete(i)) : (e.segmentStartTime = void 0, e.segmentTotalTime = void 0, e.graphic.visible = !1, e.isMoving = !1);
         return;
       } else
-        t.segmentStartTime = Date.now(), t.segmentTotalTime = e[1].time - e[0].time, (e[1].heading >= 270 && e[0].heading <= 90 || e[1].heading <= 90 && e[0].heading >= 270) && (e[1].heading > e[0].heading ? e[0].heading += 360 : e[1].heading += 360), t.graphic.geometry = {
+        e.segmentStartTime = Date.now(), e.segmentTotalTime = t[1].time - t[0].time, (t[1].heading >= 270 && t[0].heading <= 90 || t[1].heading <= 90 && t[0].heading >= 270) && (t[1].heading > t[0].heading ? t[0].heading += 360 : t[1].heading += 360), e.graphic.geometry = {
           type: "point",
-          x: e[0].pos[0],
-          y: e[0].pos[1]
+          x: t[0].pos[0],
+          y: t[0].pos[1]
         };
     else {
-      const h = e[0].pos[0] + (e[1].pos[0] - e[0].pos[0]) * a, l = e[0].pos[1] + (e[1].pos[1] - e[0].pos[1]) * a, n = e[0].heading + (e[1].heading - e[0].heading) * a;
-      t.graphic.geometry = {
+      const h = t[0].pos[0] + (t[1].pos[0] - t[0].pos[0]) * a, l = t[0].pos[1] + (t[1].pos[1] - t[0].pos[1]) * a, n = t[0].heading + (t[1].heading - t[0].heading) * a;
+      e.graphic.geometry = {
         type: "point",
         x: h,
         y: l
-      }, t.data.heading = n, t.graphic.symbol = this.createCIMSymbol(t.data);
+      }, e.data.heading = n, e.graphic.symbol = this.createCIMSymbol(e.data);
     }
   }
   /**
@@ -167,7 +167,7 @@ class f {
    * @returns
    */
   createCIMSymbol(i) {
-    const e = this.getPlateFontColor(i.plateColor);
+    const t = this.getPlateFontColor(i.plateColor), e = this.getCarPic(i.vehicleColor, i.speed);
     return {
       type: "cim",
       data: {
@@ -215,7 +215,7 @@ class f {
                         {
                           type: "CIMSolidFill",
                           enable: !0,
-                          color: e.backgroundColor
+                          color: t.backgroundColor
                         }
                       ]
                     },
@@ -225,7 +225,7 @@ class f {
                         {
                           type: "CIMSolidFill",
                           enable: !0,
-                          color: e.fillColor
+                          color: t.fillColor
                         }
                       ]
                     },
@@ -246,14 +246,11 @@ class f {
                 y: 0
               },
               anchorPointUnits: "Relative",
-              size: 30,
+              size: e.size,
               rotation: i.heading,
               rotateClockwise: !0,
               textureFilter: "Picture",
-              url: `${this.mapConfig.assetsRoot}Images/${this.getCarPic(
-                i.vehicleColor,
-                i.speed
-              )}`
+              url: `${this.mapConfig.assetsRoot}Images/${e.pic}`
             }
           ]
         }
@@ -265,53 +262,59 @@ class f {
    * @param carColor
    * @returns
    */
-  getCarPic(i, e) {
-    if (this.view.scale >= 1e3)
-      return e ? e <= 4.2 ? "point_red.png" : e <= 8.4 ? "point_yellow.png" : "point_green.png" : "point_green.png";
-    let t = "grey";
-    switch (typeof i == "string" && (i = i.toLowerCase()), i) {
-      case "a":
-      case 1:
-        t = "white";
-        break;
-      case "b":
-      case 2:
-        t = "grey";
-        break;
-      case "c":
-      case 3:
-        t = "yellow";
-        break;
-      case "d":
-      case 4:
-        t = "pink";
-        break;
-      case "e":
-      case 5:
-        t = "red";
-        break;
-      case "f":
-      case 10:
-        t = "purple";
-        break;
-      case "g":
-      case 6:
-        t = "green";
-        break;
-      case "h":
-      case 7:
-        t = "blue";
-        break;
-      case "i":
-      case 8:
-        t = "brown";
-        break;
-      case "j":
-      case 9:
-        t = "black";
-        break;
+  getCarPic(i, t) {
+    if (this.view.scale >= 1e3) {
+      let e = "point_green.png";
+      return t && (t <= 4.2 ? e = "point_red.png" : t <= 8.4 ? e = "point_yellow.png" : e = "point_green.png"), {
+        pic: e,
+        size: 15
+      };
+    } else {
+      let e = "grey";
+      switch (typeof i == "string" && (i = i.toLowerCase()), i) {
+        case "a":
+        case 1:
+          e = "white";
+          break;
+        case "b":
+        case 2:
+          e = "grey";
+          break;
+        case "c":
+        case 3:
+          e = "yellow";
+          break;
+        case "d":
+        case 4:
+          e = "pink";
+          break;
+        case "e":
+        case 5:
+          e = "red";
+          break;
+        case "f":
+        case 10:
+          e = "purple";
+          break;
+        case "g":
+        case 6:
+          e = "green";
+          break;
+        case "h":
+        case 7:
+          e = "blue";
+          break;
+        case "i":
+        case 8:
+          e = "brown";
+          break;
+        case "j":
+        case 9:
+          e = "black";
+          break;
+      }
+      return { pic: "/car/" + e + ".png", size: 30 };
     }
-    return "/car/" + t + ".png";
   }
   /**
    * 根据号牌颜色属性获取填充色和背景色
@@ -319,30 +322,30 @@ class f {
    * @returns
    */
   getPlateFontColor(i) {
-    let e = [255, 255, 255, 255], t = [169, 169, 169, 255];
+    let t = [255, 255, 255, 255], e = [169, 169, 169, 255];
     switch (i) {
       case 0:
-        e = [0, 0, 0, 255], t = [255, 255, 255, 255];
+        t = [0, 0, 0, 255], e = [255, 255, 255, 255];
         break;
       case 1:
-        e = [0, 0, 0, 255], t = [244, 164, 96, 255];
+        t = [0, 0, 0, 255], e = [244, 164, 96, 255];
         break;
       case 2:
-        e = [255, 255, 255, 255], t = [65, 105, 225, 255];
+        t = [255, 255, 255, 255], e = [65, 105, 225, 255];
         break;
       case 3:
-        e = [255, 255, 255, 255], t = [0, 0, 0, 255];
+        t = [255, 255, 255, 255], e = [0, 0, 0, 255];
         break;
       case 15:
-        e = [244, 164, 96, 255], t = [0, 250, 154, 255];
+        t = [244, 164, 96, 255], e = [0, 250, 154, 255];
         break;
       case 16:
-        e = [0, 0, 0, 255], t = [0, 250, 154, 255];
+        t = [0, 0, 0, 255], e = [0, 250, 154, 255];
         break;
     }
     return {
-      fillColor: e,
-      backgroundColor: t
+      fillColor: t,
+      backgroundColor: e
     };
   }
 }

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

@@ -1,22 +1,23 @@
 import y from "@arcgis/core/Basemap";
 import g from "@arcgis/core/config";
 import * as M from "@arcgis/core/core/reactiveUtils";
-import { Polygon as P, Polyline as W, Point as k } from "@arcgis/core/geometry";
+import { Polygon as P, Polyline as L, Point as k } from "@arcgis/core/geometry";
 import * as f from "@arcgis/core/geometry/support/webMercatorUtils";
-import z from "@arcgis/core/layers/GeoJSONLayer";
+import W from "@arcgis/core/layers/GeoJSONLayer";
+import z from "@arcgis/core/layers/MapImageLayer";
 import x from "@arcgis/core/layers/TileLayer";
-import L from "@arcgis/core/layers/WebTileLayer";
-import S from "@arcgis/core/Map";
+import S from "@arcgis/core/layers/WebTileLayer";
+import I from "@arcgis/core/Map";
 import O from "@arcgis/core/views/MapView";
 import R from "@arcgis/core/views/SceneView";
 import C from "@turf/destination";
 import * as H from "@turf/helpers";
-import I from "../stores/index.mjs";
-import G from "./custom-layer/custom-wmts-layer.mjs";
-function T(l, e) {
-  return l && (l.startsWith("http://") || l.startsWith("https://") ? l : e + l);
+import G from "../stores/index.mjs";
+import N from "./custom-layer/custom-wmts-layer.mjs";
+function T(h, e) {
+  return h && (h.startsWith("http://") || h.startsWith("https://") ? h : e + h);
 }
-class F {
+class Z {
   constructor() {
     this.mapConfig = {}, this.watchHandleMap = /* @__PURE__ */ new Map(), this.handleIndex = 0, this.zoomWatchHandle = null;
   }
@@ -26,11 +27,11 @@ class F {
    * @returns view
    */
   async initialize(e) {
-    const i = I.useAppDataStore, t = JSON.parse(JSON.stringify(i.mapConfig));
+    const i = G.useAppDataStore, t = JSON.parse(JSON.stringify(i.mapConfig));
     this.mapConfig = t;
-    const { container: a, markerClickCallback: r, mapClickCallback: d } = e;
+    const { container: a, markerClickCallback: c, mapClickCallback: d } = e;
     g.assetsPath = `${t.assetsRoot}/ArcgisAssets`, g.fontsUrl = `${t.assetsRoot}/fonts`, g.apiKey = "AAPKf5a3e1044d7a4faeb3b1ec7060f5c68equIrP2KbRyL-t_b40Kk4GTWUQ1BFCyttvyQPQnWpFmBd7kp9gkrVihjfmcKBwxjW";
-    const n = new S();
+    const n = new I();
     if ((t == null ? void 0 : t.mapOptions.mode.toLowerCase()) === "2d" ? this.view = new O({
       map: n,
       container: a,
@@ -54,7 +55,7 @@ class F {
       buttonEnabled: !1,
       breakpoint: !1
     }, this.view.on("click", async (s) => {
-      var v, b;
+      var b, v;
       if (d) {
         let o = s.mapPoint;
         o.spatialReference.isWebMercator && (o = f.webMercatorToGeographic(
@@ -75,7 +76,7 @@ class F {
             tilt: o.tilt,
             position: p.toJSON()
           };
-          console.log(w), (v = navigator.clipboard) == null || v.writeText(JSON.stringify(w));
+          console.log(w), (b = navigator.clipboard) == null || b.writeText(JSON.stringify(w));
         } else
           console.log(o.toJSON());
         console.log(this.view.zoom, this.view.scale);
@@ -89,65 +90,73 @@ class F {
           scale: this.view.scale
         });
       }
-      const c = (b = (await this.view.hitTest(s)).results) == null ? void 0 : b.filter(
+      const r = (v = (await this.view.hitTest(s)).results) == null ? void 0 : v.filter(
         (o) => o.type === "graphic"
       );
-      c.length > 0 && c.forEach((o) => {
+      r.length > 0 && r.forEach((o) => {
         var w;
         const p = o.graphic;
-        (w = p.attributes) != null && w.type && r && r(
+        (w = p.attributes) != null && w.type && c && c(
           p.attributes.type,
           p.attributes.id,
           p.attributes,
           s
         );
       });
-    }), t != null && t.baseLayers ? t.baseLayers.forEach((s) => {
-      const h = T(s.url, t.assetsRoot);
+    }), t != null && t.baseLayers ? (console.log(t.baseLayers), t.baseLayers.forEach((s) => {
+      const l = T(s.url, t.assetsRoot);
       switch (s.type.toLowerCase()) {
         case "webTile".toLowerCase(): {
-          const c = new L({
-            urlTemplate: h,
+          const r = new S({
+            urlTemplate: l,
             ...s.options
           });
-          n.add(c);
+          n.add(r);
           break;
         }
         case "tile": {
-          const c = new x({
-            url: h,
+          const r = new x({
+            url: l,
             ...s.options
           });
-          n.add(c);
+          n.add(r);
           break;
         }
         case "customWMTS".toLowerCase(): {
-          const c = new G({
-            urlTemplate: h,
+          const r = new N({
+            urlTemplate: l,
             ...s.options
           });
-          n.add(c);
+          n.add(r);
+          break;
+        }
+        case "mapImage".toLowerCase(): {
+          const r = new z({
+            url: l,
+            ...s.options
+          });
+          n.add(r), console.log(r);
           break;
         }
         case "arcgis": {
-          const c = new y(s.options);
-          n.basemap = c;
+          const r = new y(s.options);
+          n.basemap = r;
           break;
         }
       }
-    }) : n.basemap = new y({
+    })) : n.basemap = new y({
       style: {
         id: "arcgis/light-gray",
         language: "zh-CN"
       }
     }), t != null && t.hdLayers) {
       const s = t.hdLayers.map(
-        (h) => (
+        (l) => (
           // 图层文件为GeoJson格式, renderer和symbol使用autocast配置
-          new z({
-            url: T(h.url, t.assetsRoot),
-            ...h.options,
-            title: h.options.id
+          new W({
+            url: T(l.url, t.assetsRoot),
+            ...l.options,
+            title: l.options.id
           })
         )
       );
@@ -192,7 +201,7 @@ class F {
           e.target = new k(e.target);
           break;
         case "polyline":
-          e.target = new W(e.target);
+          e.target = new L(e.target);
           break;
         case "polygon":
           e.target = new P(e.target);
@@ -223,7 +232,7 @@ class F {
         { duration: (e.duration || 2) * 1e3 }
       );
     else {
-      const a = Math.tan(i * Math.PI / 180) * e.height, r = C(
+      const a = Math.tan(i * Math.PI / 180) * e.height, c = C(
         H.point(e.center),
         a,
         t + 180,
@@ -234,8 +243,8 @@ class F {
       await this.view.goTo(
         {
           position: {
-            x: r.geometry.coordinates[0],
-            y: r.geometry.coordinates[1],
+            x: c.geometry.coordinates[0],
+            y: c.geometry.coordinates[1],
             z: e.height
           },
           heading: t,
@@ -251,19 +260,19 @@ class F {
     const { name: i, duration: t = 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: t * 1e3 }), { status: 0, message: "成功" }) : { status: -1, message: "未配置camera" };
+    const c = a[i];
+    return c ? (await this.view.goTo(c, { duration: t * 1e3 }), { status: 0, message: "成功" }) : { status: -1, message: "未配置camera" };
   }
   /**
    * 经纬度转像素坐标，在地图移动时回调
    * */
   requestCoordinateTransform(e, i) {
     let t = 0;
-    const r = 1e3 / 30, d = M.watch(
+    const c = 1e3 / 30, d = M.watch(
       () => this.view.center,
       () => {
         const n = this.transformPoints(e), m = Date.now();
-        m - t > r && (i(n), t = m);
+        m - t > c && (i(n), t = m);
       }
     );
     return this.handleIndex++, this.watchHandleMap.set(this.handleIndex, d), { handle: this.handleIndex, points: this.transformPoints(e) };
@@ -298,5 +307,5 @@ class F {
   }
 }
 export {
-  F as default
+  Z as default
 };

package/es/src/gis-map/utils/open-drive-renderer/index.d.ts

@@ -18,6 +18,8 @@ export default class OpenDriveRenderer {
     private mouseClickHandler;
     private junctionNames;
     private readonly junctionScale;
+    private scaleWatch;
+    private xodrBorder;
     constructor(view: __esri.MapView | __esri.SceneView);
     private projectName;
     private openDriveServer;
@@ -111,6 +113,11 @@ export default class OpenDriveRenderer {
     geometrySearch(coordinate: number[][]): Promise<IResult>;
     splitLane(params: ISplitOpenDriveLaneParams): Promise<IResult>;
     clearSplitLane(): void;
+    /**
+     * 更新所有路口的symbol
+     * @param symbolStyle
+     */
+    private updateAllJunctionSymbol;
     /**
      * 生成路口点符号。在不同比例尺下，使用不同的符号
      * @param attributes