my-openlayer 2.1.6 → 2.1.8

package/core/MapTools.d.ts

@@ -30,6 +30,8 @@ export default class MapTools {
     static getLayerByLayerName(map: Map, layerName: string | string[]): (VectorLayer<VectorSource> | BaseLayer | ImageLayer<ImageSource>)[];
     /**
      * 设置地图裁剪
+     * 使用 Canvas clip 实现裁剪，支持多个闭合区域
+     * 注意：此方法会修改 baseLayer 的 prerender 和 postrender 事件
      */
     static setMapClip(baseLayer: any, data: MapJSONData): any;
     /**

package/core/MapTools.js

@@ -1,9 +1,5 @@
 "use strict";
-import VectorLayer from "ol/layer/Vector";
-import VectorSource from "ol/source/Vector";
 import GeoJSON from "ol/format/GeoJSON";
-import { Fill, Style } from "ol/style";
-import { getVectorContext } from "ol/render";
 import { ErrorHandler, ErrorType } from "../utils/ErrorHandler";
 import { ValidationUtils } from "../utils/ValidationUtils";
 /**
@@ -69,26 +65,59 @@ class MapTools {
     }
     /**
      * 设置地图裁剪
+     * 使用 Canvas clip 实现裁剪，支持多个闭合区域
+     * 注意：此方法会修改 baseLayer 的 prerender 和 postrender 事件
      */
     static setMapClip(baseLayer, data) {
-        const clipLayer = new VectorLayer({
-            style: null,
-            source: new VectorSource({
-                features: new GeoJSON().readFeatures(data)
-            })
-        });
-        const style = new Style({
-            fill: new Fill({
-                color: 'transparent'
-            })
-        });
+        const features = new GeoJSON().readFeatures(data);
         baseLayer.on("prerender", (event) => {
-            const vectorContext = getVectorContext(event);
-            event.context.globalCompositeOperation = 'source-over';
             const ctx = event.context;
+            // 获取坐标转换矩阵 (pixel = coordinate * transform)
+            // 注意：OpenLayers 的 transform 可能包含 pixelRatio，也可能不包含，取决于版本
+            // 在现代版本中，event.frameState.coordinateToPixelTransform 通常用于将地理坐标转换为 Canvas 像素坐标
+            const transform = event.frameState.coordinateToPixelTransform;
             ctx.save();
-            clipLayer.getSource()?.forEachFeature(function (feature) {
-                vectorContext.drawFeature(feature, style);
+            ctx.beginPath();
+            features.forEach((feature) => {
+                const geometry = feature.getGeometry();
+                if (!geometry)
+                    return;
+                const type = geometry.getType();
+                const coordinates = geometry.getCoordinates();
+                // 辅助函数：绘制单个线性环
+                const drawRing = (ringCoords) => {
+                    if (!ringCoords || ringCoords.length === 0)
+                        return;
+                    for (let i = 0; i < ringCoords.length; i++) {
+                        const coord = ringCoords[i];
+                        // 手动应用变换: pixelX = x * m0 + y * m1 + m4
+                        //               pixelY = x * m2 + y * m3 + m5
+                        // transform 数组结构: [m0, m1, m2, m3, m4, m5]
+                        const pixelX = coord[0] * transform[0] + coord[1] * transform[1] + transform[4];
+                        const pixelY = coord[0] * transform[2] + coord[1] * transform[3] + transform[5];
+                        if (i === 0) {
+                            ctx.moveTo(pixelX, pixelY);
+                        }
+                        else {
+                            ctx.lineTo(pixelX, pixelY);
+                        }
+                    }
+                    ctx.closePath();
+                };
+                if (type === 'MultiPolygon') {
+                    // MultiPolygon: [Polygon, Polygon] -> Polygon: [OuterRing, InnerRing, ...]
+                    coordinates.forEach((polygonCoords) => {
+                        polygonCoords.forEach((ringCoords) => {
+                            drawRing(ringCoords);
+                        });
+                    });
+                }
+                else if (type === 'Polygon') {
+                    // Polygon: [OuterRing, InnerRing, ...]
+                    coordinates.forEach((ringCoords) => {
+                        drawRing(ringCoords);
+                    });
+                }
             });
             ctx.clip();
         });
@@ -96,9 +125,6 @@ class MapTools {
             const ctx = event.context;
             ctx.restore();
         });
-        clipLayer.getSource()?.on('addfeature', function () {
-            baseLayer.setExtent(clipLayer.getSource()?.getExtent());
-        });
         return baseLayer;
     }
     /**

package/core/Point.js

@@ -118,6 +118,7 @@ export default class Point {
             const pointFeature = new Feature({
                 rawData: item,
                 type: options.layerName,
+                layerName: options.layerName,
                 geometry: new olPoint([item.lgtd, item.lttd])
             });
             pointFeature.setStyle(this.createPointStyle(options, item));

package/core/Polygon.js

@@ -4,7 +4,7 @@ import VectorSource from "ol/source/Vector";
 import GeoJSON from "ol/format/GeoJSON";
 import { Fill, Stroke, Style, Text } from "ol/style";
 import { Image as ImageLayer, Heatmap } from "ol/layer";
-import { Geometry, LinearRing, Point } from "ol/geom";
+import { LinearRing, Point } from "ol/geom";
 import { fromExtent } from "ol/geom/Polygon";
 import Feature from "ol/Feature";
 import ImageStatic from "ol/source/ImageStatic";
@@ -350,34 +350,27 @@ export default class Polygon {
             }
             return group;
         }
-        /** 擦除操作 **/
-        function erase(geom, view) {
-            const part = getCoordsGroup(geom);
-            if (!part) {
-                return;
+        /** 擦除操作 - 创建遮罩多边形 **/
+        function erase(geometries, view) {
+            // 收集所有几何图形的坐标环
+            let allParts = [];
+            geometries.forEach(geom => {
+                const parts = getCoordsGroup(geom);
+                if (parts && parts.length > 0) {
+                    allParts = allParts.concat(parts);
+                }
+            });
+            if (allParts.length === 0) {
+                return null;
             }
             const extent = view.getProjection().getExtent();
             const polygonRing = fromExtent(extent);
-            part.forEach((item) => {
+            allParts.forEach((item) => {
                 const linearRing = new LinearRing(item);
                 polygonRing.appendLinearRing(linearRing);
             });
             return polygonRing;
         }
-        /** 添加遮罩 **/
-        function createShade(geom, view) {
-            if (geom instanceof Geometry) {
-                const source = geom.clone();
-                const polygon = erase(source, view);
-                const feature = new Feature({
-                    geometry: polygon
-                });
-                return {
-                    feature,
-                    shade: source
-                };
-            }
-        }
         // 遮罩样式
         const shadeStyle = new Style({
             fill: new Fill({
@@ -398,13 +391,39 @@ export default class Polygon {
         });
         this.map.addLayer(vtLayer);
         const features = new GeoJSON().readFeatures(data);
-        const ft = features[0];
-        const bound = ft.getGeometry();
-        const result = createShade(bound, this.map.getView());
-        if (result) {
-            vtSource.addFeature(result.feature);
-            if (options?.extent)
-                this.map.getView().fit(result.shade);
+        // 收集所有要素的几何图形
+        const geometries = [];
+        features.forEach(feature => {
+            const geometry = feature.getGeometry();
+            if (geometry) {
+                geometries.push(geometry);
+            }
+        });
+        if (geometries.length > 0) {
+            // 创建遮罩
+            const polygon = erase(geometries, this.map.getView());
+            if (polygon) {
+                const feature = new Feature({
+                    geometry: polygon
+                });
+                vtSource.addFeature(feature);
+                // 如果需要适应视图，计算所有几何图形的合并范围
+                if (options?.extent) {
+                    let totalExtent = geometries[0].getExtent();
+                    for (let i = 1; i < geometries.length; i++) {
+                        // 注意：这里需要导入 extend 函数，或者使用简单的 extent 合并逻辑
+                        // 由于 openlayers 的 extent 是 [minx, miny, maxx, maxy]
+                        const ext = geometries[i].getExtent();
+                        totalExtent = [
+                            Math.min(totalExtent[0], ext[0]),
+                            Math.min(totalExtent[1], ext[1]),
+                            Math.max(totalExtent[2], ext[2]),
+                            Math.max(totalExtent[3], ext[3])
+                        ];
+                    }
+                    this.map.getView().fit(totalExtent);
+                }
+            }
         }
     }
     /**

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "my-openlayer",
   "private": false,
-  "version": "2.1.6",
+  "version": "2.1.8",
   "type": "module",
   "main": "index.js",
   "types": "index.d.ts",