my-openlayer 2.0.0 → 2.1.0

package/core/MeasureHandler.js

@@ -1,312 +1,312 @@
-import Draw from 'ol/interaction/Draw.js';
-import Overlay from 'ol/Overlay.js';
-import { Circle as CircleStyle, Fill, Stroke, Style } from 'ol/style.js';
-import { LineString, Polygon } from 'ol/geom.js';
-import { Vector as VectorSource } from 'ol/source.js';
-import { Vector as VectorLayer } from 'ol/layer.js';
-import { getArea, getLength } from 'ol/sphere.js';
-import { unByKey } from 'ol/Observable.js';
-import { ValidationUtils } from '../utils/ValidationUtils';
-/**
- * 测量工具处理类
- * 提供距离和面积测量功能
- */
-export default class MeasureHandler {
-    /**
-     * 构造函数
-     * @param map OpenLayers地图实例
-     * @throws 当地图实例无效时抛出错误
-     */
-    constructor(map) {
-        this._draw = null;
-        ValidationUtils.validateMap(map);
-        this._map = map;
-        this.source = new VectorSource();
-        this.vector = new VectorLayer({
-            source: this.source,
-            style: new Style({
-                fill: new Fill({
-                    color: 'rgba(255, 255, 255, 0.2)',
-                }),
-                stroke: new Stroke({
-                    color: 'rgba(0, 255, 0, 0.8)',
-                    lineDash: [10, 10],
-                    width: 2,
-                }),
-                image: new CircleStyle({
-                    radius: 5,
-                    stroke: new Stroke({
-                        color: 'rgba(0, 255, 0, 0.8)'
-                    }),
-                    fill: new Fill({
-                        color: 'rgba(255, 255, 255, 0.2)',
-                    }),
-                }),
-            }),
-            zIndex: 999,
-        });
-        /**
-         * Currently drawn feature.
-         * @type {import("ol/Feature.js").default}
-         */
-        this.sketch = null;
-        /**
-         * The help tooltip element.
-         * @type {HTMLElement}
-         */
-        this.helpTooltipElement = null;
-        /**
-         * Overlay to show the help messages.
-         * @type {Overlay}
-         */
-        this.helpTooltip = null;
-        /**
-         * The measure tooltip element.
-         * @type {HTMLElement}
-         */
-        this.measureTooltipElement = null;
-        /**
-         * Overlay to show the measurement.
-         * @type {Overlay}
-         */
-        this.measureTooltip = null;
-        /**
-         * Message to show when the user is drawing a polygon.
-         * @type {string}
-         */
-        this.continuePolygonMsg = '双击结束绘制';
-        /**
-         * Message to show when the user is drawing a line.
-         * @type {string}
-         */
-        this.continueLineMsg = '双击结束绘制';
-        /**
-         * contain the the overlays of tips
-         * @type {Array}
-         */
-        this._tipsCollection = [];
-        /**
-         *
-         * @param evt
-         * @private
-         */
-        this._mouseListener = (evt) => {
-            if (evt.dragging) {
-                return;
-            }
-            /** @type {string} */
-            let helpMsg = '单击开始绘制';
-            if (this.sketch) {
-                const geom = this.sketch.getGeometry();
-                if (geom instanceof Polygon) {
-                    helpMsg = this.continuePolygonMsg;
-                }
-                else if (geom instanceof LineString) {
-                    helpMsg = this.continueLineMsg;
-                }
-            }
-            if (this.helpTooltipElement) {
-                this.helpTooltipElement.innerHTML = helpMsg;
-            }
-            this.helpTooltip?.setPosition(evt.coordinate);
-            this._map?.addLayer(this.vector);
-        };
-    }
-    /**
-     * destory the object
-     */
-    destory() {
-        this.clean();
-        this._map?.removeLayer(this.vector);
-    }
-    /**
-     * Format length output.
-     * @param {LineString} line The line.
-     * @return {string} The formatted length.
-     */
-    formatLength(line) {
-        const length = getLength(line, {
-            projection: "EPSG:4326"
-        });
-        let output;
-        if (length > 100) {
-            output = Math.round((length / 1000) * 100) / 100 + ' ' + 'km';
-        }
-        else {
-            output = Math.round(length * 100) / 100 + ' ' + 'm';
-        }
-        return output;
-    }
-    /**
-     * Format area output.
-     * @param {Polygon} polygon The polygon.
-     * @return {string} Formatted area.
-     */
-    formatArea(polygon) {
-        const area = getArea(polygon, {
-            projection: "EPSG:4326"
-        });
-        let output;
-        if (area > 10000) {
-            output = Math.round((area / 1000000) * 100) / 100 + ' ' + 'km<sup>2</sup>';
-        }
-        else {
-            output = Math.round(area * 100) / 100 + ' ' + 'm<sup>2</sup>';
-        }
-        return output;
-    }
-    /**
-     * 开始测量
-     * @param type 测量类型
-     * @throws 当测量类型无效时抛出错误
-     */
-    start(type) {
-        ValidationUtils.validateMeasureType(type);
-        ValidationUtils.validateMap(this._map);
-        try {
-            this.createMeasureTooltip();
-            this.createHelpTooltip();
-            if (this._draw) {
-                this._map.removeInteraction(this._draw);
-            }
-        }
-        catch (error) {
-            console.error('Error starting measurement:', error);
-            throw new Error('Failed to start measurement');
-        }
-        this._draw = new Draw({
-            source: this.source,
-            type: type,
-            style: (feature) => {
-                const geometryType = feature.getGeometry()?.getType();
-                if (geometryType === type || geometryType === 'Point') {
-                    return new Style({
-                        fill: new Fill({
-                            color: 'rgba(220, 255, 255, 0.2)',
-                        }),
-                        stroke: new Stroke({
-                            color: 'rgba(255, 0, 0, 0.7)',
-                            lineDash: [10, 10],
-                            width: 2,
-                        }),
-                        image: new CircleStyle({
-                            radius: 5,
-                            stroke: new Stroke({
-                                color: 'rgba(255, 0, 0, 0.7)',
-                            }),
-                            fill: new Fill({
-                                color: 'rgba(255, 255, 255, 0.2)',
-                            }),
-                        }),
-                    });
-                }
-            },
-        });
-        this._map.addInteraction(this._draw);
-        let listener;
-        this._draw.on('drawstart', (evt) => {
-            // set sketch
-            this.sketch = evt.feature;
-            /** @type {import("ol/coordinate.js").Coordinate|undefined} */
-            let tooltipCoord = evt?.coordinate;
-            const geometry = this.sketch?.getGeometry();
-            if (geometry) {
-                listener = geometry.on('change', (evt) => {
-                    const geom = evt.target;
-                    let output;
-                    if (geom instanceof Polygon) {
-                        output = this.formatArea(geom);
-                        tooltipCoord = geom.getInteriorPoint().getCoordinates();
-                    }
-                    else if (geom instanceof LineString) {
-                        output = this.formatLength(geom);
-                        tooltipCoord = geom.getLastCoordinate();
-                    }
-                    if (this.measureTooltipElement) {
-                        this.measureTooltipElement.innerHTML = output;
-                    }
-                    this.measureTooltip?.setPosition(tooltipCoord);
-                });
-            }
-        });
-        this._draw.on('drawend', () => {
-            if (this.measureTooltipElement) {
-                this.measureTooltipElement.className = 'ol-tooltip ol-tooltip-static';
-            }
-            this.measureTooltip?.setOffset([0, -7]);
-            // unset sketch
-            this.sketch = null;
-            // unset tooltip so that a new one can be created
-            this.measureTooltipElement = null;
-            this.createMeasureTooltip();
-            unByKey(listener);
-        });
-        this._map.on('pointermove', this._mouseListener);
-    }
-    /**
-     * end the measure drawing
-     */
-    end() {
-        if (this._draw) {
-            this._map?.removeInteraction(this._draw);
-        }
-        if (this.helpTooltipElement) {
-            this.helpTooltipElement.parentNode?.removeChild(this.helpTooltipElement);
-            this.helpTooltipElement = null;
-        }
-        if (this.measureTooltipElement) {
-            this.measureTooltipElement.parentNode?.removeChild(this.measureTooltipElement);
-            this.measureTooltipElement = null;
-        }
-        this._map?.un("pointermove", this._mouseListener);
-    }
-    /**
-     * Creates a new help tooltip
-     */
-    createHelpTooltip() {
-        if (this.helpTooltipElement) {
-            this.helpTooltipElement.parentNode?.removeChild(this.helpTooltipElement);
-        }
-        this.helpTooltipElement = document.createElement('div');
-        this.helpTooltipElement.className = 'ol-tooltip';
-        this.helpTooltip = new Overlay({
-            element: this.helpTooltipElement,
-            offset: [15, 0],
-            positioning: 'center-left',
-        });
-        this._map?.addOverlay(this.helpTooltip);
-        this._tipsCollection.push(this.helpTooltip);
-    }
-    /**
-     * Creates a new measure tooltip
-     */
-    createMeasureTooltip() {
-        if (this.measureTooltipElement) {
-            this.measureTooltipElement.parentNode?.removeChild(this.measureTooltipElement);
-        }
-        this.measureTooltipElement = document.createElement('div');
-        this.measureTooltipElement.className = 'ol-tooltip ol-tooltip-measure';
-        this.measureTooltip = new Overlay({
-            element: this.measureTooltipElement,
-            offset: [0, -15],
-            positioning: 'bottom-center',
-            stopEvent: false,
-            insertFirst: false,
-        });
-        this._tipsCollection.push(this.measureTooltip);
-        this._map?.addOverlay(this.measureTooltip);
-    }
-    /**
-     * clean the all result of measure
-     */
-    clean() {
-        this._tipsCollection.forEach((item) => {
-            this._map?.removeOverlay(item);
-        });
-        this.source.clear(true);
-        if (this._draw) {
-            this._map?.removeInteraction(this._draw);
-        }
-        this._tipsCollection = [];
-    }
-}
+import Draw from 'ol/interaction/Draw.js';
+import Overlay from 'ol/Overlay.js';
+import { Circle as CircleStyle, Fill, Stroke, Style } from 'ol/style.js';
+import { LineString, Polygon } from 'ol/geom.js';
+import { Vector as VectorSource } from 'ol/source.js';
+import { Vector as VectorLayer } from 'ol/layer.js';
+import { getArea, getLength } from 'ol/sphere.js';
+import { unByKey } from 'ol/Observable.js';
+import { ValidationUtils } from '../utils/ValidationUtils';
+/**
+ * 测量工具处理类
+ * 提供距离和面积测量功能
+ */
+export default class MeasureHandler {
+    /**
+     * 构造函数
+     * @param map OpenLayers地图实例
+     * @throws 当地图实例无效时抛出错误
+     */
+    constructor(map) {
+        this._draw = null;
+        ValidationUtils.validateMap(map);
+        this._map = map;
+        this.source = new VectorSource();
+        this.vector = new VectorLayer({
+            source: this.source,
+            style: new Style({
+                fill: new Fill({
+                    color: 'rgba(255, 255, 255, 0.2)',
+                }),
+                stroke: new Stroke({
+                    color: 'rgba(0, 255, 0, 0.8)',
+                    lineDash: [10, 10],
+                    width: 2,
+                }),
+                image: new CircleStyle({
+                    radius: 5,
+                    stroke: new Stroke({
+                        color: 'rgba(0, 255, 0, 0.8)'
+                    }),
+                    fill: new Fill({
+                        color: 'rgba(255, 255, 255, 0.2)',
+                    }),
+                }),
+            }),
+            zIndex: 999,
+        });
+        /**
+         * Currently drawn feature.
+         * @type {import("ol/Feature.js").default}
+         */
+        this.sketch = null;
+        /**
+         * The help tooltip element.
+         * @type {HTMLElement}
+         */
+        this.helpTooltipElement = null;
+        /**
+         * Overlay to show the help messages.
+         * @type {Overlay}
+         */
+        this.helpTooltip = null;
+        /**
+         * The measure tooltip element.
+         * @type {HTMLElement}
+         */
+        this.measureTooltipElement = null;
+        /**
+         * Overlay to show the measurement.
+         * @type {Overlay}
+         */
+        this.measureTooltip = null;
+        /**
+         * Message to show when the user is drawing a polygon.
+         * @type {string}
+         */
+        this.continuePolygonMsg = '双击结束绘制';
+        /**
+         * Message to show when the user is drawing a line.
+         * @type {string}
+         */
+        this.continueLineMsg = '双击结束绘制';
+        /**
+         * contain the the overlays of tips
+         * @type {Array}
+         */
+        this._tipsCollection = [];
+        /**
+         *
+         * @param evt
+         * @private
+         */
+        this._mouseListener = (evt) => {
+            if (evt.dragging) {
+                return;
+            }
+            /** @type {string} */
+            let helpMsg = '单击开始绘制';
+            if (this.sketch) {
+                const geom = this.sketch.getGeometry();
+                if (geom instanceof Polygon) {
+                    helpMsg = this.continuePolygonMsg;
+                }
+                else if (geom instanceof LineString) {
+                    helpMsg = this.continueLineMsg;
+                }
+            }
+            if (this.helpTooltipElement) {
+                this.helpTooltipElement.innerHTML = helpMsg;
+            }
+            this.helpTooltip?.setPosition(evt.coordinate);
+            this._map?.addLayer(this.vector);
+        };
+    }
+    /**
+     * destory the object
+     */
+    destory() {
+        this.clean();
+        this._map?.removeLayer(this.vector);
+    }
+    /**
+     * Format length output.
+     * @param {LineString} line The line.
+     * @return {string} The formatted length.
+     */
+    formatLength(line) {
+        const length = getLength(line, {
+            projection: "EPSG:4326"
+        });
+        let output;
+        if (length > 100) {
+            output = Math.round((length / 1000) * 100) / 100 + ' ' + 'km';
+        }
+        else {
+            output = Math.round(length * 100) / 100 + ' ' + 'm';
+        }
+        return output;
+    }
+    /**
+     * Format area output.
+     * @param {Polygon} polygon The polygon.
+     * @return {string} Formatted area.
+     */
+    formatArea(polygon) {
+        const area = getArea(polygon, {
+            projection: "EPSG:4326"
+        });
+        let output;
+        if (area > 10000) {
+            output = Math.round((area / 1000000) * 100) / 100 + ' ' + 'km<sup>2</sup>';
+        }
+        else {
+            output = Math.round(area * 100) / 100 + ' ' + 'm<sup>2</sup>';
+        }
+        return output;
+    }
+    /**
+     * 开始测量
+     * @param type 测量类型
+     * @throws 当测量类型无效时抛出错误
+     */
+    start(type) {
+        ValidationUtils.validateMeasureType(type);
+        ValidationUtils.validateMap(this._map);
+        try {
+            this.createMeasureTooltip();
+            this.createHelpTooltip();
+            if (this._draw) {
+                this._map.removeInteraction(this._draw);
+            }
+        }
+        catch (error) {
+            console.error('Error starting measurement:', error);
+            throw new Error('Failed to start measurement');
+        }
+        this._draw = new Draw({
+            source: this.source,
+            type: type,
+            style: (feature) => {
+                const geometryType = feature.getGeometry()?.getType();
+                if (geometryType === type || geometryType === 'Point') {
+                    return new Style({
+                        fill: new Fill({
+                            color: 'rgba(220, 255, 255, 0.2)',
+                        }),
+                        stroke: new Stroke({
+                            color: 'rgba(255, 0, 0, 0.7)',
+                            lineDash: [10, 10],
+                            width: 2,
+                        }),
+                        image: new CircleStyle({
+                            radius: 5,
+                            stroke: new Stroke({
+                                color: 'rgba(255, 0, 0, 0.7)',
+                            }),
+                            fill: new Fill({
+                                color: 'rgba(255, 255, 255, 0.2)',
+                            }),
+                        }),
+                    });
+                }
+            },
+        });
+        this._map.addInteraction(this._draw);
+        let listener;
+        this._draw.on('drawstart', (evt) => {
+            // set sketch
+            this.sketch = evt.feature;
+            /** @type {import("ol/coordinate.js").Coordinate|undefined} */
+            let tooltipCoord = evt?.coordinate;
+            const geometry = this.sketch?.getGeometry();
+            if (geometry) {
+                listener = geometry.on('change', (evt) => {
+                    const geom = evt.target;
+                    let output;
+                    if (geom instanceof Polygon) {
+                        output = this.formatArea(geom);
+                        tooltipCoord = geom.getInteriorPoint().getCoordinates();
+                    }
+                    else if (geom instanceof LineString) {
+                        output = this.formatLength(geom);
+                        tooltipCoord = geom.getLastCoordinate();
+                    }
+                    if (this.measureTooltipElement) {
+                        this.measureTooltipElement.innerHTML = output;
+                    }
+                    this.measureTooltip?.setPosition(tooltipCoord);
+                });
+            }
+        });
+        this._draw.on('drawend', () => {
+            if (this.measureTooltipElement) {
+                this.measureTooltipElement.className = 'ol-tooltip ol-tooltip-static';
+            }
+            this.measureTooltip?.setOffset([0, -7]);
+            // unset sketch
+            this.sketch = null;
+            // unset tooltip so that a new one can be created
+            this.measureTooltipElement = null;
+            this.createMeasureTooltip();
+            unByKey(listener);
+        });
+        this._map.on('pointermove', this._mouseListener);
+    }
+    /**
+     * end the measure drawing
+     */
+    end() {
+        if (this._draw) {
+            this._map?.removeInteraction(this._draw);
+        }
+        if (this.helpTooltipElement) {
+            this.helpTooltipElement.parentNode?.removeChild(this.helpTooltipElement);
+            this.helpTooltipElement = null;
+        }
+        if (this.measureTooltipElement) {
+            this.measureTooltipElement.parentNode?.removeChild(this.measureTooltipElement);
+            this.measureTooltipElement = null;
+        }
+        this._map?.un("pointermove", this._mouseListener);
+    }
+    /**
+     * Creates a new help tooltip
+     */
+    createHelpTooltip() {
+        if (this.helpTooltipElement) {
+            this.helpTooltipElement.parentNode?.removeChild(this.helpTooltipElement);
+        }
+        this.helpTooltipElement = document.createElement('div');
+        this.helpTooltipElement.className = 'ol-tooltip';
+        this.helpTooltip = new Overlay({
+            element: this.helpTooltipElement,
+            offset: [15, 0],
+            positioning: 'center-left',
+        });
+        this._map?.addOverlay(this.helpTooltip);
+        this._tipsCollection.push(this.helpTooltip);
+    }
+    /**
+     * Creates a new measure tooltip
+     */
+    createMeasureTooltip() {
+        if (this.measureTooltipElement) {
+            this.measureTooltipElement.parentNode?.removeChild(this.measureTooltipElement);
+        }
+        this.measureTooltipElement = document.createElement('div');
+        this.measureTooltipElement.className = 'ol-tooltip ol-tooltip-measure';
+        this.measureTooltip = new Overlay({
+            element: this.measureTooltipElement,
+            offset: [0, -15],
+            positioning: 'bottom-center',
+            stopEvent: false,
+            insertFirst: false,
+        });
+        this._tipsCollection.push(this.measureTooltip);
+        this._map?.addOverlay(this.measureTooltip);
+    }
+    /**
+     * clean the all result of measure
+     */
+    clean() {
+        this._tipsCollection.forEach((item) => {
+            this._map?.removeOverlay(item);
+        });
+        this.source.clear(true);
+        if (this._draw) {
+            this._map?.removeInteraction(this._draw);
+        }
+        this._tipsCollection = [];
+    }
+}