my-openlayer 2.2.0 → 2.3.0

package/core/RiverLayerManager.js

@@ -0,0 +1,342 @@
+import VectorSource from "ol/source/Vector";
+import GeoJSON from "ol/format/GeoJSON";
+import VectorLayer from "ol/layer/Vector";
+import { Stroke, Style } from "ol/style";
+import { Feature } from "ol";
+import MapTools from "./MapTools";
+import { ValidationUtils } from "../utils/ValidationUtils";
+import { EventManager } from "./EventManager";
+import { ErrorHandler } from "../utils/ErrorHandler";
+import { ConfigManager } from "./ConfigManager";
+export default class RiverLayerManager {
+    /**
+     * 构造函数
+     * @param map OpenLayers 地图实例
+     * @param eventManager 可选事件管理器，未传入则内部创建
+     */
+    constructor(map, eventManager) {
+        //************* 状态：分级河流图层列表与显示控制 *************
+        this.riverLayerList = [];
+        this.riverLayerShow = false;
+        this.riverZoomOffset = 8;
+        //************* 默认配置：按 level 映射线宽 *************
+        this.defaultLevelWidthMap = ConfigManager.DEFAULT_RIVER_LEVEL_WIDTH_MAP;
+        ValidationUtils.validateMapInstance(map);
+        this.map = map;
+        this.eventManager = eventManager ?? new EventManager(map);
+    }
+    addRiverLayersByZoom(fyRiverJson, options = {}) {
+        ValidationUtils.validateGeoJSONData(fyRiverJson);
+        const defaultOptions = {
+            ...ConfigManager.DEFAULT_RIVER_LAYERS_BY_ZOOM_OPTIONS,
+            removeExisting: options.removeExisting ?? false,
+            levelWidthMap: this.defaultLevelWidthMap
+        };
+        const mergedOptions = { ...defaultOptions, ...options };
+        this.riverZoomOffset = mergedOptions.zoomOffset;
+        if (mergedOptions.removeExisting) {
+            this.clearRiverLayers();
+        }
+        this.riverLayerShow = mergedOptions.visible;
+        this.riverLayerList = [];
+        for (let level = 1; level <= mergedOptions.levelCount; level++) {
+            const vectorSource = new VectorSource({
+                format: new GeoJSON(),
+                loader: () => {
+                    const geojson = new GeoJSON();
+                    fyRiverJson.features.forEach((feature) => {
+                        if (feature.properties && feature.properties.level === level) {
+                            try {
+                                const olFeature = geojson.readFeature(feature);
+                                if (Array.isArray(olFeature)) {
+                                    vectorSource.addFeatures(olFeature);
+                                }
+                                else {
+                                    vectorSource.addFeature(olFeature);
+                                }
+                            }
+                            catch (error) {
+                                ErrorHandler.getInstance().warn(`Failed to load river feature at level ${level}:`, error);
+                            }
+                        }
+                    });
+                }
+            });
+            const riverLayer = new VectorLayer({
+                properties: {
+                    name: mergedOptions.layerName,
+                    layerName: mergedOptions.layerName,
+                    riverLevel: level
+                },
+                source: vectorSource,
+                style: (feature) => {
+                    if (feature instanceof Feature) {
+                        feature.set("type", mergedOptions.layerName);
+                        feature.set("layerName", mergedOptions.layerName);
+                    }
+                    if (mergedOptions.style) {
+                        if (typeof mergedOptions.style === "function") {
+                            return mergedOptions.style(feature);
+                        }
+                        else {
+                            return mergedOptions.style;
+                        }
+                    }
+                    return new Style({
+                        stroke: new Stroke({
+                            color: mergedOptions.strokeColor,
+                            width: mergedOptions.strokeWidth
+                        })
+                    });
+                },
+                zIndex: mergedOptions.zIndex
+            });
+            riverLayer.setVisible(false);
+            this.riverLayerList.push(riverLayer);
+            this.map.addLayer(riverLayer);
+        }
+        this.eventManager.on("moveend", () => {
+            this.showRiverLayerByZoom();
+        });
+        this.showRiverLayerByZoom();
+    }
+    //************* 分级河流：按缩放级别显示（URL 加载） *************
+    /**
+     * 从 URL 添加分级河流图层：根据缩放级别显示不同 level 的河流
+     * @param url 河流数据 URL（GeoJSON）
+     * @param options 河流图层配置选项
+     */
+    addRiverLayersByZoomByUrl(url, options = {}) {
+        const defaultOptions = {
+            ...ConfigManager.DEFAULT_RIVER_LAYERS_BY_ZOOM_OPTIONS,
+            removeExisting: options.removeExisting ?? false,
+            levelWidthMap: this.defaultLevelWidthMap
+        };
+        const mergedOptions = { ...defaultOptions, ...options };
+        this.riverZoomOffset = mergedOptions.zoomOffset;
+        if (mergedOptions.removeExisting) {
+            this.clearRiverLayers();
+        }
+        this.riverLayerShow = mergedOptions.visible;
+        this.riverLayerList = [];
+        for (let level = 1; level <= mergedOptions.levelCount; level++) {
+            const vectorSource = new VectorSource({
+                url,
+                format: new GeoJSON(),
+                loader: function (extent, resolution, projection, success, failure) {
+                    fetch(url)
+                        .then(response => response.json())
+                        .then(data => {
+                        const geojson = new GeoJSON();
+                        data.features.forEach((feature) => {
+                            if (feature.properties && feature.properties.level === level) {
+                                try {
+                                    const olFeature = geojson.readFeature(feature);
+                                    if (Array.isArray(olFeature)) {
+                                        vectorSource.addFeatures(olFeature);
+                                    }
+                                    else {
+                                        vectorSource.addFeature(olFeature);
+                                    }
+                                }
+                                catch (error) {
+                                    ErrorHandler.getInstance().warn(`Failed to load river feature at level ${level}:`, error);
+                                }
+                            }
+                        });
+                        success?.(vectorSource.getFeatures());
+                    })
+                        .catch(error => {
+                        ErrorHandler.getInstance().error("Error loading river data:", error);
+                        failure?.();
+                    });
+                }
+            });
+            const riverLayer = new VectorLayer({
+                properties: {
+                    name: mergedOptions.layerName,
+                    layerName: mergedOptions.layerName,
+                    riverLevel: level
+                },
+                source: vectorSource,
+                style: (feature) => {
+                    if (feature instanceof Feature) {
+                        feature.set("type", mergedOptions.layerName);
+                        feature.set("layerName", mergedOptions.layerName);
+                    }
+                    if (mergedOptions.style) {
+                        if (typeof mergedOptions.style === "function") {
+                            return mergedOptions.style(feature);
+                        }
+                        else {
+                            return mergedOptions.style;
+                        }
+                    }
+                    return new Style({
+                        stroke: new Stroke({
+                            color: mergedOptions.strokeColor,
+                            width: mergedOptions.strokeWidth
+                        })
+                    });
+                },
+                zIndex: mergedOptions.zIndex
+            });
+            riverLayer.setVisible(false);
+            this.riverLayerList.push(riverLayer);
+            this.map.addLayer(riverLayer);
+        }
+        this.eventManager.on("moveend", () => {
+            this.showRiverLayerByZoom();
+        });
+        this.showRiverLayerByZoom();
+    }
+    //************* 分级河流：显示控制 *************
+    /**
+     * 设置分级河流图层是否显示
+     * @param show 是否显示
+     */
+    showRiverLayer(show) {
+        this.riverLayerShow = show;
+        this.showRiverLayerByZoom();
+    }
+    /**
+     * 根据当前 zoom 显示对应分级河流图层
+     * 缩放越大，显示的 riverLevel 越多
+     */
+    showRiverLayerByZoom() {
+        const zoom = this.map.getView().getZoom();
+        if (!zoom) {
+            return;
+        }
+        this.riverLayerList.forEach((layer, index) => {
+            const displayThreshold = index + 1 + this.riverZoomOffset;
+            if (zoom > displayThreshold) {
+                layer.setVisible(this.riverLayerShow);
+            }
+            else {
+                layer.setVisible(false);
+            }
+        });
+    }
+    addRiverWidthByLevel(data, options = {}) {
+        ValidationUtils.validateGeoJSONData(data);
+        const mergedOptions = {
+            ...ConfigManager.DEFAULT_RIVER_WIDTH_BY_LEVEL_OPTIONS,
+            ...options,
+            removeExisting: options.removeExisting ?? ConfigManager.DEFAULT_RIVER_WIDTH_BY_LEVEL_OPTIONS.removeExisting,
+            levelWidthMap: options.levelWidthMap ?? this.defaultLevelWidthMap,
+        };
+        if (mergedOptions.removeExisting && mergedOptions.layerName) {
+            MapTools.removeLayer(this.map, mergedOptions.layerName);
+        }
+        const features = new GeoJSON().readFeatures(data, mergedOptions.projectionOptOptions);
+        const riverLayer = new VectorLayer({
+            properties: {
+                name: mergedOptions.layerName,
+                layerName: mergedOptions.layerName
+            },
+            source: new VectorSource({ features }),
+            style: (feature) => {
+                if (mergedOptions.style) {
+                    if (typeof mergedOptions.style === "function") {
+                        return mergedOptions.style(feature);
+                    }
+                    else {
+                        return mergedOptions.style;
+                    }
+                }
+                const level = feature.get("level");
+                const levelWidth = mergedOptions.levelWidthMap[Number(level)] || 1;
+                return new Style({
+                    stroke: new Stroke({
+                        color: mergedOptions.strokeColor,
+                        width: levelWidth
+                    })
+                });
+            },
+            zIndex: mergedOptions.zIndex
+        });
+        riverLayer.setVisible(mergedOptions.visible);
+        this.map.addLayer(riverLayer);
+        return riverLayer;
+    }
+    //************* 河流线宽：按 level 设置不同宽度（URL 加载） *************
+    /**
+     * 从 URL 添加按级别显示不同宽度的河流图层
+     * @param url 河流数据 URL（GeoJSON）
+     * @param options 河流图层配置选项
+     */
+    addRiverWidthByLevelByUrl(url, options = {}) {
+        const mergedOptions = {
+            ...ConfigManager.DEFAULT_RIVER_WIDTH_BY_LEVEL_OPTIONS,
+            ...options,
+            removeExisting: options.removeExisting ?? ConfigManager.DEFAULT_RIVER_WIDTH_BY_LEVEL_OPTIONS.removeExisting,
+            levelWidthMap: options.levelWidthMap ?? this.defaultLevelWidthMap,
+        };
+        if (mergedOptions.removeExisting && mergedOptions.layerName) {
+            MapTools.removeLayer(this.map, mergedOptions.layerName);
+        }
+        const source = new VectorSource({
+            url,
+            format: new GeoJSON(options.projectionOptOptions)
+        });
+        const riverLayer = new VectorLayer({
+            properties: {
+                name: mergedOptions.layerName,
+                layerName: mergedOptions.layerName
+            },
+            source,
+            style: (feature) => {
+                if (mergedOptions.style) {
+                    if (typeof mergedOptions.style === "function") {
+                        return mergedOptions.style(feature);
+                    }
+                    else {
+                        return mergedOptions.style;
+                    }
+                }
+                const level = feature.get("level");
+                const levelWidth = mergedOptions.levelWidthMap[Number(level)] || 1;
+                return new Style({
+                    stroke: new Stroke({
+                        color: mergedOptions.strokeColor,
+                        width: levelWidth
+                    })
+                });
+            },
+            zIndex: mergedOptions.zIndex
+        });
+        riverLayer.setVisible(mergedOptions.visible);
+        this.map.addLayer(riverLayer);
+        return riverLayer;
+    }
+    //************* 清理与状态查询 *************
+    /**
+     * 清除本管理器创建的分级河流图层
+     */
+    clearRiverLayers() {
+        this.riverLayerList.forEach(layer => {
+            this.map.removeLayer(layer);
+        });
+        this.riverLayerList = [];
+        this.riverLayerShow = false;
+    }
+    /**
+     * 获取分级河流图层显示状态
+     */
+    getRiverLayerVisibility() {
+        return this.riverLayerShow;
+    }
+    /**
+     * 获取分级河流图层列表副本
+     */
+    getRiverLayers() {
+        return [...this.riverLayerList];
+    }
+    /**
+     * 销毁管理器，释放资源
+     */
+    destroy() {
+        this.clearRiverLayers();
+    }
+}

package/core/VueTemplatePoint.js

@@ -2,6 +2,7 @@ import Overlay from 'ol/Overlay';
 import { VueTemplatePointState } from '../types';
 import { ErrorHandler, ErrorType } from '../utils/ErrorHandler';
 import { ValidationUtils } from '../utils/ValidationUtils';
+import { ConfigManager } from './ConfigManager';
 // 动态导入Vue
 let Vue = null;
 let isVue3 = false;
@@ -224,10 +225,7 @@ class VueTemplatePointInstanceImpl {
      */
     mergeDefaultOptions(options) {
         return {
-            positioning: 'center-center',
-            stopEvent: false,
-            visible: true,
-            zIndex: 1,
+            ...ConfigManager.DEFAULT_VUE_TEMPLATE_POINT_OPTIONS,
             ...options
         };
     }

package/index.d.ts

@@ -8,6 +8,8 @@ export { default as MapTools } from './core/MapTools';
 export { default as MeasureHandler } from './core/MeasureHandler';
 export { default as VueTemplatePoint } from './core/VueTemplatePoint';
 export { default as SelectHandler } from './core/SelectHandler';
+export { default as RiverLayerManager } from './core/RiverLayerManager';
+export type { RiverLayerOptions, RiverLevelWidthMap } from './core/RiverLayerManager';
 export { ConfigManager } from './core/ConfigManager';
 export { EventManager } from './core/EventManager';
 export type { MapEventType, EventCallback, MapEventData } from './core/EventManager';
@@ -16,4 +18,4 @@ export { ValidationUtils } from './utils/ValidationUtils';
 export type { BaseOptions, StyleOptions, TextOptions } from './types';
 export type { PointOptions, LineOptions, PolygonOptions } from './types';
 export type { OptionsType } from './types';
-export type { MapInitType, MapLayersOptions, HeatMapOptions, ImageLayerData, MaskLayerOptions, ColorMap, FeatureColorUpdateOptions, PointData, LineData, ClusterOptions, MeasureHandlerType, VueTemplatePointOptions, MapJSONData, FeatureData, AnnotationType, TiandituType, MapLayers, AnnotationLayerOptions, SelectOptions, SelectMode, SelectCallbackEvent, ProgrammaticSelectOptions } from './types';
+export type { MapInitType, MapLayersOptions, HeatMapOptions, ImageLayerData, MaskLayerOptions, FeatureColorUpdateOptions, PointData, LineData, ClusterOptions, MeasureHandlerType, VueTemplatePointOptions, MapJSONData, FeatureData, AnnotationType, TiandituType, MapLayers, AnnotationLayerOptions, SelectOptions, SelectMode, SelectCallbackEvent, ProgrammaticSelectOptions } from './types';

package/index.js

@@ -9,6 +9,7 @@ export { default as MapTools } from './core/MapTools';
 export { default as MeasureHandler } from './core/MeasureHandler';
 export { default as VueTemplatePoint } from './core/VueTemplatePoint';
 export { default as SelectHandler } from './core/SelectHandler';
+export { default as RiverLayerManager } from './core/RiverLayerManager';
 // 新增工具类
 export { ConfigManager } from './core/ConfigManager';
 export { EventManager } from './core/EventManager';

package/package.json

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

package/types.d.ts

@@ -195,12 +195,6 @@ export interface MaskLayerOptions {
     visible?: boolean;
     layerName?: string;
 }
-/**
- * 颜色映射接口
- */
-export interface ColorMap {
-    [level: string]: string;
-}
 /**
  * 要素颜色更新选项接口
  */