gisviewer-vue3-arcgis 1.0.284 → 1.0.285

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

@@ -0,0 +1,386 @@
+import p from "@arcgis/core/Graphic";
+import m from "@arcgis/core/layers/GraphicsLayer";
+import { toRaw as g } from "vue";
+import y from "../../../stores/index.mjs";
+class v {
+  constructor(i) {
+    this.hasGpu = !1, this.appDataStore = y.useAppDataStore, this.logTable = [
+      [
+        "uuid",
+        "ptcId",
+        "plateno",
+        "timestamp",
+        "localTimestamp",
+        "timestamp_str",
+        "speed",
+        "laneNo",
+        "objHeight",
+        "objLength",
+        "latitude",
+        "longitude",
+        "ptcType",
+        "vehicleType",
+        "vehicleColor",
+        "plateColor",
+        "sbdm",
+        "heading",
+        "fixAngle",
+        "roadLayer",
+        "status",
+        "step",
+        "receiveTimestamp"
+      ]
+    ], this.needInterpolate = !0, this.isPaused = !1, this.showVehiclePlate = !1, this.showGroundVehicle = !0, this.showElevatedVehicle = !0, this.historyPositionMap = /* @__PURE__ */ new Map(), this.vehicleObjectMap = /* @__PURE__ */ new Map(), this.view = i, this.mapConfig = g(this.appDataStore.mapConfig), this.vehicleLayer = new m({
+      id: "vehicleLayer"
+    }), this.view.map.add(this.vehicleLayer);
+    const t = localStorage.getItem("gpu");
+    this.hasGpu = t !== "Unknown", this.hasGpu && (this.rafSignal = requestAnimationFrame(() => this.render()));
+  }
+  getLog() {
+    return this.logTable;
+  }
+  async init() {
+  }
+  addVehicles(i) {
+    return new Promise((t) => {
+      if (this.isPaused) {
+        t();
+        return;
+      }
+      const e = i.map((s) => {
+        const { vehicleId: r, heading: o, localTimestamp: l } = s, n = Number(s.x), h = Number(s.y), a = new p({
+          geometry: {
+            type: "point",
+            x: n,
+            y: h
+          },
+          attributes: {
+            ...s,
+            type: "trackVehicle"
+          },
+          symbol: this.hasGpu ? this.createCIMSymbol(s) : this.createMarkerSymbol()
+        });
+        return this.hasGpu && (a.visible = !1, this.historyPositionMap.set(r, [
+          { pos: [n, h, 0], heading: o, time: l }
+        ]), this.vehicleObjectMap.set(r, {
+          graphic: a,
+          data: s,
+          waitForDelete: !1,
+          isMoving: !1
+        })), a;
+      });
+      this.vehicleLayer.addMany(e), t();
+    });
+  }
+  updateVehicles(i) {
+    return new Promise((t) => {
+      if (this.isPaused) {
+        t();
+        return;
+      }
+      const e = [];
+      i.forEach((s) => {
+        const { vehicleId: r, heading: o, localTimestamp: l } = s, n = Number(s.x), h = Number(s.y);
+        if (this.hasGpu) {
+          const a = this.vehicleObjectMap.get(r);
+          a ? (a.data = s, a.graphic.attributes = {
+            ...s,
+            type: "trackVehicle"
+          }, this.historyPositionMap.get(
+            r
+          ).push({
+            pos: [n, h, 0],
+            heading: o,
+            time: l
+          })) : e.push(s);
+        } else {
+          const a = this.vehicleLayer.graphics.find(
+            (c) => c.getAttribute("vehicleId") == s.vehicleId
+          );
+          a ? a.geometry = {
+            type: "point",
+            x: n,
+            y: h
+          } : e.push(s);
+        }
+      }), this.addVehicles(e), t();
+    });
+  }
+  deleteVehicles(i) {
+    this.isPaused || (this.hasGpu ? i.forEach((t) => {
+      const e = this.vehicleObjectMap.get(t);
+      e && (e.waitForDelete = !0);
+    }) : i.forEach((t) => {
+      const e = this.vehicleLayer.graphics.find(
+        (s) => s.getAttribute("vehicleId") == t
+      );
+      e && this.vehicleLayer.remove(e);
+    }));
+  }
+  clearVehicles() {
+    this.vehicleLayer.removeAll(), this.vehicleObjectMap.clear(), this.historyPositionMap.clear();
+  }
+  /**
+   * 设置地面车辆显示隐藏
+   * @param visible
+   */
+  toggleGroundVehicle(i) {
+    this.showGroundVehicle = i;
+  }
+  /**
+   * 设置高架车辆显示隐藏
+   * @param visible
+   */
+  toggleElevatedVehicle(i) {
+    this.showElevatedVehicle = i;
+  }
+  toggleTrafficInfo(i) {
+    i.name === "vehiclePlate" && (this.showVehiclePlate = i.visible);
+  }
+  togglePause(i) {
+    this.isPaused = i, this.isPaused && this.rafSignal ? cancelAnimationFrame(this.rafSignal) : this.rafSignal = requestAnimationFrame(() => this.render());
+  }
+  updatePanelContent(i) {
+    console.log(i);
+  }
+  setInterpolate(i) {
+    this.needInterpolate = i;
+  }
+  render() {
+    this.isPaused || this.vehicleObjectMap.forEach((i, t) => {
+      this.updatePosition(t);
+    }), this.rafSignal = requestAnimationFrame(() => this.render());
+  }
+  updatePosition(i) {
+    const t = this.historyPositionMap.get(i), e = this.vehicleObjectMap.get(i);
+    if (!t || !e || !e.isMoving && t.length <= 2)
+      return;
+    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 r = Date.now() - e.segmentStartTime, o = Math.min(
+      1,
+      r / e.segmentTotalTime
+    );
+    if (o === 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 {
+        e.segmentStartTime = Date.now();
+        const l = r - e.segmentTotalTime;
+        e.segmentTotalTime = t[1].time - t[0].time - l, Math.abs(t[1].heading - t[0].heading) > 180 && (t[1].heading > t[0].heading ? t[0].heading += 360 : t[1].heading += 360), e.graphic.geometry = {
+          type: "point",
+          x: t[0].pos[0],
+          y: t[0].pos[1]
+        };
+      }
+    else {
+      const l = t[0].pos[0] + (t[1].pos[0] - t[0].pos[0]) * o, n = t[0].pos[1] + (t[1].pos[1] - t[0].pos[1]) * o, h = t[0].heading + (t[1].heading - t[0].heading) * o;
+      e.graphic.geometry = {
+        type: "point",
+        x: l,
+        y: n
+      }, e.data.heading = h, e.graphic.symbol = this.hasGpu ? this.createCIMSymbol(e.data) : this.createMarkerSymbol();
+    }
+  }
+  /**
+   * 基于轨迹数据创建cim符号，显示车辆图标和车牌号码
+   * @param vehTrack
+   * @returns
+   */
+  createCIMSymbol(i) {
+    const t = this.getPlateFontColor(i.plateColor), e = this.getCarPic(i.vehicleColor, i.speed);
+    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: t.backgroundColor
+                        }
+                      ]
+                    },
+                    symbol: {
+                      type: "CIMPolygonSymbol",
+                      symbolLayers: [
+                        {
+                          type: "CIMSolidFill",
+                          enable: !0,
+                          color: t.fillColor
+                        }
+                      ]
+                    },
+                    verticalAlignment: "Center"
+                  },
+                  textString: ""
+                }
+              ],
+              scaleSymbolsProportionally: !0,
+              respectFrame: !0
+            },
+            // 车辆图标
+            {
+              type: "CIMPictureMarker",
+              enable: !0,
+              anchorPoint: {
+                x: 0,
+                y: 0
+              },
+              anchorPointUnits: "Relative",
+              size: e.size,
+              rotation: i.heading,
+              rotateClockwise: !0,
+              textureFilter: "Picture",
+              url: `${this.mapConfig.assetsRoot}Images/${e.pic}`
+            }
+          ]
+        }
+      }
+    };
+  }
+  createMarkerSymbol() {
+    return {
+      type: "simple-marker",
+      color: "green",
+      size: 5,
+      outline: {
+        color: "white",
+        width: 1
+      }
+    };
+  }
+  /**
+   * 根据车身颜色属性返回对应的车辆图标
+   * @param carColor
+   * @returns
+   */
+  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: 20 };
+    }
+  }
+  /**
+   * 根据号牌颜色属性获取填充色和背景色
+   * @param plateColor
+   * @returns
+   */
+  getPlateFontColor(i) {
+    let t = [255, 255, 255, 255], e = [169, 169, 169, 255];
+    switch (i) {
+      case 0:
+        t = [0, 0, 0, 255], e = [255, 255, 255, 255];
+        break;
+      case 1:
+        t = [0, 0, 0, 255], e = [244, 164, 96, 255];
+        break;
+      case 2:
+        t = [255, 255, 255, 255], e = [65, 105, 225, 255];
+        break;
+      case 3:
+        t = [255, 255, 255, 255], e = [0, 0, 0, 255];
+        break;
+      case 15:
+        t = [244, 164, 96, 255], e = [0, 250, 154, 255];
+        break;
+      case 16:
+        t = [0, 0, 0, 255], e = [0, 250, 154, 255];
+        break;
+    }
+    return {
+      fillColor: t,
+      backgroundColor: e
+    };
+  }
+}
+export {
+  v as default
+};

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

@@ -1,9 +1,9 @@
 import o from "./FlyToPoints.mjs";
 import r from "./map-initializer.mjs";
 import i from "./overlay.mjs";
-import m from "./road-config-tool";
+import m from "./road-config-tool/index.mjs";
 import t from "./sketchView.mjs";
-import e from "./sketchViewTool";
+import e from "./sketchViewTool.mjs";
 import p from "./GreenWaveline.mjs";
 import a from "./Layers.mjs";
 import f from "./syncMapView.mjs";

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

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