gisviewer-vue3-arcgis 1.0.258 → 1.0.262

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

@@ -4,8 +4,22 @@ export default class CrossRenderer {
     private crossLayer;
     private crossGraphicSymbol;
     private locations;
+    private currentShowMode;
+    private zoomWatchHandle;
+    private symbolScale;
+    private currentZoom;
+    private readonly clusterRadius;
+    private readonly minClusterPoints;
+    private readonly maxClusterSymbolSize;
+    private readonly minClusterSymbolSize;
     constructor(view: __esri.MapView | __esri.SceneView);
-    showCrosses(controllers: DistrictController[]): Promise<void>;
+    addCrosses(controllers: DistrictController[]): Promise<void>;
+    clearCrosses(): void;
+    private updateScatterSymbol;
+    /**
+     * 将地理位置转换为屏幕坐标
+     */
+    private locationToScreen;
     /**
      * 显示聚合点
      */
@@ -14,4 +28,40 @@ export default class CrossRenderer {
      * 显示散点
      */
     showScatter(): void;
+    /**
+     * 确定路口符号
+     * @param attributes
+     * @returns
+     */
+    private getCrossSymbol;
+    /**
+     * 获取邻居点
+     * @param locations
+     * @param index
+     * @param eps
+     * @returns
+     */
+    private getNeighbors;
+    /**
+     * 两点间的像素距离
+     * @param point1
+     * @param point2
+     * @returns
+     */
+    private getDistance;
+    /**
+     * 从聚类结果中创建聚类对象
+     * @param locations
+     * @returns
+     */
+    private createClusters;
+    /**
+     * 按照像素距离聚类
+     * @param locations
+     * @param eps
+     * @param minPoints
+     * @returns
+     */
+    private doPixelCluster;
+    private showClusterResult;
 }

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

@@ -1,6 +1,8 @@
-import o from "@arcgis/core/layers/GraphicsLayer";
-class l {
-  constructor(r) {
+import { Point as y } from "@arcgis/core/geometry";
+import u from "@arcgis/core/Graphic";
+import b from "@arcgis/core/layers/GraphicsLayer";
+class f {
+  constructor(e) {
     this.crossGraphicSymbol = {
       type: "cim",
       data: {
@@ -83,44 +85,423 @@ class l {
           ]
         }
       }
-    }, this.locations = [], this.view = r, this.crossLayer = new o(), this.view.map.add(this.crossLayer);
+    }, this.locations = [], this.currentShowMode = "scatter", this.symbolScale = 5e3, this.currentZoom = 0, this.clusterRadius = 120, this.minClusterPoints = 2, this.maxClusterSymbolSize = 50, this.minClusterSymbolSize = 25, this.view = e, this.crossLayer = new b(), this.view.map.add(this.crossLayer), this.currentZoom = e.zoom;
   }
-  async showCrosses(r) {
-    r.forEach((i) => {
-      i.signals.forEach((e) => {
-        e.longitude && e.latitude && !isNaN(e.longitude) && !isNaN(e.latitude) && this.locations.push({
-          id: e.id,
-          x: e.longitude,
-          y: e.latitude,
+  async addCrosses(e) {
+    e.forEach((t) => {
+      t.signals.forEach((r) => {
+        r.longitude && r.latitude && !isNaN(r.longitude) && !isNaN(r.latitude) && this.locations.push({
+          id: r.id,
+          x: r.longitude,
+          y: r.latitude,
           visited: !1,
           clusterId: void 0,
-          properties: e
+          properties: r
         });
-      }), i.subDistricts.forEach((e) => {
-        e.signals.forEach((t) => {
-          t.longitude && t.latitude && !isNaN(t.longitude) && !isNaN(t.latitude) && this.locations.push({
-            id: t.id,
-            x: t.longitude,
-            y: t.latitude,
+      }), t.subDistricts.forEach((r) => {
+        r.signals.forEach((s) => {
+          s.longitude && s.latitude && !isNaN(s.longitude) && !isNaN(s.latitude) && this.locations.push({
+            id: s.id,
+            x: s.longitude,
+            y: s.latitude,
             visited: !1,
             clusterId: void 0,
-            properties: t
+            properties: s
           });
         });
       });
+    }), this.zoomWatchHandle = this.view.watch(
+      "scale",
+      (t, r) => {
+        if (this.currentShowMode === "scatter")
+          (t < this.symbolScale && r >= this.symbolScale || t >= this.symbolScale && r < this.symbolScale) && (console.log("Scale changed, updating cross display symbol"), this.updateScatterSymbol());
+        else if (this.currentShowMode === "cluster" && Math.abs(this.view.zoom - this.currentZoom) >= 1) {
+          this.currentZoom = this.view.zoom, this.locationToScreen(), console.time("cluster");
+          const s = this.doPixelCluster(
+            this.clusterRadius,
+            this.minClusterPoints
+          );
+          console.timeEnd("cluster"), this.showClusterResult(s);
+        }
+      }
+    );
+  }
+  clearCrosses() {
+    var e;
+    console.log("Clearing crosses"), this.crossLayer.removeAll(), this.locations = [], (e = this.zoomWatchHandle) == null || e.remove();
+  }
+  updateScatterSymbol() {
+    this.crossLayer.graphics.forEach((e) => {
+      e.symbol = this.getCrossSymbol(e.attributes);
+    });
+  }
+  /**
+   * 将地理位置转换为屏幕坐标
+   */
+  locationToScreen() {
+    this.locations.forEach((e) => {
+      const t = this.view.toScreen(
+        new y({ x: e.x, y: e.y })
+      );
+      e.properties.screenX = t.x, e.properties.screenY = t.y;
     });
   }
   /**
    * 显示聚合点
    */
   showCluster() {
+    this.crossLayer.removeAll(), this.currentShowMode = "cluster", this.locationToScreen();
+    const e = this.doPixelCluster(
+      this.clusterRadius,
+      this.minClusterPoints
+    );
+    this.showClusterResult(e);
   }
   /**
    * 显示散点
    */
   showScatter() {
+    this.crossLayer.removeAll(), this.currentShowMode = "scatter";
+    const e = this.locations.map((t) => new u({
+      geometry: {
+        type: "point",
+        longitude: t.x,
+        latitude: t.y
+      },
+      symbol: this.getCrossSymbol(t.properties),
+      attributes: t.properties
+    }));
+    this.crossLayer.addMany(e);
+  }
+  /**
+   * 确定路口符号
+   * @param attributes
+   * @returns
+   */
+  getCrossSymbol(e) {
+    if (this.view.scale > this.symbolScale)
+      return e.isKey ? {
+        // 关键路口用星号图标
+        type: "picture-marker",
+        url: "/GisViewerAssets/Images/icon_star.png",
+        width: "20px",
+        height: "20px"
+      } : {
+        // 普通路口用圆点
+        type: "simple-marker",
+        style: "circle",
+        color: [5, 116, 255, 0.8],
+        size: 8,
+        outline: {
+          color: "white",
+          width: 0
+        }
+      };
+    {
+      const t = e.isKey ? "/GisViewerAssets/Images/cross/gis_gjxklk_orange.png" : "/GisViewerAssets/Images/cross/gis_xhj_blue.png";
+      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: 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: 20,
+                rotateClockwise: !0,
+                textureFilter: "Picture",
+                url: t
+              }
+            ]
+          }
+        }
+      };
+    }
+  }
+  /**
+   * 获取邻居点
+   * @param locations
+   * @param index
+   * @param eps
+   * @returns
+   */
+  getNeighbors(e, t) {
+    return this.locations.filter((r) => r.id === e.id || r.visited ? !1 : this.getDistance(e, r) <= t);
+  }
+  /**
+   * 两点间的像素距离
+   * @param point1
+   * @param point2
+   * @returns
+   */
+  getDistance(e, t) {
+    return Math.sqrt(
+      Math.pow(e.properties.screenX - t.properties.screenX, 2) + Math.pow(e.properties.screenY - t.properties.screenY, 2)
+    );
+  }
+  /**
+   * 从聚类结果中创建聚类对象
+   * @param locations
+   * @returns
+   */
+  createClusters(e) {
+    const t = {}, r = [];
+    for (let i = 0; i < e.length; i++) {
+      const o = e[i];
+      o.clusterId === void 0 || o.clusterId === -1 ? r.push(o) : (t[o.clusterId] || (t[o.clusterId] = []), t[o.clusterId].push(o));
+    }
+    const s = Object.keys(t).map((i, o) => {
+      const a = t[Number(i)], l = a.length, n = a.reduce((c, m) => c + m.x, 0), h = a.reduce((c, m) => c + m.y, 0), p = n / l, d = h / l;
+      return {
+        id: Number(i),
+        items: a,
+        count: l,
+        center: {
+          x: p,
+          y: d
+        }
+      };
+    });
+    return r.length > 0 && s.push({
+      id: -1,
+      items: r,
+      count: r.length,
+      center: null
+    }), s;
+  }
+  /**
+   * 按照像素距离聚类
+   * @param locations
+   * @param eps
+   * @param minPoints
+   * @returns
+   */
+  doPixelCluster(e, t) {
+    let r = 0;
+    this.locations.forEach((s) => {
+      s.visited = !1, s.clusterId = void 0;
+    });
+    for (let s = 0; s < this.locations.length; s++) {
+      const i = this.locations[s];
+      if (i.visited)
+        continue;
+      i.visited = !0;
+      const o = this.getNeighbors(i, e);
+      o.length < t ? i.clusterId = -1 : (o.forEach((a) => {
+        a.visited = !0, a.clusterId = r;
+      }), i.clusterId = r, r++);
+    }
+    return this.createClusters(this.locations);
+  }
+  showClusterResult(e) {
+    this.crossLayer.removeAll();
+    let t = Number.MIN_VALUE, r = Number.MAX_VALUE;
+    e.forEach((s) => {
+      s.count > 1 && (r = Math.min(r, s.count), t = Math.max(t, s.count));
+    }), e.forEach((s) => {
+      if (s.id !== -1) {
+        let i = r === t ? (this.maxClusterSymbolSize + this.minClusterSymbolSize) / 2 : this.minClusterSymbolSize + (s.count - r) / (t - r) * (this.maxClusterSymbolSize - this.minClusterSymbolSize);
+        i *= 0.75;
+        const l = (s.count.toString().length * 8 + 6) / 2, n = new u({
+          geometry: new y({ x: s.center.x, y: s.center.y }),
+          attributes: {
+            count: s.count
+          },
+          symbol: {
+            type: "cim",
+            data: {
+              type: "CIMSymbolReference",
+              primitiveOverrides: [
+                {
+                  // 将textGraphic的TextString替换为graphic.attributes.name
+                  type: "CIMPrimitiveOverride",
+                  primitiveName: "textGraphic",
+                  propertyName: "TextString",
+                  valueExpressionInfo: {
+                    type: "CIMExpressionInfo",
+                    title: "Custom",
+                    expression: "$feature.count",
+                    returnType: "Default"
+                  }
+                }
+              ],
+              symbol: {
+                type: "CIMPointSymbol",
+                symbolLayers: [
+                  // 聚合数量
+                  {
+                    type: "CIMVectorMarker",
+                    size: i,
+                    colorLocked: !0,
+                    anchorPointUnits: "Relative",
+                    frame: { xmin: -16, ymin: -16, xmax: 16, ymax: 16 },
+                    markerGraphics: [
+                      // 数量文本框
+                      {
+                        type: "CIMMarkerGraphic",
+                        geometry: {
+                          rings: [
+                            [
+                              [-l, 40],
+                              [l, 40],
+                              [l, 20],
+                              [-l, 20],
+                              [-l, 40]
+                            ]
+                          ]
+                        },
+                        symbol: {
+                          type: "CIMPolygonSymbol",
+                          symbolLayers: [
+                            {
+                              type: "CIMSolidFill",
+                              enable: !0,
+                              color: [2, 72, 200, 255]
+                            },
+                            {
+                              type: "CIMSolidStroke",
+                              enable: !0,
+                              width: 5,
+                              color: [2, 72, 200, 128]
+                            }
+                          ]
+                        }
+                      },
+                      // 数量文字
+                      {
+                        type: "CIMMarkerGraphic",
+                        primitiveName: "textGraphic",
+                        geometry: { x: 0, y: 0 },
+                        symbol: {
+                          type: "CIMTextSymbol",
+                          height: 16,
+                          horizontalAlignment: "Center",
+                          offsetX: 0,
+                          offsetY: 30,
+                          symbol: {
+                            type: "CIMPolygonSymbol",
+                            symbolLayers: [
+                              {
+                                type: "CIMSolidFill",
+                                enable: !0,
+                                color: [255, 255, 255, 255]
+                              }
+                            ]
+                          },
+                          verticalAlignment: "Center"
+                        },
+                        textString: ""
+                      }
+                    ],
+                    scaleSymbolsProportionally: !0,
+                    respectFrame: !0
+                  },
+                  // 聚合图标
+                  {
+                    type: "CIMPictureMarker",
+                    enable: !0,
+                    anchorPoint: {
+                      x: 0,
+                      y: 0
+                    },
+                    anchorPointUnits: "Relative",
+                    size: i,
+                    rotateClockwise: !0,
+                    textureFilter: "Picture",
+                    url: "/GisViewerAssets/Images/cross/gis_xhj_blue.png"
+                  }
+                ]
+              }
+            }
+          }
+        });
+        this.crossLayer.add(n);
+      } else
+        s.items.forEach((i) => {
+          const o = new u({
+            geometry: new y({ x: i.x, y: i.y }),
+            attributes: {
+              ...i,
+              ...i.properties,
+              type: "clusterPoint",
+              id: i.id
+            },
+            symbol: this.crossGraphicSymbol
+          });
+          this.crossLayer.add(o);
+        });
+    });
   }
 }
 export {
-  l as default
+  f as default
 };

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

@@ -8,8 +8,8 @@ class f {
   // private roadLines!: IRoadLine[];
   constructor(t) {
     this.view = t;
-    const i = a.useAppDataStore;
-    this.mapConfig = JSON.parse(JSON.stringify(i.mapConfig)), this.districtRenderer = new l(t), this.subDistrictRenderer = new d(t), this.signalRenderer = new o(t), this.crossRenderer = new c(t);
+    const s = a.useAppDataStore;
+    this.mapConfig = JSON.parse(JSON.stringify(s.mapConfig)), this.districtRenderer = new l(t), this.subDistrictRenderer = new d(t), this.signalRenderer = new o(t), this.crossRenderer = new c(t);
   }
   /**
    * 显示所有区控、子区、信号机
@@ -18,15 +18,15 @@ class f {
    */
   async showSignalControlArea(t) {
     await this.clearSignalControlArea(), this.districtRenderer.setVisible(!1), this.subDistrictRenderer.setVisible(!1), this.signalRenderer.setClusterVisible(!1), this.signalRenderer.setPointVisible(!1);
-    const i = [], s = [];
+    const s = [], i = [];
     for (const e of t.areaList) {
       const n = new r(
         e,
         t.style || ""
       );
-      i.push(n), s.push(...n.subDistricts);
+      s.push(n), i.push(...n.subDistricts);
     }
-    return this.districtRenderer.style = t.style || "", await this.districtRenderer.showDistricts(i), await this.subDistrictRenderer.showSubDistricts(s), this.crossRenderer.showCrosses(i), { status: 0, message: "ok" };
+    return this.districtRenderer.style = t.style || "", await this.districtRenderer.showDistricts(s), await this.subDistrictRenderer.showSubDistricts(i), this.crossRenderer.addCrosses(s), { status: 0, message: "ok" };
   }
   /**
    * 显示单个区控
@@ -34,14 +34,14 @@ class f {
    */
   async showDistrict(t) {
     this.setLayerVisibility({ id: "district", visible: !0 }), this.setLayerVisibility({ id: "subDistrict", visible: !0 });
-    const i = new r(
+    const s = new r(
       t.areaList,
       t.style || ""
     );
-    await this.districtRenderer.showDistricts([i]), await this.subDistrictRenderer.showSubDistricts(
-      i.subDistricts
+    await this.districtRenderer.showDistricts([s]), await this.subDistrictRenderer.showSubDistricts(
+      s.subDistricts
     ), await this.subDistrictRenderer.showRoads({
-      id: i.id,
+      id: s.id,
       type: "district"
     });
   }
@@ -51,12 +51,12 @@ class f {
    */
   async showSubDistrict(t) {
     this.setLayerVisibility({ id: "subDistrict", visible: !0 });
-    const i = new r(
+    const s = new r(
       t.areaList,
       t.style || ""
     );
-    await this.subDistrictRenderer.showSubDistricts([i]), await this.subDistrictRenderer.showRoads({
-      id: i.id,
+    await this.subDistrictRenderer.showSubDistricts([s]), await this.subDistrictRenderer.showRoads({
+      id: s.id,
       type: "subDistrict"
     });
   }
@@ -65,7 +65,7 @@ class f {
    * @returns
    */
   async clearSignalControlArea() {
-    return await this.districtRenderer.clearDistricts(), await this.subDistrictRenderer.clearSubDistricts(), await this.signalRenderer.clearSignals(), { status: 0, message: "ok" };
+    return this.crossRenderer.clearCrosses(), await this.districtRenderer.clearDistricts(), await this.subDistrictRenderer.clearSubDistricts(), await this.signalRenderer.clearSignals(), { status: 0, message: "ok" };
   }
   /**
    * 设置区控、子区、信号机图层可见性
@@ -80,6 +80,12 @@ class f {
       case "subDistrict":
         this.subDistrictRenderer.setVisible(t.visible);
         break;
+      case "signal":
+        this.crossRenderer.showScatter();
+        break;
+      case "signalCluster":
+        this.crossRenderer.showCluster();
+        break;
     }
     return { status: 0, message: "ok" };
   }
@@ -110,12 +116,12 @@ class f {
       case "district":
         return await this.districtRenderer.highlightDistrict(t) ? (this.subDistrictRenderer.filter(t), this.signalRenderer.filter(t), await this.subDistrictRenderer.showRoads(t), { status: 0, message: "ok" }) : { status: 1, message: "未找到区控" };
       case "subDistrict": {
-        const { count: i, parentId: s } = await this.subDistrictRenderer.highlightSubDistrict(t);
-        return i > 0 ? (this.districtRenderer.filter(s), this.signalRenderer.filter(t), { status: 0, message: "ok" }) : { status: 1, message: "未找到子区" };
+        const { count: s, parentId: i } = await this.subDistrictRenderer.highlightSubDistrict(t);
+        return s > 0 ? (this.districtRenderer.filter(i), this.signalRenderer.filter(t), { status: 0, message: "ok" }) : { status: 1, message: "未找到子区" };
       }
       case "signal": {
-        const { districtId: i, subDistrictId: s, count: e } = await this.signalRenderer.highlightSignal(t.id);
-        return e > 0 ? (this.districtRenderer.filter(i), this.subDistrictRenderer.filter(t), { status: 0, message: "ok" }) : { status: 1, message: "未找到信号机" };
+        const { districtId: s, subDistrictId: i, count: e } = await this.signalRenderer.highlightSignal(t.id);
+        return e > 0 ? (this.districtRenderer.filter(s), this.subDistrictRenderer.filter(t), { status: 0, message: "ok" }) : { status: 1, message: "未找到信号机" };
       }
       default:
         return { status: 1, message: "未知类型" };

package/es/src/types/index.d.ts

@@ -265,6 +265,11 @@ export interface ISplitOpenDriveLaneParams {
     start?: number;
     end?: number;
 }
+export interface IBlockOpenDriveLaneParams {
+    roadsectId: string;
+    roadsectBaseId: string;
+    laneId: string;
+}
 export interface IJunctionTableData {
     id: string;
     name: string;

package/lib/src/gis-map/gis-map.vue.d.ts

@@ -1,6 +1,6 @@
 import MapView from '@arcgis/core/views/MapView';
 import SceneView from '@arcgis/core/views/SceneView';
-import { IClusterPointParams, IEditSignalControlAreaParams, IFindSignalControlAreaParams, IFindSumoParams, ILaneNumberParams, ILayerVisibleParams, ILookAtParams, IMaskParam, IOverlayParam, IQueueLengthParams, ISetMapCameraParams, ISetMapCenterParams, IShowEdpassDeviceParams, IShowGreenWaveBandParams, IShowJurisdictionParams, IShowOpenDriveFromFileParams, IShowSignalControlAreaParams, ISignalCountdownProps, ISplitOpenDriveLaneParams, IStartCrossBufferParam, IToggleTrafficInfoParams, IUnselectSumoParams } from '../types';
+import { IBlockOpenDriveLaneParams, IClusterPointParams, IEditSignalControlAreaParams, IFindSignalControlAreaParams, IFindSumoParams, ILaneNumberParams, ILayerVisibleParams, ILookAtParams, IMaskParam, IOverlayParam, IQueueLengthParams, ISetMapCameraParams, ISetMapCenterParams, IShowEdpassDeviceParams, IShowGreenWaveBandParams, IShowJurisdictionParams, IShowOpenDriveFromFileParams, IShowSignalControlAreaParams, ISignalCountdownProps, ISplitOpenDriveLaneParams, IStartCrossBufferParam, IToggleTrafficInfoParams, IUnselectSumoParams } from '../types';
 import DbscanCluster from './utils/dbscan-cluster';
 import EdpassDeviceController from './utils/edpass-device-controller';
 import GreenWaveBandController from './utils/green-wave-band-controller';
@@ -142,6 +142,14 @@ declare const _sfc_main: import("vue").DefineComponent<{
         status: number;
         message: string;
     }>;
+    blockOpenDriveLane: (params: IBlockOpenDriveLaneParams) => Promise<void | {
+        status: number;
+        message: string;
+    }>;
+    clearBlockOpenDriveLane: () => void | {
+        status: number;
+        message: string;
+    };
     showSignalControlArea: (params: IShowSignalControlAreaParams) => Promise<import("../types").IResult>;
     showDistrictArea: (params: IShowSignalControlAreaParams) => Promise<void>;
     showSubDistrictArea: (params: IShowSignalControlAreaParams) => Promise<void>;