my-openlayer 0.1.4 → 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/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/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;

package/package.json

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