gisviewer-vue3-arcgis 1.0.284 → 1.0.285

package/es/src/gis-map/utils/edpass-device-controller.mjs

@@ -0,0 +1,278 @@
+import * as b from "@arcgis/core/core/reactiveUtils.js";
+import u from "@arcgis/core/Graphic";
+import n from "@arcgis/core/layers/GraphicsLayer";
+import { toRaw as y } from "vue";
+import v from "../../stores/index.mjs";
+class C {
+  constructor(e) {
+    this.clusterScaleThreshold = 1, this.watchHandle = null, this.currentShowParams = null, this.isCameraVisible = !1, this.isKkVisible = !1, this.esServer = "", this.clusterEnabled = {
+      cameraNormal: !1,
+      cameraAbnormal: !1,
+      kkNormal: !1,
+      kkAbnormal: !1
+    }, this.view = e;
+    const t = v.useAppDataStore;
+    this.mapInitializer = y(t.mapInitializer);
+    const i = y(t.mapConfig);
+    this.esServer = (i == null ? void 0 : i.esServer) || "", this.cameraNormalLayer = new n({
+      id: "cameraNormalLayer",
+      visible: !1
+    }), this.cameraAbnormalLayer = new n({
+      id: "cameraAbnormalLayer",
+      visible: !1
+    }), this.kkNormalLayer = new n({
+      id: "kkNormalLayer",
+      visible: !1
+    }), this.kkAbnormalLayer = new n({
+      id: "kkAbnormalLayer",
+      visible: !1
+    }), this.view.map.addMany([
+      this.cameraNormalLayer,
+      this.cameraAbnormalLayer,
+      this.kkNormalLayer,
+      this.kkAbnormalLayer
+    ]);
+  }
+  async setEdpassLayerVisibility(e) {
+    return this.currentShowParams = {
+      ...this.currentShowParams ?? {},
+      ...e
+    }, e.deviceType !== "camera" && e.deviceType !== "kk" ? { status: -1, message: "不支持的设备类型" } : (e.deviceType === "camera" && (this.isCameraVisible = e.visible), e.deviceType === "kk" && (this.isKkVisible = e.visible), this.updateClusterEnabled(e), (e.style ?? this.getAutoStyleByScale()) === "cluster" || e.style == null ? this.ensureStationaryWatch() : this.tryRemoveWatchIfNoVisible(), this.applyClusterMode(), { status: 0, message: "Success" });
+  }
+  /**
+   * 控制散点图层显示隐藏
+   * @param visible
+   */
+  showScatter(e) {
+    const t = e ?? this.isCameraVisible, i = e ?? this.isKkVisible;
+    this.mapInitializer.setLayerVisibility({
+      id: "camera-normal",
+      visible: t
+    }), this.mapInitializer.setLayerVisibility({
+      id: "camera-abnormal",
+      visible: t
+    }), this.mapInitializer.setLayerVisibility({
+      id: "kk-normal",
+      visible: i
+    }), this.mapInitializer.setLayerVisibility({
+      id: "kk-abnormal",
+      visible: i
+    });
+  }
+  getLayerConfig(e) {
+    let t, i, a;
+    return e.deviceType === "camera" ? e.deviceState === "normal" ? (t = "/GisViewerAssets/Images/gis/gis_sxj_map.png", i = [45, 108, 196], a = this.cameraNormalLayer) : (t = "/GisViewerAssets/Images/gis/gis_sxj_yc.png", i = [189, 49, 50], a = this.cameraAbnormalLayer) : e.deviceState === "normal" ? (t = "/GisViewerAssets/Images/gis/gis_kk_map.png", i = [45, 108, 196], a = this.kkNormalLayer) : (t = "/GisViewerAssets/Images/gis/gis_kk_yc.png", i = [189, 49, 50], a = this.kkAbnormalLayer), {
+      icon: t,
+      color: i,
+      deviceLayer: a
+    };
+  }
+  getAutoStyleByScale() {
+    return this.view.scale > this.clusterScaleThreshold ? "cluster" : "scatter";
+  }
+  updateClusterEnabled(e) {
+    const t = e.deviceState;
+    e.deviceType === "camera" ? t ? t === "normal" ? this.clusterEnabled.cameraNormal = e.visible : this.clusterEnabled.cameraAbnormal = e.visible : (this.clusterEnabled.cameraNormal = e.visible, this.clusterEnabled.cameraAbnormal = e.visible) : t ? t === "normal" ? this.clusterEnabled.kkNormal = e.visible : this.clusterEnabled.kkAbnormal = e.visible : (this.clusterEnabled.kkNormal = e.visible, this.clusterEnabled.kkAbnormal = e.visible);
+  }
+  ensureStationaryWatch() {
+    this.watchHandle || (this.watchHandle = b.when(
+      () => this.view.stationary,
+      async () => {
+        if (!this.currentShowParams)
+          return;
+        if ((this.currentShowParams.style ?? this.getAutoStyleByScale()) === "scatter") {
+          this.applyScatterMode();
+          return;
+        }
+        await this.applyClusterMode();
+      }
+    ));
+  }
+  hasAnyClusterEnabled() {
+    return this.clusterEnabled.cameraNormal || this.clusterEnabled.cameraAbnormal || this.clusterEnabled.kkNormal || this.clusterEnabled.kkAbnormal;
+  }
+  tryRemoveWatchIfNoVisible() {
+    var i;
+    const e = this.isCameraVisible || this.isKkVisible, t = this.hasAnyClusterEnabled();
+    !e && !t && ((i = this.watchHandle) == null || i.remove(), this.watchHandle = null);
+  }
+  applyScatterMode() {
+    this.showScatter(), this.cameraNormalLayer.visible = !1, this.cameraAbnormalLayer.visible = !1, this.kkNormalLayer.visible = !1, this.kkAbnormalLayer.visible = !1, this.cameraNormalLayer.removeAll(), this.cameraAbnormalLayer.removeAll(), this.kkNormalLayer.removeAll(), this.kkAbnormalLayer.removeAll();
+  }
+  async applyClusterMode() {
+    var r, l;
+    this.showScatter(!1);
+    const e = ((r = this.currentShowParams) == null ? void 0 : r.ddCode) || "", t = ((l = this.currentShowParams) == null ? void 0 : l.zdCode) || "", i = this.view.extent, a = [];
+    this.cameraNormalLayer.visible = this.clusterEnabled.cameraNormal, this.clusterEnabled.cameraNormal ? a.push(
+      this.showClusterInExtent(
+        {
+          deviceType: "camera",
+          deviceState: "normal",
+          style: "cluster",
+          ddCode: e,
+          zdCode: t,
+          visible: !0
+        },
+        i
+      )
+    ) : this.cameraNormalLayer.removeAll(), this.kkNormalLayer.visible = this.clusterEnabled.kkNormal, this.clusterEnabled.kkNormal ? a.push(
+      this.showClusterInExtent(
+        {
+          deviceType: "kk",
+          deviceState: "normal",
+          style: "cluster",
+          ddCode: e,
+          zdCode: t,
+          visible: !0
+        },
+        i
+      )
+    ) : this.kkNormalLayer.removeAll(), await Promise.all(a), this.tryRemoveWatchIfNoVisible();
+  }
+  async showClusterInExtent(e, t) {
+    const i = await fetch(`${this.esServer}/queryGeoAggregation`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json"
+      },
+      body: JSON.stringify({
+        deviceType: e.deviceType,
+        topLeftLat: t.ymax,
+        topLeftLon: t.xmin,
+        bottomRightLat: t.ymin,
+        bottomRightLon: t.xmax,
+        devStateSet: e.deviceState ? [e.deviceState === "normal" ? "1" : "2"] : ["1", "2"],
+        zdCode: e.zdCode || "",
+        ddCode: e.ddCode || "",
+        mapLevel: this.view.zoom + 8,
+        meter: 1e3
+      })
+    });
+    if (i.status !== 200) {
+      console.error(i.statusText);
+      return;
+    }
+    const a = await i.json();
+    if (a.code !== 200)
+      return;
+    const { icon: r, color: l, deviceLayer: h } = this.getLayerConfig(e);
+    h.removeAll();
+    const d = a.data.map((s) => {
+      var m;
+      const o = (s.count.toString().length * 6 + 6) / 2, c = new u({
+        geometry: {
+          type: "point",
+          x: s.lon,
+          y: s.lat
+        },
+        attributes: {
+          id: ((m = s.devInfo) == null ? void 0 : m.deviceId) || s.key,
+          type: e.deviceType,
+          count: s.count,
+          typeName: e.deviceType === "camera" ? "视频" : "卡口",
+          stateName: e.deviceState === "normal" ? "正常" : "异常",
+          ...s.devInfo
+        }
+      });
+      return s.count > 1 ? c.symbol = {
+        type: "cim",
+        data: {
+          type: "CIMSymbolReference",
+          symbol: {
+            type: "CIMPointSymbol",
+            symbolLayers: [
+              {
+                type: "CIMVectorMarker",
+                size: 32,
+                colorLocked: !0,
+                anchorPointUnits: "Relative",
+                frame: { xmin: -16, ymin: -16, xmax: 16, ymax: 16 },
+                markerGraphics: [
+                  {
+                    type: "CIMMarkerGraphic",
+                    geometry: {
+                      rings: [
+                        [
+                          [-o, 30],
+                          [o, 30],
+                          [o, 15],
+                          [-o, 15],
+                          [-o, 30]
+                        ]
+                      ]
+                    },
+                    symbol: {
+                      type: "CIMPolygonSymbol",
+                      symbolLayers: [
+                        {
+                          type: "CIMSolidFill",
+                          enable: !0,
+                          color: l.concat([255])
+                        },
+                        {
+                          type: "CIMSolidStroke",
+                          enable: !0,
+                          width: 3,
+                          color: l.concat([128])
+                        }
+                      ]
+                    }
+                  },
+                  {
+                    type: "CIMMarkerGraphic",
+                    primitiveName: "textGraphic",
+                    geometry: { x: 0, y: 0 },
+                    symbol: {
+                      type: "CIMTextSymbol",
+                      fontFamilyName: "msyh",
+                      height: 12,
+                      horizontalAlignment: "Center",
+                      offsetX: 0,
+                      offsetY: 22,
+                      symbol: {
+                        type: "CIMPolygonSymbol",
+                        symbolLayers: [
+                          {
+                            type: "CIMSolidFill",
+                            enable: !0,
+                            color: [255, 255, 255, 255]
+                          }
+                        ]
+                      },
+                      verticalAlignment: "Center"
+                    },
+                    textString: s.count.toString()
+                  }
+                ],
+                scaleSymbolsProportionally: !0,
+                respectFrame: !0
+              },
+              {
+                type: "CIMPictureMarker",
+                enable: !0,
+                anchorPoint: {
+                  x: 0,
+                  y: 0
+                },
+                anchorPointUnits: "Relative",
+                size: 24,
+                rotateClockwise: !0,
+                textureFilter: "Picture",
+                url: r
+              }
+            ]
+          }
+        }
+      } : c.symbol = {
+        type: "picture-marker",
+        url: r,
+        width: 18,
+        height: 18
+      }, c;
+    });
+    h.addMany(d);
+  }
+}
+export {
+  C as default
+};

package/es/src/gis-map/utils/green-wave-band-controller/index.mjs

@@ -0,0 +1,362 @@
+import * as y from "@arcgis/core/core/reactiveUtils.js";
+import { Polyline as m } from "@arcgis/core/geometry";
+import n from "@arcgis/core/Graphic";
+import c from "@arcgis/core/layers/GraphicsLayer";
+import b from "axios";
+class w {
+  constructor(e) {
+    this.selectedNodeIds = [], this.nodeScale = 5e3, this.hasGpu = !1, this.hasGpu = localStorage.getItem("gpu") !== "Unknown", this.view = e, this.roadsectLayer = new c({
+      id: "roadsectLayer"
+    }), this.view.map.add(this.roadsectLayer), this.allNodesLayer = new c({
+      id: "allNodesLayer"
+    }), this.view.map.add(this.allNodesLayer), this.bandLayer = new c({
+      id: "bandLayer"
+    }), this.view.map.add(this.bandLayer);
+  }
+  /**
+   * 新增绿波带
+   * @param params
+   */
+  addGreenWaveBand(e) {
+    this.addNodeCallback = e.addCrossCallback, this.removeNodeCallback = e.removeCrossCallback, e.removeAllCrossCallback && (this.removeAllNodeCallback = e.removeAllCrossCallback), this.selectedNodeIds = [], this.openDriveServer = e.odrServer, this.showAllNodes(e.crossesInArea), this.viewClickWatcher || (this.viewClickWatcher = this.view.on("click", (i) => {
+      this.handleViewClick(i);
+    }));
+  }
+  stopAddGreenWaveBand() {
+    var e;
+    (e = this.viewClickWatcher) == null || e.remove(), this.viewClickWatcher = void 0, this.allNodesLayer.removeAll(), this.selectedNodeIds = [], this.roadsectLayer.removeAll(), this.bandLayer.removeAll();
+  }
+  async showGreenWaveBand(e) {
+    this.removeGreenWaveBand(e.bandId), this.scaleWatcher || (this.scaleWatcher = y.watch(
+      () => this.view.scale,
+      (s, o) => {
+        s > this.nodeScale && o <= this.nodeScale ? this.bandLayer.graphics.forEach((a) => {
+          a.geometry.type === "point" && (a.symbol = this.getShowNodeSymbol("marker"));
+        }) : s <= this.nodeScale && o > this.nodeScale && this.bandLayer.graphics.forEach((a) => {
+          a.geometry.type === "point" && (a.symbol = this.getShowNodeSymbol("picture"));
+        });
+      }
+    ));
+    const i = new m({
+      paths: [e.coordinates]
+    }), t = new n({
+      geometry: i,
+      symbol: this.getLineSymbol(!0, e),
+      attributes: {
+        bandId: e.bandId,
+        type: "greenWaveBand",
+        id: e.bandId
+      }
+    });
+    this.roadsectLayer.add(t), await this.view.goTo(t), e.nodeList && e.nodeList.forEach((s) => {
+      const o = new n({
+        geometry: {
+          type: "point",
+          x: s.longitude,
+          y: s.latitude
+        },
+        symbol: this.getShowNodeSymbol("picture"),
+        attributes: {
+          ...s,
+          bandId: e.bandId,
+          type: "greenWaveBandNode"
+        }
+      });
+      this.bandLayer.add(o);
+    });
+  }
+  removeGreenWaveBand(e) {
+    let i = this.bandLayer.graphics.filter(
+      (t) => t.getAttribute("bandId") === e
+    );
+    this.bandLayer.removeMany(i.toArray()), i = this.roadsectLayer.graphics.filter(
+      (t) => t.getAttribute("bandId") === e
+    ), this.roadsectLayer.removeMany(i.toArray());
+  }
+  /**
+   * 显示所有路口，进入待选状态
+   * @param nodeAttributes
+   */
+  showAllNodes(e) {
+    const i = [];
+    e.forEach((t) => {
+      i.push(
+        new n({
+          geometry: {
+            type: "point",
+            x: t.longitude,
+            y: t.latitude
+          },
+          symbol: this.getEditableNodeSymbol(!1),
+          attributes: { ...t, selected: !1 }
+        })
+      );
+    }), this.allNodesLayer.addMany(i);
+  }
+  /**
+   * 点击待选/已选路口
+   * @param event
+   * @returns
+   */
+  async handleViewClick(e) {
+    var a;
+    const t = (a = (await this.view.hitTest(e, {
+      include: [this.allNodesLayer]
+    })).results) == null ? void 0 : a.filter(
+      (d) => d.type === "graphic"
+    );
+    if (t.length === 0)
+      return;
+    const s = t[0].graphic, o = s.getAttribute("id");
+    if (this.selectedNodeIds.includes(o)) {
+      const d = this.selectedNodeIds.indexOf(o) + 1;
+      if (d === 1)
+        this.removeAllNodeCallback && this.removeAllNodeCallback(), this.selectedNodeIds = [], this.allNodesLayer.graphics.forEach((r) => {
+          r.setAttribute("selected", !1), r.symbol = this.getEditableNodeSymbol(!1), r.visible = !0;
+        }), this.roadsectLayer.removeAll();
+      else {
+        for (let r = d; r < this.selectedNodeIds.length; r++) {
+          this.removeNodeCallback && this.removeNodeCallback({
+            id: this.selectedNodeIds[r]
+          });
+          for (let l = 0; l < this.roadsectLayer.graphics.length; l++) {
+            const h = this.roadsectLayer.graphics.getItemAt(l);
+            (h.getAttribute("id") === this.selectedNodeIds[r] || !h.getAttribute("selected")) && (this.roadsectLayer.remove(h), l--);
+          }
+        }
+        this.selectedNodeIds = this.selectedNodeIds.slice(0, d), this.allNodesLayer.graphics.forEach((r) => {
+          const l = this.selectedNodeIds.includes(
+            r.getAttribute("id")
+          );
+          r.setAttribute("selected", l), r.symbol = this.getEditableNodeSymbol(l), r.visible = l;
+        }), await this.showDownstreamNodes(o);
+      }
+    } else {
+      s.setAttribute("selected", !0), s.symbol = this.getEditableNodeSymbol(!0), this.selectedNodeIds.push(o), this.allNodesLayer.graphics.forEach((r) => {
+        r.visible = r.getAttribute("selected");
+      });
+      let d = [];
+      for (let r = 0; r < this.roadsectLayer.graphics.length; r++) {
+        const l = this.roadsectLayer.graphics.getItemAt(r);
+        l.getAttribute("id") === o ? (l.symbol = this.getLineSymbol(!0), l.setAttribute("selected", !0), d = l.geometry.paths[0]) : l.getAttribute("selected") || (this.roadsectLayer.remove(l), r--);
+      }
+      this.addNodeCallback && this.addNodeCallback({
+        ...s.attributes,
+        roadsect: d
+      }), await this.showDownstreamNodes(o);
+    }
+  }
+  /**
+   * 显示下游节点
+   * @param nodeId
+   */
+  async showDownstreamNodes(e) {
+    this.view.container.style.cursor = "progress";
+    const i = await b.get(
+      `http://${this.openDriveServer}/api/computable/getDownstreamNodes`,
+      { params: { nodeId: e } }
+    );
+    if (i.status !== 200 || i.data.status !== 0) {
+      this.view.container.style.cursor = "default";
+      return;
+    }
+    i.data.result.forEach((s) => {
+      this.allNodesLayer.graphics.forEach((o) => {
+        if (o.getAttribute("nodeId") === s.id && o.getAttribute("selected") === !1 && (o.visible = !0, s.coordinates)) {
+          const a = new n({
+            geometry: {
+              type: "polyline",
+              paths: [s.coordinates]
+            },
+            symbol: this.getLineSymbol(!1),
+            attributes: { ...s, selected: !1 }
+          });
+          this.roadsectLayer.add(a);
+        }
+      });
+    }), this.view.container.style.cursor = "default";
+  }
+  getLineSymbol(e, i) {
+    if (e) {
+      const t = (i == null ? void 0 : i.lineWidth) || 4, s = (i == null ? void 0 : i.lineColor) || [55, 125, 34, 255], o = (i == null ? void 0 : i.arrowColor) || [255, 255, 255, 255];
+      return Array.isArray(s) && s.length === 3 && s.push(255), Array.isArray(o) && o.length === 3 && o.push(255), {
+        type: "cim",
+        data: {
+          type: "CIMSymbolReference",
+          symbol: {
+            type: "CIMLineSymbol",
+            symbolLayers: [
+              {
+                type: "CIMVectorMarker",
+                enable: !0,
+                size: 4,
+                markerPlacement: {
+                  type: "CIMMarkerPlacementAlongLineSameSize",
+                  endings: "WithMarkers",
+                  placementTemplate: [40],
+                  angleToLine: !0
+                },
+                frame: {
+                  xmin: -5,
+                  ymin: -5,
+                  xmax: 5,
+                  ymax: 5
+                },
+                markerGraphics: [
+                  {
+                    type: "CIMMarkerGraphic",
+                    geometry: {
+                      paths: [
+                        [
+                          [t, -t],
+                          [3 * t, 0],
+                          [t, t]
+                        ],
+                        [
+                          [-t, t],
+                          [-3 * t, 0],
+                          [-t, -t]
+                        ]
+                      ]
+                    },
+                    symbol: {
+                      type: "CIMLineSymbol",
+                      symbolLayers: [
+                        {
+                          type: "CIMSolidStroke",
+                          enable: !0,
+                          width: 1.5,
+                          color: o
+                        }
+                      ]
+                    }
+                  }
+                ]
+              },
+              {
+                type: "CIMSolidStroke",
+                enable: !0,
+                width: t,
+                color: s
+              }
+            ]
+          }
+        }
+      };
+    } else
+      return {
+        type: "simple-line",
+        color: "gray",
+        width: 2
+      };
+  }
+  getShowNodeSymbol(e) {
+    return e === "marker" ? {
+      type: "simple-marker",
+      style: "circle",
+      color: [61, 139, 249],
+      size: 8,
+      outline: {
+        color: "white",
+        width: 1
+      }
+    } : this.getEditableNodeSymbol(!0);
+  }
+  /**
+   * 编辑状态时的路口符号
+   * 全部用cim符号，是否选中用不同的图标
+   * @param selected 是否选中
+   * @returns
+   */
+  getEditableNodeSymbol(e) {
+    return {
+      type: "cim",
+      data: {
+        type: "CIMSymbolReference",
+        primitiveOverrides: [
+          {
+            // 将textGraphic的TextString替换为graphic.attributes.name
+            type: "CIMPrimitiveOverride",
+            primitiveName: "textGraphic",
+            propertyName: "TextString",
+            valueExpressionInfo: {
+              type: "CIMExpressionInfo",
+              title: "Custom",
+              expression: 'Replace($feature.name, "与", "/") + "  " + $feature.signalId',
+              returnType: "Default"
+            }
+          }
+        ],
+        symbol: {
+          type: "CIMPointSymbol",
+          symbolLayers: [
+            // 路口名称
+            {
+              type: "CIMVectorMarker",
+              size: 30,
+              colorLocked: !0,
+              anchorPointUnits: "Relative",
+              frame: { xmin: -16, ymin: -16, xmax: 16, ymax: 16 },
+              markerGraphics: [
+                {
+                  type: "CIMMarkerGraphic",
+                  primitiveName: "textGraphic",
+                  geometry: { x: 0, y: 0 },
+                  symbol: {
+                    type: "CIMTextSymbol",
+                    height: 12,
+                    horizontalAlignment: "Center",
+                    offsetX: 0,
+                    offsetY: 20,
+                    haloSize: 2,
+                    haloSymbol: {
+                      type: "CIMPolygonSymbol",
+                      symbolLayers: [
+                        {
+                          type: "CIMSolidFill",
+                          enable: !0,
+                          color: [255, 255, 255, 255]
+                        }
+                      ]
+                    },
+                    symbol: {
+                      type: "CIMPolygonSymbol",
+                      symbolLayers: [
+                        {
+                          type: "CIMSolidFill",
+                          enable: !0,
+                          color: [0, 0, 0, 255]
+                        }
+                      ]
+                    },
+                    verticalAlignment: "Center"
+                  },
+                  textString: ""
+                }
+              ],
+              scaleSymbolsProportionally: !0,
+              respectFrame: !0
+            },
+            // 路口图标
+            {
+              type: "CIMPictureMarker",
+              enable: !0,
+              anchorPoint: {
+                x: 0,
+                y: 0
+              },
+              anchorPointUnits: "Relative",
+              size: 25,
+              rotateClockwise: !0,
+              textureFilter: "Picture",
+              url: `/GisViewerAssets/Images/cross/${e ? "gis_xhj_blue" : "gis_xhj_gray"}.png`
+            }
+          ]
+        }
+      }
+    };
+  }
+}
+export {
+  w as default
+};