cd-mapgis 1.0.26 → 1.0.28

package/package.json

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

package/src/LayerUtil.js

@@ -1,4 +1,3 @@
-// 使用 CommonJS 模块系统
 import XYZ from 'ol/source/XYZ.js';
 import Tile from 'ol/layer/Tile.js';
 import Image from 'ol/layer/Image.js';
@@ -8,6 +7,10 @@ import TilegridWMTS from 'ol/tilegrid/WMTS.js';
 import * as proj from 'ol/proj.js';
 import * as extent from 'ol/extent.js';
 import WMTSCapabilities from 'ol/format/WMTSCapabilities.js';
+import GeoJSON from 'ol/format/GeoJSON.js';
+import Feature from 'ol/Feature.js';
+import VectorSource from 'ol/source/Vector.js';
+import VectorLayer from 'ol/layer/Vector.js';
 
 /**
  * 图层工具
@@ -186,4 +189,18 @@ export default class LayerUtil {
         }
         return null;
     }
+    /**
+     * 将geoJson数据包装为一个图层
+     * @param {*} json 
+     */
+    static getJsonLayer(p) {
+        let geometry = new GeoJSON().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, geometry };
+    }
 }

package/src/MapDrawUtil.js

@@ -0,0 +1,155 @@
+import Draw from 'ol/interaction/Draw.js';
+import VectorSource from 'ol/source/Vector.js';
+import VectorLayer from 'ol/layer/Vector.js';
+import StyleUtil from './StyleUtil.js';
+import { getLength, getArea } from 'ol/sphere.js';
+import { unByKey } from 'ol/Observable.js';
+import Overlay from 'ol/Overlay.js';
+
+/**
+ * 地图绘图工具
+ */
+export default class MapDrawUtil {
+    constructor(p) {
+        this.map = p.map;
+        this.type = null;//几何类型，包括Point、LineString、Polygon、Circle
+        this.drawObj = null;//
+        this._tempLayer = null;//绘制要素的临时图层
+        this._overlay = null;//临时覆盖物图层
+        this._overlay_div = null;//临时覆盖物图层上的div
+    }
+
+    //初始化交互绘制的工具
+    init(type) {
+        this.type = type;
+        this.drawObj = new Draw({
+            type: type,
+            source: new VectorSource(),
+            free: false,//徒手模式，值为true时可鼠标跟随绘制
+            style: StyleUtil.getInteractionStyle()
+        });
+        this.map.addInteraction(this.drawObj);
+    }
+    //将要数绘制到临时图层
+    _drawTempLayer(feature) {
+        this._clearTempLayer();
+        let vectorSource = new VectorSource({ features: [feature] });
+        this._tempLayer = new VectorLayer({
+            source: vectorSource,
+            style: StyleUtil.getMapDrawStyle()
+        });
+        this.map.addLayer(this._tempLayer);
+    }
+    //绘制完成事件
+    drawend(fun, stop) {
+        this.drawObj.on('drawend', (e) => {
+            this._drawTempLayer([e.feature]);
+            try {
+                fun(e.feature.getGeometry().getCoordinates());//绘制完成后，将绘制的坐标串传入回调函数      
+            } catch (ex) {
+                console.error(ex);
+            }
+            if (stop) this._closeDrawObj();
+        });
+    }
+    //关闭工具
+    _closeDrawObj() {
+        if (this.drawObj != null) {
+            this.map.removeInteraction(this.drawObj);
+            this.drawObj = null;
+        }
+    }
+    //清除覆盖物
+    _clearOverlay() {
+        if (this._overlay != null) {
+            this.map.removeOverlay(this._overlay);
+            this._overlay = null;
+        }
+        if (this._overlay_div != null) {
+            this._overlay_div.parentNode.removeChild(this._overlay_div);
+        }
+    }
+    //清除临时图层
+    _clearTempLayer() {
+        if (this._tempLayer != null) {
+            this._tempLayer.getSource().clear();//清空图层
+            this.map.removeLayer(this._tempLayer);//移除图层
+        }
+    }
+    //退出工具
+    close() {
+        this._closeDrawObj();
+        this._clearOverlay();
+        this._clearTempLayer();
+    }
+    //工具类
+    tool(toolType) {
+        let _sketch = null;
+        let _listener = null;
+        let _this = this;
+        //绘制开始事件
+        this.drawObj.on('drawstart', (e) => {
+            _sketch = e.feature;
+            _listener = _sketch.getGeometry().on('change', function (evt) {
+                let geom = evt.target;
+                var viewTxt;
+                if (toolType == "len") {
+                    viewTxt = _this._formatLength(geom.clone());
+                } else if (toolType == "area") {
+                    viewTxt = _this._formatArea(geom.clone());
+                }
+                _this._viewToolText(viewTxt, geom.getLastCoordinate());
+            });
+        });
+        //绘制完成事件
+        this.drawObj.on('drawend', function (e) {
+            this._drawTempLayer([e.feature]);
+            _sketch = null;
+            unByKey(_listener);
+        });
+    }
+
+    //获取线的长度字符串
+    _formatLength(line) {
+        var length = getLength(line, { projection: 'EPSG:4326' });
+        var output;
+        if (length > 1000) {
+            output = Math.round((length / 1000) * 100) / 100 + ' 千米';
+        } else {
+            output = Math.round(length * 100) / 100 + ' 米';
+        }
+        return output;
+    }
+
+    //获取面积的字符串
+    _formatArea(polygon) {
+        var area = getArea(polygon, { projection: 'EPSG:4326' });
+        var output = Math.round(area * 100) / 100 + ' 平方米';
+        return output;
+    }
+
+    //显示工具的文本
+    _viewToolText(txt, position) {
+        this._clearOverlay();
+        let div = document.createElement('div');
+        div.className = 'tooltip hidden';
+        div.innerHTML = txt;
+        div.style.position = 'relative';
+        div.style.background = 'rgba(59, 20, 233, 0.7)';
+        div.style.borderRadius = '4px';
+        div.style.color = 'white';
+        div.style.padding = '4px 8px';
+        div.style.opacity = 0.7;
+        div.style.whiteSpace = 'nowrap';
+        div.style.fontWeight = '';
+        div.classList.remove('hidden');
+        this._overlay_div = div;
+        this._overlay = new Overlay({
+            element: div,
+            offset: [15, 0],
+            positioning: 'center-left'
+        });
+        this._overlay.setPosition(position);
+        this.map.addOverlay(this._overlay);
+    }
+}

package/src/MapView.js

@@ -1,13 +1,9 @@
-import GeoJSON from 'ol/format/GeoJSON.js';
-import Feature from 'ol/Feature.js';
-import VectorSource from 'ol/source/Vector.js';
-import Style from 'ol/style/Style.js';
-import Stroke from 'ol/style/Stroke.js';
-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 { fromLonLat } from 'ol/proj.js';
+import LayerUtil from './LayerUtil.js';
+import StyleUtil from './StyleUtil.js';
+import MapDrawUtil from './MapDrawUtil.js';
+
 /**
  * ol地图显示
  */
@@ -28,6 +24,8 @@ export default class MapView {
         this._view_templayer = null;
         this._init(this.params);
         MapView.Instance = this;
+
+        this.mapDrawUtil = null;//绘制工具
     }
     //初始化地图及其他参数
     _init(p) {
@@ -74,26 +72,12 @@ export default class MapView {
      * @param {*} p 
      */
     viewOnTemplayer(p) {
-        let geometry = new GeoJSON().readGeometry(p.data);
-        let feature = new Feature({ geometry: geometry });
-        let vectorSource = new VectorSource({ features: [feature] });
-        let style = new Style({
-            stroke: new Stroke({
-                color: '#0af5e6',  // 默认选择色
-                width: 2           // 线宽
-            }),
-            fill: new Fill({
-                color: 'rgba(0, 0, 0, 0)'  // 透明填充
-            })
-        });
-        this.clearTemplayer(); //移除之前的显示
+        p.style = StyleUtil.getViewOnTemplayerStyle();
         //重建图层，避免在其他地方全部移除图层后，templayer不为空，但是已经不在地图中的情况
-        this._view_templayer = new VectorLayer({
-            source: vectorSource,
-            style: style
-        });
-        // 添加到地图
-        this.map.addLayer(this._view_templayer);
+        let { layer, geometry } = LayerUtil.getJsonLayer(p);
+        this._view_templayer = layer;
+        this.clearTemplayer(); //移除之前的显示       
+        this.map.addLayer(this._view_templayer);// 添加到地图
         // fit方法 - 自动适应范围    
         let extent = geometry.getExtent();
         let extent2 = this.expandExtent(extent);
@@ -139,6 +123,7 @@ export default class MapView {
         var newMaxY = centerY + newHeight / 2;
         return [newMinX, newMinY, newMaxX, newMaxY];
     }
+    //设置中心点
     setCenter(center, useAnimation) {
         if (useAnimation) {
             this.map.getView().animate({ center: center });
@@ -146,7 +131,69 @@ export default class MapView {
             this.map.getView().setCenter(center);
         }
     }
+    //设置显示级别    
     setZoom(zoom) {
         this.map.getView().setZoom(zoom);
     }
+    /**
+     * 添加地图事件
+     * click(单击) dblclick(双击) singleclick(单击,延迟250毫秒)
+     * moveend(鼠标滚动事件) pointermove(鼠标移动事件) pointerdrag(鼠标拖动事件) pointerdown pointerup
+     * precompose(地图准备渲染，为渲染) postcompose(地图渲染中) postrender(地图渲染全部结束)
+     * change:layerGroup(地图图层增删时触发) change:size:(地图窗口发生变化就会触发) change:target(地图绑定的div发生更改时触发) change:view(地图view对象发生变化触发)
+     * propertychange(Map对象中任意的property值改变时触发)
+     * @param {*} name 
+     * @param {*} fun 
+     */
+    addEvent(name, fun) {
+        return this.map.on(name, fun);
+    }
+    //添加地图事件一次
+    addEventOnce(name, fun) {
+        const key = this.map.on(name, function (e) {
+            try {
+                fun(e);
+            } catch (ex) {
+                console.error(ex);
+            }
+            this.removeEvent(key);
+        });
+    }
+    //移除事件
+    removeEvent(key) {
+        this.map.un(key.type, key.listener);
+    }
+    //注册显示鼠标的地图坐标
+    viewMousePoint(call) {
+        this.addEvent('pointermove', (e) => {
+            call(e.coordinate[0].toFixed(6) + ',' + e.coordinate[1].toFixed(6));
+        });
+    }
+    //绘制一次性的图形
+    startDraw(type, fun) {
+        this.clearDraw();
+        this.mapDrawUtil = new MapDrawUtil({ map: this.map });
+        this.mapDrawUtil.init(type);
+        this.mapDrawUtil.drawend(fun, true);
+    }
+    //地图工具 len、area
+    tool(type) {
+        this.clearDraw();
+        let dic = { len: 'LineString', area: 'Polygon' };
+        this.mapDrawUtil = new MapDrawUtil({ map: this.map });
+        let t = dic[type];
+        if (!t) {
+            console.error("type不是len/area");
+            return;
+        }
+        this.mapDrawUtil.init(t);
+        this.mapDrawUtil.tool(type);
+    }
+    //关闭绘制功能
+    clearDraw() {
+        if (this.mapDrawUtil != null) {
+            this.mapDrawUtil.close();
+            this.mapDrawUtil = null;
+        }
+    }
 }

package/src/StyleUtil.js

@@ -0,0 +1,74 @@
+import Style from 'ol/style/Style.js';
+import Stroke from 'ol/style/Stroke.js';
+import Fill from 'ol/style/Fill.js';
+import Circle from 'ol/style/Circle.js';
+
+/**
+ * 样式工具类
+ */
+export default class StyleUtil {
+    /**
+     * 获取默认的显示要素到临时图层的样式(一般用于高亮显示选中的图斑)
+     * @returns 
+     */
+    static getViewOnTemplayerStyle() {
+        return new Style({
+            stroke: new Stroke({
+                color: '#0af5e6',  // 默认选择色
+                width: 2           // 线宽
+            }),
+            fill: new Fill({
+                color: 'rgba(0, 0, 0, 0)'  // 透明填充
+            })
+        });
+    }
+    /**
+     * 获取地图绘制的默认样式
+     */
+    static getMapDrawStyle() {
+        return new Style({
+            fill: new Fill({
+                color: 'rgba(255, 255, 255, 0.2)'
+            }),
+            stroke: Stroke({
+                color: 'rgba(0, 0, 255, 1)',
+                lineDash: [10, 10],
+                width: 2
+            }),
+            image: Circle({
+                radius: 5,
+                stroke: Stroke({
+                    color: 'rgba(0, 0, 0, 0.7)'
+                }),
+                fill: Fill({
+                    color: 'rgba(255, 255, 255, 0.2)'
+                })
+            })
+        });
+    }
+    /**
+     * 获取交互工具的默认样式
+     * @returns 
+     */
+    static getInteractionStyle() {
+        return new Style({
+            fill: new Fill({
+                color: 'rgba(0, 0, 255, 0.5)'
+            }),
+            stroke: new Stroke({
+                color: 'rgba(0, 0, 255, 1)',
+                lineDash: [10, 10],
+                width: 2
+            }),
+            image: new Circle({
+                radius: 5,
+                stroke: new Stroke({
+                    color: 'rgba(0, 0, 0, 0.7)'
+                }),
+                fill: new Fill({
+                    color: 'rgba(255, 255, 255, 0.2)'
+                })
+            })
+        });
+    }
+}