vue-openlayers-plugin 1.1.13 → 1.1.14

package/lib/index.umd.js

@@ -68300,13 +68300,17 @@ ${this.attributes_.map(
     constructor(config, map2) {
       super(config);
       __publicField(this, "styleConfig");
-      // 新增：缓存启用的过滤器和原始要素集合
-      __publicField(this, "currentFilters", []);
       __publicField(this, "originalFeatures", []);
+      __publicField(this, "vectorSource", null);
+      __publicField(this, "refreshTimer", null);
+      __publicField(this, "refreshDebounceTimer", null);
+      __publicField(this, "moveEndListener", null);
+      __publicField(this, "lastKnownZoom");
+      __publicField(this, "isRefreshing", false);
       if (map2)
         this.setMap(map2);
     }
-    createLayer() {
+    async createLayer() {
       var _a2, _b2, _c2;
       const vectorSource = this.createVectorSource();
       const declutterOpt = (_c2 = (_b2 = (_a2 = this.config) == null ? void 0 : _a2.config) == null ? void 0 : _b2.vector) == null ? void 0 : _c2.declutter;
@@ -68314,42 +68318,379 @@ ${this.attributes_.map(
         className: this.config.className,
         source: vectorSource,
         style: this.createStyleFunction(),
-        // 默认关闭 declutter；如需避免标签重叠，可在 config.vector.declutter 设为 true
         declutter: declutterOpt !== void 0 ? !!declutterOpt : false
       });
+      this.vectorSource = vectorSource;
+      await this.initializeSource();
+      this.setupRefreshBehavior();
       return vectorLayer;
     }
     /**
      * 创建矢量数据源
      */
     createVectorSource() {
-      var _a2;
       this.registerCustomProjection();
+      return new VectorSource$1();
+    }
+    getGeoJSONConfig() {
+      var _a2;
+      const nestedConfig = this.config.geojsonConfig || ((_a2 = this.config.config) == null ? void 0 : _a2.geojson);
+      const requestConfig = {
+        url: this.config.url,
+        method: this.config.method,
+        headers: this.config.headers,
+        params: this.config.params,
+        body: this.config.body,
+        dataPath: this.config.dataPath,
+        ...(nestedConfig == null ? void 0 : nestedConfig.request) || {}
+      };
+      return {
+        data: (nestedConfig == null ? void 0 : nestedConfig.data) ?? this.config.data,
+        dataPath: (nestedConfig == null ? void 0 : nestedConfig.dataPath) ?? this.config.dataPath,
+        clearOnError: (nestedConfig == null ? void 0 : nestedConfig.clearOnError) ?? false,
+        refresh: nestedConfig == null ? void 0 : nestedConfig.refresh,
+        request: requestConfig.url || (nestedConfig == null ? void 0 : nestedConfig.request) ? requestConfig : void 0
+      };
+    }
+    getDataProjection() {
+      return this.config.projection || "EPSG:4326";
+    }
+    getMapProjection() {
+      var _a2;
+      return ((_a2 = this.map) == null ? void 0 : _a2.getView().getProjection().getCode()) || "EPSG:4326";
+    }
+    async initializeSource() {
+      var _a2;
+      const source = this.getVectorSource();
+      if (!source)
+        return;
+      const geojsonConfig = this.getGeoJSONConfig();
+      if (geojsonConfig.data) {
+        this.applyGeoJSONData(geojsonConfig.data);
+        return;
+      }
+      if (((_a2 = geojsonConfig.request) == null ? void 0 : _a2.url) || this.config.url) {
+        await this.refresh();
+        return;
+      }
+      source.clear();
+      this.originalFeatures = [];
+    }
+    getVectorSource() {
+      if (this.vectorSource) {
+        return this.vectorSource;
+      }
+      if (!this.layer) {
+        return null;
+      }
+      const source = this.layer.getSource();
+      this.vectorSource = source || null;
+      return this.vectorSource;
+    }
+    applyGeoJSONData(data2) {
+      const source = this.getVectorSource();
+      if (!source)
+        return;
+      const features2 = this.readFeaturesFromData(data2);
+      source.clear();
+      source.addFeatures(features2);
+      this.originalFeatures = [...features2];
+      if (this.getEnabledFilters().length > 0) {
+        this.applyFilters();
+      }
+    }
+    readFeaturesFromData(data2) {
       const format2 = new GeoJSON$2();
-      const mapProjection = ((_a2 = this.map) == null ? void 0 : _a2.getView().getProjection().getCode()) || "EPSG:4326";
-      const dataProjection = this.config.projection || "EPSG:4326";
-      if (this.config.data) {
-        const features2 = format2.readFeatures(this.config.data, {
-          dataProjection,
-          featureProjection: mapProjection
-        });
-        this.originalFeatures = features2;
-        return new VectorSource$1({ features: features2 });
-      } else if (this.config.url) {
-        const source = new VectorSource$1({
-          url: this.config.url,
-          format: new GeoJSON$2({
-            dataProjection,
-            featureProjection: mapProjection
-          })
-        });
-        source.on("featuresloadend", () => {
-          this.originalFeatures = source.getFeatures();
+      return format2.readFeatures(this.normalizeGeoJSONData(data2), {
+        dataProjection: this.getDataProjection(),
+        featureProjection: this.getMapProjection()
+      });
+    }
+    normalizeGeoJSONData(data2) {
+      if (typeof data2 === "string") {
+        const trimmed = data2.trim();
+        if (!trimmed) {
+          return { type: "FeatureCollection", features: [] };
+        }
+        try {
+          return this.normalizeGeoJSONData(JSON.parse(trimmed));
+        } catch (error2) {
+          throw new Error("GeoJSON 字符串解析失败");
+        }
+      }
+      if (Array.isArray(data2)) {
+        return {
+          type: "FeatureCollection",
+          features: data2
+        };
+      }
+      if (!data2 || typeof data2 !== "object") {
+        return {
+          type: "FeatureCollection",
+          features: []
+        };
+      }
+      if (data2.type === "FeatureCollection") {
+        return data2;
+      }
+      if (data2.type === "Feature") {
+        return {
+          type: "FeatureCollection",
+          features: [data2]
+        };
+      }
+      if (Array.isArray(data2.features)) {
+        return {
+          type: "FeatureCollection",
+          features: data2.features
+        };
+      }
+      return data2;
+    }
+    getNestedValue(target, path2) {
+      if (!path2) {
+        return target;
+      }
+      const keys2 = path2.replace(/\[(\d+)\]/g, ".$1").split(".").filter(Boolean);
+      return keys2.reduce(
+        (current, key2) => current !== null && current !== void 0 ? current[key2] : void 0,
+        target
+      );
+    }
+    buildRequestContext(overrides) {
+      const requestConfig = this.getGeoJSONConfig().request;
+      return {
+        config: this.config,
+        params: {
+          ...(requestConfig == null ? void 0 : requestConfig.params) || {},
+          ...(overrides == null ? void 0 : overrides.params) || {}
+        },
+        body: (overrides == null ? void 0 : overrides.body) ?? (requestConfig == null ? void 0 : requestConfig.body),
+        map: this.map || void 0
+      };
+    }
+    buildExtentPayload(refreshConfig) {
+      if (!(refreshConfig == null ? void 0 : refreshConfig.useExtent) || !this.map) {
+        return {};
+      }
+      const size2 = this.map.getSize();
+      if (!size2) {
+        return {};
+      }
+      const view = this.map.getView();
+      const sourceProjection = view.getProjection().getCode();
+      const targetProjection = refreshConfig.extentProjection || this.getDataProjection();
+      const rawExtent = view.calculateExtent(size2);
+      const extent3 = sourceProjection === targetProjection ? rawExtent : transformExtent(rawExtent, sourceProjection, targetProjection);
+      const extentValue = extent3.join(",");
+      const extentParamName = refreshConfig.extentParamName || "bbox";
+      if (refreshConfig.extentTarget === "body") {
+        return {
+          body: {
+            [extentParamName]: extentValue
+          }
+        };
+      }
+      return {
+        params: {
+          [extentParamName]: extentValue
+        }
+      };
+    }
+    createRequestUrl(url, params, method2) {
+      const requestUrl = new URL(url, window.location.origin);
+      Object.entries(params).forEach(([key2, value]) => {
+        if (value === void 0 || value === null || method2 !== "GET") {
+          return;
+        }
+        if (Array.isArray(value)) {
+          value.forEach(
+            (item) => requestUrl.searchParams.append(key2, String(item))
+          );
+          return;
+        }
+        requestUrl.searchParams.set(key2, String(value));
+      });
+      return requestUrl.toString();
+    }
+    async refresh(overrides) {
+      const geojsonConfig = this.getGeoJSONConfig();
+      const requestConfig = geojsonConfig.request;
+      if (!(requestConfig == null ? void 0 : requestConfig.url)) {
+        if (geojsonConfig.data) {
+          this.applyGeoJSONData(geojsonConfig.data);
+        }
+        return;
+      }
+      if (this.isRefreshing) {
+        return;
+      }
+      this.isRefreshing = true;
+      try {
+        const refreshPayload = this.buildExtentPayload(geojsonConfig.refresh);
+        const context = this.buildRequestContext({
+          params: {
+            ...refreshPayload.params || {},
+            ...(overrides == null ? void 0 : overrides.params) || {}
+          },
+          body: typeof refreshPayload.body === "object" && !Array.isArray(refreshPayload.body) && typeof ((overrides == null ? void 0 : overrides.body) || requestConfig.body) === "object" && !Array.isArray((overrides == null ? void 0 : overrides.body) || requestConfig.body) ? {
+            ...requestConfig.body,
+            ...refreshPayload.body,
+            ...overrides == null ? void 0 : overrides.body
+          } : (overrides == null ? void 0 : overrides.body) ?? refreshPayload.body ?? requestConfig.body
+        });
+        let request = {
+          url: requestConfig.url,
+          method: requestConfig.method || "GET",
+          headers: { ...requestConfig.headers || {} },
+          params: { ...context.params },
+          body: context.body
+        };
+        if (requestConfig.requestInterceptor) {
+          const intercepted = await requestConfig.requestInterceptor(
+            request,
+            context
+          );
+          request = {
+            ...request,
+            ...intercepted || {},
+            headers: {
+              ...request.headers,
+              ...(intercepted == null ? void 0 : intercepted.headers) || {}
+            },
+            params: {
+              ...request.params,
+              ...(intercepted == null ? void 0 : intercepted.params) || {}
+            }
+          };
+        }
+        const requestUrl = this.createRequestUrl(
+          request.url,
+          request.params,
+          request.method
+        );
+        const response = await fetch(requestUrl, {
+          method: request.method,
+          headers: {
+            "Content-Type": request.method === "GET" ? void 0 : "application/json;charset=UTF-8",
+            ...request.headers
+          },
+          body: request.method === "GET" || request.body === void 0 ? void 0 : typeof request.body === "string" ? request.body : JSON.stringify(request.body)
         });
-        return source;
-      } else {
-        return new VectorSource$1();
+        if (!response.ok) {
+          throw new Error(`GeoJSON 请求失败: ${response.status}`);
+        }
+        let responseData;
+        const contentType = response.headers.get("content-type") || "";
+        if (contentType.includes("application/json")) {
+          responseData = await response.json();
+        } else {
+          responseData = await response.text();
+        }
+        if (requestConfig.responseInterceptor) {
+          responseData = await requestConfig.responseInterceptor(
+            responseData,
+            context
+          );
+        }
+        if (requestConfig.responseParser) {
+          responseData = await requestConfig.responseParser(
+            responseData,
+            context
+          );
+        } else {
+          responseData = this.getNestedValue(
+            responseData,
+            requestConfig.dataPath || geojsonConfig.dataPath
+          );
+        }
+        this.applyGeoJSONData(responseData);
+      } catch (error2) {
+        if (geojsonConfig.clearOnError) {
+          const source = this.getVectorSource();
+          source == null ? void 0 : source.clear();
+          this.originalFeatures = [];
+        }
+        throw error2;
+      } finally {
+        this.isRefreshing = false;
+      }
+    }
+    updateRequestParams(params) {
+      var _a2;
+      const currentGeoJSONConfig = this.getGeoJSONConfig();
+      this.config.geojsonConfig = {
+        ...currentGeoJSONConfig,
+        request: {
+          ...currentGeoJSONConfig.request || {},
+          params: {
+            ...((_a2 = currentGeoJSONConfig.request) == null ? void 0 : _a2.params) || {},
+            ...params
+          }
+        }
+      };
+      void this.refresh();
+    }
+    scheduleRefresh() {
+      const refreshConfig = this.getGeoJSONConfig().refresh;
+      const debounce2 = (refreshConfig == null ? void 0 : refreshConfig.debounce) ?? 300;
+      if (this.refreshDebounceTimer) {
+        clearTimeout(this.refreshDebounceTimer);
+      }
+      this.refreshDebounceTimer = setTimeout(() => {
+        void this.refresh();
+      }, debounce2);
+    }
+    setupRefreshBehavior() {
+      this.clearRefreshBehavior();
+      const refreshConfig = this.getGeoJSONConfig().refresh;
+      if (!refreshConfig) {
+        return;
+      }
+      const enabled = refreshConfig.enabled ?? true;
+      if (!enabled) {
+        return;
       }
+      if (refreshConfig.interval && refreshConfig.interval > 0) {
+        this.refreshTimer = setInterval(() => {
+          void this.refresh();
+        }, refreshConfig.interval);
+      }
+      if (this.map && (refreshConfig.onMoveEnd || refreshConfig.onZoomEnd)) {
+        this.lastKnownZoom = this.map.getView().getZoom();
+        this.moveEndListener = () => {
+          var _a2;
+          const currentZoom = (_a2 = this.map) == null ? void 0 : _a2.getView().getZoom();
+          const zoomChanged = currentZoom !== this.lastKnownZoom;
+          this.lastKnownZoom = currentZoom;
+          if (zoomChanged && refreshConfig.onZoomEnd) {
+            this.scheduleRefresh();
+            return;
+          }
+          if (!zoomChanged && refreshConfig.onMoveEnd) {
+            this.scheduleRefresh();
+            return;
+          }
+          if (refreshConfig.onMoveEnd && refreshConfig.onZoomEnd) {
+            this.scheduleRefresh();
+          }
+        };
+        this.map.on("moveend", this.moveEndListener);
+      }
+    }
+    clearRefreshBehavior() {
+      if (this.refreshTimer) {
+        clearInterval(this.refreshTimer);
+        this.refreshTimer = null;
+      }
+      if (this.refreshDebounceTimer) {
+        clearTimeout(this.refreshDebounceTimer);
+        this.refreshDebounceTimer = null;
+      }
+      if (this.map && this.moveEndListener) {
+        this.map.un("moveend", this.moveEndListener);
+      }
+      this.moveEndListener = null;
     }
     /**
      * 创建样式函数
@@ -68753,7 +69094,6 @@ ${this.attributes_.map(
      * 应用过滤器（实现基类的抽象方法）
      */
     applyFilters() {
-      debugger;
       const layer2 = this.getLayer();
       const source = layer2.getSource();
       if (!source)
@@ -69009,6 +69349,29 @@ ${this.attributes_.map(
     clearAllFeatureFilters() {
       this.clearAllFilters();
     }
+    updateConfig(newConfig) {
+      super.updateConfig(newConfig);
+      if (this.layer) {
+        this.layer.setStyle(
+          this.createStyleFunction()
+        );
+      }
+      this.setupRefreshBehavior();
+      if (newConfig.url !== void 0 || newConfig.data !== void 0 || newConfig.method !== void 0 || newConfig.headers !== void 0 || newConfig.params !== void 0 || newConfig.body !== void 0 || newConfig.dataPath !== void 0 || newConfig.geojsonConfig !== void 0 || newConfig.config !== void 0 || newConfig.projection !== void 0) {
+        void this.initializeSource();
+      }
+    }
+    setMap(map2) {
+      super.setMap(map2);
+      if (this.layer) {
+        this.setupRefreshBehavior();
+      }
+    }
+    destroy() {
+      this.clearRefreshBehavior();
+      this.vectorSource = null;
+      super.destroy();
+    }
   }
   class KMLLayerHandler extends BaseLayer {
     constructor(config, map2) {
@@ -333765,6 +334128,72 @@ ${indentData}`);
     getLayerHandler(layerId) {
       return this.layerHandlers.get(layerId);
     }
+    async refreshLayer(layerId, options) {
+      try {
+        const config = this.getLayerConfig(layerId);
+        if (!config) {
+          return false;
+        }
+        if (!this.layerHandlers.has(layerId) && config.visible) {
+          const loaded = await this.loadLayerOnDemand(layerId);
+          if (!loaded) {
+            return false;
+          }
+        }
+        const handler = this.layerHandlers.get(layerId);
+        if (!(handler == null ? void 0 : handler.refresh)) {
+          return false;
+        }
+        await handler.refresh(options);
+        return true;
+      } catch (error2) {
+        console.error("刷新图层失败:", error2);
+        return false;
+      }
+    }
+    updateLayerRequestParams(layerId, params) {
+      var _a2, _b2, _c2, _d, _e2, _f, _g;
+      try {
+        const config = this.getLayerConfig(layerId);
+        if (!config) {
+          return false;
+        }
+        const nextConfig = {
+          ...config,
+          params: {
+            ...config.params || {},
+            ...params
+          },
+          geojsonConfig: {
+            ...config.geojsonConfig || ((_a2 = config.config) == null ? void 0 : _a2.geojson) || {},
+            request: {
+              ...((_c2 = config.geojsonConfig || ((_b2 = config.config) == null ? void 0 : _b2.geojson)) == null ? void 0 : _c2.request) || {},
+              params: {
+                ...((_f = (_e2 = config.geojsonConfig || ((_d = config.config) == null ? void 0 : _d.geojson)) == null ? void 0 : _e2.request) == null ? void 0 : _f.params) || {},
+                ...params
+              }
+            }
+          }
+        };
+        if (this.layerConfigs.has(layerId)) {
+          this.layerConfigs.set(layerId, nextConfig);
+        }
+        if (this.pendingLayerConfigs.has(layerId)) {
+          this.pendingLayerConfigs.set(layerId, nextConfig);
+        }
+        const handler = this.layerHandlers.get(layerId);
+        (_g = handler == null ? void 0 : handler.updateRequestParams) == null ? void 0 : _g.call(handler, params);
+        this.saveLayerConfigs();
+        this.eventBus.emit("layer-config-updated", {
+          layerId,
+          config: nextConfig
+        });
+        return true;
+      } catch (error2) {
+        console.error("更新图层请求参数失败:", error2);
+        return false;
+      }
+    }
     /**
      * 设置底图图层ID列表（用于底图互斥判断）
      */
@@ -334088,12 +334517,19 @@ ${indentData}`);
     updateLayerConfig(layerId, newConfig) {
       try {
         const handler = this.layerHandlers.get(layerId);
-        const config = this.layerConfigs.get(layerId);
-        if (handler && config) {
+        const config = this.layerConfigs.get(layerId) || this.pendingLayerConfigs.get(layerId);
+        if (config) {
           const updatedConfig = { ...config, ...newConfig };
-          this.layerConfigs.set(layerId, updatedConfig);
-          handler.updateConfig(newConfig);
-          if (newConfig.style || newConfig.customCss !== void 0) {
+          if (this.layerConfigs.has(layerId)) {
+            this.layerConfigs.set(layerId, updatedConfig);
+          }
+          if (this.pendingLayerConfigs.has(layerId)) {
+            this.pendingLayerConfigs.set(layerId, updatedConfig);
+          }
+          if (handler) {
+            handler.updateConfig(newConfig);
+          }
+          if (handler && (newConfig.style || newConfig.customCss !== void 0)) {
             if ("updateLayerStyles" in handler) {
               handler.updateLayerStyles(
                 updatedConfig.style,
@@ -337301,6 +337737,10 @@ ${indentData}`);
           var _a2;
           return (_a2 = mapManager.value) == null ? void 0 : _a2.getEventManager();
         },
+        clearAll: () => {
+          var _a2;
+          (_a2 = mapManager.value) == null ? void 0 : _a2.clearAll();
+        },
         updateMapConfig,
         startCoordinatePick,
         stopCoordinatePick,
@@ -366377,6 +366817,22 @@ ${indentData}`);
           }
           return false;
         },
+        refreshLayer: (layerId, options) => {
+          var _a2;
+          const layerManager = (_a2 = mapContainerRef.value) == null ? void 0 : _a2.getLayerManager();
+          if (layerManager) {
+            return layerManager.refreshLayer(layerId, options);
+          }
+          return false;
+        },
+        updateLayerRequestParams: (layerId, params) => {
+          var _a2;
+          const layerManager = (_a2 = mapContainerRef.value) == null ? void 0 : _a2.getLayerManager();
+          if (layerManager) {
+            return layerManager.updateLayerRequestParams(layerId, params);
+          }
+          return false;
+        },
         getAllLayerConfigs: () => {
           var _a2;
           const layerManager = (_a2 = mapContainerRef.value) == null ? void 0 : _a2.getLayerManager();
@@ -366679,8 +367135,8 @@ ${indentData}`);
       };
     }
   });
-  const OlMap_vue_vue_type_style_index_0_scoped_d71e468f_lang = "";
-  const OlMap = /* @__PURE__ */ _export_sfc(_sfc_main$n, [["__scopeId", "data-v-d71e468f"]]);
+  const OlMap_vue_vue_type_style_index_0_scoped_888f37cb_lang = "";
+  const OlMap = /* @__PURE__ */ _export_sfc(_sfc_main$n, [["__scopeId", "data-v-888f37cb"]]);
   const ol = "";
   const Property$1 = {
     ACCURACY: "accuracy",

package/lib/style.css

@@ -1674,7 +1674,7 @@ label {
   width: 100% !important;
   height: 100% !important;
 }
-.context-menu[data-v-d71e468f] {
+.context-menu[data-v-888f37cb] {
   background: var(--el-bg-color-overlay);
   border: 1px solid var(--el-border-color-light);
   border-radius: var(--el-border-radius-base);
@@ -1683,7 +1683,7 @@ label {
   min-width: 140px;
   overflow: hidden;
 }
-.context-menu .context-menu-item[data-v-d71e468f] {
+.context-menu .context-menu-item[data-v-888f37cb] {
   display: flex;
   align-items: center;
   padding: 8px 16px;
@@ -1692,14 +1692,14 @@ label {
   color: var(--el-text-color-primary);
   transition: all 0.2s;
 }
-.context-menu .context-menu-item[data-v-d71e468f]:hover {
+.context-menu .context-menu-item[data-v-888f37cb]:hover {
   background-color: var(--el-fill-color-light);
   color: var(--el-color-primary);
 }
-.context-menu .context-menu-item:hover .el-icon[data-v-d71e468f] {
+.context-menu .context-menu-item:hover .el-icon[data-v-888f37cb] {
   color: var(--el-color-primary);
 }
-.context-menu .context-menu-item .el-icon[data-v-d71e468f] {
+.context-menu .context-menu-item .el-icon[data-v-888f37cb] {
   margin-right: 8px;
   font-size: 16px;
   color: var(--el-text-color-secondary);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-openlayers-plugin",
-  "version": "1.1.13",
+  "version": "1.1.14",
   "description": "A Vue 3 plugin for OpenLayers with custom components and utilities",
   "main": "lib/index.umd.js",
   "module": "lib/index.esm.js",