gisviewer-vue3-arcgis 1.0.85

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

@@ -0,0 +1,35 @@
+import { EVehiclePlateState, ITraceRendererInterface, IVehicleTrack } from '../../../types';
+export default class TraceLayerRenderer implements ITraceRendererInterface {
+    private view;
+    private readonly vehicleLayer;
+    private mapConfig;
+    constructor(view: __esri.MapView);
+    private showVehiclePlate;
+    private historyPositionMap;
+    private vehicleObjectMap;
+    addVehicles(objects: IVehicleTrack[]): void;
+    updateVehicles(objects: IVehicleTrack[]): void;
+    deleteVehicles(idList: string[]): void;
+    clearVehicles(): void;
+    updatePanelContent(contentType: EVehiclePlateState): void;
+    private render;
+    private updatePosition;
+    /**
+     * 基于轨迹数据创建cim符号，显示车辆图标和车牌号码
+     * @param vehTrack
+     * @returns
+     */
+    private createCIMSymbol;
+    /**
+     * 根据车身颜色属性返回对应的车辆图标
+     * @param carColor
+     * @returns
+     */
+    private getCarPic;
+    /**
+     * 根据号牌颜色属性获取填充色和背景色
+     * @param plateColor
+     * @returns
+     */
+    private getPlateFontColor;
+}

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

@@ -0,0 +1,286 @@
+import g from "@arcgis/core/Graphic";
+import y from "@arcgis/core/layers/GraphicsLayer";
+import d from "../../stores/index.mjs";
+class v {
+  constructor(i) {
+    this.showVehiclePlate = !1, this.historyPositionMap = /* @__PURE__ */ new Map(), this.vehicleObjectMap = /* @__PURE__ */ new Map(), this.view = i;
+    const e = d.useAppDataStore;
+    this.mapConfig = JSON.parse(JSON.stringify(e.mapConfig)), this.vehicleLayer = new y({
+      id: "vehicleLayer"
+    }), this.view.map.add(this.vehicleLayer), requestAnimationFrame(() => this.render());
+  }
+  addVehicles(i) {
+    const e = i.map((t) => {
+      const { crossId: o, ptcId: c, localTimestamp: a } = t, r = Number(t.x), n = Number(t.y), s = Number(t.heading), h = `${o}-${c}`;
+      this.historyPositionMap.set(h, [
+        { pos: [r, n, 0], heading: s, time: a }
+      ]);
+      const l = new g({
+        geometry: {
+          type: "point",
+          x: r,
+          y: n
+        },
+        attributes: {
+          ...t
+        },
+        symbol: this.createCIMSymbol(t)
+      });
+      return l.visible = !1, this.vehicleObjectMap.set(h, {
+        graphic: l,
+        data: t
+      }), l;
+    });
+    this.vehicleLayer.addMany(e);
+  }
+  updateVehicles(i) {
+    const e = [];
+    i.forEach((t) => {
+      const { crossId: o, ptcId: c, localTimestamp: a } = t, r = Number(t.x), n = Number(t.y);
+      let s = Number(t.heading);
+      const h = `${o}-${c}`, l = this.vehicleObjectMap.get(h);
+      if (l) {
+        l.data = t;
+        const p = this.historyPositionMap.get(
+          h
+        ), m = p[p.length - 1];
+        Math.abs(s - m.heading) >= 180 && (s > m.heading ? m.heading += 360 : s += 360), p.push({ pos: [r, n, 0], heading: s, time: a });
+      } else
+        e.push(t);
+    }), this.addVehicles(e);
+  }
+  deleteVehicles(i) {
+    i.forEach((e) => {
+      const t = this.vehicleObjectMap.get(e);
+      t && (this.vehicleLayer.remove(t.graphic), this.vehicleObjectMap.delete(e), this.historyPositionMap.delete(e));
+    });
+  }
+  clearVehicles() {
+    this.vehicleLayer.removeAll(), this.vehicleObjectMap.clear(), this.historyPositionMap.clear();
+  }
+  updatePanelContent(i) {
+    console.log(i);
+  }
+  render() {
+    this.vehicleObjectMap.forEach((i, e) => {
+      this.updatePosition(e);
+    }), requestAnimationFrame(() => this.render());
+  }
+  updatePosition(i) {
+    const e = this.historyPositionMap.get(i), t = this.vehicleObjectMap.get(i);
+    if (!e || !t || e.length < 2)
+      return;
+    const o = Date.now();
+    t.graphic.visible = !0, t.segmentStartTime || (t.segmentStartTime = o, t.segmentTotalTime = e[1].time - e[0].time);
+    const c = o - t.segmentStartTime, a = Math.min(
+      1,
+      c / t.segmentTotalTime
+    );
+    if (a === 1)
+      if (e.shift(), e.length === 1) {
+        t.segmentStartTime = void 0, t.segmentTotalTime = void 0;
+        return;
+      } else
+        t.segmentStartTime = o, t.segmentTotalTime = e[1].time - e[0].time, Math.abs(
+          e[1].heading - e[0].heading
+        ) >= 180 && (e[1].heading > e[0].heading ? e[0].heading += 360 : e[1].heading += 360), t.graphic.geometry = {
+          type: "point",
+          x: e[0].pos[0],
+          y: e[0].pos[1]
+        };
+    else {
+      const r = e[0].pos[0] + (e[1].pos[0] - e[0].pos[0]) * a, n = e[0].pos[1] + (e[1].pos[1] - e[0].pos[1]) * a, s = e[0].heading + (e[1].heading - e[0].heading) * a;
+      t.graphic.geometry = {
+        type: "point",
+        x: r,
+        y: n
+      }, t.data.heading = s, t.graphic.symbol = this.createCIMSymbol(t.data);
+    }
+  }
+  /**
+   * 基于轨迹数据创建cim符号，显示车辆图标和车牌号码
+   * @param vehTrack
+   * @returns
+   */
+  createCIMSymbol(i) {
+    const e = this.getPlateFontColor(i.plateColor);
+    return {
+      type: "cim",
+      data: {
+        type: "CIMSymbolReference",
+        primitiveOverrides: [
+          {
+            // 将textGraphic的TextString替换为graphic.attributes.showName
+            type: "CIMPrimitiveOverride",
+            primitiveName: "textGraphic",
+            propertyName: "TextString",
+            valueExpressionInfo: {
+              type: "CIMExpressionInfo",
+              title: "Custom",
+              expression: "$feature.showName",
+              returnType: "Default"
+            }
+          }
+        ],
+        symbol: {
+          type: "CIMPointSymbol",
+          symbolLayers: [
+            // 车辆号牌
+            {
+              type: "CIMVectorMarker",
+              enable: this.showVehiclePlate,
+              size: 32,
+              colorLocked: !0,
+              anchorPointUnits: "Relative",
+              frame: { xmin: -8, ymin: -8, xmax: 8, ymax: 8 },
+              markerGraphics: [
+                {
+                  type: "CIMMarkerGraphic",
+                  primitiveName: "textGraphic",
+                  geometry: { x: 0, y: 0 },
+                  symbol: {
+                    type: "CIMTextSymbol",
+                    height: 4,
+                    horizontalAlignment: "Center",
+                    offsetX: 0,
+                    offsetY: 8,
+                    haloSize: 1,
+                    haloSymbol: {
+                      type: "CIMPolygonSymbol",
+                      symbolLayers: [
+                        {
+                          type: "CIMSolidFill",
+                          enable: !0,
+                          color: e.backgroundColor
+                        }
+                      ]
+                    },
+                    symbol: {
+                      type: "CIMPolygonSymbol",
+                      symbolLayers: [
+                        {
+                          type: "CIMSolidFill",
+                          enable: !0,
+                          color: e.fillColor
+                        }
+                      ]
+                    },
+                    verticalAlignment: "Center"
+                  },
+                  textString: ""
+                }
+              ],
+              scaleSymbolsProportionally: !0,
+              respectFrame: !0
+            },
+            // 车辆图标
+            {
+              type: "CIMPictureMarker",
+              enable: !0,
+              anchorPoint: {
+                x: 0,
+                y: 0
+              },
+              anchorPointUnits: "Relative",
+              size: 30,
+              rotation: i.heading,
+              rotateClockwise: !0,
+              textureFilter: "Picture",
+              url: `${this.mapConfig.assetsRoot}Images/car/${this.getCarPic(
+                i.vehicleColor
+              )}`
+            }
+          ]
+        }
+      }
+    };
+  }
+  /**
+   * 根据车身颜色属性返回对应的车辆图标
+   * @param carColor
+   * @returns
+   */
+  getCarPic(i) {
+    if (this.view.zoom <= 15)
+      return "point.png";
+    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 e + ".png";
+  }
+  /**
+   * 根据号牌颜色属性获取填充色和背景色
+   * @param plateColor
+   * @returns
+   */
+  getPlateFontColor(i) {
+    let e = [255, 255, 255, 255], t = [169, 169, 169, 255];
+    switch (i) {
+      case 0:
+        e = [0, 0, 0, 255], t = [255, 255, 255, 255];
+        break;
+      case 1:
+        e = [0, 0, 0, 255], t = [244, 164, 96, 255];
+        break;
+      case 2:
+        e = [255, 255, 255, 255], t = [65, 105, 225, 255];
+        break;
+      case 3:
+        e = [255, 255, 255, 255], t = [0, 0, 0, 255];
+        break;
+      case 15:
+        e = [244, 164, 96, 255], t = [0, 250, 154, 255];
+        break;
+      case 16:
+        e = [0, 0, 0, 255], t = [0, 250, 154, 255];
+        break;
+    }
+    return {
+      fillColor: e,
+      backgroundColor: t
+    };
+  }
+}
+export {
+  v as default
+};

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

@@ -0,0 +1,21 @@
+import FlyToPoints from './FlyToPoints';
+import MapInitializer from './map-initializer';
+import Overlay from './overlay';
+import RoadConfigTool from './road-config-tool';
+import SketchView from './sketchView';
+import sketchViewTool from './sketchViewTool';
+import GreenWaveLine from './GreenWaveline';
+import BaseLayers from './Layers';
+import SyncMapView from './syncMapView';
+declare const MapUtils: {
+    MapInitializer: typeof MapInitializer;
+    RoadConfigTool: typeof RoadConfigTool;
+    FlyToPoints: typeof FlyToPoints;
+    Overlay: typeof Overlay;
+    SketchView: typeof SketchView;
+    sketchViewTool: typeof sketchViewTool;
+    SyncMapView: typeof SyncMapView;
+    GreenWaveLine: typeof GreenWaveLine;
+    BaseLayers: typeof BaseLayers;
+};
+export default MapUtils;

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

@@ -0,0 +1,23 @@
+import o from "./FlyToPoints.mjs";
+import r from "./map-initializer.mjs";
+import i from "./overlay.mjs";
+import m from "./road-config-tool/index.mjs";
+import t from "./sketchView.mjs";
+import e from "./sketchViewTool.mjs";
+import p from "./GreenWaveline.mjs";
+import a from "./Layers.mjs";
+import f from "./syncMapView.mjs";
+const d = {
+  MapInitializer: r,
+  RoadConfigTool: m,
+  FlyToPoints: o,
+  Overlay: i,
+  SketchView: t,
+  sketchViewTool: e,
+  SyncMapView: f,
+  GreenWaveLine: p,
+  BaseLayers: a
+};
+export {
+  d as default
+};

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

@@ -0,0 +1,50 @@
+import MapView from '@arcgis/core/views/MapView';
+import SceneView from '@arcgis/core/views/SceneView';
+import { ILookAtParams, IResult, ISetMapCameraParams, ISetMapCenterParams } from '../../types';
+export default class MapInitializer {
+    private view;
+    private mapConfig;
+    /**
+     * 初始化地图
+     * @param params 容器
+     * @returns view
+     */
+    initialize(params: {
+        container: HTMLElement;
+        markerClickCallback?: (type: string, id: string, detail: any, event?: any) => void;
+        mapClickCallback?: (mapPoint: number[], screenPoint: number[], event?: any) => void;
+    }): Promise<MapView | SceneView>;
+    /**
+     * 设置地图中心点
+     * @param params
+     * @returns
+     */
+    setMapCenter(params: ISetMapCenterParams): Promise<IResult>;
+    /**
+     * 在一定的高度，以一定的角度去观察某个坐标
+     * */
+    lookAt(params: ILookAtParams): Promise<void>;
+    setMapCamera(params: ISetMapCameraParams): Promise<IResult>;
+    private watchHandleMap;
+    private handleIndex;
+    /**
+     * 经纬度转像素坐标，在地图移动时回调
+     * */
+    requestCoordinateTransform(points: number[][], callback: (points: number[][]) => void): {
+        handle: number;
+        points: number[][];
+    };
+    private transformPoints;
+    /**
+     * 停止坐标转换回调
+     * */
+    cancelCoordinateTransform(handleIndex: number): void;
+    private zoomWatchHandle;
+    /**
+     * 设置地图zoom范围
+     * */
+    setMapZoomRange(zoomRange: {
+        min?: number;
+        max?: number;
+    }): void;
+}

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

@@ -0,0 +1,248 @@
+import b from "@arcgis/core/Basemap";
+import M from "@arcgis/core/Map";
+import d from "@arcgis/core/config";
+import * as v from "@arcgis/core/core/reactiveUtils";
+import { Point as P } from "@arcgis/core/geometry";
+import * as f from "@arcgis/core/geometry/support/webMercatorUtils";
+import T from "@arcgis/core/layers/GeoJSONLayer";
+import z from "@arcgis/core/layers/TileLayer";
+import k from "@arcgis/core/layers/WebTileLayer";
+import x from "@arcgis/core/views/MapView";
+import W from "@arcgis/core/views/SceneView";
+import S from "@turf/destination";
+import * as L from "@turf/helpers";
+import I from "../stores/index.mjs";
+function u(m, e) {
+  return m.startsWith("http://") || m.startsWith("https://") ? m : e + m;
+}
+class j {
+  constructor() {
+    this.mapConfig = {}, this.watchHandleMap = /* @__PURE__ */ new Map(), this.handleIndex = 0, this.zoomWatchHandle = null;
+  }
+  /**
+   * 初始化地图
+   * @param params 容器
+   * @returns view
+   */
+  async initialize(e) {
+    const i = I.useAppDataStore, t = JSON.parse(JSON.stringify(i.mapConfig));
+    this.mapConfig = t;
+    const { container: a, markerClickCallback: c, mapClickCallback: w } = e;
+    d.assetsPath = `${t.assetsRoot}/ArcgisAssets`, d.fontsUrl = `${t.assetsRoot}/fonts`, d.apiKey = "AAPKf5a3e1044d7a4faeb3b1ec7060f5c68equIrP2KbRyL-t_b40Kk4GTWUQ1BFCyttvyQPQnWpFmBd7kp9gkrVihjfmcKBwxjW";
+    const n = new M();
+    if ((t == null ? void 0 : t.mapOptions.mode.toLowerCase()) === "2d" ? this.view = new x({
+      map: n,
+      container: a,
+      ...t.mapOptions
+    }) : this.view = new W({
+      map: n,
+      container: a,
+      ...t == null ? void 0 : t.mapOptions
+    }), this.view.on("click", async (s) => {
+      var g, y;
+      if (w) {
+        let o = s.mapPoint;
+        o.spatialReference.isWebMercator && (o = f.webMercatorToGeographic(
+          o
+        )), w(
+          [o.x, o.y],
+          [s.screenPoint.x, s.screenPoint.y],
+          s
+        );
+      }
+      if (this.view.type === "3d") {
+        const o = this.view.camera;
+        if (this.view.spatialReference.isWebMercator) {
+          const l = f.webMercatorToGeographic(
+            o.position
+          ), p = {
+            heading: o.heading,
+            tilt: o.tilt,
+            position: l.toJSON()
+          };
+          console.log(p), (g = navigator.clipboard) == null || g.writeText(JSON.stringify(p));
+        } else
+          console.log(o.toJSON());
+      } else {
+        let o = this.view.center;
+        this.view.spatialReference.isWebMercator && (o = f.webMercatorToGeographic(
+          o
+        )), console.log({
+          center: o.toJSON(),
+          zoom: this.view.zoom
+        });
+      }
+      const h = (y = (await this.view.hitTest(s)).results) == null ? void 0 : y.filter(
+        (o) => o.type === "graphic"
+      );
+      h.length > 0 && h.forEach((o) => {
+        var p;
+        const l = o.graphic;
+        (p = l.attributes) != null && p.type && c && c(
+          l.attributes.type,
+          l.attributes.id,
+          l.attributes,
+          s
+        );
+      });
+    }), t != null && t.baseLayers ? t.baseLayers.forEach((s) => {
+      switch (s.type.toLowerCase()) {
+        case "webTile".toLowerCase(): {
+          const r = u(s.url, t.assetsRoot), h = new k({
+            urlTemplate: r,
+            ...s.options
+          });
+          n.add(h);
+          break;
+        }
+        case "tile": {
+          const r = u(s.url, t.assetsRoot), h = new z({
+            url: r,
+            ...s.options
+          });
+          n.add(h);
+          break;
+        }
+        case "arcgis": {
+          const r = new b(s.options);
+          n.basemap = r;
+          break;
+        }
+      }
+    }) : n.basemap = new b({
+      style: {
+        id: "arcgis/dark-gray",
+        language: "zh-CN"
+      }
+    }), t != null && t.hdLayers) {
+      const s = t.hdLayers.map(
+        (r) => (
+          // 图层文件为GeoJson格式, renderer和symbol使用autocast配置
+          new T({
+            url: u(r.url, t.assetsRoot),
+            ...r.options,
+            title: r.options.id
+          })
+        )
+      );
+      n.addMany(s);
+    }
+    return this.view.ui.remove("attribution"), this.view.ui.add("compass", "top-left"), await this.view.when(), this.view;
+  }
+  /**
+   * 设置地图中心点
+   * @param params
+   * @returns
+   */
+  async setMapCenter(e) {
+    return this.view ? (e.center ? await this.view.goTo(
+      {
+        target: e.center,
+        zoom: e.zoom
+      },
+      { duration: (e.duration || 0) * 1e3 }
+    ) : e.camera && await this.view.goTo(e.camera, {
+      duration: (e.duration || 0) * 1e3
+    }), { status: 0, message: "成功" }) : { status: -1, message: "未初始化" };
+  }
+  /**
+   * 在一定的高度，以一定的角度去观察某个坐标
+   * */
+  async lookAt(e) {
+    if (this.view.type === "2d")
+      return;
+    const i = e.tilt || 0, t = e.heading || 0;
+    if (i === 0)
+      await this.view.goTo(
+        {
+          position: {
+            x: e.center[0],
+            y: e.center[1],
+            z: e.height
+          },
+          heading: t,
+          tilt: 0
+        },
+        { duration: (e.duration || 2) * 1e3 }
+      );
+    else {
+      const a = Math.tan(i * Math.PI / 180) * e.height, c = S(
+        L.point(e.center),
+        a,
+        180,
+        {
+          units: "meters"
+        }
+      );
+      await this.view.goTo(
+        {
+          position: {
+            x: c.geometry.coordinates[0],
+            y: c.geometry.coordinates[1],
+            z: e.height
+          },
+          heading: t,
+          tilt: i
+        },
+        { duration: (e.duration || 2) * 1e3 }
+      );
+    }
+  }
+  async setMapCamera(e) {
+    if (!this.view)
+      return { status: -1, message: "未初始化" };
+    const { crossId: i, duration: t = 0 } = e, { camera: a } = this.mapConfig;
+    return a ? a[i] ? (await this.view.goTo(
+      {
+        target: a.center,
+        zoom: e.zoom || 15
+      },
+      { duration: t * 1e3 }
+    ), { status: 0, message: "成功" }) : { status: -1, message: "未配置camera" } : { status: -1, message: "未配置camera" };
+  }
+  /**
+   * 经纬度转像素坐标，在地图移动时回调
+   * */
+  requestCoordinateTransform(e, i) {
+    let t = 0;
+    const c = 1e3 / 30, w = v.watch(
+      () => this.view.center,
+      () => {
+        const n = this.transformPoints(e), s = Date.now();
+        s - t > c && (i(n), t = s);
+      }
+    );
+    return this.handleIndex++, this.watchHandleMap.set(this.handleIndex, w), { handle: this.handleIndex, points: this.transformPoints(e) };
+  }
+  transformPoints(e) {
+    return e.map((i) => {
+      const t = new P({
+        x: i[0],
+        y: i[1]
+      }), a = this.view.toScreen(t);
+      return [a.x, a.y];
+    });
+  }
+  /**
+   * 停止坐标转换回调
+   * */
+  cancelCoordinateTransform(e) {
+    const i = this.watchHandleMap.get(e);
+    i && (i.remove(), this.watchHandleMap.delete(e));
+  }
+  /**
+   * 设置地图zoom范围
+   * */
+  setMapZoomRange(e) {
+    const { min: i, max: t } = e;
+    !i && !t || (this.zoomWatchHandle && this.zoomWatchHandle.remove(), this.zoomWatchHandle = v.watch(
+      () => this.view.zoom,
+      (a) => {
+        i && a <= i && (this.view.zoom = i), t && a >= t && (this.view.zoom = t);
+      }
+    ));
+  }
+}
+export {
+  j as default
+};

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

@@ -0,0 +1,9 @@
+import View from '@arcgis/core/views/View';
+export default class OpenDriveRenderer {
+    private readonly view;
+    private laneLayer;
+    constructor(view: View);
+    showOpenDrive(server: string, projectName: string): Promise<void>;
+    private showRoad;
+    hideOpenDrive(): Promise<void>;
+}