cd-mapgis 1.0.68 → 1.0.70

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cd-mapgis",
-  "version": "1.0.68",
+  "version": "1.0.70",
   "main": "./src/index.js",
   "types": "./src/index.d.ts",
   "type": "module",

package/src/InnerUtil.js

@@ -36,6 +36,17 @@ export default class InnerUtil {
         const wktFormat = new WKT();
         return wktFormat.writeGeometry(polygon);
     }
+    /**
+     * 获取点集合的wkt [[long,lat],[long,lat]]
+     * @param {*} p 
+     */
+    static getWktByPoints(data) {
+        // 创建多边形几何对象
+        let polygon = new Polygon([data]);
+        // 转换为WKT格式
+        const wktFormat = new WKT();
+        return wktFormat.writeGeometry(polygon);
+    }
     /**
      * 注册指北针
      *      .compass-icon {
@@ -60,12 +71,12 @@ export default class InnerUtil {
         map.getView().on('change:rotation', function () {
             let compassIcon = document.getElementById(p.compassIconId);
             if (!compassIcon) {
-                console.error("未获取到dom元素:" + p.compassIconId);              
+                console.error("未获取到dom元素:" + p.compassIconId);
             }
             let rotation = map.getView().getRotation();
             // 将弧度转换为角度，并更新指北针旋转
-            // 注意：PNG图片需要旋转相反方向，因为地图旋转时指北针应保持指向北方
-            const rotationDeg = -rotation * (180 / Math.PI);
+            // 注意：PNG图片需要旋转方向，因为地图旋转时指北针应保持指向北方
+            const rotationDeg = rotation * (180 / Math.PI);
             compassIcon.style.transform = `rotate(${rotationDeg}deg)`;
         });
         // 点击指北针重置地图方向

package/src/LayerUtil.js

@@ -330,4 +330,18 @@ export default class LayerUtil {
             style: StyleUtil.getPolygonStyle(p)
         });
     }
+    /**
+     * [[long,lat],[long,lat]]
+     * @param {*} p 
+     * @returns 
+     */
+    static getPolygonLayerByPoints(p) {       
+        let polygon = new Polygon([p.data]);
+        let feature = new Feature({ geometry: polygon });
+        let vectorSource = new VectorSource({ features: [feature] });
+        return new VectorLayer({
+            source: vectorSource,
+            style: StyleUtil.getPolygonStyle(p)
+        });
+    }
 }

package/src/MapView.js

@@ -12,6 +12,7 @@ import * as OlInteraction from 'ol/interaction';
  */
 export default class MapView {
     static Instance = null;//主地图,一般用于只操作一个地图的情况
+    static CHINA_EXTENT = [73.66, 3.86, 135.05, 53.55];//中国范围
     constructor(p) {
         this.params = p;
         this.view = null;
@@ -59,6 +60,11 @@ export default class MapView {
             if (interactions) {
                 viewP.interactions = interactions;
             }
+            if (p.chinaExtent) {
+                viewP.extent = MapView.CHINA_EXTENT;
+                viewP.constrainOnlyCenter = true;// 限制整个视图范围，而不仅仅是中心点
+                viewP.smoothExtentConstraint = interactions;// 平滑约束
+            }
             this.view = new View(viewP);
         }
         this.target = p.target ? p.target : 'map';//地图div的id
@@ -267,4 +273,57 @@ export default class MapView {
             this.map.getView().fit(this._reset_bounds, this.map.getSize());
         }
     }
+    //获取可视范围的矩形多边形
+    getVisiblePolygon() {
+        const view = this.map.getView();
+        const size = this.map.getSize();
+        const center = view.getCenter();
+        const resolution = view.getResolution();
+        const rotation = view.getRotation();
+        // 如果没有旋转，直接使用内置方法
+        if (rotation === 0 || Math.abs(rotation) < 1e-10) {
+            let d = view.calculateExtent(size);
+            let minX = d[0];
+            let minY = d[1];
+            let maxX = d[2];
+            let maxY = d[3];
+            return [
+                [minX, minY],
+                [maxX, minY],
+                [maxX, maxY],
+                [minX, maxY],
+                [minX, minY]
+            ];
+        }
+        // 计算四个角点在地图坐标系中的位置
+        const halfWidth = (size[0] * resolution) / 2;
+        const halfHeight = (size[1] * resolution) / 2;
+        // 原始四个角点（相对于中心点）
+        const unrotatedCorners = [
+            [-halfWidth, -halfHeight],  // 左下
+            [halfWidth, -halfHeight],   // 右下
+            [halfWidth, halfHeight],    // 右上
+            [-halfWidth, halfHeight]    // 左上
+        ];
+        const cos = Math.cos(rotation);
+        const sin = Math.sin(rotation);
+        const centerX = center[0];
+        const centerY = center[1];
+        // 旋转并转换到地图坐标系
+        let rotatedCorners = unrotatedCorners.map(corner => {
+            const x = corner[0];
+            const y = corner[1];
+            // 旋转变换
+            const rotatedX = x * cos - y * sin;
+            const rotatedY = x * sin + y * cos;
+            // 转换为地图坐标
+            return [
+                centerX + rotatedX,
+                centerY + rotatedY
+            ];
+        });
+        // 返回四个角点坐标（旋转后的实际矩形）
+        rotatedCorners.push(rotatedCorners[0]);//封闭
+        return rotatedCorners;
+    }
 }