my-openlayer 0.1.3 → 0.1.5

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/MyOl.d.ts

@@ -64,10 +64,4 @@ export default class MyOl {
      * @param callback 回调函数
      */
     mapOnEvent(eventType: string | undefined, callback: (feature?: any, e?: any) => void, clickType?: 'point' | 'line' | 'polygon' | undefined): void;
-    /**
-     * 隐藏&展示图层
-     * @param layerName 图层名称
-     * @param show 是否显示
-     */
-    showMapLayer(layerName: string, show?: boolean): boolean;
 }

package/dist/MyOl.js

@@ -21,8 +21,6 @@ class MyOl {
         if (Array.isArray(options.layers)) {
             layers = options.layers;
         }
-        else {
-        }
         this.map = new Map({
             target: id, // 地图容器
             view: MyOl.getView(this.options), // 视图
@@ -55,7 +53,6 @@ class MyOl {
             units: "degrees"
         });
         olProjAddProjection(cgsc2000);
-        // debugger
         // 视图配置
         const viewOptions = {
             projection: cgsc2000, // 坐标系
@@ -156,63 +153,6 @@ class MyOl {
     mapOnEvent(eventType = "def", callback, clickType) {
         MapTools.mapOnEvent(this.map, eventType, callback, clickType);
     }
-    /**
-     * 隐藏&展示图层
-     * @param layerName 图层名称
-     * @param show 是否显示
-     */
-    showMapLayer(layerName, show = true) {
-        if (!layerName) {
-            console.error("缺少图层名称");
-            return false;
-        }
-        let layers = this.getTools().getLayerByLayerName(layerName);
-        if (!Array.isArray(layers))
-            layers = [layers];
-        // 无图层返回不继续操作
-        if (layers.length === 0)
-            return false;
-        const zoom = this.map.getView().getZoom();
-        for (const layer of layers) {
-            if (layer) {
-                if (layer.getVisible() === show)
-                    return false; // 相同则不处理
-                const layerName = layer.values_.layerName;
-                let isMoreLayer = false;
-                // 若为打开，查找是否按层级显示的图层
-                if (show) {
-                    for (let i = 2; i <= 5; i++) {
-                        if (["reservoir_frgrd_" + i, "city_frgrd_" + i, "rain_frgrd_" + i].includes(layerName)) {
-                            let minZoom = 10;
-                            switch (i) {
-                                case 2:
-                                    minZoom = 10;
-                                    break;
-                                case 3:
-                                    minZoom = 11;
-                                    break;
-                                case 4:
-                                    minZoom = 12;
-                                    break;
-                                case 5:
-                                    minZoom = 13;
-                                    break;
-                            }
-                            isMoreLayer = true; // 有进入，单下面未进入则代表不显示与下面的continue使用
-                            if (zoom && (zoom > minZoom && zoom < 20)) {
-                                layer.setVisible(true);
-                                break;
-                            }
-                        }
-                    }
-                }
-                if (!isMoreLayer) {
-                    layer.setVisible(show);
-                }
-            }
-        }
-        return true;
-    }
 }
 MyOl.DefaultOptions = {
     layers: undefined,

package/dist/core/DomPoint.d.ts

@@ -12,8 +12,8 @@ interface Options {
 export default class DomPoint {
     private map;
     private app;
-    private anchor;
-    private dom;
+    private readonly anchor;
+    private readonly dom;
     constructor(map: Map, options: Options);
     setVisible(visible: boolean): void;
     remove(): void;

package/dist/core/Line.d.ts

@@ -9,7 +9,7 @@ export default class Line {
     riverLayerShow: boolean;
     [propertyName: string]: any;
     constructor(map: Map);
-    addLineCommon(data: MapJSONData, options: OptionsType): VectorLayer<VectorSource<import("ol/geom").Geometry>>;
+    addLine(data: MapJSONData, options: OptionsType): VectorLayer<VectorSource<import("ol/geom").Geometry>>;
     addRiverLayersByZoom(fyRiverJson: MapJSONData, options?: OptionsType): void;
     showRiverLayer(show: boolean): void;
     showRiverLayerByZoom(): void;

package/dist/core/Line.js

@@ -9,7 +9,7 @@ export default class Line {
         this.riverLayerShow = false;
         this.map = map;
     }
-    addLineCommon(data, options) {
+    addLine(data, options) {
         const layer = new VectorLayer({
             name: options.type,
             layerName: options.type,
@@ -22,11 +22,11 @@ export default class Line {
                 return new Style({
                     stroke: new Stroke({
                         color: options.strokeColor || 'rgba(3, 122, 255, 1)',
-                        width: options.strokeWidth || 3
+                        width: options.strokeWidth || 2
                     }),
                 });
             },
-            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/MapTools.d.ts

@@ -1,18 +1,43 @@
 import Map from "ol/Map";
 import { MapJSONData } from "../types";
+import VectorLayer from "ol/layer/Vector";
+import VectorSource from "ol/source/Vector";
+import BaseLayer from "ol/layer/Base";
+import ImageLayer from "ol/layer/Image";
+import ImageSource from "ol/source/Image";
 export default class MapTools {
-    private map;
+    private readonly map;
     constructor(map: Map);
     /**
      * 根据名称获取图层
      * @param layerName 图层名称
      */
-    getLayerByLayerName(layerName: string): any;
+    getLayerByLayerName(layerName: string): (BaseLayer | VectorLayer<VectorSource<import("ol/geom").Geometry>> | ImageLayer<ImageSource>)[];
+    static getLayerByLayerName(map: Map, layerName: string): (BaseLayer | VectorLayer<VectorSource<import("ol/geom").Geometry>> | ImageLayer<ImageSource>)[];
     /**
      * 设置地图裁剪
      */
     static setMapClip(baseLayer: any, data: MapJSONData): any;
+    /**
+     * 移除图层
+     * @param layerName 图层名称
+     */
     removeLayer(layerName: string): void;
+    /**
+     * 移除图层
+     * @param map 地图对象
+     * @param layerName 图层名称
+     */
+    static removeLayer(map: Map, layerName: string): void;
+    setLayerVisible(layerName: string, visible: boolean): void;
+    /**
+     * 设置图层可见性
+     * @param map
+     * @param layerName 图层名称
+     * @param visible 是否可见
+     */
+    static setLayerVisible: (map: Map, layerName: string, visible: boolean) => void;
+    mapOnEvent(eventType: string, callback: (feature?: any, e?: any) => void, clickType?: 'point' | 'line' | 'polygon' | undefined): void;
     /**
      * 地图监听事件
      * @param map

package/dist/core/MapTools.js

@@ -4,7 +4,7 @@ import VectorSource from "ol/source/Vector";
 import GeoJSON from "ol/format/GeoJSON";
 import { Fill, Style } from "ol/style";
 import { getVectorContext } from "ol/render";
-export default class MapTools {
+class MapTools {
     constructor(map) {
         this.map = map;
     }
@@ -14,17 +14,19 @@ export default class MapTools {
      */
     getLayerByLayerName(layerName) {
         if (!this.map)
-            return null;
+            return [];
+        return MapTools.getLayerByLayerName(this.map, layerName);
+    }
+    static getLayerByLayerName(map, layerName) {
         const targetLayer = [];
-        const layers = this.map.getLayers().getArray();
+        const layers = map.getLayers().getArray();
         Object.keys(layers).forEach(function (key) {
             const _layerName = layers[key]['values_'].layerName;
-            // if (_layerName && _layerName.toString().includes(layerName)) {
             if (_layerName && _layerName === layerName) {
                 targetLayer.push(layers[key]);
             }
         });
-        return targetLayer.length === 1 ? targetLayer[0] : targetLayer;
+        return targetLayer;
     }
     /**
      * 设置地图裁剪
@@ -60,8 +62,35 @@ export default class MapTools {
         });
         return baseLayer;
     }
+    /**
+     * 移除图层
+     * @param layerName 图层名称
+     */
     removeLayer(layerName) {
-        this.map.removeLayer(this.getLayerByLayerName(layerName));
+        if (!this.map)
+            return;
+        MapTools.removeLayer(this.map, layerName);
+    }
+    /**
+     * 移除图层
+     * @param map 地图对象
+     * @param layerName 图层名称
+     */
+    static removeLayer(map, layerName) {
+        const layers = MapTools.getLayerByLayerName(map, layerName);
+        layers.forEach(layer => {
+            map.removeLayer(layer);
+        });
+    }
+    setLayerVisible(layerName, visible) {
+        if (!this.map)
+            return;
+        MapTools.setLayerVisible(this.map, layerName, visible);
+    }
+    mapOnEvent(eventType, callback, clickType) {
+        if (!this.map)
+            return;
+        MapTools.mapOnEvent(this.map, eventType, callback, clickType);
     }
     /**
      * 地图监听事件
@@ -104,3 +133,16 @@ export default class MapTools {
         }
     }
 }
+/**
+ * 设置图层可见性
+ * @param map
+ * @param layerName 图层名称
+ * @param visible 是否可见
+ */
+MapTools.setLayerVisible = (map, layerName, visible) => {
+    const layers = MapTools.getLayerByLayerName(map, layerName);
+    layers.forEach(layer => {
+        layer.setVisible(visible);
+    });
+};
+export default MapTools;

package/dist/core/Point.d.ts

@@ -1,7 +1,7 @@
 import Map from "ol/Map";
 import VectorLayer from "ol/layer/Vector";
 import VectorSource from "ol/source/Vector";
-import { OptionsType, PointData } from '../types';
+import { MapJSONData, OptionsType, PointData } from '../types';
 export default class Point {
     private map;
     constructor(map: Map);
@@ -16,13 +16,8 @@ export default class Point {
      * }
      */
     addPoint(pointData: PointData[], options: OptionsType): VectorLayer<VectorSource<import("ol/geom").Geometry>>;
-    addClusterPoint(pointData: any[], options: OptionsType): void;
-    /**
-     * 添加点 - 闪烁
-     *
-     */
-    addFlashWarnPoint(img: any): void;
-    setTwinkleLayerFromPolygon(twinkleList: any[], className: string, key: string, json: any): void;
+    addClusterPoint(pointData: PointData[], options: OptionsType): void;
+    setTwinkleLayerFromPolygon(twinkleList: any[], className: string, key: string, json: MapJSONData): void;
     /**
      * 设置闪烁点
      * @param twinkleList 闪烁点数据 - 二维数组 [[],[]]

package/dist/core/Point.js

@@ -55,8 +55,8 @@ export default class Point {
                     src: options.img,
                     scale: options.scale ?? 1,
                 };
-                if (options.color) {
-                    iconOptions.color = options.color;
+                if (options.iconColor) {
+                    iconOptions.color = options.iconColor;
                 }
                 style.image = new Icon(iconOptions);
             }
@@ -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);
@@ -94,52 +94,39 @@ export default class Point {
             layerName: options.type,
             source: clusterSource,
             style: function (feature) {
-                const aviValue = feature.get('features')[0].get('name');
-                return new Style({
-                    image: new Icon({
-                        src: options.img,
-                    }),
-                    text: new Text({
-                        text: aviValue,
-                        font: '12px Calibri,sans-serif',
+                const name = feature.get('features')[0].get(options.nameKey);
+                const style = {};
+                if (options.nameKey) {
+                    style.text = new Text({
+                        text: name,
+                        font: options.textFont || '12px Calibri,sans-serif',
                         fill: new Fill({
-                            color: '#FFF'
+                            color: options.textFillColor || '#FFF'
                         }),
                         stroke: new Stroke({
-                            color: '#000',
-                            width: 3
+                            color: options.textStrokeColor || '#000',
+                            width: options.textStrokeWidth || 3
                         }),
-                        offsetY: 20,
-                    }),
-                });
+                        offsetY: options.textOffsetY || 20,
+                    });
+                }
+                if (options.hasImg || options.hasImg === undefined) {
+                    const iconOptions = {
+                        src: options.img,
+                        scale: options.scale ?? 1,
+                    };
+                    if (options.iconColor) {
+                        iconOptions.color = options.iconColor;
+                    }
+                    style.image = new Icon(iconOptions);
+                }
+                return new Style(style);
             },
-            zIndex: options.zIndex || 4,
+            zIndex: options.zIndex || 21,
         });
         clusterLayer.setVisible(options.visible === undefined ? true : options.visible);
         this.map.addLayer(clusterLayer);
     }
-    /**
-     * 添加点 - 闪烁
-     *
-     */
-    addFlashWarnPoint(img) {
-        const flashIconLayer = new VectorLayer({
-            source: new VectorSource({
-                features: [
-                    new Feature({
-                        geometry: new olPoint([119.81, 29.969]),
-                    })
-                ]
-            }),
-            style: new Style({
-                image: new Icon({
-                    src: img,
-                })
-            }),
-            zIndex: 99
-        });
-        this.map.addLayer(flashIconLayer);
-    }
     // 在流域中心添加闪烁点位
     setTwinkleLayerFromPolygon(twinkleList, className, key, json) {
         new MapTools(this.map).removeLayer('twinklePoint');
@@ -190,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

@@ -1,8 +1,9 @@
 import Map from "ol/Map";
 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;
@@ -18,21 +19,21 @@ export default class Polygon {
      * @param data 图层数据
      * @param options 图层配置
      */
-    addBorderPolygonLayer(data: MapJSONData, options: OptionsType): void;
-    addPolygonLayerCommon(dataJSON: MapJSONData, options?: OptionsType): VectorLayer<VectorSource<Geometry>>;
+    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;
     /**
      * 设置外围蒙版图层
      *
@@ -46,6 +47,7 @@ export default class Polygon {
         fillColor?: string;
         strokeWidth?: number;
         strokeColor?: string;
+        zIndex?: number;
     }): void;
     /**
      * 添加图片图层
@@ -54,6 +56,7 @@ export default class Polygon {
      * @param extent 图片范围（对角线坐标） [minx, miny, maxx, maxy]
      * @param options 图层配置
      */
-    addImgLayer(layerName: string, img: string | undefined, extent: number[], options?: OptionsType): any;
+    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";
@@ -31,18 +31,20 @@ export default class Polygon {
      * @param data 图层数据
      * @param options 图层配置
      */
-    addBorderPolygonLayer(data, options) {
+    addBorderPolygon(data, options) {
+        options = options ?? {};
         options.type = options.type ?? 'border';
         options.fillColor = options.fillColor ?? 'rgba(255, 255, 255, 0)';
-        this.addPolygonLayerCommon(data, options);
+        this.addPolygon(data, options);
         if (options.mask)
             this.setOutLayer(data);
     }
     // 添加分区
     //fyBasinJson中的id的key需要跟options中的nameKey一致
-    addPolygonLayerCommon(dataJSON, options = {}) {
+    addPolygon(dataJSON, options) {
+        options = options ?? {};
         if (options.type != null) {
-            new MapTools(this.map).removeLayer(options.type);
+            MapTools.removeLayer(this.map, options.type);
         }
         const layer = new VectorLayer({
             name: 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 ?? 3,
-                        lineDash: options.lineDash,
-                        lineDashOffset: options.lineDashOffset
-                    }),
-                    fill: new Fill({ color: options.fillColor || 'rgba(255, 255, 255, 0.3)' }),
-                    text: new Text({
-                        text: 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)', // 颜色
      *     ...
@@ -96,32 +121,33 @@ export default class Polygon {
      * @param options 配置项
      */
     updateFeatureColors(layerName, colorObj, options) {
-        const layer = this.map.getLayers().getArray().find(layer => layer.get('name') === layerName);
+        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 ?? 3
-                            }),
-                            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: 99
+            zIndex: options?.zIndex ?? 12
         });
         this.map.addLayer(vtLayer);
         const features = new GeoJSON().readFeatures(data);
@@ -223,38 +249,60 @@ export default class Polygon {
      * @param extent 图片范围（对角线坐标） [minx, miny, maxx, maxy]
      * @param options 图层配置
      */
-    addImgLayer(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({
                 url: img,
                 imageExtent: extent
             });
-            if (this[layerName]) {
-                this[layerName].setSource(source);
+            if (imageLayer && imageLayer instanceof ImageLayer) {
+                imageLayer.setSource(source);
             }
             else {
-                let imageLayer = new ImageLayer();
+                imageLayer = new ImageLayer();
                 imageLayer.set('name', layerName);
                 imageLayer.set('layerName', layerName);
-                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);
+                if (imageLayer instanceof ImageLayer)
+                    imageLayer.setSource(source);
+                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);
-                this[layerName] = imageLayer;
             }
         }
         else {
             this.removePolygonLayer(layerName);
         }
-        return this[layerName];
+        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) {
-        new MapTools(this.map).removeLayer(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;
@@ -72,6 +81,8 @@ export interface OptionsType {
     opacity?: number;
     mapClip?: boolean;
     mapClipData?: MapJSONData;
+    mask?: boolean;
+    iconColor?: string;
     [propName: string]: any;
 }
 export interface PointData {

package/package.json

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