cd-mapgis 1.0.80 → 1.1.1

package/package.json

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

package/src/LineLayer.js

@@ -0,0 +1,81 @@
+import VectorSource from 'ol/source/Vector.js';
+import VectorLayer from 'ol/layer/Vector.js';
+import Feature from 'ol/Feature.js';
+import LineString from 'ol/geom/LineString.js';
+import Style from 'ol/style/Style.js';
+import MapView from './MapView.js';
+import Stroke from 'ol/style/Stroke.js';
+
+/**
+ * 自定义线图层
+ */
+export default class LineLayer {
+    constructor(p) {
+        this.vectorSource = new VectorSource();
+        this.vectorLayer = new VectorLayer({
+            source: this.vectorSource
+        });
+        this.mapView = p.mapView ? p.mapView : MapView.Instance;
+        this.map = this.mapView.map;
+        this.map.addLayer(this.vectorLayer);
+        // 存储点击回调函数（可选，支持多个回调时可用数组）
+        this.clickCallbacks = [];
+        // 绑定地图点击事件
+        this.map.on('click', (evt) => this.handleMapClick(evt));
+    }
+
+    addLine(p) {
+        this.vectorSource.addFeature(this._getFeature(p));
+    }
+
+    addLines(arr) {
+        let a = [];
+        for (let i = 0; i < arr.length; i++) {
+            a.push(this._getFeature(arr[i]));
+        }
+        this.vectorSource.addFeatures(a);
+    }
+    _getFeature(p) {
+        let feature = new Feature({
+            geometry: new LineString(p.points)
+        });
+        let color = p.color ? p.color : '#0af5e6';
+        let lineWidth = p.lineWidth ? p.lineWidth : 2;
+        feature.setStyle(new Style({
+            stroke: new Stroke({
+                color: color,       // 默认选择色
+                width: lineWidth    // 线宽
+            })
+        }));
+        feature.set('attr', p.attr);
+        return feature;
+    }
+    /**
+     * 注册点要素的点击事件处理器
+     * @param {Function} callback - 回调函数，接收参数 (feature, event)
+     */
+    onClick(callback) {
+        if (typeof callback === 'function') {
+            this.clickCallbacks.push(callback);
+        }
+    }
+    /**
+     * 处理地图点击事件
+     * @private
+     */
+    handleMapClick(evt) {
+        const map = this.map;
+        const pixel = evt.pixel;
+
+        // 遍历点击位置的所有要素，只取第一个（或全部）
+        map.forEachFeatureAtPixel(pixel, (feature, layer) => {
+            // 只处理属于当前图层的要素，并且是点类型（可选）
+            if (layer === this.vectorLayer) {
+                // 触发所有已注册的回调
+                this.clickCallbacks.forEach(cb => cb(feature, evt));
+            }
+            // 返回 true 表示停止遍历（如果只想要第一个）
+            // 可根据需求决定是否停止
+        });
+    }
+}

package/src/PointLayer.js

@@ -0,0 +1,85 @@
+import VectorSource from 'ol/source/Vector.js';
+import VectorLayer from 'ol/layer/Vector.js';
+import Feature from 'ol/Feature.js';
+import Point from 'ol/geom/Point.js';
+import Style from 'ol/style/Style.js';
+import Icon from 'ol/style/Icon.js';
+import MapView from './MapView.js';
+
+/**
+ * 自定义点图层
+ */
+export default class PointLayer {
+    constructor(p) {
+        this.vectorSource = new VectorSource();
+        this.vectorLayer = new VectorLayer({
+            source: this.vectorSource
+        });
+        this.mapView = p.mapView ? p.mapView : MapView.Instance;
+        this.map = this.mapView.map;
+        this.map.addLayer(this.vectorLayer);
+        // 存储点击回调函数（可选，支持多个回调时可用数组）
+        this.clickCallbacks = [];
+        // 绑定地图点击事件
+        this.map.on('click', (evt) => this.handleMapClick(evt));
+    }
+    /**
+     * 添加带图标的点要素
+     * @param {*} p 
+     */
+    addPoint(p) {
+        this.vectorSource.addFeature(this._getFeature(p));
+    }
+    addPoints(arr) {
+        let a = [];
+        for (let i = 0; i < arr.length; i++) {
+            a.push(this._getFeature(arr[i]));
+        }
+        this.vectorSource.addFeatures(a);
+    }
+    _getFeature(p) {
+        let feature = new Feature({
+            geometry: new Point(p.point)
+        });
+        feature.setStyle(new Style({
+            image: new Icon({
+                src: p.img, // 外部图标路径
+                scale: 1, // 缩放比例
+                anchor: [0.5, 0.5], // 锚点为中心
+                anchorOrigin: 'center',
+                anchorXUnits: 'fraction',
+                anchorYUnits: 'fraction'
+            })
+        }));
+        feature.set('attr', p.attr);
+        return feature;
+    }
+    /**
+     * 注册点要素的点击事件处理器
+     * @param {Function} callback - 回调函数，接收参数 (feature, event)
+     */
+    onClick(callback) {
+        if (typeof callback === 'function') {
+            this.clickCallbacks.push(callback);
+        }
+    }
+    /**
+     * 处理地图点击事件
+     * @private
+     */
+    handleMapClick(evt) {
+        const map = this.map;
+        const pixel = evt.pixel;
+
+        // 遍历点击位置的所有要素，只取第一个（或全部）
+        map.forEachFeatureAtPixel(pixel, (feature, layer) => {
+            // 只处理属于当前图层的要素，并且是点类型（可选）
+            if (layer === this.vectorLayer) {
+                // 触发所有已注册的回调
+                this.clickCallbacks.forEach(cb => cb(feature, evt));
+            }
+            // 返回 true 表示停止遍历（如果只想要第一个）
+            // 可根据需求决定是否停止
+        });
+    }
+}

package/src/index.js

@@ -7,6 +7,8 @@ import HttpUtil from './HttpUtil.js';
 import InnerUtil from './InnerUtil.js';
 import StyleUtil from './StyleUtil.js';
 import Location from './Location.js';
+import PointLayer from './PointLayer.js';
+import LineLayer from './LineLayer.js';
 
 // 导出模块
 export {
@@ -17,5 +19,7 @@ export {
     HttpUtil,
     InnerUtil,
     StyleUtil,
-    Location
+    Location,
+    PointLayer,
+    LineLayer
 };