my-openlayer 0.1.4 → 0.1.6

package/README.md

@@ -94,7 +94,8 @@ point.addPoint([
         lttd: 29.969,
         name: '测试点位'
     }
-], 'test-point', {
+], {
+    type: 'test-point',
     nameKey: 'name',            // 名称字段
     img: 'marker.png',          // 图标路径
     hasImg: true,              // 是否显示图标

package/dist/core/Line.js

@@ -26,7 +26,7 @@ export default class Line {
                     }),
                 });
             },
-            zIndex: options.zIndex ?? 3
+            zIndex: options.zIndex ?? 15
         });
         this[options.type + 'Layer'] = layer;
         this.map.addLayer(layer);
@@ -64,7 +64,7 @@ export default class Line {
                         })
                     });
                 },
-                zIndex: options.zIndex ?? 6
+                zIndex: options.zIndex ?? 15
             });
             riverLayer.setVisible(false);
             this.riverLayerList.push(riverLayer);
@@ -102,7 +102,7 @@ export default class Line {
                 features: (new GeoJSON()).readFeatures(arr)
             }),
             style: (feature) => this.setFeatureAttr(feature),
-            zIndex: 3
+            zIndex: 15
         });
         this.map.addLayer(riverLayer);
     }

package/dist/core/MapBaseLayers.js

@@ -30,7 +30,7 @@ export default class MapBaseLayers {
             }
             if (this.layers && Object.keys(this.layers).length !== 0) {
                 this.addMapLayer();
-                // this.switchBaseLayer(<string>Object.keys(this.layers)[0])
+                this.switchBaseLayer(Object.keys(this.layers)[0]);
             }
         }
     }
@@ -42,13 +42,13 @@ export default class MapBaseLayers {
         for (const key in this.layers) {
             this.layers[key]?.forEach((layer) => {
                 layer.setVisible(key === type);
-                console.log(layer);
+                // console.log(layer)
             });
         }
     }
     initLayer() {
         if (this.layers && this.options.token) {
-            const { token, zIndex = 10 } = this.options;
+            const { token, zIndex = 9 } = this.options;
             this.layers.vec_c = [MapBaseLayers.getTiandiTuLayer({ type: 'vec_c', token, zIndex, visible: false })];
             this.layers.img_c = [MapBaseLayers.getTiandiTuLayer({ type: 'img_c', token, zIndex, visible: false })];
             this.layers.ter_c = [MapBaseLayers.getTiandiTuLayer({ type: 'ter_c', token, zIndex, visible: false })];

package/dist/core/MeasureHandler.d.ts

@@ -0,0 +1,58 @@
+import Map from "ol/Map";
+import { MeasureHandlerType } from "../types";
+/**
+ * @classdesc MeausreHandler
+ */
+export default class MeasureHandler {
+    private readonly source;
+    private readonly vector;
+    private sketch;
+    private helpTooltipElement;
+    private helpTooltip;
+    private _map;
+    private measureTooltipElement;
+    private measureTooltip;
+    private continuePolygonMsg;
+    private continueLineMsg;
+    private _tipsCollection;
+    private _mouseListener;
+    private _draw;
+    constructor(map: Map);
+    /**
+     * destory the object
+     */
+    destory(): void;
+    /**
+     * Format length output.
+     * @param {LineString} line The line.
+     * @return {string} The formatted length.
+     */
+    formatLength(line: any): string;
+    /**
+     * Format area output.
+     * @param {Polygon} polygon The polygon.
+     * @return {string} Formatted area.
+     */
+    formatArea(polygon: any): string;
+    /**
+     *
+     * @param {String} type the values such as  'Polygon','LineString'
+     */
+    start(type: MeasureHandlerType): void;
+    /**
+     * end the measure drawing
+     */
+    end(): void;
+    /**
+     * Creates a new help tooltip
+     */
+    createHelpTooltip(): void;
+    /**
+     * Creates a new measure tooltip
+     */
+    createMeasureTooltip(): void;
+    /**
+     * clean the all result of measure
+     */
+    clean(): void;
+}

package/dist/core/MeasureHandler.js

@@ -0,0 +1,296 @@
+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';
+/**
+ * @classdesc MeausreHandler
+ */
+export default class MeasureHandler {
+    constructor(map) {
+        this._map = null;
+        this._draw = null;
+        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,
+        });
+        this._map = map;
+        /**
+         * 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 {String} type the values such as  'Polygon','LineString'
+     */
+    start(type) {
+        if (!this._map) {
+            throw new Error("MeasureHandler has not been register to the map");
+        }
+        this.createMeasureTooltip();
+        this.createHelpTooltip();
+        if (this._draw) {
+            this._map.removeInteraction(this._draw);
+        }
+        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;
+            listener = this.sketch.getGeometry().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 = [];
+    }
+}

package/dist/core/Point.js

@@ -68,7 +68,7 @@ export default class Point {
             source: new VectorSource({
                 features: pointFeatureList
             }),
-            zIndex: options.zIndex || 4,
+            zIndex: options.zIndex || 21,
         });
         PointVectorLayer.setVisible(options.visible === undefined ? true : options.visible);
         this.map.addLayer(PointVectorLayer);
@@ -122,7 +122,7 @@ export default class Point {
                 }
                 return new Style(style);
             },
-            zIndex: options.zIndex || 4,
+            zIndex: options.zIndex || 21,
         });
         clusterLayer.setVisible(options.visible === undefined ? true : options.visible);
         this.map.addLayer(clusterLayer);
@@ -177,7 +177,7 @@ export default class Point {
                     })
                 });
             },
-            zIndex: 6
+            zIndex: 21
         });
         this.map.addLayer(basinLayer);
         this.setTwinkleLayer(twinkleList, className, key, (twinkleItem) => {

package/dist/core/Polygon.d.ts

@@ -3,7 +3,7 @@ import VectorLayer from "ol/layer/Vector";
 import VectorSource from "ol/source/Vector";
 import { Image as ImageLayer } from "ol/layer";
 import { Geometry } from "ol/geom";
-import { OptionsType, MapJSONData } from '../types';
+import { OptionsType, MapJSONData, PointData, HeatMapOptions } from '../types';
 export default class Polygon {
     map: Map;
     private colorMap;
@@ -19,21 +19,21 @@ export default class Polygon {
      * @param data 图层数据
      * @param options 图层配置
      */
-    addBorderPolygon(data: MapJSONData, options: OptionsType): void;
+    addBorderPolygon(data: MapJSONData, options?: OptionsType): void;
     addPolygon(dataJSON: MapJSONData, options?: OptionsType): VectorLayer<VectorSource<Geometry>>;
     /**
      * 根据数据数组更新某个面颜色
      * @param layerName 图层名称
-     * @param colorObj 数据
+     * @param colorObj 数据 不传或者传{}则重置所有颜色
      *   colorObj:{
      *     对应geojson文件中的索引字段[propName]: 'rgba(255, 0, 0, 0.6)', // 颜色
      *     ...
      *   }
      * @param options 配置项
      */
-    updateFeatureColors(layerName: string, colorObj: {
+    updateFeatureColors(layerName: string, colorObj?: {
         [propName: string]: string;
-    }, options: OptionsType): void;
+    }, options?: OptionsType): void;
     /**
      * 设置外围蒙版图层
      *
@@ -57,5 +57,6 @@ export default class Polygon {
      * @param options 图层配置
      */
     addImage(layerName: string, img?: string, extent?: number[], options?: OptionsType): import("ol/layer/Base").default | VectorLayer<VectorSource<Geometry>> | ImageLayer<import("ol/source").Image>;
+    addHeatmap(layerName: string, pointData: PointData[], options: HeatMapOptions): void;
     removePolygonLayer(layerName: string): void;
 }

package/dist/core/Polygon.js

@@ -3,8 +3,8 @@ import VectorLayer from "ol/layer/Vector";
 import VectorSource from "ol/source/Vector";
 import GeoJSON from "ol/format/GeoJSON";
 import { Fill, Stroke, Style, Text } from "ol/style";
-import { Image as ImageLayer } from "ol/layer";
-import { Geometry, LinearRing } from "ol/geom";
+import { Image as ImageLayer, Heatmap } from "ol/layer";
+import { Geometry, LinearRing, Point } from "ol/geom";
 import { fromExtent } from "ol/geom/Polygon";
 import Feature from "ol/Feature";
 import ImageStatic from "ol/source/ImageStatic";
@@ -32,6 +32,7 @@ export default class Polygon {
      * @param options 图层配置
      */
     addBorderPolygon(data, options) {
+        options = options ?? {};
         options.type = options.type ?? 'border';
         options.fillColor = options.fillColor ?? 'rgba(255, 255, 255, 0)';
         this.addPolygon(data, options);
@@ -40,7 +41,8 @@ export default class Polygon {
     }
     // 添加分区
     //fyBasinJson中的id的key需要跟options中的nameKey一致
-    addPolygon(dataJSON, options = {}) {
+    addPolygon(dataJSON, options) {
+        options = options ?? {};
         if (options.type != null) {
             MapTools.removeLayer(this.map, options.type);
         }
@@ -50,29 +52,52 @@ export default class Polygon {
             source: new VectorSource({
                 features: (new GeoJSON()).readFeatures(dataJSON, options.projectionOptOptions ?? {})
             }),
-            style: function (feature) {
-                feature.set('type', options.type);
-                feature.set('layerName', options.type);
-                return new Style({
+            // style: function (feature: any) {
+            //   feature.set('type', options?.type)
+            //   feature.set('layerName', options?.type)
+            //   return new Style({
+            //     stroke: new Stroke({
+            //       color: options?.strokeColor ?? '#EBEEF5',
+            //       width: options?.strokeWidth ?? 2,
+            //       lineDash: options?.lineDash,
+            //       lineDashOffset: options?.lineDashOffset
+            //     }),
+            //     fill: new Fill({ color: options?.fillColor || 'rgba(255, 255, 255, 0.3)' }),
+            //     text: new Text({
+            //       text: options?.textVisible && options.nameKey ? feature.values_[options.nameKey] : "",
+            //       font: options?.textFont ?? '14px Calibri,sans-serif',
+            //       fill: new Fill({ color: options?.textFillColor ?? '#FFF' }),
+            //       stroke: new Stroke({
+            //         color: options?.textStrokeColor ?? '#409EFF',
+            //         width: options?.textStrokeWidth ?? 2
+            //       })
+            //     })
+            //   })
+            // },
+            zIndex: options.zIndex ?? 11
+        });
+        const features = layer.getSource()?.getFeatures();
+        features?.forEach(feature => {
+            feature.set('type', options?.type);
+            feature.set('layerName', options?.type);
+            feature.setStyle(new Style({
+                stroke: new Stroke({
+                    color: options?.strokeColor ?? '#EBEEF5',
+                    width: options?.strokeWidth ?? 2,
+                    lineDash: options?.lineDash,
+                    lineDashOffset: options?.lineDashOffset
+                }),
+                fill: new Fill({ color: options?.fillColor || 'rgba(255, 255, 255, 0.3)' }),
+                text: new Text({
+                    text: options?.textVisible && options.nameKey ? feature.get(options.nameKey) : "",
+                    font: options?.textFont ?? '14px Calibri,sans-serif',
+                    fill: new Fill({ color: options?.textFillColor ?? '#FFF' }),
                     stroke: new Stroke({
-                        color: options.strokeColor ?? '#EBEEF5',
-                        width: options.strokeWidth ?? 2,
-                        lineDash: options.lineDash,
-                        lineDashOffset: options.lineDashOffset
-                    }),
-                    fill: new Fill({ color: options.fillColor || 'rgba(255, 255, 255, 0.3)' }),
-                    text: new Text({
-                        text: options.textVisible && options.nameKey ? feature.values_[options.nameKey] : "",
-                        font: options.textFont ?? '14px Calibri,sans-serif',
-                        fill: new Fill({ color: options.textFillColor ?? '#FFF' }),
-                        stroke: new Stroke({
-                            color: options.textStrokeColor ?? '#409EFF',
-                            width: options.textStrokeWidth ?? 2
-                        })
+                        color: options?.textStrokeColor ?? '#409EFF',
+                        width: options?.textStrokeWidth ?? 2
                     })
-                });
-            },
-            zIndex: options.zIndex ?? 2
+                })
+            }));
         });
         layer.setVisible(options.visible === undefined ? true : options.visible);
         this.map.addLayer(layer);
@@ -88,7 +113,7 @@ export default class Polygon {
     /**
      * 根据数据数组更新某个面颜色
      * @param layerName 图层名称
-     * @param colorObj 数据
+     * @param colorObj 数据 不传或者传{}则重置所有颜色
      *   colorObj:{
      *     对应geojson文件中的索引字段[propName]: 'rgba(255, 0, 0, 0.6)', // 颜色
      *     ...
@@ -98,30 +123,31 @@ export default class Polygon {
     updateFeatureColors(layerName, colorObj, options) {
         const layer = MapTools.getLayerByLayerName(this.map, layerName)[0];
         if (layer instanceof VectorLayer) {
-            const source = layer.getSource();
-            const features = source.getFeatures();
+            const features = layer.getSource()?.getFeatures();
             features.forEach((feature) => {
-                if (options.nameKey) {
-                    const name = feature['values_'][options.nameKey];
-                    const newColor = colorObj[name];
-                    if (newColor) {
-                        feature.setStyle(new Style({
+                if (options?.nameKey || (!colorObj || Object.keys(colorObj).length === 0)) {
+                    const name = options?.nameKey ? feature.get(options.nameKey) : '';
+                    const newColor = colorObj?.[name];
+                    // const oldStyle = feature.getStyle()
+                    // console.log(oldStyle)
+                    // if (newColor) {
+                    feature.setStyle(new Style({
+                        stroke: new Stroke({
+                            color: options?.strokeColor ?? '#EBEEF5',
+                            width: options?.strokeWidth ?? 2
+                        }),
+                        fill: new Fill({ color: newColor || options?.fillColor || 'rgba(255, 255, 255, 0.3)' }),
+                        text: new Text({
+                            text: options?.textVisible === false ? "" : name,
+                            font: options?.textFont ?? '14px Calibri,sans-serif',
+                            fill: new Fill({ color: options?.textFillColor || '#FFF' }),
                             stroke: new Stroke({
-                                color: options.strokeColor ?? '#EBEEF5',
-                                width: options.strokeWidth ?? 2
-                            }),
-                            fill: new Fill({ color: newColor }),
-                            text: new Text({
-                                text: options.textVisible === false ? "" : name,
-                                font: options.textFont ?? '14px Calibri,sans-serif',
-                                fill: new Fill({ color: options.textFillColor || '#FFF' }),
-                                stroke: new Stroke({
-                                    color: options.textStrokeColor ?? '#409EFF',
-                                    width: options.textStrokeWidth ?? 2
-                                })
+                                color: options?.textStrokeColor ?? '#409EFF',
+                                width: options?.textStrokeWidth ?? 2
                             })
-                        }));
-                    }
+                        })
+                    }));
+                    // }
                 }
             });
         }
@@ -203,7 +229,7 @@ export default class Polygon {
         const vtLayer = new VectorLayer({
             source: vtSource,
             style: shadeStyle,
-            zIndex: options?.zIndex ?? 99
+            zIndex: options?.zIndex ?? 12
         });
         this.map.addLayer(vtLayer);
         const features = new GeoJSON().readFeatures(data);
@@ -223,7 +249,7 @@ export default class Polygon {
      * @param extent 图片范围（对角线坐标） [minx, miny, maxx, maxy]
      * @param options 图层配置
      */
-    addImage(layerName, img, extent, options = { zIndex: 3 }) {
+    addImage(layerName, img, extent, options) {
         let imageLayer = MapTools.getLayerByLayerName(this.map, layerName)[0];
         if (img && extent) {
             const source = new ImageStatic({
@@ -239,12 +265,12 @@ export default class Polygon {
                 imageLayer.set('layerName', layerName);
                 if (imageLayer instanceof ImageLayer)
                     imageLayer.setSource(source);
-                imageLayer.setZIndex(options.zIndex ?? 3);
-                imageLayer.setOpacity(options.opacity ?? 1);
-                if (options.visible !== undefined)
-                    imageLayer.setVisible(options.visible);
-                if (options.mapClip && options.mapClipData) {
-                    imageLayer = MapTools.setMapClip(imageLayer, options.mapClipData);
+                imageLayer.setZIndex(options?.zIndex ?? 11);
+                imageLayer.setOpacity(options?.opacity ?? 1);
+                if (options?.visible !== undefined)
+                    imageLayer.setVisible(options?.visible);
+                if (options?.mapClip && options?.mapClipData) {
+                    imageLayer = MapTools.setMapClip(imageLayer, options?.mapClipData);
                 }
                 this.map.addLayer(imageLayer);
             }
@@ -254,6 +280,27 @@ export default class Polygon {
         }
         return imageLayer;
     }
+    addHeatmap(layerName, pointData, options) {
+        const heatmapLayer = new Heatmap({
+            source: new VectorSource(),
+            weight: function (fea) {
+                return fea.get('weight');
+            },
+            blur: options.blur ?? 15,
+            radius: options.radius ?? 10,
+            zIndex: options.zIndex ?? 11,
+            opacity: options.opacity ?? 1,
+        });
+        heatmapLayer.set('layerName', layerName);
+        this.map.addLayer(heatmapLayer);
+        const max = Math.max(...pointData.map(item => item[options.valueKey]));
+        pointData.forEach((item) => {
+            heatmapLayer?.getSource().addFeature(new Feature({
+                geometry: new Point([item.lgtd, item.lttd]),
+                weight: item[options.valueKey] / max //热力值范围是【0,1】；热力值计算 = 找出数据集中的最大值，然后用值除以最大值
+            }));
+        });
+    }
     removePolygonLayer(layerName) {
         MapTools.removeLayer(this.map, layerName);
         this[layerName] = null;

package/dist/types.d.ts

@@ -48,6 +48,15 @@ export interface AnnotationLayerOptions {
     zIndex?: number;
     visible?: boolean;
 }
+export interface HeatMapOptions {
+    radius?: number;
+    blur?: number;
+    gradient?: string[];
+    opacity?: number;
+    visible?: boolean;
+    zIndex?: number;
+    valueKey: string;
+}
 export interface OptionsType {
     type?: string;
     nameKey?: string;
@@ -81,3 +90,4 @@ export interface PointData {
     lttd: number;
     [propName: string]: any;
 }
+export type MeasureHandlerType = 'Polygon' | 'LineString';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "my-openlayer",
   "private": false,
-  "version": "0.1.4",
+  "version": "0.1.6",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",