gisviewer-vue3-arcgis 1.0.285 → 1.0.286

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

@@ -1,37 +1,53 @@
-import n from "ol/layer/Tile";
-import c from "ol/Map";
+import p from "ol/layer/Image";
+import c from "ol/layer/Tile";
+import h from "ol/Map";
 import "ol/ol.css";
-import { Projection as h } from "ol/proj";
-import { WMTS as p, TileWMS as u } from "ol/source";
-import { TileGrid as l } from "ol/tilegrid";
-import f from "ol/tilegrid/WMTS";
-import d from "ol/View";
-class b {
+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.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) : this.mapConfig.assetsRoot + 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, r = 16384;
+    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 s;
-      switch (t.type) {
+      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": {
-          s = new n({
+          r = new c({
             preload: i,
-            cacheSize: r,
-            source: new u({
+            cacheSize: s,
+            source: new g({
               ...t.source,
-              tileGrid: new l({
+              tileGrid: new z({
                 ...t.source.tileGrid
               })
             }),
@@ -40,47 +56,85 @@ class b {
           break;
         }
         case "wmts": {
-          s = new n({
+          const n = t.source.matrixSet || "", m = Array.from(
+            { length: 22 },
+            (V, u) => `${n}:${u}`
+          );
+          r = new c({
             preload: i,
-            cacheSize: r,
-            source: new p({
+            cacheSize: s,
+            source: new f({
               ...t.source,
-              tileGrid: new f({
-                ...t.source.tileGrid
-              }),
-              projection: new h({
+              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;
+        }
       }
-      s && (s.set("id", t.id), (a = this.map) == null || a.addLayer(s));
+      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 d({ ...i }), this.mapConfig.camera ? this.mapConfig.camera.home = i : this.mapConfig.camera = {
+    this.mapView = new M({ ...i }), this.mapConfig.camera ? this.mapConfig.camera.home = i : this.mapConfig.camera = {
       home: i
     };
-    const r = new c({
+    const s = new h({
       target: e,
       view: this.mapView
     });
-    return r.on("pointermove", (t) => {
-      if (t.dragging)
-        return;
-      const s = r.hasFeatureAtPixel(t.pixel), o = r.getTargetElement();
-      o && (o.style.cursor = s ? "pointer" : "");
-    }), r.on("click", (t) => {
-      const s = r.forEachFeatureAtPixel(t.pixel, (o) => o);
-      if (s && this.markerClick) {
-        const o = s.get("type") ?? "", a = s.get("id") ?? "", m = s.getProperties();
-        this.markerClick(o, a, m, t);
+    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);
       }
-    }), r;
+    }), s;
   }
   /**
    * 设置地图中心点和缩放级别
@@ -120,10 +174,10 @@ class b {
     }) : { status: -1, message: `未找到名称为 ${e.name} 的相机视图` };
   }
   async setLayerVisibility(e) {
-    const i = this.map.getLayers().getArray().find((r) => r.get("id") === e.id);
-    return i ? (i.setVisible(e.visible), { status: 0, message: "成功" }) : { status: -1, message: `未找到ID为 ${e.id} 的图层` };
+    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 {
-  b as default
+  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
+};

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

@@ -0,0 +1,116 @@
+import Feature from 'ol/Feature';
+import { Geometry } from 'ol/geom';
+import VectorLayer from 'ol/layer/Vector';
+import { default as OlMap } from 'ol/Map';
+import VectorSource from 'ol/source/Vector';
+import { ILineSymbol, IOverlayParam, IPointSymbol, IPolygonSymbol, IResult } from '../../../types';
+interface IOverlayOptions {
+    id?: string;
+}
+export default class OverlayController {
+    private map;
+    overlayLayer: VectorLayer<VectorSource<Feature<Geometry>>>;
+    private vectorSource;
+    constructor(map: OlMap, options?: IOverlayOptions);
+    private defaultPointSymbol;
+    /**
+     * 添加覆盖物
+     * @param params
+     */
+    addOverlays(params: IOverlayParam): IResult;
+    /**
+     * 添加或更新单个覆盖物
+     * @param overlay 覆盖物对象
+     * @param symbol 符号
+     * @param properties 属性
+     * @param visible 是否可见
+     */
+    private addOverlay;
+    /**
+     * 创建几何对象
+     * @param geometryConfig 几何配置
+     */
+    private createGeometry;
+    /**
+     * 获取样式
+     * @param geometryType 几何类型
+     * @param symbol 符号配置
+     * @param attributes 属性
+     */
+    private getStyle;
+    /**
+     * 按type移除覆盖物
+     * @param types
+     */
+    removeOverlaysByType(types: string[] | string): IResult;
+    /**
+     * 按id移除覆盖物
+     * @param ids
+     */
+    removeOverlaysById(ids: string[] | string): IResult;
+    /**
+     * 按id显示或隐藏覆盖物
+     * @param ids
+     * @param isShow
+     */
+    isShowOverlaysByIds(ids: string[], isShow: boolean): void;
+    /**
+     * 显示全部覆盖物
+     */
+    showAllOverlays(): void;
+    /**
+     * 删除全部覆盖物
+     * @returns
+     */
+    removeAllOverlays(): IResult;
+    /**
+     * 更新覆盖物符号
+     * @param ids 覆盖物id数组
+     * @param symbol 新的符号配置
+     */
+    updateOverlaysSymbol(ids: string[], symbol: IPointSymbol | ILineSymbol | IPolygonSymbol): IResult;
+    /**
+     * 按type更新覆盖物符号
+     * @param types 类型数组
+     * @param symbol 新的符号配置
+     */
+    updateOverlaysSymbolByType(types: string[], symbol: IPointSymbol | ILineSymbol | IPolygonSymbol): IResult;
+    /**
+     * 获取几何类型字符串
+     * @param geometry
+     */
+    private getGeometryType;
+    /**
+     * 按id获取覆盖物Feature
+     * @param id
+     */
+    getOverlayById(id: string): Feature<Geometry> | undefined;
+    /**
+     * 按type获取覆盖物Feature数组
+     * @param type
+     */
+    getOverlaysByType(type: string): Feature<Geometry>[];
+    /**
+     * 隐藏图层
+     */
+    hideLayer(): void;
+    /**
+     * 显示图层
+     */
+    showLayer(): void;
+    /**
+     * 删除指定的Feature
+     * @param features
+     */
+    removeFeatures(features: Feature<Geometry> | Feature<Geometry>[]): void;
+    /**
+     * 查找屏幕坐标处的覆盖物
+     * @param pixel 屏幕像素坐标 [x, y]
+     */
+    findFeaturesAtPixel(pixel: number[]): Feature<Geometry>[];
+    /**
+     * 销毁
+     */
+    destroy(): void;
+}
+export {};