gisviewer-vue3-arcgis 1.0.284 → 1.0.286

package/es/src/gis-map/utils/signal-control-area/district-renderer.mjs

@@ -0,0 +1,122 @@
+import u from "@arcgis/core/Graphic";
+import l from "@arcgis/core/layers/FeatureLayer";
+import * as a from "@turf/helpers";
+import { convex as p, buffer as f } from "@turf/turf";
+import n from "../common-utils.mjs";
+import { districtDashLineLayerOptions as C, districtSolidLineLayerOptions as L } from "./layer-symbol.mjs";
+class x {
+  constructor(t) {
+    this.style = "", this.view = t, this.districtControllerDashLayer = new l(
+      C
+    ), this.districtControllerDashLayer.spatialReference = t.spatialReference, this.districtControllerSolidLayer = new l(
+      L
+    ), this.districtControllerSolidLayer.spatialReference = t.spatialReference, this.districtControllerSolidLayer.popupEnabled = !0, this.view.map.addMany([
+      this.districtControllerDashLayer,
+      this.districtControllerSolidLayer
+    ]);
+  }
+  /**
+   * 显示区控
+   * @param controllers 区控控制器数组
+   */
+  async showDistricts(t) {
+    await this.clearDistricts();
+    const i = [];
+    for (let e = 0; e < t.length; e++) {
+      const r = t[e], s = r.getAllSignalCoordinates();
+      let o = null;
+      if (s.length >= 2)
+        if (s.length === 2)
+          o = a.lineString(s);
+        else {
+          const h = a.featureCollection(
+            s.map((y) => a.point(y))
+          );
+          o = p(h), o || (o = a.lineString(s));
+        }
+      else if (s.length === 1)
+        o = a.point(s[0]);
+      else
+        continue;
+      const d = f(o.geometry, 200, {
+        units: "meters"
+      }), c = new u({
+        geometry: {
+          type: "polyline",
+          paths: d.geometry.coordinates
+        },
+        attributes: {
+          ObjectID: e,
+          id: r.id,
+          name: r.name,
+          subDistrictCount: r.subDistrictCount,
+          signalCount: r.signalCount,
+          parentId: r.parentId,
+          parentName: r.parentName,
+          selected: this.style,
+          type: "district"
+        }
+      });
+      i.push(c);
+    }
+    await this.districtControllerDashLayer.applyEdits({
+      addFeatures: i
+    }), await this.districtControllerSolidLayer.applyEdits({
+      addFeatures: i
+    }), await n.viewGoto(this.view, i);
+  }
+  /**
+   * 清除区控图层
+   */
+  async clearDistricts() {
+    let t = await this.districtControllerDashLayer.queryFeatures();
+    await this.districtControllerDashLayer.applyEdits({
+      deleteFeatures: t.features
+    }), this.districtControllerDashLayer.definitionExpression = "1=1", t = await this.districtControllerSolidLayer.queryFeatures(), await this.districtControllerSolidLayer.applyEdits({
+      deleteFeatures: t.features
+    }), this.districtControllerSolidLayer.definitionExpression = "1=1";
+  }
+  /**
+   * 设置区控图层可见性
+   * @param visible
+   */
+  setVisible(t) {
+    this.districtControllerDashLayer.visible = t, this.districtControllerSolidLayer.visible = t;
+  }
+  /**
+   * 定位区控
+   * @param id
+   * @returns
+   */
+  async locateDistrict(t) {
+    const i = this.districtControllerDashLayer.createQuery();
+    i.where = `id = '${t}'`, i.returnGeometry = !0, i.outFields = ["*"];
+    const e = await this.districtControllerDashLayer.queryFeatures(i);
+    return e.features.length > 0 ? (await n.viewGoto(this.view, e.features), { status: 0, message: "ok" }) : { status: 1, message: "未找到区控" };
+  }
+  /**
+   * 高亮区控, 其他区控隐藏
+   * @param id 区控ID
+   * @return 返回高亮区控的数量
+   */
+  async highlightDistrict(t) {
+    const i = this.districtControllerDashLayer.definitionExpression;
+    this.districtControllerDashLayer.definitionExpression = `id = '${t.id}'`;
+    const e = await this.districtControllerDashLayer.queryFeatures(), r = e.features.length;
+    return r > 0 ? (this.districtControllerSolidLayer.definitionExpression = `id = '${t.id}'`, await n.viewGoto(
+      this.view,
+      e.features,
+      t.needZoom !== !1
+    )) : this.districtControllerDashLayer.definitionExpression = i, r;
+  }
+  filter(t) {
+    const i = `id = '${t}'`;
+    this.districtControllerDashLayer.definitionExpression = i, this.districtControllerSolidLayer.definitionExpression = i;
+  }
+  resetFilter() {
+    this.districtControllerDashLayer.definitionExpression = "1=1", this.districtControllerSolidLayer.definitionExpression = "1=1";
+  }
+}
+export {
+  x as default
+};

package/es/src/gis-map/utils/signal-control-area/edit-area.mjs

@@ -0,0 +1,550 @@
+import n from "@arcgis/core/Graphic";
+import u from "@arcgis/core/layers/GraphicsLayer";
+import g from "@turf/buffer";
+import p from "@turf/convex";
+import * as a from "@turf/helpers";
+import h from "axios";
+import b from "concaveman";
+import f from "../../../stores/index.mjs";
+class L {
+  constructor(e) {
+    var i;
+    this.crossScale = 5e3, this.hasGpu = !1, this.crossIdsInDistrict = [], this.view = e, this.hasGpu = localStorage.getItem("gpu") !== "Unknown";
+    const r = f.useAppDataStore.mapConfig;
+    this.openDriveServer = (i = r.openDriveServer) == null ? void 0 : i.url, this.districtControllerLayer = new u({
+      id: "districtControllerLayer"
+    }), this.subDistrictControllerLayer = new u({
+      id: "subDistrictControllerLayer"
+    }), this.crossLayer = new u({
+      id: "crossLayer"
+    }), this.view.map.addMany([
+      this.districtControllerLayer,
+      this.subDistrictControllerLayer,
+      this.crossLayer
+    ]);
+  }
+  /**
+   * 显示单个子区
+   * @param params
+   * @returns
+   */
+  showSubSignalControlArea(e) {
+    this.crossLayer.removeAll(), this.crossLayer.visible = !0;
+    const r = e.children.map((i) => {
+      const s = { ...i, selected: !0 };
+      return new n({
+        geometry: {
+          type: "point",
+          x: i.longitude,
+          y: i.latitude
+        },
+        symbol: this.getCrossSymbolInSubDistrict(s),
+        attributes: s
+      });
+    });
+    return this.crossLayer.addMany(r), this.view.goTo(r, {
+      duration: this.hasGpu ? 1e3 : 0
+    }), { status: 0, message: "ok" };
+  }
+  /**
+   * 点击路口时
+   * @param event
+   * @returns
+   */
+  async handleViewClick(e) {
+    var s;
+    const r = (s = (await this.view.hitTest(e, {
+      include: [this.crossLayer]
+    })).results) == null ? void 0 : s.filter(
+      (o) => o.type === "graphic"
+    );
+    if (r.length === 0)
+      return;
+    const i = r[0].graphic;
+    i.getAttribute("selected") ? i.getAttribute("signalId") && (this.removeCrossCallback && this.removeCrossCallback({ id: i.getAttribute("id") }), i.setAttribute("selected", !1), i.symbol = this.getCrossSymbolInSubDistrict(
+      i.attributes
+    )) : (i.getAttribute("signalId") && (this.addCrossCallback && this.addCrossCallback(i.attributes), i.setAttribute("selected", !0), i.symbol = this.getCrossSymbolInSubDistrict(
+      i.attributes
+    )), await this.showNearbyCrosses(i.getAttribute("id")));
+  }
+  /**
+   * 显示周边的路口
+   * @param crossIds
+   * @returns
+   */
+  async showNearbyCrosses(e) {
+    const t = await h.get(
+      `http://${this.openDriveServer}/api/computable/getRelatedNodesForNode`,
+      { params: { nodeIds: e } }
+    );
+    if (t.status === 200)
+      if (t.data.status === 0) {
+        const r = t.data.result, i = [];
+        for (const s of r) {
+          const o = s.nodeId;
+          if (o.startsWith("-"))
+            continue;
+          if (s.signalId && !this.crossIdsInDistrict.includes(o)) {
+            console.log("不是此区控内的路口", o);
+            continue;
+          }
+          if (this.crossLayer.graphics.some(
+            (c) => c.getAttribute("id") === o
+          ))
+            continue;
+          const m = new n({
+            geometry: {
+              type: "point",
+              x: s.lon,
+              y: s.lat
+            },
+            symbol: this.getCrossSymbolInSubDistrict(s),
+            attributes: {
+              id: o,
+              name: s.name,
+              signalId: s.signalId,
+              selected: !1
+            }
+          });
+          i.push(m);
+        }
+        return this.crossLayer.addMany(i), { status: 0, message: "ok" };
+      } else
+        return { status: -1, message: t.data.message };
+    else
+      return { status: -1, message: "请求失败" };
+  }
+  /**
+   * 编辑子区的路口
+   * @returns
+   */
+  async editSubSignalControlArea(e) {
+    if (e.odrServer) {
+      this.openDriveServer = e.odrServer, this.crossIdsInDistrict = e.crossesInArea.map((s) => s.id);
+      const t = a.featureCollection(
+        e.crossesInArea.map(
+          (s) => a.point([s.longitude, s.latitude])
+        )
+      ), r = p(t);
+      r && (this.districtControllerLayer.removeAll(), this.districtControllerLayer.add(
+        new n({
+          geometry: {
+            type: "polygon",
+            rings: r.geometry.coordinates
+          },
+          symbol: {
+            type: "simple-fill",
+            style: "none",
+            outline: {
+              color: [61, 139, 249],
+              width: 3,
+              style: "long-dash"
+            }
+          }
+        })
+      )), this.addCrossCallback = e.addCrossCallback, this.removeCrossCallback = e.removeCrossCallback, this.viewClickWatcher || (this.viewClickWatcher = this.view.on("click", async (s) => {
+        await this.handleViewClick(s);
+      }));
+      const i = this.crossLayer.graphics.toArray().map((s) => s.getAttribute("id")).join(",");
+      return await this.showNearbyCrosses(i);
+    } else
+      return { status: 1, message: "未配置OpenDriveServer" };
+  }
+  stopEditSubSignalControlArea() {
+    var t;
+    (t = this.viewClickWatcher) == null || t.remove(), this.viewClickWatcher = void 0;
+    const e = this.crossLayer.graphics.filter(
+      (r) => r.getAttribute("signalId") === "" || !r.getAttribute("signalId") || !r.getAttribute("selected")
+    );
+    this.crossLayer.removeMany(e.toArray()), this.districtControllerLayer.removeAll();
+  }
+  /**
+   * 从外部接口选中一个路口
+   * @param id
+   */
+  selectSubSignalControlAreaCross(e) {
+    return this.crossLayer.graphics.forEach((t) => {
+      if (t.getAttribute("id") === e && !t.getAttribute("selected"))
+        return t.setAttribute("selected", !0), t.symbol = this.getCrossSymbolInSubDistrict(
+          t.attributes
+        ), { status: 0, message: "ok" };
+    }), { status: 0, message: "未找到" };
+  }
+  /**
+   * 从外部接口取消选中一个路口
+   * @param id
+   */
+  unselectSubSignalControlAreaCross(e) {
+    return this.crossLayer.graphics.forEach((t) => {
+      if (t.getAttribute("id") === e && t.getAttribute("selected"))
+        return t.setAttribute("selected", !1), t.symbol = this.getCrossSymbolInSubDistrict(
+          t.attributes
+        ), { status: 0, message: "ok" };
+    }), { status: 0, message: "未找到" };
+  }
+  /**
+   * 在区控\子区\路口图层中查找对应的graphic
+   * @param id
+   * @returns
+   */
+  findAreaGraphic(e) {
+    let t = this.districtControllerLayer.graphics.find(
+      (r) => r.attributes.id === e
+    );
+    return t || (t = this.subDistrictControllerLayer.graphics.find(
+      (r) => r.attributes.id === e
+    )), t || (t = this.crossLayer.graphics.find((r) => r.attributes.id === e)), t;
+  }
+  /**
+   * 绘制区控与子区
+   * @param districtController
+   * @param isDistrict 是否是区控
+   * @returns
+   */
+  drawArea(e, t) {
+    const r = e.getAllSignalCoordinates();
+    if (r.length >= 2) {
+      let s = null;
+      if (r.length === 2)
+        s = a.lineString(r);
+      else {
+        if (t) {
+          const y = a.featureCollection(
+            r.map((d) => a.point(d))
+          );
+          s = p(y);
+        } else {
+          const y = b(r, 0.5);
+          y.length >= 4 && (s = a.polygon([y]));
+        }
+        s || (s = a.lineString(r));
+      }
+      const o = g(
+        s.geometry,
+        // 区控面积更大，需要更大的缓冲半径
+        t ? 200 : 30,
+        {
+          units: "meters"
+        }
+      );
+      let l;
+      t ? l = [
+        {
+          fieldName: "id",
+          label: "区控编号"
+        },
+        {
+          fieldName: "crossCount",
+          label: "路口数量"
+        },
+        {
+          fieldName: "subDistrictCount",
+          label: "子区数量"
+        }
+      ] : l = [
+        {
+          fieldName: "parentName",
+          label: "所属区控"
+        },
+        {
+          fieldName: "crossCount",
+          label: "路口数量"
+        }
+      ];
+      const m = {
+        type: "signalControlArea",
+        id: e.id,
+        name: e.name,
+        parentId: e.parentId,
+        parentName: e.parentName,
+        crossCount: e.signalCount,
+        subDistrictCount: e.subDistrictCount
+      }, c = new n({
+        geometry: {
+          type: "polygon",
+          rings: o.geometry.coordinates
+        },
+        symbol: {
+          type: "simple-fill",
+          style: "none",
+          // color: [...districtController.areaColor, 0.3],
+          outline: {
+            color: t ? [111, 100, 255] : [5, 196, 104],
+            width: 3,
+            style: t ? "long-dash" : "solid"
+          }
+        },
+        attributes: m,
+        popupTemplate: {
+          title: `${e.name}`,
+          content: [
+            {
+              type: "fields",
+              fieldInfos: l
+            }
+          ]
+        }
+      });
+      t ? this.districtControllerLayer.add(c) : this.subDistrictControllerLayer.add(c);
+    }
+    for (const s of e.subDistricts)
+      this.drawArea(s, !1);
+    const i = [];
+    e.signals.forEach((s) => {
+      const o = {
+        type: "cross",
+        id: s.id,
+        name: s.name,
+        signalId: s.signalId,
+        nodeId: s.nodeId,
+        districtId: t ? e.id : e.parentId,
+        districtName: t ? e.name : e.parentName,
+        subDistrictId: t ? "" : e.id,
+        subDistrictName: t ? "" : e.name,
+        isKey: s.isKey
+      }, l = new n({
+        geometry: {
+          type: "point",
+          x: s.longitude,
+          y: s.latitude
+        },
+        symbol: this.getCrossGraphicSymbol(o, "marker"),
+        attributes: o,
+        popupTemplate: {
+          title: s.name,
+          content: [
+            {
+              type: "fields",
+              fieldInfos: [
+                {
+                  fieldName: "districtName",
+                  label: "区控名称"
+                },
+                {
+                  fieldName: "subDistrictName",
+                  label: "子区名称"
+                },
+                {
+                  fieldName: "signalId",
+                  label: "信号机编号"
+                },
+                {
+                  fieldName: "nodeId",
+                  label: "路口编号"
+                }
+              ]
+            }
+          ]
+        }
+      });
+      i.push(l);
+    }), this.crossLayer.addMany(i);
+  }
+  /**
+   * 显示子区时路口的样式
+   * @param attributes
+   * @returns
+   */
+  getCrossSymbolInSubDistrict(e) {
+    return e.signalId && e.signalId !== "" ? {
+      type: "cim",
+      data: {
+        type: "CIMSymbolReference",
+        primitiveOverrides: [
+          {
+            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: 32,
+              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: 1,
+                    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: 30,
+              rotateClockwise: !0,
+              textureFilter: "Picture",
+              url: `/GisViewerAssets/Images/cross/${e.selected ? "gis_xhj_blue" : "gis_xhj_gray"}.png`
+            }
+          ]
+        }
+      }
+    } : {
+      type: "picture-marker",
+      url: "/GisViewerAssets/Images/cross/gis_lkcz.png",
+      width: "20px",
+      height: "20px"
+    };
+  }
+  /**
+   * 生成路口点符号。在不同比例尺下，使用不同的符号
+   * @param attributes
+   * @param symbolType
+   * @returns
+   */
+  getCrossGraphicSymbol(e, t) {
+    const r = e.isKey;
+    if (t === "marker")
+      return {
+        type: "simple-marker",
+        style: "circle",
+        color: r ? [254, 172, 22] : [5, 116, 255],
+        size: r ? 12 : 8,
+        outline: {
+          color: "white",
+          width: 1
+        }
+      };
+    if (t === "picture")
+      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: 32,
+                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: r ? 30 : 15,
+                      haloSize: 1,
+                      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: r ? 40 : 20,
+                rotateClockwise: !0,
+                textureFilter: "Picture",
+                url: `/GisViewerAssets/Images/cross/${r ? "gis_gjxklk_orange" : "gis_xhj_blue"}.png`
+              }
+            ]
+          }
+        }
+      };
+  }
+}
+export {
+  L as default
+};