gisviewer-vue3-arcgis 1.0.284 → 1.0.286

package/es/src/gis-map-ol/index.d.ts

@@ -1,2 +1,70 @@
-export declare const GisMapOl: any;
+export declare const GisMapOl: import("@easyest/utils/dist/lib/withinstall").SFCWithInstall<import("vue").DefineComponent<{
+    config: {
+        type: StringConstructor;
+        required: true;
+    };
+    assetsRoot: {
+        type: StringConstructor;
+        required: false;
+    };
+}, {
+    mapContainer: import("vue").Ref<any>;
+    mapInitializer: import("./utils/ol-map-initializer").default;
+    map: import("ol/Map").default;
+    viewEventKeys: import("ol/events").EventsKey[];
+    lastEmittedZoomInt: number | null;
+    emitZoomIfChanged: (z: number) => void;
+    signalCrossController: import("./utils/signal-control/signal-cross-controller").default;
+    signalSystemController: import("./utils/signal-control/signal-system-controller").default;
+    clusterPointController: import("./utils/overlay/cluster-point-controller").default;
+    policeAreaController: import("./utils/police-area-controller").default;
+    overlayController: import("./utils/overlay/overlay-controller").default;
+    setMapCenter: (params: import("../types").ISetMapCenterParams) => Promise<import("../types").IResult>;
+    setMapCamera: (params: import("../types").ISetMapCameraParams) => Promise<import("../types").IResult>;
+    setLayerVisibility: (params: import("../types").ILayerVisibleParams) => Promise<import("../types").IResult>;
+    setMapZoom: (zoom: number) => import("../types").IResult;
+    showSignalCross: (params: import("../types").IShowSignalCrossParams) => import("../types").IResult;
+    changeSignalCrossShowName: (showName: "detail" | "crossName" | "signalId") => void | {
+        success: boolean;
+        message: string;
+    };
+    clearSignalCross: () => void;
+    showSignalSystem: (params: import("../types").IShowSignalSystemParams) => Promise<import("../types").IResult> | {
+        status: number;
+        message: string;
+    };
+    removeSignalSystem: (areaCode?: string | undefined) => void | {
+        success: boolean;
+        message: string;
+    };
+    showSubSignalSystem: (params: import("../types").IShowSubSignalSystemParams) => Promise<import("../types").IResult>;
+    removeSubSignalSystem: (subCode?: string | undefined) => void | {
+        success: boolean;
+        message: string;
+    };
+    addClusterPoints: (params: import("../types").IClusterPointParams) => void;
+    removeAllClusterPoints: () => void;
+    showPoliceArea: (params: import("../types").IShowJurisdictionParams) => Promise<void>;
+    clearPoliceArea: () => void;
+    addOverlays: (params: import("../types").IOverlayParam) => import("../types").IResult;
+    removeOverlaysById: (ids: string | string[]) => void;
+    removeOverlaysByType: (type: string | string[]) => void;
+    removeAllOverlays: () => void;
+    props: any;
+    emit: (event: "mapLoaded" | "markerClick" | "mapClick" | "update:zoom", ...args: any[]) => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("mapLoaded" | "markerClick" | "mapClick" | "update:zoom")[], "mapLoaded" | "markerClick" | "mapClick" | "update:zoom", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    config: {
+        type: StringConstructor;
+        required: true;
+    };
+    assetsRoot: {
+        type: StringConstructor;
+        required: false;
+    };
+}>> & {
+    onMapLoaded?: ((...args: any[]) => any) | undefined;
+    onMarkerClick?: ((...args: any[]) => any) | undefined;
+    onMapClick?: ((...args: any[]) => any) | undefined;
+    "onUpdate:zoom"?: ((...args: any[]) => any) | undefined;
+}, {}, {}>>;
 export default GisMapOl;

package/es/src/gis-map-ol/index.mjs

@@ -0,0 +1,8 @@
+import { withInstall as t } from "@easyest/utils";
+import o from "./gis-map-ol.vue.mjs";
+import "./gis-map-ol.vue2.mjs";
+const a = t(o);
+export {
+  a as GisMapOl,
+  a as default
+};

package/es/src/gis-map-ol/utils/cluster/index.d.ts

@@ -0,0 +1,2 @@
+export { PixelClusterCalculator } from './pixel-cluster-calculator';
+export type { IPixelClusterOptions } from './pixel-cluster-calculator';

package/es/src/gis-map-ol/utils/cluster/pixel-cluster-calculator.d.ts

@@ -0,0 +1,65 @@
+import type { default as OlMap } from 'ol/Map';
+import { ICluster, IClusterLocation } from '../../../types';
+export interface IPixelClusterOptions {
+    /** 聚合半径（像素），默认 120 */
+    clusterRadius?: number;
+    /** 最小聚合点数，默认 2 */
+    minClusterPoints?: number;
+    /** 最大聚合符号大小，默认 40 */
+    maxClusterSymbolSize?: number;
+    /** 最小聚合符号大小，默认 20 */
+    minClusterSymbolSize?: number;
+}
+/**
+ * 像素聚合计算器
+ * 基于屏幕像素距离进行点聚合
+ */
+export declare class PixelClusterCalculator {
+    private map;
+    private options;
+    private clusteredLocations;
+    constructor(map: OlMap, options?: IPixelClusterOptions);
+    /**
+     * 计算聚合结果
+     * @param locations 原始点位数组
+     * @returns 聚合结果
+     */
+    calculate(locations: IClusterLocation[]): ICluster[];
+    /**
+     * 计算聚合符号大小
+     * @param clusters 聚合结果
+     * @returns 带有符号大小信息的聚合结果
+     */
+    calculateSymbolSizes(clusters: ICluster[]): (ICluster & {
+        symbolSize?: number;
+    })[];
+    /**
+     * 更新配置
+     */
+    updateOptions(options: Partial<IPixelClusterOptions>): void;
+    /**
+     * 获取当前配置
+     */
+    getOptions(): Required<IPixelClusterOptions>;
+    /**
+     * 将地理坐标转换为屏幕坐标
+     */
+    private locationToScreen;
+    /**
+     * 基于像素距离的聚合算法
+     */
+    private doPixelCluster;
+    /**
+     * 获取指定点的邻近点
+     */
+    private getNeighbors;
+    /**
+     * 计算两点之间的屏幕距离
+     */
+    private getDistance;
+    /**
+     * 根据聚合结果创建聚合对象
+     */
+    private createClusters;
+}
+export default PixelClusterCalculator;

package/es/src/gis-map-ol/utils/cluster/pixel-cluster-calculator.mjs

@@ -0,0 +1,122 @@
+const d = {
+  clusterRadius: 120,
+  minClusterPoints: 2,
+  maxClusterSymbolSize: 40,
+  minClusterSymbolSize: 20
+};
+class m {
+  constructor(s, e) {
+    this.clusteredLocations = [], this.map = s, this.options = { ...d, ...e };
+  }
+  /**
+   * 计算聚合结果
+   * @param locations 原始点位数组
+   * @returns 聚合结果
+   */
+  calculate(s) {
+    return this.locationToScreen(s), this.doPixelCluster(this.options.clusterRadius);
+  }
+  /**
+   * 计算聚合符号大小
+   * @param clusters 聚合结果
+   * @returns 带有符号大小信息的聚合结果
+   */
+  calculateSymbolSizes(s) {
+    let e = Number.MIN_VALUE, i = Number.MAX_VALUE;
+    return s.forEach((t) => {
+      t.count > 1 && (i = Math.min(i, t.count), e = Math.max(e, t.count));
+    }), s.map((t) => {
+      if (t.id !== -1 && t.center) {
+        let r = i === e ? (this.options.maxClusterSymbolSize + this.options.minClusterSymbolSize) / 2 : this.options.minClusterSymbolSize + (t.count - i) / (e - i) * (this.options.maxClusterSymbolSize - this.options.minClusterSymbolSize);
+        return r *= 0.75, { ...t, symbolSize: r };
+      }
+      return t;
+    });
+  }
+  /**
+   * 更新配置
+   */
+  updateOptions(s) {
+    this.options = { ...this.options, ...s };
+  }
+  /**
+   * 获取当前配置
+   */
+  getOptions() {
+    return { ...this.options };
+  }
+  /**
+   * 将地理坐标转换为屏幕坐标
+   */
+  locationToScreen(s) {
+    this.clusteredLocations = [], s.forEach((e) => {
+      const i = this.map.getPixelFromCoordinate([e.x, e.y]), [t, r] = i || [NaN, NaN];
+      Number.isFinite(t) && Number.isFinite(r) && t > 0 && r > 0 && (e.properties = e.properties || {}, e.properties.screenX = t, e.properties.screenY = r, e.visited = !1, e.clusterId = void 0, this.clusteredLocations.push(e));
+    });
+  }
+  /**
+   * 基于像素距离的聚合算法
+   */
+  doPixelCluster(s) {
+    let e = 0;
+    for (let i = 0; i < this.clusteredLocations.length; i++) {
+      const t = this.clusteredLocations[i];
+      if (t.visited)
+        continue;
+      t.visited = !0;
+      const r = this.getNeighbors(t, s);
+      r.length < this.options.minClusterPoints ? t.clusterId = -1 : (r.forEach((o) => {
+        o.visited = !0, o.clusterId = e;
+      }), t.clusterId = e, e++);
+    }
+    return this.createClusters();
+  }
+  /**
+   * 获取指定点的邻近点
+   */
+  getNeighbors(s, e) {
+    return this.clusteredLocations.filter((i) => i.id === s.id || i.visited ? !1 : this.getDistance(s, i) <= e);
+  }
+  /**
+   * 计算两点之间的屏幕距离
+   */
+  getDistance(s, e) {
+    var i, t, r, o;
+    return Math.sqrt(
+      Math.pow(
+        (((i = s.properties) == null ? void 0 : i.screenX) ?? 0) - (((t = e.properties) == null ? void 0 : t.screenX) ?? 0),
+        2
+      ) + Math.pow(
+        (((r = s.properties) == null ? void 0 : r.screenY) ?? 0) - (((o = e.properties) == null ? void 0 : o.screenY) ?? 0),
+        2
+      )
+    );
+  }
+  /**
+   * 根据聚合结果创建聚合对象
+   */
+  createClusters() {
+    const s = {}, e = [];
+    for (const t of this.clusteredLocations)
+      t.clusterId === void 0 || t.clusterId === -1 ? e.push(t) : (s[t.clusterId] || (s[t.clusterId] = []), s[t.clusterId].push(t));
+    const i = Object.keys(s).map((t) => {
+      const r = s[Number(t)], o = r.length, c = r.reduce((n, u) => n + u.x, 0), l = r.reduce((n, u) => n + u.y, 0), h = c / o, p = l / o;
+      return {
+        id: Number(t),
+        items: r,
+        count: o,
+        center: { x: h, y: p }
+      };
+    });
+    return e.length > 0 && i.push({
+      id: -1,
+      items: e,
+      count: e.length,
+      center: null
+    }), i;
+  }
+}
+export {
+  m as PixelClusterCalculator,
+  m as default
+};

package/es/src/gis-map-ol/utils/ol-map-initializer.d.ts

@@ -0,0 +1,29 @@
+import { default as OlMap } from 'ol/Map';
+import { ILayerVisibleParams, IMapInitializerParams, IResult, ISetMapCameraParams, ISetMapCenterParams } from '../../types';
+export default class OlMapInitializer {
+    private mapConfig;
+    private map;
+    private mapView;
+    private pointerMoveRaf;
+    private markerClick;
+    initialize(params: IMapInitializerParams): OlMap;
+    private processUrl;
+    private loadLayers;
+    private createMap;
+    /**
+     * 设置地图中心点和缩放级别
+     * @param params
+     * @returns
+     */
+    setMapCenter(params: ISetMapCenterParams): Promise<IResult>;
+    setMapZoom(params: {
+        zoom: number;
+    }): IResult;
+    /**
+     * 设置地图预存的相机视图
+     * @param params
+     * @returns
+     */
+    setMapCamera(params: ISetMapCameraParams): Promise<IResult>;
+    setLayerVisibility(params: ILayerVisibleParams): Promise<IResult>;
+}

package/es/src/gis-map-ol/utils/ol-map-initializer.mjs

@@ -0,0 +1,183 @@
+import p from "ol/layer/Image";
+import c from "ol/layer/Tile";
+import h from "ol/Map";
+import "ol/ol.css";
+import { Projection as l } from "ol/proj";
+import { ImageWMS as w, WMTS as f, TileWMS as g, XYZ as d } from "ol/source";
+import { TileGrid as z } from "ol/tilegrid";
+import S from "ol/tilegrid/WMTS";
+import M from "ol/View";
+class I {
+  constructor() {
+    this.mapConfig = {}, this.pointerMoveRaf = null;
+  }
+  initialize(e) {
+    return this.mapConfig = e.mapConfig || {}, this.markerClick = e.markerClickCallback, this.map = this.createMap(e.container), this.mapConfig.baseLayers && this.loadLayers(this.mapConfig.baseLayers), this.map;
+  }
+  processUrl(e) {
+    return e && (e.startsWith("http://") || e.startsWith("https://") ? e : e.startsWith("{{") ? e.replace("{{geoServer}}", this.mapConfig.geoServer) : e);
+  }
+  loadLayers(e) {
+    if (!this.map)
+      return;
+    const i = 1 / 0, s = 16384;
+    e.forEach((t) => {
+      var o, a;
+      (o = t.source) != null && o.url && (t.source.url = this.processUrl(t.source.url));
+      let r;
+      switch (t.type.toLowerCase()) {
+        case "webtile": {
+          console.log(t), r = new c({
+            preload: i,
+            cacheSize: s,
+            source: new d({
+              url: t.source.url,
+              projection: t.source.projection || "EPSG:4326",
+              tileSize: t.source.tileSize || 256
+              // minZoom: layerConfig.source.minZoom,
+              // maxZoom: layerConfig.source.maxZoom,
+              // crossOrigin: layerConfig.source.crossOrigin || 'anonymous'
+            })
+          });
+          break;
+        }
+        case "gwc-wms": {
+          r = new c({
+            preload: i,
+            cacheSize: s,
+            source: new g({
+              ...t.source,
+              tileGrid: new z({
+                ...t.source.tileGrid
+              })
+            }),
+            ...t.options
+          });
+          break;
+        }
+        case "wmts": {
+          const n = t.source.matrixSet || "", m = Array.from(
+            { length: 22 },
+            (V, u) => `${n}:${u}`
+          );
+          r = new c({
+            preload: i,
+            cacheSize: s,
+            source: new f({
+              ...t.source,
+              format: "image/png",
+              projection: new l({
+                code: t.source.projection || "EPSG:4326"
+              }),
+              tileGrid: new S({
+                resolutions: [
+                  1.4078260157100582,
+                  0.703913007855028,
+                  0.35195650392751515,
+                  0.17597825196375638,
+                  0.08798912598187819,
+                  0.043994562990939096,
+                  0.021997281495469548,
+                  0.010998640747734774,
+                  0.005499320373868577,
+                  0.0027496601869330985,
+                  0.001374830093467739,
+                  6874150467326798e-19,
+                  3437075233663399e-19,
+                  17185376168316996e-20,
+                  8592688084158498e-20,
+                  4296344042198222e-20,
+                  2148172021099111e-20,
+                  10740860104305824e-21,
+                  53704300533426425e-22,
+                  2685215025481591e-21,
+                  13426075127407955e-22,
+                  6713037563703978e-22
+                ],
+                matrixIds: m,
+                tileSize: 256,
+                origin: [-400, 400]
+              })
+            }),
+            ...t.options
+          });
+          break;
+        }
+        case "image-wms": {
+          r = new p({
+            source: new w({ ...t.source }),
+            ...t.options
+          });
+          break;
+        }
+      }
+      r && (r.set("id", t.id), r.set("group", t.group), (a = this.map) == null || a.addLayer(r));
+    });
+  }
+  createMap(e) {
+    const i = this.mapConfig.view;
+    this.mapView = new M({ ...i }), this.mapConfig.camera ? this.mapConfig.camera.home = i : this.mapConfig.camera = {
+      home: i
+    };
+    const s = new h({
+      target: e,
+      view: this.mapView
+    });
+    return s.on("pointermove", (t) => {
+      t.dragging || this.pointerMoveRaf === null && (this.pointerMoveRaf = requestAnimationFrame(() => {
+        const r = s.hasFeatureAtPixel(t.pixel), o = s.getTargetElement();
+        o && (o.style.cursor = r ? "pointer" : ""), this.pointerMoveRaf = null;
+      }));
+    }), s.on("click", (t) => {
+      const r = s.forEachFeatureAtPixel(t.pixel, (o) => o);
+      if (r && this.markerClick) {
+        const o = r.get("type") ?? "", a = r.get("id") ?? "", n = r.getProperties();
+        this.markerClick(o, a, n, t);
+      }
+    }), s;
+  }
+  /**
+   * 设置地图中心点和缩放级别
+   * @param params
+   * @returns
+   */
+  async setMapCenter(e) {
+    return this.map ? new Promise((i) => {
+      e.duration && e.duration > 0 ? this.mapView.animate(
+        {
+          center: e.center || this.mapView.getCenter(),
+          zoom: e.zoom || this.mapView.getZoom(),
+          duration: e.duration * 1e3
+        },
+        () => {
+          i({ status: 0, message: "成功" });
+        }
+      ) : (e.zoom && this.mapView.setZoom(e.zoom), e.center && this.mapView.setCenter(e.center), i({ status: 0, message: "成功" }));
+    }) : { status: -1, message: "地图未初始化" };
+  }
+  setMapZoom(e) {
+    return this.map ? (this.mapView.setZoom(e.zoom), { status: 0, message: "成功" }) : { status: -1, message: "地图未初始化" };
+  }
+  /**
+   * 设置地图预存的相机视图
+   * @param params
+   * @returns
+   */
+  async setMapCamera(e) {
+    if (!this.map)
+      return { status: -1, message: "地图未初始化" };
+    const i = this.mapConfig.camera[e.name];
+    return i ? await this.setMapCenter({
+      center: i.center,
+      zoom: e.zoom || i.zoom,
+      duration: e.duration || 0
+    }) : { status: -1, message: `未找到名称为 ${e.name} 的相机视图` };
+  }
+  async setLayerVisibility(e) {
+    const i = this.map.getLayers().getArray().filter((s) => s.get("id") === e.id || s.get("group") === e.id);
+    return i.length > 0 ? (i.forEach((s) => s.setVisible(e.visible)), { status: 0, message: "成功" }) : { status: -1, message: `未找到ID为 ${e.id} 的图层` };
+  }
+}
+export {
+  I as default
+};

package/es/src/gis-map-ol/utils/overlay/cluster-point-controller.d.ts

@@ -0,0 +1,23 @@
+import { default as OlMap } from 'ol/Map';
+import { IClusterPointParams } from '../../../types';
+export default class ClusterPointController {
+    private map;
+    private clusterLayer;
+    private source;
+    private view;
+    private clusterCalculator;
+    private countBackgroundColor;
+    private countFontColor;
+    private locations;
+    private clusterMarkUrl;
+    private viewChangeKey;
+    private mapMoveKey;
+    private resolutionChangeTimeout;
+    constructor(map: OlMap);
+    addClusterPoints(params: IClusterPointParams): void;
+    removeAllClusterPoints(): void;
+    private configureVectorLayerStyle;
+    private getClusterStyle;
+    private showClusterResult;
+    private calculateCluster;
+}

package/es/src/gis-map-ol/utils/overlay/cluster-point-controller.mjs

@@ -0,0 +1,102 @@
+import r from "ol/Feature";
+import i from "ol/geom/Point";
+import a from "ol/layer/Vector";
+import { unByKey as l } from "ol/Observable";
+import m from "ol/source/Vector";
+import n from "ol/style/Fill";
+import y from "ol/style/Icon";
+import g from "ol/style/Stroke";
+import u from "ol/style/Style";
+import C from "ol/style/Text";
+import { PixelClusterCalculator as f } from "../cluster/pixel-cluster-calculator.mjs";
+import { getPointStyle as c } from "../style/point-style.mjs";
+class L {
+  constructor(e) {
+    this.countBackgroundColor = [2, 72, 200, 0.8], this.countFontColor = [255, 255, 255, 1], this.locations = [], this.clusterMarkUrl = "", this.viewChangeKey = null, this.mapMoveKey = null, this.resolutionChangeTimeout = null, this.map = e, this.view = e.getView(), this.clusterCalculator = new f(e), this.source = new m(), this.clusterLayer = new a({
+      source: this.source
+    }), this.clusterLayer.set("id", "cluster-points-layer"), this.map.addLayer(this.clusterLayer), this.configureVectorLayerStyle();
+  }
+  addClusterPoints(e) {
+    var t;
+    this.clusterMarkUrl = ((t = e.clusterSymbol) == null ? void 0 : t.url) || "/GisViewerAssets/Images/cross/gis_xhj_blue.png", this.countBackgroundColor = e.countBackgroundColor || this.countBackgroundColor, this.countFontColor = e.countFontColor || this.countFontColor, this.locations = e.points, this.locations.forEach((o) => {
+      o.symbol = o.symbol || e.pointSymbol;
+    }), this.viewChangeKey || (this.viewChangeKey = this.view.on("change:resolution", () => {
+      this.resolutionChangeTimeout && clearTimeout(this.resolutionChangeTimeout), this.resolutionChangeTimeout = setTimeout(() => {
+        this.calculateCluster();
+      }, 150);
+    })), this.mapMoveKey || (this.mapMoveKey = this.map.on("moveend", () => {
+      this.calculateCluster();
+    })), this.calculateCluster();
+  }
+  removeAllClusterPoints() {
+    this.source.clear(), this.viewChangeKey && (l(this.viewChangeKey), this.viewChangeKey = null), this.mapMoveKey && (l(this.mapMoveKey), this.mapMoveKey = null), this.resolutionChangeTimeout && (clearTimeout(this.resolutionChangeTimeout), this.resolutionChangeTimeout = null);
+  }
+  configureVectorLayerStyle() {
+    const e = this.view.getResolutionForZoom(18);
+    this.clusterLayer.setStyle((t, o) => {
+      const s = t.get("type");
+      if (o <= e)
+        return c(t.getProperties().symbol);
+      if (s === "cluster-point")
+        return c(t.getProperties().symbol);
+      if (s === "cluster-cluster")
+        return this.getClusterStyle(t.getProperties());
+    });
+  }
+  getClusterStyle(e) {
+    const t = e.clusterSymbolSize, o = new y({
+      src: this.clusterMarkUrl,
+      scale: t / 32
+      // 近似缩放
+    }), s = -(t + 10), h = new C({
+      text: String(e.count ?? 0),
+      font: "16px Arial Unicode MS",
+      fill: new n({ color: this.countFontColor }),
+      backgroundFill: new n({ color: this.countBackgroundColor }),
+      backgroundStroke: new g({
+        color: [
+          this.countBackgroundColor[0],
+          this.countBackgroundColor[1],
+          this.countBackgroundColor[2],
+          0.5
+        ],
+        width: 4
+      }),
+      padding: [1, 2, 1, 2],
+      offsetY: s,
+      textAlign: "center",
+      justify: "center",
+      textBaseline: "middle"
+    });
+    return [new u({ image: o }), new u({ text: h })];
+  }
+  showClusterResult(e) {
+    this.source.clear(), e.forEach((t) => {
+      if (t.id !== -1 && t.center && t.symbolSize) {
+        const o = new r({
+          geometry: new i([t.center.x, t.center.y]),
+          type: "cluster-cluster",
+          count: t.count,
+          clusterSymbolSize: t.symbolSize
+        });
+        this.source.addFeature(o);
+      } else
+        t.items.forEach((o) => {
+          const s = new r({
+            ...o.properties,
+            geometry: new i([o.x, o.y]),
+            type: "cluster-point",
+            symbol: o.symbol
+          });
+          this.source.addFeature(s);
+        });
+    }), this.clusterLayer.changed();
+  }
+  calculateCluster() {
+    const e = this.clusterCalculator.calculate(this.locations), t = this.clusterCalculator.calculateSymbolSizes(e);
+    this.showClusterResult(t);
+  }
+}
+export {
+  L as default
+};