cd-mapgis 1.1.31 → 1.1.32

package/package.json

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

package/src/DataLayer.js

@@ -0,0 +1,129 @@
+import GeoJSON from 'ol/format/GeoJSON.js';
+import Feature from 'ol/Feature.js';
+import LineString from 'ol/geom/LineString.js';
+import Polygon from 'ol/geom/Polygon.js';
+import Point from 'ol/geom/Point.js';
+import StyleUtil from './StyleUtil.js';
+import MapView from './MapView.js';
+import VectorSource from 'ol/source/Vector.js';
+import VectorLayer from 'ol/layer/Vector.js';
+
+/**
+ * 自定义数据图层 {mapView,style:样式,click:点击回调,dataType:geometry|geoJson|LinePoints|PolygonPoints|point}
+ */
+export default class DataLayer {
+    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.geoJSON = new GeoJSON();
+        // 存储点击回调函数（可选，支持多个回调时可用数组）
+        this.clickCallbacks = [];
+        // 绑定地图点击事件
+        this.map.on('click', (evt) => this._handleMapClick(evt));
+        //点击事件
+        if (p.click) this.clickCallbacks.push(p.click);
+        //默认样式
+        this.style = p.style;
+        //数据格式
+        this.dataType = p.dataType ? p.dataType : 'geometry';
+    }
+
+    //添加数据
+    add(p) {
+        if (Array.isArray(p)) {
+            let a = [];
+            for (let i = 0; i < p.length; i++) {
+                a.push(this._getFeature(p[i]));
+            }
+            this.vectorSource.addFeatures(a);
+        } else {
+            this.vectorSource.addFeature(this._getFeature(p));
+        }
+    }
+    
+    /**
+    * 缩放到本图层显示范围
+    */
+    fitToLayer(p) {
+        const map = this.map;
+        let view = map.getView();
+        let ext = this.vectorSource.getExtent();
+        if (!ext) {
+            console.error("没有获取到图层范围");
+            return;
+        }
+        if (!p || !p.zoom) {
+            view.fit(ext, {
+                size: map.getSize(),
+                maxZoom: 18
+            })
+        } else {
+            view.setCenter([(ext[0] + ext[2]) / 2.0, (ext[1] + ext[3]) / 2.0]);
+            view.setZoom(p.zoom);
+        }
+    }
+
+    /**
+    * 注册点要素的点击事件处理器
+    * @param {Function} callback - 回调函数，接收参数 (feature, event)
+    */
+    onClick(callback) {
+        if (typeof callback === 'function') {
+            this.clickCallbacks.push(callback);
+        }
+    }
+    
+    //根据数据获取单个要素 {data:几何数据,style:样式,dataType,}
+    _getFeature(p) {
+        let dataType = p.dataType ? p.dataType : this.dataType;
+        let style = p.style ? p.style : this.style;
+        let feature;
+        if (dataType == 'geoJson') {
+            feature = this.geoJSON.readFeature(p.data);
+        } else if (dataType == 'geometry') {
+            let geometry = this.geoJSON.readGeometry(p.data);
+            feature = new Feature({ geometry: geometry });
+        } else if (dataType == 'LinePoints') {
+            feature = new Feature({
+                geometry: new LineString(p.data)
+            });
+        } else if (dataType == 'PolygonPoints') {
+            feature = new Feature({
+                geometry: new Polygon(p.data)
+            });
+        } else if (dataType == 'point') {
+            feature = new Feature({
+                geometry: new Point(p.data)
+            });
+        } else {
+            console.error("不支持的数据类型:" + dataType);
+        }
+        feature.setStyle(StyleUtil.getStyle(feature.getGeometry().getType(), style));
+        feature.set('attr', p.attr);
+        return feature;
+    }
+
+    /**
+     * 处理地图点击事件
+     * @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/StyleUtil.js

@@ -207,4 +207,99 @@ export default class StyleUtil {
         }
         return new Style(styleParam);
     }
+
+    //根据几何类型和样式配置获取样式
+    static getStyle(geoType, style0) {
+        let style = style0 ? style0 : {};
+        let styleParam = {};
+        switch (geoType) {
+            // 点 / 多点
+            case 'Point':
+            case 'MultiPoint':
+                styleParam.image = StyleUtil._getStyle_image(style);
+                styleParam.text = StyleUtil._getStyle_text(style);
+                break;
+            // 线 / 多线
+            case 'LineString':
+            case 'MultiLineString':
+                styleParam.stroke = StyleUtil._getStyle_stroke(style);
+                break;
+            // 面 / 多面 / 圆
+            case 'Polygon':
+            case 'MultiPolygon':
+            case 'Circle':
+                styleParam.stroke = StyleUtil._getStyle_stroke(style);
+                styleParam.fill = StyleUtil._getStyle_fill(style);
+                break;
+            default:
+                console.error("获取样式不支持的几何类型：" + geoType);
+                break;
+        }
+        return new Style(styleParam);
+    }
+
+    //获取图形样式
+    static _getStyle_image(style) {
+        if (style.img) {
+            return new Icon({
+                src: p.img, // 外部图标路径
+                scale: 1, // 缩放比例
+                anchor: [0.5, 0.5], // 锚点为中心
+                anchorOrigin: 'center',
+                anchorXUnits: 'fraction',
+                anchorYUnits: 'fraction'
+            });
+        }
+        return new Circle({
+            radius: 5,
+            stroke: new Stroke({
+                color: 'rgba(0, 0, 0, 0.7)'
+            }),
+            fill: new Fill({
+                color: 'rgba(255, 255, 255, 0.2)'
+            })
+        });
+    }
+
+    //获取标注文字样式
+    static _getStyle_text(style) {
+        if (style.text) {
+            let p = style.text;
+            let font = p.font ? p.font : 'bold 20px 宋体';
+            let color = p.color ? p.color : '#0619e9';
+            let offsetY = p.offsetY ? p.offsetY : -10;
+            let offsetX = p.offsetX ? p.offsetX : 0;
+            return new Text({
+                text: p.text,  // 从要素属性获取文字
+                font: font,
+                overflow: true,  // 关键设置：允许文字溢出
+                fill: new Fill({
+                    color: color
+                }),
+                offsetX: offsetX,
+                offsetY: offsetY  // 文字显示在图标上方
+            });
+        }
+        return null;
+    }
+
+    //获取笔画的样式(用于线或者区的外围边界线)
+    static _getStyle_stroke(style) {
+        let p = style.stroke ? style.stroke : {};
+        let color = p.color ? p.color : '#0af5e6';
+        let width = p.width ? p.width : 2;
+        return new Stroke({
+            color: color,   // 默认选择色
+            width: width    // 线宽
+        });
+    }
+
+    //获取填充样式
+    static _getStyle_fill(style) {
+        let p = style.fill ? style.fill : {};
+        let color = p.color ? p.color : 'rgba(255, 255, 255, 0.2)';
+        return new Fill({
+            color: color
+        });
+    }
 }