cd-mapgis 1.0.5 → 1.0.7

package/package.json

@@ -1,17 +1,17 @@
-{
-  "name": "cd-mapgis",
-  "version": "1.0.5",
-  "main": "./src/index.js",
-  "types": "./src/index.d.ts",
-  "type": "module",
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
-  },
-  "keywords": [],
-  "author": "cdzd",
-  "license": "ISC",
-  "description": "",
-  "dependencies": {
-    "ol": "^8.1.0"
-  }
-}
+{
+  "name": "cd-mapgis",
+  "version": "1.0.7",
+  "main": "./src/index.js",
+  "types": "./src/index.d.ts",
+  "type": "module",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "author": "cdzd",
+  "license": "ISC",
+  "description": "",
+  "dependencies": {
+    "ol": "^8.1.0"
+  }
+}

package/src/OM.js

@@ -8,6 +8,7 @@ import Fill from 'ol/style/Fill.js';
 import VectorLayer from 'ol/layer/Vector.js';
 import View from 'ol/View.js';
 import Map from 'ol/Map.js';
+import Overlay from './Overlay.js';
 
 /**
  * OM
@@ -24,7 +25,7 @@ class OM {
         let zoom = p.zoom ? p.zoom : 16; //地图初始显示级数
         let projection = p.projection ? p.projection : 'EPSG:4326';
         let layers = p.layers ? p.layers : [];
-        let view = OM.view = new View({
+        OM.view = new View({
             center: center,
             zoom: zoom,
             projection: projection
@@ -33,7 +34,7 @@ class OM {
             target: target,
             controls: [],
             layers: layers,
-            view: view,
+            view: OM.view,
         });
     }
     /**
@@ -104,6 +105,14 @@ class OM {
         var newMaxY = centerY + newHeight / 2;
         return [newMinX, newMinY, newMaxX, newMaxY];
     }
+    /**
+     * 向地图添加一个覆盖物
+     * 删除所有的覆盖物:OM.map.getOverlays().clear();
+     * @param {*} p 
+     */
+    static addOverlay(p) {
+        new Overlay(p).addToMap(OM.map);
+    }
 }
 
 // 导出模块

package/src/Overlay.js

@@ -0,0 +1,45 @@
+import Overlay from 'ol/Overlay.js';
+
+/**
+ * 覆盖层工具
+ */
+export default class Overlay {
+    /**
+     * [{html:'<img src="11.png" style="width: 32px; height: 32px;">',point:[105.09188461513055, 29.60190582196913]}]
+     * @param {*} data 
+     */
+    constructor(data) {
+        this.data = data.length ? data : [data];
+        this.items = [];//存放所有的覆盖层
+        for (let i = 0; i < data.length; i++) {
+            let d = data[i];
+            let imageElement = document.createElement('div');
+            imageElement.innerHTML = d.html;
+            let positioning = d.positioning ? d.positioning : 'center-center';
+            let imageOverlay = new Overlay({
+                position: d.point, // 指定经纬度坐标
+                element: imageElement,
+                positioning: positioning // 定位方式
+            });
+            this.items.push(imageOverlay);
+        }
+    }
+    /**
+     * 添加到地图
+     * @param {*} map 
+     */
+    addToMap(map) {
+        for (let i = 0; i < this.items.length; i++) {
+            map.addOverlay(this.items[i]);
+        }
+    }
+    /**
+     * 从地图上删除
+     * @param {*} map 
+     */
+    remove(map) {
+        for (let i = 0; i < this.items.length; i++) {
+            map.removeOverlay(this.items[i]);
+        }
+    }
+}

package/src/index.js

@@ -1,9 +1,11 @@
-// 使用 ES 模块系统
-import OM from './OM.js';
-import LayerUtil from './LayerUtil.js';
-
-// 导出模块
-export {
-    OM,
-    LayerUtil
+// 使用 ES 模块系统
+import OM from './OM.js';
+import LayerUtil from './LayerUtil.js';
+import Overlay from './Overlay.js';
+
+// 导出模块
+export {
+    OM,
+    LayerUtil,
+    Overlay
 };

package/test-om.js

@@ -8,4 +8,4 @@ console.log('OM 类定义:', OM);
 // 测试调用静态方法（不执行实际初始化，只检查方法是否存在）
 console.log('OM.initMap 存在:', typeof OM.initMap === 'function');
 
-console.log('测试完成，请检查输出结果。');
+console.log('测试完成，请检查输出结果。');