my-openlayer 1.0.15 → 2.0.1

package/core/DomPoint.d.ts

@@ -0,0 +1,21 @@
+import Map from "ol/Map";
+interface Options {
+    Vue: any;
+    Template: any;
+    lgtd: number;
+    lttd: number;
+    props?: any;
+    type?: string;
+    sttp?: string;
+    zIndex?: number;
+}
+export default class DomPoint {
+    private map;
+    private app;
+    private anchor;
+    private dom;
+    constructor(map: Map, options: Options);
+    setVisible(visible: boolean): void;
+    remove(): void;
+}
+export {};

package/core/DomPoint.js

@@ -0,0 +1,36 @@
+// import { createApp } from "vue";
+import Overlay from "ol/Overlay";
+export default class DomPoint {
+    constructor(map, options) {
+        this.map = map;
+        const { Vue, Template, lgtd, lttd, props, } = options;
+        this.dom = document.createElement('div');
+        this.map.getViewport().appendChild(this.dom);
+        if (Vue.version.startsWith('3')) {
+            this.app = Vue.createApp(Object.assign(Template, {
+                props: { ...props }
+            }));
+            this.app.mount(this.dom);
+        }
+        else {
+            this.app = new Vue({
+                el: this.dom,
+                render: (h) => h(Template, { props })
+            });
+        }
+        this.anchor = new Overlay({
+            element: this.dom,
+            positioning: 'center-center',
+            stopEvent: false
+        });
+        this.anchor.setPosition([lgtd, lttd]);
+        this.map.addOverlay(this.anchor);
+    }
+    setVisible(visible) {
+        this.dom.style.visibility = visible ? 'visible' : 'hidden';
+    }
+    remove() {
+        this.app.unmount();
+        this.map.removeOverlay(this.anchor);
+    }
+}

package/core/Line.d.ts

@@ -52,19 +52,33 @@ export default class Line {
      */
     constructor(map: Map);
     /**
-     * 添加线要素
+     * 添加线要素（使用GeoJSON数据）
      * @param data GeoJSON格式的线数据
      * @param options 配置项
      * @returns 创建的矢量图层
      */
     addLine(data: MapJSONData, options?: LineOptions): VectorLayer<VectorSource>;
     /**
-     * 添加分级河流图层，根据缩放级别显示不同级别的河流
+     * 添加线要素（从URL加载）
+     * @param url 数据URL
+     * @param options 配置项
+     * @returns 创建的矢量图层
+     */
+    addLine(url: string, options?: LineOptions): VectorLayer<VectorSource>;
+    /**
+     * 添加分级河流图层（使用GeoJSON数据）
      * @param fyRiverJson 河流 GeoJSON 数据
      * @param options 河流图层配置选项
      * @throws {Error} 当数据格式无效时抛出错误
      */
     addRiverLayersByZoom(fyRiverJson: MapJSONData, options?: RiverLayerOptions): void;
+    /**
+     * 添加分级河流图层（从URL加载）
+     * @param url 河流数据URL
+     * @param options 河流图层配置选项
+     * @throws {Error} 当数据格式无效时抛出错误
+     */
+    addRiverLayersByZoom(url: string, options?: RiverLayerOptions): void;
     /**
      * 显示或隐藏河流图层
      * @param show 是否显示河流图层
@@ -76,12 +90,19 @@ export default class Line {
      */
     showRiverLayerByZoom(): void;
     /**
-     * 添加按级别显示不同宽度的河流图层
+     * 添加按级别显示不同宽度的河流图层（使用GeoJSON数据）
      * @param data 河流 GeoJSON 数据
      * @param options 河流图层配置选项
      * @returns 创建的河流图层
      */
     addRiverWidthByLevel(data: MapJSONData, options?: RiverLayerOptions): VectorLayer<VectorSource>;
+    /**
+     * 添加按级别显示不同宽度的河流图层（从URL加载）
+     * @param url 河流数据URL
+     * @param options 河流图层配置选项
+     * @returns 创建的河流图层
+     */
+    addRiverWidthByLevel(url: string, options?: RiverLayerOptions): VectorLayer<VectorSource>;
     /**
      * 移除线图层
      * @param layerName 图层名称

package/core/Line.js

@@ -42,14 +42,11 @@ export default class Line {
         this.map = map;
         this.eventManager = new EventManager(map);
     }
-    /**
-     * 添加线要素
-     * @param data GeoJSON格式的线数据
-     * @param options 配置项
-     * @returns 创建的矢量图层
-     */
     addLine(data, options = {}) {
-        ValidationUtils.validateGeoJSONData(data);
+        const isUrl = typeof data === 'string';
+        if (!isUrl) {
+            ValidationUtils.validateGeoJSONData(data);
+        }
         const defaultOptions = {
             type: 'line',
             strokeColor: 'rgba(3, 122, 255, 1)',
@@ -59,18 +56,35 @@ export default class Line {
             layerName: options.layerName || 'lineLayer'
         };
         const mergedOptions = { ...defaultOptions, ...options };
-        const features = new GeoJSON().readFeatures(data, options.projectionOptOptions);
+        // 根据数据类型创建 VectorSource
+        const source = isUrl
+            ? new VectorSource({
+                url: data,
+                format: new GeoJSON(options.projectionOptOptions)
+            })
+            : new VectorSource({
+                features: new GeoJSON().readFeatures(data, options.projectionOptOptions)
+            });
         const layer = new VectorLayer({
             properties: {
                 name: mergedOptions.layerName,
                 layerName: mergedOptions.layerName
             },
-            source: new VectorSource({ features }),
+            source,
             style: (feature) => {
                 if (feature instanceof Feature) {
                     feature.set('type', mergedOptions.type);
                     feature.set('layerName', mergedOptions.type);
                 }
+                // 如果传入了自定义样式，直接使用
+                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,
@@ -86,14 +100,11 @@ export default class Line {
         this.map.addLayer(layer);
         return layer;
     }
-    /**
-     * 添加分级河流图层，根据缩放级别显示不同级别的河流
-     * @param fyRiverJson 河流 GeoJSON 数据
-     * @param options 河流图层配置选项
-     * @throws {Error} 当数据格式无效时抛出错误
-     */
     addRiverLayersByZoom(fyRiverJson, options = {}) {
-        ValidationUtils.validateGeoJSONData(fyRiverJson);
+        const isUrl = typeof fyRiverJson === 'string';
+        if (!isUrl) {
+            ValidationUtils.validateGeoJSONData(fyRiverJson);
+        }
         const defaultOptions = {
             type: 'river',
             levelCount: 5,
@@ -115,23 +126,61 @@ export default class Line {
         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);
-                                vectorSource.addFeature(olFeature);
-                            }
-                            catch (error) {
-                                console.warn(`Failed to load river feature at level ${level}:`, error);
+            const vectorSource = isUrl
+                ? new VectorSource({
+                    url: fyRiverJson,
+                    format: new GeoJSON(),
+                    loader: function (extent, resolution, projection, success, failure) {
+                        fetch(fyRiverJson)
+                            .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) {
+                                        console.warn(`Failed to load river feature at level ${level}:`, error);
+                                    }
+                                }
+                            });
+                            success?.(vectorSource.getFeatures());
+                        })
+                            .catch(error => {
+                            console.error('Error loading river data:', error);
+                            failure?.();
+                        });
+                    }
+                })
+                : 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) {
+                                    console.warn(`Failed to load river feature at level ${level}:`, error);
+                                }
                             }
-                        }
-                    });
-                }
-            });
+                        });
+                    }
+                });
             const riverLayer = new VectorLayer({
                 properties: {
                     name: mergedOptions.layerName,
@@ -144,6 +193,15 @@ export default class Line {
                         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,
@@ -192,14 +250,11 @@ export default class Line {
             }
         });
     }
-    /**
-     * 添加按级别显示不同宽度的河流图层
-     * @param data 河流 GeoJSON 数据
-     * @param options 河流图层配置选项
-     * @returns 创建的河流图层
-     */
     addRiverWidthByLevel(data, options = {}) {
-        ValidationUtils.validateGeoJSONData(data);
+        const isUrl = typeof data === 'string';
+        if (!isUrl) {
+            ValidationUtils.validateGeoJSONData(data);
+        }
         // 合并默认配置
         const mergedOptions = {
             type: 'river',
@@ -216,16 +271,32 @@ export default class Line {
         if (mergedOptions.removeExisting && mergedOptions.layerName) {
             MapTools.removeLayer(this.map, mergedOptions.layerName);
         }
-        // 解析 GeoJSON 数据
-        const features = new GeoJSON().readFeatures(data, options.projectionOptOptions);
+        // 根据数据类型创建 VectorSource
+        const source = isUrl
+            ? new VectorSource({
+                url: data,
+                format: new GeoJSON(options.projectionOptOptions)
+            })
+            : new VectorSource({
+                features: new GeoJSON().readFeatures(data, options.projectionOptOptions)
+            });
         // 创建河流图层
         const riverLayer = new VectorLayer({
             properties: {
                 name: mergedOptions.layerName,
                 layerName: mergedOptions.layerName
             },
-            source: new VectorSource({ features }),
+            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({

package/core/Point.js

@@ -189,7 +189,12 @@ export default class Point {
             feature.properties.level = item.lev;
             const geojson = new GeoJSON();
             const olFeature = geojson.readFeature(feature);
-            vectorSource.addFeature(olFeature);
+            if (Array.isArray(olFeature)) {
+                vectorSource.addFeatures(olFeature);
+            }
+            else {
+                vectorSource.addFeature(olFeature);
+            }
             if (feature) {
                 const polygonCenter = calculatePolygonCenter(feature.geometry.coordinates);
                 item.lgtd = polygonCenter[0];

package/core/Polygon.d.ts

@@ -2,6 +2,8 @@ import Map from "ol/Map";
 import VectorLayer from "ol/layer/Vector";
 import VectorSource from "ol/source/Vector";
 import { Image as ImageLayer, Heatmap } from "ol/layer";
+import { Geometry } from "ol/geom";
+import Feature from "ol/Feature";
 import { PolygonOptions, MapJSONData, PointData, HeatMapOptions, ImageLayerData, MaskLayerOptions, FeatureColorUpdateOptions } from '../types';
 /**
  * Polygon 类用于处理地图上的面要素操作
@@ -23,7 +25,7 @@ export default class Polygon {
      */
     getLevColor(lev: string | number): string;
     /**
-     * 添加地图边框图层
+     * 添加地图边框图层（使用GeoJSON数据）
      * @param data 图层数据，必须是有效的 GeoJSON 格式
      * @param options 图层配置选项
      * @returns 创建的图层实例
@@ -31,13 +33,29 @@ export default class Polygon {
      */
     addBorderPolygon(data: MapJSONData, options?: PolygonOptions): VectorLayer<VectorSource>;
     /**
-     * 添加多边形图层
+     * 添加地图边框图层（从URL加载）
+     * @param url 数据URL
+     * @param options 图层配置选项
+     * @returns 创建的图层实例
+     * @throws 当数据格式无效时抛出错误
+     */
+    addBorderPolygon(url: string, options?: PolygonOptions): VectorLayer<VectorSource>;
+    /**
+     * 添加多边形图层（使用GeoJSON数据）
      * @param dataJSON GeoJSON 数据
      * @param options 图层配置选项
      * @returns 创建的矢量图层
      * @throws 当数据格式无效时抛出错误
      */
     addPolygon(dataJSON: MapJSONData, options?: PolygonOptions): VectorLayer<VectorSource>;
+    /**
+     * 添加多边形图层（从URL加载）
+     * @param url 数据URL
+     * @param options 图层配置选项
+     * @returns 创建的矢量图层
+     * @throws 当数据格式无效时抛出错误
+     */
+    addPolygon(url: string, options?: PolygonOptions): VectorLayer<VectorSource>;
     /**
      * 设置要素样式
      * @param features 要素数组
@@ -126,7 +144,7 @@ export default class Polygon {
      * @param pointData 点数据数组
      * @param options 热力图配置
      */
-    addHeatmap(pointData: PointData[], options?: HeatMapOptions): Heatmap;
+    addHeatmap(pointData: PointData[], options?: HeatMapOptions): Heatmap<Feature<Geometry>, VectorSource<Feature<Geometry>>>;
     /**
      * 添加遮罩图层
      * @param data GeoJSON格式的遮罩数据

package/core/Polygon.js

@@ -40,35 +40,30 @@ export default class Polygon {
         const key = lev.toString();
         return this.colorMap[key] || 'rgba(128, 128, 128, 0.6)';
     }
-    /**
-     * 添加地图边框图层
-     * @param data 图层数据，必须是有效的 GeoJSON 格式
-     * @param options 图层配置选项
-     * @returns 创建的图层实例
-     * @throws 当数据格式无效时抛出错误
-     */
     addBorderPolygon(data, options) {
-        ValidationUtils.validateGeoJSONData(data);
+        const isUrl = typeof data === 'string';
+        if (!isUrl) {
+            ValidationUtils.validateGeoJSONData(data);
+        }
         const mergedOptions = {
             layerName: 'border',
             fillColor: 'rgba(255, 255, 255, 0)',
             ...options
         };
-        const layer = this.addPolygon(data, mergedOptions);
-        if (mergedOptions.mask) {
+        // 使用类型断言来调用重载方法
+        const layer = isUrl
+            ? this.addPolygon(data, mergedOptions)
+            : this.addPolygon(data, mergedOptions);
+        if (mergedOptions.mask && !isUrl) {
             this.setOutLayer(data);
         }
         return layer;
     }
-    /**
-     * 添加多边形图层
-     * @param dataJSON GeoJSON 数据
-     * @param options 图层配置选项
-     * @returns 创建的矢量图层
-     * @throws 当数据格式无效时抛出错误
-     */
     addPolygon(dataJSON, options) {
-        ValidationUtils.validateGeoJSONData(dataJSON);
+        const isUrl = typeof dataJSON === 'string';
+        if (!isUrl) {
+            ValidationUtils.validateGeoJSONData(dataJSON);
+        }
         const mergedOptions = {
             zIndex: 11,
             visible: true,
@@ -86,28 +81,52 @@ export default class Polygon {
             new MapTools(this.map).removeLayer(mergedOptions.layerName);
         }
         let features;
-        try {
-            features = new GeoJSON().readFeatures(dataJSON, mergedOptions.projectionOptOptions ?? {});
-        }
-        catch (error) {
-            throw new Error(`Failed to parse GeoJSON data: ${error}`);
-        }
+        // 根据数据类型创建 VectorSource
+        const source = isUrl
+            ? new VectorSource({
+                url: dataJSON,
+                format: new GeoJSON(mergedOptions.projectionOptOptions ?? {})
+            })
+            : (() => {
+                try {
+                    features = new GeoJSON().readFeatures(dataJSON, mergedOptions.projectionOptOptions ?? {});
+                }
+                catch (error) {
+                    throw new Error(`Failed to parse GeoJSON data: ${error}`);
+                }
+                return new VectorSource({ features });
+            })();
         const layer = new VectorLayer({
             properties: {
                 name: mergedOptions.layerName,
                 layerName: mergedOptions.layerName
             },
-            source: new VectorSource({ features }),
+            source,
             zIndex: mergedOptions.zIndex
         });
-        // 设置要素样式
-        this.setFeatureStyles(features, mergedOptions);
+        // 如果不是URL，设置要素样式
+        if (!isUrl) {
+            this.setFeatureStyles(features, mergedOptions);
+        }
+        else {
+            // 如果是URL，需要在数据加载后设置样式
+            source.once('featuresloadend', () => {
+                const loadedFeatures = source.getFeatures();
+                this.setFeatureStyles(loadedFeatures, mergedOptions);
+            });
+        }
         layer.setVisible(mergedOptions.visible);
         this.map.addLayer(layer);
         // 如果需要适应视图
-        if (mergedOptions.fitView) {
+        if (mergedOptions.fitView && !isUrl) {
             this.fitViewToLayer(layer);
         }
+        else if (mergedOptions.fitView && isUrl) {
+            // 如果是URL，需要在数据加载后适应视图
+            source.once('featuresloadend', () => {
+                this.fitViewToLayer(layer);
+            });
+        }
         return layer;
     }
     /**
@@ -119,6 +138,16 @@ export default class Polygon {
         features.forEach(feature => {
             feature.set('type', options.layerName);
             feature.set('layerName', options.layerName);
+            // 如果传入了自定义样式，直接使用
+            if (options.style) {
+                if (typeof options.style === 'function') {
+                    feature.setStyle(options.style(feature));
+                }
+                else {
+                    feature.setStyle(options.style);
+                }
+                return;
+            }
             const fillColor = options.fillColorCallBack ? options.fillColorCallBack(feature) : options.fillColor;
             const featureStyle = new Style({
                 stroke: new Stroke({

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "my-openlayer",
   "private": false,
-  "version": "1.0.15",
+  "version": "2.0.1",
   "type": "module",
   "main": "index.js",
   "types": "index.d.ts",
@@ -28,9 +28,8 @@
   },
   "dependencies": {
     "@turf/turf": "^7.2.0",
-    "ol": "^6.15.1",
-    "proj4": "^2.7.5",
-    "my-openlayer": "^1.0.9"
+    "ol": "^10.6.1",
+    "proj4": "^2.7.5"
   },
   "devDependencies": {
     "@types/proj4": "^2.5.2",
@@ -42,6 +41,6 @@
     "vue-tsc": "^2.0.6"
   },
   "peerDependencies": {
-    "ol": "^6.15.1"
+    "ol": "^10.6.1"
   }
 }

package/types.d.ts

@@ -2,7 +2,8 @@ import BaseLayer from "ol/layer/Base";
 import TileLayer from "ol/layer/Tile";
 import { WMTS } from "ol/source";
 import View from "ol/View";
-import Feature from "ol/Feature";
+import Feature, { FeatureLike } from "ol/Feature";
+import { Style } from "ol/style";
 export interface FeatureData {
     type: string;
     properties: any;
@@ -83,6 +84,8 @@ export interface BaseOptions {
     mapClipData?: MapJSONData;
     /** 投影选项 */
     projectionOptOptions?: any;
+    /** 自定义样式函数 */
+    style?: Style | Style[] | ((feature: FeatureLike) => Style | Style[]);
 }
 /**
  * 样式选项接口 - 图形样式相关配置