gisviewer-vue3-arcgis 1.0.230 → 1.0.232

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

@@ -1,67 +1,64 @@
 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);
+import { webMercatorToGeographic as y } from "@arcgis/core/geometry/support/webMercatorUtils";
+import g from "@arcgis/core/Graphic";
+import m from "@arcgis/core/layers/GraphicsLayer";
+import p from "papaparse";
+import R from "../../stores/index.mjs";
+import D from "./district-controller.mjs";
+import w from "./district-renderer.mjs";
+import L from "./signal-renderer.mjs";
+import C from "./sub-district-renderer.mjs";
+class P {
+  constructor(e) {
+    this.detachmentLayerLoaded = !1, this.view = e, this.hasGpu = localStorage.getItem("gpu") !== "Unknown";
+    const t = R.useAppDataStore;
+    this.mapConfig = JSON.parse(JSON.stringify(t.mapConfig)), this.detachmentLayer = new m(), this.view.map.add(this.detachmentLayer), this.districtRenderer = new w(e, this.hasGpu), this.subDistrictRenderer = new C(e, this.hasGpu), this.signalRenderer = new L(e, 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 || ""
+  async showSignalControlArea(e) {
+    this.detachmentLayerLoaded || await this.loadDetachmentLayer(), this.roadLines || (await this.loadRoadLine(), this.subDistrictRenderer.roadLines = this.roadLines), await this.clearSignalControlArea(), this.districtRenderer.setVisible(!1), this.subDistrictRenderer.setVisible(!1), this.signalRenderer.setClusterVisible(!1), this.signalRenderer.setPointVisible(!1);
+    const t = [], s = [];
+    for (const a of e.areaList) {
+      const i = new D(
+        a,
+        e.style || ""
       );
-      e.push(a), s.push(...a.subDistricts);
+      t.push(i), s.push(...i.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" };
+    return this.districtRenderer.style = e.style || "", await this.districtRenderer.showDistricts(t), await this.subDistrictRenderer.showSubDistricts(s), await this.signalRenderer.showSignals(t), { 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" };
+    return 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) {
+  setLayerVisibility(e) {
+    switch (e.visible === !1 && this.view.closePopup(), e.id) {
       case "district":
-        this.districtRenderer.setVisible(t.visible);
+        this.districtRenderer.setVisible(e.visible);
         break;
       case "subDistrict":
-        this.subDistrictRenderer.setVisible(t.visible);
+        this.subDistrictRenderer.setVisible(e.visible);
         break;
       case "signal":
-        this.signalRenderer.setPointVisible(t.visible);
+        this.signalRenderer.setPointVisible(e.visible);
         break;
       case "signalCluster":
-        this.signalRenderer.setClusterVisible(t.visible);
+        this.signalRenderer.setClusterVisible(e.visible);
         break;
       case "shanghai_district":
-        this.detachmentLayer.visible = t.visible;
+        this.detachmentLayer.visible = e.visible;
         break;
     }
     return { status: 0, message: "ok" };
@@ -71,14 +68,14 @@ class T {
    * @param params
    * @returns
    */
-  async locateSignalControlArea(t) {
-    switch (t.type) {
+  async locateSignalControlArea(e) {
+    switch (e.type) {
       case "district":
-        return await this.districtRenderer.locateDistrict(t.id);
+        return await this.districtRenderer.locateDistrict(e.id);
       case "subDistrict":
-        return await this.subDistrictRenderer.locateSubDistrict(t.id);
+        return await this.subDistrictRenderer.locateSubDistrict(e.id);
       case "signal":
-        return await this.signalRenderer.locateSignal(t.id);
+        return await this.signalRenderer.locateSignal(e.id);
       default:
         return { status: 1, message: "未知类型" };
     }
@@ -88,22 +85,17 @@ class T {
    * @param params
    * @returns
    */
-  async highlightSignalControlArea(t) {
-    switch (this.view.closePopup(), t.type) {
+  async highlightSignalControlArea(e) {
+    switch (this.view.closePopup(), e.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: "未找到区控" };
+        return await this.districtRenderer.highlightDistrict(e.id) ? (this.subDistrictRenderer.filter("district", e.id), this.signalRenderer.filter("district", e.id), this.roadLines && this.roadLines.length > 0 && await this.subDistrictRenderer.showRoads(e.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: "未找到子区" };
+        const { count: t, parentId: s } = await this.subDistrictRenderer.highlightSubDistrict(e.id);
+        return t > 0 ? (this.districtRenderer.filter(s), this.signalRenderer.filter("subDistrict", e.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: "未找到信号机" };
+        const { districtId: t, subDistrictId: s, count: a } = await this.signalRenderer.highlightSignal(e.id);
+        return a > 0 ? (this.districtRenderer.filter(t), this.subDistrictRenderer.filter("subDistrict", s), { status: 0, message: "ok" }) : { status: 1, message: "未找到信号机" };
       }
       default:
         return { status: 1, message: "未知类型" };
@@ -117,259 +109,77 @@ class T {
     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
+  async loadRoadLine() {
+    var t;
+    const e = (t = this.mapConfig.signalControlArea) == null ? void 0 : t.roadLayerUrl;
+    if (!e) {
+      console.warn("未配置道路线图层URL");
       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
+    }
+    try {
+      const a = await (await fetch(`/GisViewerAssets/${e}`)).text();
+      p.parse(a, {
+        header: !0,
+        skipEmptyLines: !0,
+        complete: (i) => {
+          const { data: r } = i;
+          this.roadLines = r.map((n) => ({
+            id: n.ROADSECT_ID,
+            fromNode: n.FROM_NODE_ID,
+            toNode: n.TO_NODE_ID,
+            coordinates: JSON.parse(n.GEOM).coordinates
+          }));
         },
-        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
+        error: (i) => {
+          console.error("道路线CSV解析失败:", i);
         }
       });
-      this.signalGraphics.push(o);
-    });
+    } catch (s) {
+      console.error("读取道路线CSV失败:", s);
+    }
   }
-  // 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)
+    const e = this.mapConfig.baseLayers;
+    if (!e)
       return;
-    const e = t.find(
+    const t = e.find(
       (s) => s.options.id === "shanghai_district"
     );
-    if (e)
+    if (t)
       try {
-        const r = await (await fetch(
+        const a = 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
+        )).json(), i = [], { renderer: r, labelingInfo: n } = t.options;
+        a.features.forEach((d) => {
+          const c = d.attributes.ZD_NAME;
+          if (c !== "高架支队") {
+            let l = new f({
+              rings: d.geometry.rings
             });
-            d = m(d);
-            const h = new u({
-              geometry: d,
-              attributes: i.attributes
+            l = y(l);
+            const o = new g({
+              geometry: l,
+              attributes: d.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
+            if (r) {
+              if (r.type === "simple")
+                o.symbol = r.symbol;
+              else if (r.type === "unique-value") {
+                const h = o.getAttribute("OBJECTID"), u = r.uniqueValueInfos.find(
+                  (b) => b.value == h
                 );
-                h.symbol = b ? b.symbol : n.defaultSymbol;
+                o.symbol = u ? u.symbol : r.defaultSymbol;
               }
             } else
-              h.symbol = {
+              o.symbol = {
                 type: "simple-fill",
                 color: [227, 237, 255, 0.4],
                 outline: {
@@ -377,15 +187,15 @@ class T {
                   width: 2
                 }
               };
-            if (a.push(h), l && o !== "边防港航支队" && o !== "机场支队") {
-              const g = new u({
-                geometry: d.centroid,
-                symbol: { ...l.symbol, text: o }
+            if (i.push(o), n && c !== "边防港航支队" && c !== "机场支队") {
+              const h = new g({
+                geometry: l.centroid,
+                symbol: { ...n.symbol, text: c }
               });
-              a.push(g);
+              i.push(h);
             }
           }
-        }), this.detachmentLayer.addMany(a), this.detachmentLayerLoaded = !0;
+        }), this.detachmentLayer.addMany(i), this.detachmentLayerLoaded = !0;
       } catch (s) {
         console.error("加载支队图层失败:", s);
         return;
@@ -393,5 +203,5 @@ class T {
   }
 }
 export {
-  T as default
+  P as default
 };

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

@@ -1,12 +1,15 @@
-import { IResult } from '../../../types';
+import { IResult, IRoadLine } from '../../../types';
 import DistrictController from './district-controller';
 export default class SubDistrictRenderer {
     private view;
     private hasGpu;
     private clickHandler;
     private subDistrictPointLayer;
+    private subDistrictLineLayer;
+    roadLines: IRoadLine[];
     constructor(view: __esri.MapView | __esri.SceneView, hasGpu: boolean);
     showSubDistricts(controllers: DistrictController[]): Promise<void>;
+    showRoads(districtId: string): Promise<void>;
     clearSubDistricts(): Promise<void>;
     setVisible(visible: boolean): void;
     /**
@@ -23,8 +26,17 @@ export default class SubDistrictRenderer {
         count: number;
         parentId: string;
     }>;
+    /**
+     * 按照区控、子区id显示子区
+     * @param type 类型，district 或 subDistrict
+     * @param id
+     */
     filter(type: string, id: string): void;
+    /**
+     * 重置过滤器，显示所有子区
+     */
     resetFilter(): void;
-    private currentRenderer;
+    private currentPointRenderer;
+    private currentLineRenderer;
     private viewHitTest;
 }