gisviewer-vue3-arcgis 1.0.227 → 1.0.229

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

@@ -0,0 +1,397 @@
+import { Polygon as f } from "@arcgis/core/geometry";
+import { webMercatorToGeographic as m } from "@arcgis/core/geometry/support/webMercatorUtils";
+import u from "@arcgis/core/Graphic";
+import y from "@arcgis/core/layers/GraphicsLayer";
+import D from "@turf/buffer";
+import w from "@turf/convex";
+import * as c from "@turf/helpers";
+import R from "concaveman";
+import S from "../../stores/index.mjs";
+import G from "./district-controller.mjs";
+import C from "./district-renderer.mjs";
+import I from "./signal-renderer.mjs";
+import L from "./sub-district-renderer.mjs";
+class T {
+  constructor(t) {
+    this.detachmentLayerLoaded = !1, this.districtControllerOid = 0, this.subDistrictControllerOid = 0, this.signalOid = 0, this.popupEnabled = !0, this.districtGraphics = [], this.subDistrictGraphics = [], this.signalGraphics = [], this.view = t, this.hasGpu = localStorage.getItem("gpu") !== "Unknown";
+    const e = S.useAppDataStore;
+    this.mapConfig = JSON.parse(JSON.stringify(e.mapConfig)), this.detachmentLayer = new y(), this.view.map.add(this.detachmentLayer), this.districtRenderer = new C(t, this.hasGpu), this.subDistrictRenderer = new L(t, this.hasGpu), this.signalRenderer = new I(t, this.hasGpu);
+  }
+  /**
+   * 显示所有区控、子区、信号机
+   * @param params
+   * @returns
+   */
+  async showSignalControlArea(t) {
+    this.detachmentLayerLoaded || await this.loadDetachmentLayer(), await this.clearSignalControlArea(), this.districtRenderer.setVisible(!1), this.subDistrictRenderer.setVisible(!1), this.signalRenderer.setClusterVisible(!1), this.signalRenderer.setPointVisible(!1);
+    const e = [], s = [];
+    for (const r of t.areaList) {
+      const a = new G(
+        r,
+        t.style || ""
+      );
+      e.push(a), s.push(...a.subDistricts);
+    }
+    return this.districtRenderer.style = t.style || "", await this.districtRenderer.showDistricts(e), await this.subDistrictRenderer.showSubDistricts(s), await this.signalRenderer.showSignals(e), { status: 0, message: "ok" };
+  }
+  /**
+   * 清空区控、子区、信号机
+   * @returns
+   */
+  async clearSignalControlArea() {
+    return this.districtGraphics = [], this.subDistrictGraphics = [], this.signalGraphics = [], this.districtControllerOid = 0, this.subDistrictControllerOid = 0, this.signalOid = 0, await this.districtRenderer.clearDistricts(), await this.subDistrictRenderer.clearSubDistricts(), await this.signalRenderer.clearSignals(), { status: 0, message: "ok" };
+  }
+  /**
+   * 设置区控、子区、信号机图层可见性
+   * @param layerName
+   * @param visible
+   */
+  setLayerVisibility(t) {
+    switch (t.visible === !1 && this.view.closePopup(), t.id) {
+      case "district":
+        this.districtRenderer.setVisible(t.visible);
+        break;
+      case "subDistrict":
+        this.subDistrictRenderer.setVisible(t.visible);
+        break;
+      case "signal":
+        this.signalRenderer.setPointVisible(t.visible);
+        break;
+      case "signalCluster":
+        this.signalRenderer.setClusterVisible(t.visible);
+        break;
+      case "shanghai_district":
+        this.detachmentLayer.visible = t.visible;
+        break;
+    }
+    return { status: 0, message: "ok" };
+  }
+  /**
+   * 定位区控、子区、信号机
+   * @param params
+   * @returns
+   */
+  async locateSignalControlArea(t) {
+    switch (t.type) {
+      case "district":
+        return await this.districtRenderer.locateDistrict(t.id);
+      case "subDistrict":
+        return await this.subDistrictRenderer.locateSubDistrict(t.id);
+      case "signal":
+        return await this.signalRenderer.locateSignal(t.id);
+      default:
+        return { status: 1, message: "未知类型" };
+    }
+  }
+  /**
+   * 高亮指定的区控、子区、信号机，其他隐藏
+   * @param params
+   * @returns
+   */
+  async highlightSignalControlArea(t) {
+    switch (this.view.closePopup(), t.type) {
+      case "district":
+        return await this.districtRenderer.highlightDistrict(t.id) ? (this.subDistrictRenderer.filter("district", t.id), this.signalRenderer.filter("district", t.id), { status: 0, message: "ok" }) : { status: 1, message: "未找到区控" };
+      case "subDistrict": {
+        const { count: e, parentId: s } = await this.subDistrictRenderer.highlightSubDistrict(t.id);
+        return e > 0 ? (this.districtRenderer.filter(s), this.signalRenderer.filter("subDistrict", t.id), { status: 0, message: "ok" }) : { status: 1, message: "未找到子区" };
+      }
+      case "signal": {
+        const { districtId: e, subDistrictId: s, count: r } = await this.signalRenderer.highlightSignal(t.id);
+        return r > 0 ? (this.districtRenderer.filter(e), this.subDistrictRenderer.filter("subDistrict", s), await this.view.goTo(
+          { target: this.signalGraphics, scale: t.scale || 1e3 },
+          {
+            duration: this.hasGpu ? 1e3 : 0
+          }
+        ), { status: 0, message: "ok" }) : { status: 1, message: "未找到信号机" };
+      }
+      default:
+        return { status: 1, message: "未知类型" };
+    }
+  }
+  /**
+   * 重置高亮，恢复全图视角
+   * @returns
+   */
+  async resetHighlight() {
+    return this.districtRenderer.resetFilter(), this.subDistrictRenderer.resetFilter(), this.signalRenderer.resetFilter(), { status: 0, message: "ok" };
+  }
+  /**
+   * 生成区控、子区和信号机graphic
+   * @param districtController
+   * @param isDistrict 是否是区控
+   * @returns
+   */
+  generateGraphic(t, e, s) {
+    const r = t.getAllSignalCoordinates();
+    let a = null;
+    if (r.length >= 2)
+      if (r.length === 2)
+        a = c.lineString(r);
+      else {
+        if (e) {
+          const i = c.featureCollection(
+            r.map((o) => c.point(o))
+          );
+          a = w(i);
+        } else {
+          const i = R(r, 0.5);
+          i.length >= 4 && (a = c.polygon([i]));
+        }
+        a || (a = c.lineString(r));
+      }
+    else if (r.length === 1)
+      a = c.point(r[0]);
+    else
+      return;
+    const n = D(
+      a.geometry,
+      // 区控面积更大，需要更大的缓冲半径
+      e ? 200 : 30,
+      {
+        units: "meters"
+      }
+    ), l = new u({
+      geometry: {
+        type: "polyline",
+        paths: n.geometry.coordinates
+      },
+      attributes: {
+        ObjectID: e ? this.districtControllerOid++ : this.subDistrictControllerOid++,
+        id: t.id,
+        name: t.name,
+        subDistrictCount: t.subDistrictCount,
+        signalCount: t.signalCount,
+        parentId: t.parentId,
+        parentName: t.parentName,
+        selected: s,
+        type: e ? "district" : "subDistrict"
+      }
+    });
+    e ? this.districtGraphics.push(l) : this.subDistrictGraphics.push(l);
+    for (const i of t.subDistricts)
+      this.generateGraphic(i, !1, s);
+    t.signals.forEach((i) => {
+      const o = new u({
+        geometry: {
+          type: "point",
+          x: i.longitude,
+          y: i.latitude
+        },
+        attributes: {
+          ObjectID: this.signalOid++,
+          id: i.id,
+          name: i.name,
+          signalId: i.signalId,
+          nodeId: i.nodeId,
+          isKey: i.isKey,
+          districtId: e ? t.id : t.parentId,
+          districtName: e ? t.name : t.parentName,
+          subDistrictId: e ? "" : t.id,
+          subDistrictName: e ? "" : t.name,
+          type: "signal",
+          selected: !0
+        }
+      });
+      this.signalGraphics.push(o);
+    });
+  }
+  // private async viewHitTest(event: __esri.ViewClickEvent) {
+  //   // 捕捉点击事件
+  //   const response = await this.view.hitTest(event, {
+  //     include: [
+  //       // this.districtControllerSolidLayer,
+  //       this.subDistrictControllerLayer,
+  //       this.signalMarkerLayer,
+  //       this.signalPictureLayer,
+  //       this.signalClusterLayer
+  //     ]
+  //   });
+  //   const graphicHits = response.results?.filter(
+  //     (hitResult) => hitResult.type === 'graphic'
+  //   );
+  //   if (graphicHits.length === 0) {
+  //     return;
+  //   }
+  //   const hitGraphic = (graphicHits[0] as __esri.GraphicHit).graphic;
+  //   let centerPoint: __esri.Point | null = null;
+  //   if (hitGraphic.geometry.type === 'point') {
+  //     centerPoint = hitGraphic.geometry as __esri.Point;
+  //   } else if (hitGraphic.geometry.type === 'polyline') {
+  //     centerPoint = hitGraphic.geometry.extent.center;
+  //   } else if (hitGraphic.geometry.type === 'polygon') {
+  //     centerPoint = (hitGraphic.geometry as __esri.Polygon).centroid;
+  //   }
+  //   if (centerPoint !== null)
+  //     await this.view.goTo(centerPoint, { duration: 1000 });
+  //   // 未选中的同级graphic置灰
+  //   const clickedType = hitGraphic.getAttribute('type');
+  //   const clickedId = hitGraphic.getAttribute('id');
+  //   switch (clickedType) {
+  //     case 'district': {
+  //       let result = await this.districtControllerSolidLayer.queryFeatures();
+  //       result.features.forEach((feature) => {
+  //         feature.attributes.selected = feature.attributes.id === clickedId;
+  //       });
+  //       await this.districtControllerSolidLayer.applyEdits({
+  //         updateFeatures: result.features
+  //       });
+  //       result = await this.districtControllerDashLayer.queryFeatures();
+  //       result.features.forEach((feature) => {
+  //         feature.attributes.selected = feature.attributes.id === clickedId;
+  //       });
+  //       await this.districtControllerDashLayer.applyEdits({
+  //         updateFeatures: result.features
+  //       });
+  //       break;
+  //     }
+  //     case 'subDistrict': {
+  //       let result = await this.subDistrictControllerLayer.queryFeatures();
+  //       result.features.forEach((feature) => {
+  //         feature.attributes.selected = feature.attributes.id === clickedId;
+  //       });
+  //       await this.subDistrictControllerLayer.applyEdits({
+  //         updateFeatures: result.features
+  //       });
+  //       // 其他子区的信号机置灰
+  //       result = await this.signalMarkerLayer.queryFeatures();
+  //       result.features.forEach((feature) => {
+  //         feature.attributes.selected =
+  //           feature.attributes.subDistrictId === clickedId;
+  //       });
+  //       let editResult = await this.signalMarkerLayer.applyEdits({
+  //         updateFeatures: result.features
+  //       });
+  //       result = await this.signalPictureLayer.queryFeatures();
+  //       result.features.forEach((feature) => {
+  //         feature.attributes.selected =
+  //           feature.attributes.subDistrictId === clickedId;
+  //       });
+  //       editResult = await this.signalPictureLayer.applyEdits({
+  //         updateFeatures: result.features
+  //       });
+  //       break;
+  //     }
+  //   }
+  //   reactiveUtils.when(
+  //     () => this.view.popup.visible === false,
+  //     async () => {
+  //       await this.resetSelectedSymbol(clickedType);
+  //     },
+  //     {
+  //       once: true
+  //     }
+  //   );
+  // }
+  /**
+   * 重置所有graphic的置灰状态
+   */
+  // private async resetSelectedSymbol(type: string) {
+  //   switch (type) {
+  //     case 'district': {
+  //       let result = await this.districtControllerSolidLayer.queryFeatures();
+  //       result.features.forEach((feature) => {
+  //         feature.attributes.selected = true;
+  //       });
+  //       await this.districtControllerSolidLayer.applyEdits({
+  //         updateFeatures: result.features
+  //       });
+  //       result = await this.districtControllerDashLayer.queryFeatures();
+  //       result.features.forEach((feature) => {
+  //         feature.attributes.selected = true;
+  //       });
+  //       await this.districtControllerDashLayer.applyEdits({
+  //         updateFeatures: result.features
+  //       });
+  //       break;
+  //     }
+  //     case 'subDistrict': {
+  //       let result = await this.subDistrictControllerLayer.queryFeatures();
+  //       result.features.forEach((feature) => {
+  //         feature.attributes.selected = true;
+  //       });
+  //       await this.subDistrictControllerLayer.applyEdits({
+  //         updateFeatures: result.features
+  //       });
+  //       result = await this.signalMarkerLayer.queryFeatures();
+  //       result.features.forEach((feature) => {
+  //         feature.attributes.selected = true;
+  //       });
+  //       await this.signalMarkerLayer.applyEdits({
+  //         updateFeatures: result.features
+  //       });
+  //       result = await this.signalPictureLayer.queryFeatures();
+  //       result.features.forEach((feature) => {
+  //         feature.attributes.selected = true;
+  //       });
+  //       await this.signalPictureLayer.applyEdits({
+  //         updateFeatures: result.features
+  //       });
+  //       break;
+  //     }
+  //   }
+  // }
+  /**
+   * 加载支队图层
+   * 现场环境用url创建FeatureLayer有各种问题，
+   * 改为图层导出为json，用json创建Graphic，再将Graphic添加到FeatureLayer
+   */
+  async loadDetachmentLayer() {
+    const t = this.mapConfig.baseLayers;
+    if (!t)
+      return;
+    const e = t.find(
+      (s) => s.options.id === "shanghai_district"
+    );
+    if (e)
+      try {
+        const r = await (await fetch(
+          "/GisViewerAssets/ShangHai/Layers/district.json"
+        )).json(), a = [], { renderer: n, labelingInfo: l } = e.options;
+        r.features.forEach((i) => {
+          const o = i.attributes.ZD_NAME;
+          if (o !== "高架支队") {
+            let d = new f({
+              rings: i.geometry.rings
+            });
+            d = m(d);
+            const h = new u({
+              geometry: d,
+              attributes: i.attributes
+            });
+            if (n) {
+              if (n.type === "simple")
+                h.symbol = n.symbol;
+              else if (n.type === "unique-value") {
+                const g = h.getAttribute("OBJECTID"), b = n.uniqueValueInfos.find(
+                  (p) => p.value == g
+                );
+                h.symbol = b ? b.symbol : n.defaultSymbol;
+              }
+            } else
+              h.symbol = {
+                type: "simple-fill",
+                color: [227, 237, 255, 0.4],
+                outline: {
+                  color: [255, 195, 153],
+                  width: 2
+                }
+              };
+            if (a.push(h), l && o !== "边防港航支队" && o !== "机场支队") {
+              const g = new u({
+                geometry: d.centroid,
+                symbol: { ...l.symbol, text: o }
+              });
+              a.push(g);
+            }
+          }
+        }), this.detachmentLayer.addMany(a), this.detachmentLayerLoaded = !0;
+      } catch (s) {
+        console.error("加载支队图层失败:", s);
+        return;
+      }
+  }
+}
+export {
+  T as default
+};

package/es/src/gis-map/utils/signal-control-area/signal-renderer.d.ts

@@ -0,0 +1,22 @@
+import { IResult } from '../../../types';
+import DistrictController from './district-controller';
+export default class CrossRenderer {
+    private view;
+    private hasGpu;
+    private signalMarkerLayer;
+    private signalPictureLayer;
+    private signalClusterLayer;
+    constructor(view: __esri.MapView | __esri.SceneView, hasGpu: boolean);
+    showSignals(controllers: DistrictController[]): Promise<void>;
+    clearSignals(): Promise<void>;
+    setPointVisible(visible: boolean): Promise<void>;
+    setClusterVisible(visible: boolean): void;
+    locateSignal(id: string): Promise<IResult>;
+    highlightSignal(id: string): Promise<{
+        districtId: string;
+        subDistrictId: string;
+        count: number;
+    }>;
+    filter(type: string, id: string): void;
+    resetFilter(): void;
+}

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

@@ -0,0 +1,124 @@
+import d from "@arcgis/core/Graphic";
+import u from "@arcgis/core/layers/FeatureLayer";
+import { signalMarkerLayerOptions as y, signalPictureLayerOptions as c, signalClusterLayerOptions as o } from "./layer-symbol.mjs";
+class f {
+  constructor(e, a) {
+    this.view = e, this.hasGpu = a, this.signalMarkerLayer = new u(
+      y
+    ), this.signalMarkerLayer.spatialReference = e.spatialReference, this.signalMarkerLayer.popupEnabled = !0, this.signalPictureLayer = new u(
+      c
+    ), this.signalPictureLayer.spatialReference = e.spatialReference, this.signalPictureLayer.popupEnabled = !0, this.signalClusterLayer = new u(
+      o
+    ), this.signalClusterLayer.spatialReference = e.spatialReference, this.signalClusterLayer.popupEnabled = !0, this.view.map.addMany([
+      this.signalMarkerLayer,
+      this.signalPictureLayer,
+      this.signalClusterLayer
+    ]);
+  }
+  async showSignals(e) {
+    await this.clearSignals();
+    let a = 0;
+    const s = [];
+    e.forEach((r) => {
+      r.signals.forEach((i) => {
+        const t = new d({
+          geometry: {
+            type: "point",
+            longitude: i.longitude,
+            latitude: i.latitude
+          },
+          attributes: {
+            ObjectID: a++,
+            id: i.id,
+            name: i.name,
+            signalId: i.signalId,
+            nodeId: i.nodeId || i.id,
+            districtId: r.id,
+            districtName: r.name,
+            subDistrictId: "",
+            subDistrictName: "",
+            isKey: i.isKey,
+            type: "signal",
+            selected: !0
+          }
+        });
+        s.push(t);
+      }), r.subDistricts.forEach((i) => {
+        i.signals.forEach((t) => {
+          const n = new d({
+            geometry: {
+              type: "point",
+              longitude: t.longitude,
+              latitude: t.latitude
+            },
+            attributes: {
+              ObjectID: a++,
+              id: t.id,
+              name: t.name,
+              signalId: t.signalId,
+              nodeId: t.nodeId || t.id,
+              districtId: r.id,
+              districtName: r.name,
+              subDistrictId: i.id,
+              subDistrictName: i.name,
+              isKey: t.isKey,
+              type: "signal",
+              selected: !0
+            }
+          });
+          s.push(n);
+        });
+      });
+    }), await this.signalMarkerLayer.applyEdits({
+      addFeatures: s
+    }), await this.signalPictureLayer.applyEdits({
+      addFeatures: s
+    }), await this.signalClusterLayer.applyEdits({
+      addFeatures: s
+    });
+  }
+  async clearSignals() {
+    let e = await this.signalMarkerLayer.queryFeatures();
+    await this.signalMarkerLayer.applyEdits({
+      deleteFeatures: e.features
+    }), this.signalMarkerLayer.definitionExpression = "1=1", e = await this.signalPictureLayer.queryFeatures(), await this.signalPictureLayer.applyEdits({
+      deleteFeatures: e.features
+    }), this.signalPictureLayer.definitionExpression = "1=1", e = await this.signalClusterLayer.queryFeatures(), await this.signalClusterLayer.applyEdits({
+      deleteFeatures: e.features
+    }), this.signalClusterLayer.definitionExpression = "1=1";
+  }
+  async setPointVisible(e) {
+    this.signalMarkerLayer.visible = e, this.signalPictureLayer.visible = e;
+  }
+  setClusterVisible(e) {
+    this.signalClusterLayer.visible = e;
+  }
+  async locateSignal(e) {
+    return { status: 0, message: "ok" };
+  }
+  async highlightSignal(e) {
+    let a = "", s = "";
+    const r = this.signalMarkerLayer.definitionExpression;
+    this.signalMarkerLayer.definitionExpression = `signalId = '${e}'`;
+    const i = await this.signalMarkerLayer.queryFeatures(), t = i.features.length;
+    if (t > 0) {
+      const n = i.features[0].attributes.districtId || "", l = i.features[0].attributes.subDistrictId || "";
+      return await this.view.goTo(i.features, {
+        duration: this.hasGpu ? 1e3 : 0
+      }), { districtId: n, subDistrictId: l, count: t };
+    } else
+      this.signalMarkerLayer.definitionExpression = r;
+    return { districtId: a, subDistrictId: s, count: t };
+  }
+  filter(e, a) {
+    const s = `${e === "district" ? "districtId" : "subDistrictId"} = '${a}'`;
+    this.signalClusterLayer.definitionExpression = s, this.signalMarkerLayer.definitionExpression = s, this.signalPictureLayer.definitionExpression = s;
+  }
+  resetFilter() {
+    const e = "1=1";
+    this.signalClusterLayer.definitionExpression = e, this.signalMarkerLayer.definitionExpression = e, this.signalPictureLayer.definitionExpression = e;
+  }
+}
+export {
+  f as default
+};

package/es/src/gis-map/utils/signal-control-area/sub-district-renderer.d.ts

@@ -0,0 +1,27 @@
+import { IResult } from '../../../types';
+import DistrictController from './district-controller';
+export default class SubDistrictRenderer {
+    private view;
+    private hasGpu;
+    private subDistrictPointLayer;
+    constructor(view: __esri.MapView | __esri.SceneView, hasGpu: boolean);
+    showSubDistricts(controllers: DistrictController[]): Promise<void>;
+    clearSubDistricts(): Promise<void>;
+    setVisible(visible: boolean): void;
+    /**
+     * 定位子区
+     * @param id 子区ID
+     */
+    locateSubDistrict(id: string): Promise<IResult>;
+    /**
+     * 高亮子区, 其他子区隐藏
+     * @param id 子区ID
+     * @return 返回高亮子区的数量以及区控id
+     */
+    highlightSubDistrict(id: string): Promise<{
+        count: number;
+        parentId: string;
+    }>;
+    filter(type: string, id: string): void;
+    resetFilter(): void;
+}