my-openlayer 0.1.2 → 0.1.4

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,7 +22,7 @@ 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
                     }),
                 });
             },

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);
@@ -15,18 +15,13 @@ export default class Point {
      *   hasImg: Boolean 是否显示图标
      * }
      */
-    addPoint(pointData: PointData[], type: string, options: OptionsType): VectorLayer<VectorSource<import("ol/geom").Geometry>>;
-    addClusterPoint(pointData: any[], type: string | undefined, options: OptionsType): void;
-    /**
-     * 添加点 - 闪烁
-     *
-     */
-    addFlashWarnPoint(img: any): void;
-    setTwinkleLayerFromPolygon(twinkleList: any[], className: string, key: string, json: any): void;
+    addPoint(pointData: PointData[], options: OptionsType): VectorLayer<VectorSource<import("ol/geom").Geometry>>;
+    addClusterPoint(pointData: PointData[], options: OptionsType): void;
+    setTwinkleLayerFromPolygon(twinkleList: any[], className: string, key: string, json: MapJSONData): void;
     /**
      * 设置闪烁点
      * @param twinkleList 闪烁点数据 - 二维数组 [[],[]]
-     * @param className 闪烁点样式
+     * @param className 闪烁点样式,需要和id保持一致
      * @param key 闪烁点索引
      * @param callback
      */

package/dist/core/Point.js

@@ -25,14 +25,14 @@ export default class Point {
      *   hasImg: Boolean 是否显示图标
      * }
      */
-    addPoint(pointData, type, options) {
+    addPoint(pointData, options) {
         const pointFeatureList = [];
         pointData.forEach((item) => {
             const pointFeature = new Feature({
                 // clickLocation: options.clickLocation,
                 // all: JSON.stringify(item),
                 rawData: item, //保存原始数据
-                type: type,
+                type: options.type,
                 geometry: new olPoint([item.lgtd, item.lttd])
             });
             const style = {};
@@ -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);
             }
@@ -64,7 +64,7 @@ export default class Point {
             pointFeatureList.push(pointFeature);
         });
         const PointVectorLayer = new VectorLayer({
-            layerName: type,
+            layerName: options.type,
             source: new VectorSource({
                 features: pointFeatureList
             }),
@@ -74,7 +74,7 @@ export default class Point {
         this.map.addLayer(PointVectorLayer);
         return PointVectorLayer;
     }
-    addClusterPoint(pointData, type = 'village', options) {
+    addClusterPoint(pointData, options) {
         const pointFeatureList = [];
         pointData.forEach(item => {
             const pointFeature = new Feature({
@@ -91,55 +91,42 @@ export default class Point {
             source: source,
         });
         const clusterLayer = new VectorLayer({
-            layerName: type,
+            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,
         });
         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');
@@ -199,7 +186,7 @@ export default class Point {
     /**
      * 设置闪烁点
      * @param twinkleList 闪烁点数据 - 二维数组 [[],[]]
-     * @param className 闪烁点样式
+     * @param className 闪烁点样式,需要和id保持一致
      * @param key 闪烁点索引
      * @param callback
      */
@@ -212,7 +199,7 @@ export default class Point {
                 arr[i].parentNode?.removeChild(arr[i]);
             }
         }
-        const el = document.getElementById('marker_warning');
+        const el = document.getElementById(className);
         for (let i = 0; i < twinkleList.length; i++) {
             const twinkleItem = twinkleList[i];
             // 定义图标Dom

package/dist/core/Polygon.d.ts

@@ -1,6 +1,7 @@
 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';
 export default class Polygon {
@@ -16,11 +17,10 @@ export default class Polygon {
     /**
      * 添加 地图 边框 图层
      * @param data 图层数据
-     * @param type 图层类型
      * @param options 图层配置
      */
-    addPolygonMapLayer(data: MapJSONData, type: string | undefined, 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 图层名称
@@ -47,6 +47,7 @@ export default class Polygon {
         fillColor?: string;
         strokeWidth?: number;
         strokeColor?: string;
+        zIndex?: number;
     }): void;
     /**
      * 添加图片图层
@@ -55,6 +56,6 @@ 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>;
     removePolygonLayer(layerName: string): void;
 }

package/dist/core/Polygon.js

@@ -29,48 +29,20 @@ export default class Polygon {
     /**
      * 添加 地图 边框 图层
      * @param data 图层数据
-     * @param type 图层类型
      * @param options 图层配置
      */
-    addPolygonMapLayer(data, type = 'fuyangqu', options) {
-        const borderLayer = new VectorLayer({
-            name: type,
-            layerName: options.type || type,
-            source: new VectorSource({
-                features: (new GeoJSON()).readFeatures(data)
-            }),
-            style: function (feature) {
-                feature.set('type', options.type);
-                feature.set('layerName', options.type);
-                return new Style({
-                    stroke: new Stroke({
-                        color: options.strokeColor || '#EBEEF5',
-                        width: options.strokeWidth || 3
-                    }),
-                    fill: new Fill({ color: 'rgba(255, 255, 255, 0)' }),
-                    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
-                        })
-                    })
-                });
-            },
-            zIndex: options.zIndex ?? 2
-        });
-        borderLayer.setVisible(options.visible === undefined ? true : options.visible);
-        this.map.addLayer(borderLayer);
+    addBorderPolygon(data, options) {
+        options.type = options.type ?? 'border';
+        options.fillColor = options.fillColor ?? 'rgba(255, 255, 255, 0)';
+        this.addPolygon(data, options);
         if (options.mask)
             this.setOutLayer(data);
     }
     // 添加分区
     //fyBasinJson中的id的key需要跟options中的nameKey一致
-    addPolygonLayerCommon(dataJSON, options = {}) {
+    addPolygon(dataJSON, 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,
@@ -84,13 +56,13 @@ export default class Polygon {
                 return new Style({
                     stroke: new Stroke({
                         color: options.strokeColor ?? '#EBEEF5',
-                        width: options.strokeWidth ?? 3,
+                        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.nameKey ? feature.values_[options.nameKey] : "",
+                        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({
@@ -124,7 +96,7 @@ 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();
@@ -136,7 +108,7 @@ export default class Polygon {
                         feature.setStyle(new Style({
                             stroke: new Stroke({
                                 color: options.strokeColor ?? '#EBEEF5',
-                                width: options.strokeWidth ?? 3
+                                width: options.strokeWidth ?? 2
                             }),
                             fill: new Fill({ color: newColor }),
                             text: new Text({
@@ -231,7 +203,7 @@ export default class Polygon {
         const vtLayer = new VectorLayer({
             source: vtSource,
             style: shadeStyle,
-            zIndex: 99
+            zIndex: options?.zIndex ?? 99
         });
         this.map.addLayer(vtLayer);
         const features = new GeoJSON().readFeatures(data);
@@ -251,20 +223,22 @@ export default class Polygon {
      * @param extent 图片范围（对角线坐标） [minx, miny, maxx, maxy]
      * @param options 图层配置
      */
-    addImgLayer(layerName, img, extent, options = { zIndex: 3 }) {
+    addImage(layerName, img, extent, options = { zIndex: 3 }) {
+        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);
+                if (imageLayer instanceof ImageLayer)
+                    imageLayer.setSource(source);
                 imageLayer.setZIndex(options.zIndex ?? 3);
                 imageLayer.setOpacity(options.opacity ?? 1);
                 if (options.visible !== undefined)
@@ -273,16 +247,15 @@ export default class Polygon {
                     imageLayer = MapTools.setMapClip(imageLayer, options.mapClipData);
                 }
                 this.map.addLayer(imageLayer);
-                this[layerName] = imageLayer;
             }
         }
         else {
             this.removePolygonLayer(layerName);
         }
-        return this[layerName];
+        return imageLayer;
     }
     removePolygonLayer(layerName) {
-        new MapTools(this.map).removeLayer(layerName);
+        MapTools.removeLayer(this.map, layerName);
         this[layerName] = null;
     }
 }

package/dist/types.d.ts

@@ -72,6 +72,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.2",
+  "version": "0.1.4",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",