cd-mapgis 1.0.64 → 1.0.66

package/package.json

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

package/src/InnerUtil.js

@@ -1,5 +1,6 @@
 import Polygon from 'ol/geom/Polygon.js';
 import { WKT } from 'ol/format';
+import MapView from './MapView.js';
 
 export default class InnerUtil {
     /**
@@ -35,4 +36,42 @@ export default class InnerUtil {
         const wktFormat = new WKT();
         return wktFormat.writeGeometry(polygon);
     }
+    /**
+     * 注册指北针
+     *      .compass-icon {
+            width: 100%;
+            height: 100%;
+            transition: transform 0.3s ease-out;
+            background-image: url('compass.png');
+            background-size: contain;
+            background-repeat: no-repeat;
+            background-position: center;
+        }
+     * @param {*} p 
+     */
+    static registCompass(p) {
+        let map = p.map ? p.map : MapView.Instance.map;
+        // 获取指北针元素
+        const compassElement = document.getElementById(p.compassId);
+        const compassIcon = compassElement.querySelector(p.compassIconStyle);
+        // 监听地图视图的旋转变化
+        map.getView().on('change:rotation', function () {
+            const rotation = map.getView().getRotation();
+            // 将弧度转换为角度，并更新指北针旋转
+            // 注意：PNG图片需要旋转相反方向，因为地图旋转时指北针应保持指向北方
+            const rotationDeg = -rotation * (180 / Math.PI);
+            compassIcon.style.transform = `rotate(${rotationDeg}deg)`;
+        });
+        // 点击指北针重置地图方向
+        compassElement.addEventListener('click', function () {
+            // 平滑动画重置旋转角度
+            const view = map.getView();
+            if (view.getRotation() !== 0) {
+                view.animate({
+                    rotation: 0,
+                    duration: 500
+                });
+            }
+        });
+    }
 }

package/src/LayerUtil.js

@@ -14,6 +14,7 @@ import VectorLayer from 'ol/layer/Vector.js';
 import StyleUtil from './StyleUtil.js';
 import LineString from 'ol/geom/LineString.js';
 import Polygon from 'ol/geom/Polygon.js';
+import { WKT } from 'ol/format';
 
 /**
  * 图层工具
@@ -207,6 +208,21 @@ export default class LayerUtil {
         });
         return { layer: layer, geometry: geometry };
     }
+    /**
+     * 将单个wkt数据包装为一个图层
+     * @param {*} json 
+     */
+    static getWktLayer(p) {
+        let wktFormat = new WKT();
+        let geometry = wktFormat.readGeometry(p.data);
+        let feature = new Feature({ geometry: geometry });
+        let vectorSource = new VectorSource({ features: [feature] });
+        let layer = new VectorLayer({
+            source: vectorSource,
+            style: p.style
+        });
+        return { layer: layer, geometry: geometry };
+    }
     /**
      *  [[116.4074, 39.9042], [121.4737, 31.2304]]
      * @param {*} p 

package/src/MapView.js

@@ -5,6 +5,7 @@ import StyleUtil from './StyleUtil.js';
 import MapDrawUtil from './MapDrawUtil.js';
 import SwipeUtil from './SwipeUtil.js';
 import DragPan from 'ol/interaction/DragPan.js';
+import * as OlInteraction from 'ol/interaction';
 
 /**
  * ol地图显示
@@ -34,17 +35,31 @@ export default class MapView {
     }
     //初始化地图及其他参数
     _init(p) {
+        // 创建地图交互
+        let interactions = null;
+        if (p.mobileRotate) {
+            interactions = OlInteraction.defaults({
+                altShiftDragRotate: false, // 禁用Alt+Shift+拖拽旋转
+                pinchRotate: true, // 启用双指旋转
+                pinchZoom: true, // 启用双指缩放
+            });
+        }
+
         if (p.view) {
             this.view = p.view;
         } else {
             let center = p.center ? p.center : [104.0633664, 30.6598344];//地图初始中心点（默认天府广场）
             let zoom = p.zoom ? p.zoom : 16; //地图初始显示级数
             let projection = p.projection ? p.projection : 'EPSG:4326';
-            this.view = new View({
+            let viewP = {
                 center: center,
                 zoom: zoom,
                 projection: projection
-            });
+            };
+            if (interactions) {
+                viewP.interactions = interactions;
+            }
+            this.view = new View(viewP);
         }
         this.target = p.target ? p.target : 'map';//地图div的id
         let layers = p.layers ? p.layers : [];
@@ -83,9 +98,9 @@ export default class MapView {
         let res;
         if (p.type == 'jsonPoints') {
             res = LayerUtil.getJsonPointsLayer(p);
-        } else if(p.type == 'tracePoints'){
+        } else if (p.type == 'tracePoints') {
             res = LayerUtil.getTracePointsLayer(p);
-        }else {
+        } else {
             res = LayerUtil.getJsonLayer(p);
         }
         this._view_templayer = res.layer;

package/src/index.js

@@ -5,6 +5,7 @@ import LayerUtil from './LayerUtil.js';
 import Overlay from './Overlay.js';
 import HttpUtil from './HttpUtil.js';
 import InnerUtil from './InnerUtil.js';
+import StyleUtil from './StyleUtil.js';
 
 // 导出模块
 export {
@@ -13,5 +14,6 @@ export {
     LayerUtil,
     Overlay,
     HttpUtil,
-    InnerUtil
+    InnerUtil,
+    StyleUtil
 };