cd-mapgis 1.0.65 → 1.0.67

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cd-mapgis",
-  "version": "1.0.65",
+  "version": "1.0.67",
   "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/Location.js

@@ -0,0 +1,49 @@
+import VectorSource from 'ol/source/Vector.js';
+import VectorLayer from 'ol/layer/Vector.js';
+import Feature from 'ol/Feature.js';
+import MapView from './MapView.js';
+import Point from 'ol/geom/Point.js';
+import Style from 'ol/style/Style.js';
+import Icon from 'ol/style/Icon.js';
+
+export default class Location {
+    constructor(p) {
+        this.param = p;
+        this.img = p.img;
+        this.vectorSource = null;
+        this.vectorLayer = null;
+        this.map = p.map ? p.map : MapView.Instance.map;
+    }
+
+    /**
+     * [lon,lat]
+     * @param {*} point 
+     */
+    mark(point) {
+        if (!this.vectorLayer) {
+            let vectorSource = new VectorSource();
+            let vectorLayer = new VectorLayer({
+                source: vectorSource
+            });
+            this.map.addLayer(vectorLayer);
+            this.vectorSource = vectorSource;
+            this.vectorLayer = vectorLayer;
+        }
+        this.vectorSource.clear();
+        // 使用外部圆点图标
+        let dotFeature = new Feature({
+            geometry: new Point(point)
+        });
+        dotFeature.setStyle(new Style({
+            image: new Icon({
+                src: this.img, // 外部图标路径
+                scale: 1, // 缩放比例
+                anchor: [0.5, 0.5], // 锚点为中心
+                anchorOrigin: 'center',
+                anchorXUnits: 'fraction',
+                anchorYUnits: 'fraction'
+            })
+        }));
+        this.vectorSource.addFeature(dotFeature);
+    }
+}

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

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