vue-openlayers-plugin 1.0.88 → 1.0.90

package/lib/index.umd.js

@@ -377,21 +377,6 @@ var __publicField = (obj, key, value) => {
       ]));
     }
   }), flag_default = _sfc_main106;
-  var _sfc_main107 = /* @__PURE__ */ vue.defineComponent({
-    name: "Fold",
-    __name: "fold",
-    setup(__props) {
-      return (_ctx, _cache) => (vue.openBlock(), vue.createElementBlock("svg", {
-        xmlns: "http://www.w3.org/2000/svg",
-        viewBox: "0 0 1024 1024"
-      }, [
-        vue.createElementVNode("path", {
-          fill: "currentColor",
-          d: "M896 192H128v128h768zm0 256H384v128h512zm0 256H128v128h768zM320 384 128 512l192 128z"
-        })
-      ]));
-    }
-  }), fold_default = _sfc_main107;
   var _sfc_main111 = /* @__PURE__ */ vue.defineComponent({
     name: "FolderOpened",
     __name: "folder-opened",
@@ -81323,21 +81308,6 @@ For more detail, please visit: ${ref}
         this.layer.setOpacity(normalizedOpacity);
       }
     }
-    /**
-     * 设置图层层级
-     */
-    setZIndex(zIndex2) {
-      if (this.layer) {
-        this.layer.setZIndex(zIndex2);
-      }
-    }
-    /**
-     * 获取当前图层层级
-     */
-    getZIndex() {
-      var _a3;
-      return (_a3 = this.layer) == null ? void 0 : _a3.getZIndex();
-    }
     /**
      * 设置图层可见性
      */
@@ -467889,7 +467859,7 @@ ${this.attributes_.map(
   };
   const _hoisted_4$l = { class: "image-popup-main" };
   const _hoisted_5$l = { class: "image-container" };
-  const _hoisted_6$h = ["src", "alt"];
+  const _hoisted_6$g = ["src", "alt"];
   const _hoisted_7$f = {
     key: 0,
     class: "image-loading"
@@ -467912,12 +467882,12 @@ ${this.attributes_.map(
   };
   const _hoisted_12$9 = ["onClick"];
   const _hoisted_13$9 = ["src", "alt"];
-  const _hoisted_14$8 = {
+  const _hoisted_14$7 = {
     key: 3,
     class: "slideshow-controls"
   };
-  const _hoisted_15$7 = { class: "fullscreen-container" };
-  const _hoisted_16$7 = ["src", "alt"];
+  const _hoisted_15$6 = { class: "fullscreen-container" };
+  const _hoisted_16$6 = ["src", "alt"];
   const _sfc_main$p = /* @__PURE__ */ vue.defineComponent({
     __name: "ImagePopup",
     props: {
@@ -468074,7 +468044,7 @@ ${this.attributes_.map(
                     onLoad: handleImageLoad,
                     onError: handleImageError,
                     onClick: handleImageClick
-                  }, null, 40, _hoisted_6$h),
+                  }, null, 40, _hoisted_6$g),
                   imageLoading.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_7$f, [..._cache[4] || (_cache[4] = [
                     vue.createElementVNode("div", { class: "loading-spinner" }, null, -1),
                     vue.createElementVNode("span", null, "加载中...", -1)
@@ -468125,7 +468095,7 @@ ${this.attributes_.map(
                   ], 10, _hoisted_12$9);
                 }), 128))
               ])) : vue.createCommentVNode("", true),
-              _ctx.config.slideshow && imageList.value.length > 1 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_14$8, [
+              _ctx.config.slideshow && imageList.value.length > 1 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_14$7, [
                 vue.createVNode(vue.unref(ElButton), {
                   class: vue.normalizeClass(["slideshow-btn", { active: isSlideshow.value }]),
                   onClick: toggleSlideshow,
@@ -468144,14 +468114,14 @@ ${this.attributes_.map(
               class: "image-fullscreen",
               onClick: closeFullscreen
             }, [
-              vue.createElementVNode("div", _hoisted_15$7, [
+              vue.createElementVNode("div", _hoisted_15$6, [
                 vue.createElementVNode("img", {
                   src: currentImage.value,
                   alt: `全屏图片 ${currentIndex.value + 1}`,
                   class: "fullscreen-image",
                   onClick: _cache[0] || (_cache[0] = vue.withModifiers(() => {
                   }, ["stop"]))
-                }, null, 8, _hoisted_16$7),
+                }, null, 8, _hoisted_16$6),
                 vue.createVNode(vue.unref(ElButton), {
                   class: "fullscreen-close",
                   onClick: closeFullscreen,
@@ -468190,7 +468160,7 @@ ${this.attributes_.map(
     key: 3,
     class: "search-container"
   };
-  const _hoisted_6$g = {
+  const _hoisted_6$f = {
     key: 4,
     class: "data-stats"
   };
@@ -468207,19 +468177,19 @@ ${this.attributes_.map(
     class: "sort-indicator"
   };
   const _hoisted_13$8 = ["onClick"];
-  const _hoisted_14$7 = { key: 0 };
-  const _hoisted_15$6 = ["src", "alt"];
-  const _hoisted_16$6 = { key: 1 };
-  const _hoisted_17$6 = ["href"];
-  const _hoisted_18$6 = { key: 2 };
-  const _hoisted_19$5 = { key: 3 };
-  const _hoisted_20$5 = { key: 4 };
-  const _hoisted_21$3 = {
+  const _hoisted_14$6 = { key: 0 };
+  const _hoisted_15$5 = ["src", "alt"];
+  const _hoisted_16$5 = { key: 1 };
+  const _hoisted_17$5 = ["href"];
+  const _hoisted_18$5 = { key: 2 };
+  const _hoisted_19$4 = { key: 3 };
+  const _hoisted_20$4 = { key: 4 };
+  const _hoisted_21$2 = {
     key: 6,
     class: "list-view"
   };
-  const _hoisted_22$2 = ["onClick"];
-  const _hoisted_23$2 = { class: "field-label" };
+  const _hoisted_22$1 = ["onClick"];
+  const _hoisted_23$1 = { class: "field-label" };
   const _hoisted_24$1 = { class: "field-value" };
   const _hoisted_25$1 = ["src", "alt"];
   const _hoisted_26$1 = ["href"];
@@ -468454,7 +468424,7 @@ ${this.attributes_.map(
                   clearable: ""
                 }, null, 8, ["modelValue"])
               ])) : vue.createCommentVNode("", true),
-              _ctx.config.showStats ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_6$g, [
+              _ctx.config.showStats ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_6$f, [
                 vue.createElementVNode("span", null, "共 " + vue.toDisplayString(filteredData.value.length) + " 条记录", 1),
                 searchQuery.value ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_7$e, "（已过滤 " + vue.toDisplayString(arrayData.value.length - filteredData.value.length) + " 条）", 1)) : vue.createCommentVNode("", true)
               ])) : vue.createCommentVNode("", true),
@@ -468485,19 +468455,19 @@ ${this.attributes_.map(
                             return vue.openBlock(), vue.createElementBlock("td", {
                               key: field.key
                             }, [
-                              field.type === "image" ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_14$7, [
+                              field.type === "image" ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_14$6, [
                                 vue.createElementVNode("img", {
                                   src: getFieldValue(item, field.key || field.name),
                                   alt: field.label,
                                   class: "table-image"
-                                }, null, 8, _hoisted_15$6)
-                              ])) : field.type === "link" ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_16$6, [
+                                }, null, 8, _hoisted_15$5)
+                              ])) : field.type === "link" ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_16$5, [
                                 vue.createElementVNode("a", {
                                   href: getFieldValue(item, field.key || field.name),
                                   target: "_blank",
                                   class: "table-link"
-                                }, vue.toDisplayString(getFieldValue(item, field.key || field.name)), 9, _hoisted_17$6)
-                              ])) : field.type === "date" ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_18$6, vue.toDisplayString(formatDate(getFieldValue(item, field.key || field.name))), 1)) : field.type === "number" ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_19$5, vue.toDisplayString(formatNumber2(getFieldValue(item, field.key || field.name))), 1)) : (vue.openBlock(), vue.createElementBlock("span", _hoisted_20$5, vue.toDisplayString(getFieldValue(item, field.key || field.name)), 1))
+                                }, vue.toDisplayString(getFieldValue(item, field.key || field.name)), 9, _hoisted_17$5)
+                              ])) : field.type === "date" ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_18$5, vue.toDisplayString(formatDate(getFieldValue(item, field.key || field.name))), 1)) : field.type === "number" ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_19$4, vue.toDisplayString(formatNumber2(getFieldValue(item, field.key || field.name))), 1)) : (vue.openBlock(), vue.createElementBlock("span", _hoisted_20$4, vue.toDisplayString(getFieldValue(item, field.key || field.name)), 1))
                             ]);
                           }), 128))
                         ], 8, _hoisted_13$8);
@@ -468506,7 +468476,7 @@ ${this.attributes_.map(
                   ])
                 ])
               ])) : vue.createCommentVNode("", true),
-              currentView.value === "list" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_21$3, [
+              currentView.value === "list" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_21$2, [
                 (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(paginatedData.value, (item, index2) => {
                   return vue.openBlock(), vue.createElementBlock("div", {
                     key: index2,
@@ -468518,7 +468488,7 @@ ${this.attributes_.map(
                         key: field.key,
                         class: "list-field"
                       }, [
-                        vue.createElementVNode("span", _hoisted_23$2, vue.toDisplayString(field.label) + ":", 1),
+                        vue.createElementVNode("span", _hoisted_23$1, vue.toDisplayString(field.label) + ":", 1),
                         vue.createElementVNode("span", _hoisted_24$1, [
                           field.type === "image" ? (vue.openBlock(), vue.createElementBlock("img", {
                             key: 0,
@@ -468534,7 +468504,7 @@ ${this.attributes_.map(
                         ])
                       ]);
                     }), 128))
-                  ], 8, _hoisted_22$2);
+                  ], 8, _hoisted_22$1);
                 }), 128))
               ])) : vue.createCommentVNode("", true),
               currentView.value === "card" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_30$1, [
@@ -470279,7 +470249,7 @@ ${this.attributes_.map(
   const OlMapContainer_vue_vue_type_style_index_0_lang = "";
   const defaultComponents = {
     "measurement": () => Promise.resolve().then(() => MeasurementDialog$1),
-    "basemap": () => Promise.resolve().then(() => BasemapPanel),
+    "basemap": () => Promise.resolve().then(() => BasemapPanel$1),
     "print": () => Promise.resolve().then(() => MapPrintDialog),
     "layer-panel": () => Promise.resolve().then(() => LayerPanel),
     "coordinate": () => Promise.resolve().then(() => CoordinateLocationDialog),
@@ -470659,7 +470629,7 @@ ${this.attributes_.map(
       };
     }
   });
-  const OlDrawToolbar_vue_vue_type_style_index_0_scoped_65f64ab9_lang = "";
+  const OlDrawToolbar_vue_vue_type_style_index_0_scoped_b8c938a3_lang = "";
   const _export_sfc = (sfc, props) => {
     const target = sfc.__vccOpts || sfc;
     for (const [key2, val] of props) {
@@ -470667,7 +470637,7 @@ ${this.attributes_.map(
     }
     return target;
   };
-  const OlDrawToolbar = /* @__PURE__ */ _export_sfc(_sfc_main$m, [["__scopeId", "data-v-65f64ab9"]]);
+  const OlDrawToolbar = /* @__PURE__ */ _export_sfc(_sfc_main$m, [["__scopeId", "data-v-b8c938a3"]]);
   const TIANDITU_CONFIG = {
     baseUrl: "https://api.tianditu.gov.cn/v2/search",
     key: "9a7244dd5d1a1299a52946a3d0f8ff68"
@@ -471398,7 +471368,7 @@ ${this.attributes_.map(
   };
   const _hoisted_4$j = { class: "section-title" };
   const _hoisted_5$j = ["onClick"];
-  const _hoisted_6$f = { class: "item-content" };
+  const _hoisted_6$e = { class: "item-content" };
   const _hoisted_7$d = { class: "item-name" };
   const _hoisted_8$a = { class: "item-address" };
   const _hoisted_9$8 = {
@@ -471412,17 +471382,17 @@ ${this.attributes_.map(
   const _hoisted_11$7 = { class: "result-count" };
   const _hoisted_12$7 = ["onClick"];
   const _hoisted_13$7 = { class: "item-content" };
-  const _hoisted_14$6 = ["innerHTML"];
-  const _hoisted_15$5 = ["innerHTML"];
-  const _hoisted_16$5 = {
+  const _hoisted_14$5 = ["innerHTML"];
+  const _hoisted_15$4 = ["innerHTML"];
+  const _hoisted_16$4 = {
     key: 0,
     class: "item-type"
   };
-  const _hoisted_17$5 = {
+  const _hoisted_17$4 = {
     key: 0,
     class: "item-confidence"
   };
-  const _hoisted_18$5 = {
+  const _hoisted_18$4 = {
     key: 0,
     class: "no-results"
   };
@@ -471773,7 +471743,7 @@ ${this.attributes_.map(
                         ]),
                         _: 1
                       }),
-                      vue.createElementVNode("div", _hoisted_6$f, [
+                      vue.createElementVNode("div", _hoisted_6$e, [
                         vue.createElementVNode("div", _hoisted_7$d, vue.toDisplayString(item.name), 1),
                         vue.createElementVNode("div", _hoisted_8$a, vue.toDisplayString(item.address), 1)
                       ])
@@ -471815,14 +471785,14 @@ ${this.attributes_.map(
                         vue.createElementVNode("div", {
                           class: "item-name",
                           innerHTML: highlightText(result.name, searchQuery.value)
-                        }, null, 8, _hoisted_14$6),
+                        }, null, 8, _hoisted_14$5),
                         vue.createElementVNode("div", {
                           class: "item-address",
                           innerHTML: highlightText(result.address, searchQuery.value)
-                        }, null, 8, _hoisted_15$5),
-                        result.type ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_16$5, vue.toDisplayString(result.type), 1)) : vue.createCommentVNode("", true)
+                        }, null, 8, _hoisted_15$4),
+                        result.type ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_16$4, vue.toDisplayString(result.type), 1)) : vue.createCommentVNode("", true)
                       ]),
-                      result.confidence ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_17$5, vue.toDisplayString(Math.round(result.confidence * 100)) + "%", 1)) : vue.createCommentVNode("", true)
+                      result.confidence ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_17$4, vue.toDisplayString(Math.round(result.confidence * 100)) + "%", 1)) : vue.createCommentVNode("", true)
                     ], 10, _hoisted_12$7)
                   ]);
                 }), 128))
@@ -471832,7 +471802,7 @@ ${this.attributes_.map(
                 searchResults: searchResults.value,
                 isLoading: isLoading.value
               }, () => [
-                searchQuery.value && searchResults.value.length === 0 && !isLoading.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_18$5, [
+                searchQuery.value && searchResults.value.length === 0 && !isLoading.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_18$4, [
                   vue.createVNode(vue.unref(ElIcon), null, {
                     default: vue.withCtx(() => [
                       vue.createVNode(vue.unref(info_filled_default))
@@ -472529,367 +472499,290 @@ ${this.attributes_.map(
       };
     }
   });
-  const OlControlPanel_vue_vue_type_style_index_0_scoped_e2bbe659_lang = "";
-  const OlControlPanel = /* @__PURE__ */ _export_sfc(_sfc_main$k, [["__scopeId", "data-v-e2bbe659"]]);
-  const _hoisted_1$j = { class: "flex items-center justify-between px-4 py-3 border-b border-gray-200 bg-gray-50 rounded-t-lg" };
-  const _hoisted_2$i = { class: "panel-actions" };
-  const _hoisted_3$i = { class: "panel-content max-h-125 overflow-y-auto" };
-  const _hoisted_4$i = { class: "p-2" };
-  const _hoisted_5$i = { class: "legend-content p-2" };
-  const _hoisted_6$e = { key: 0 };
-  const _hoisted_7$c = { class: "text-xs text-gray-600" };
-  const _hoisted_8$9 = { key: 1 };
-  const _hoisted_9$7 = { class: "text-xs text-gray-600" };
-  const _hoisted_10$7 = { key: 2 };
-  const _hoisted_11$6 = { class: "relative mb-2" };
-  const _hoisted_12$6 = { class: "flex justify-between mt-1 text-xs text-gray-500" };
-  const _hoisted_13$6 = { class: "text-center text-xs text-gray-500" };
-  const _hoisted_14$5 = { key: 3 };
-  const _hoisted_15$4 = { class: "flex-1 text-xs text-gray-600" };
-  const _hoisted_16$4 = { key: 4 };
-  const _hoisted_17$4 = ["src", "alt"];
-  const _hoisted_18$4 = {
-    key: 1,
-    class: "w-4 h-4 mr-2 border border-gray-300 rounded-sm bg-gray-100"
+  const OlControlPanel_vue_vue_type_style_index_0_scoped_2fc6cae7_lang = "";
+  const OlControlPanel = /* @__PURE__ */ _export_sfc(_sfc_main$k, [["__scopeId", "data-v-2fc6cae7"]]);
+  const _hoisted_1$j = { class: "ol-legend-header" };
+  const _hoisted_2$i = { class: "header-actions" };
+  const _hoisted_3$i = { class: "ol-legend-body custom-scrollbar" };
+  const _hoisted_4$i = ["title"];
+  const _hoisted_5$i = { class: "legend-content" };
+  const _hoisted_6$d = {
+    key: 0,
+    class: "legend-gradient-box"
   };
-  const _hoisted_19$4 = { class: "text-xs text-gray-600" };
-  const _hoisted_20$4 = {
-    key: 5,
-    class: "text-xs text-gray-600 leading-relaxed"
+  const _hoisted_7$c = { class: "gradient-labels" };
+  const _hoisted_8$9 = {
+    key: 0,
+    class: "gradient-unit"
   };
-  const _hoisted_21$2 = ["innerHTML"];
-  const _hoisted_22$1 = {
-    key: 6,
-    class: "text-xs text-gray-500 leading-relaxed mt-2"
+  const _hoisted_9$7 = ["innerHTML"];
+  const _hoisted_10$7 = ["src"];
+  const _hoisted_11$6 = ["title"];
+  const _hoisted_12$6 = {
+    key: 3,
+    class: "legend-desc"
   };
-  const _hoisted_23$1 = {
+  const _hoisted_13$6 = {
     key: 1,
-    class: "py-10 px-5 text-center"
+    class: "empty-state"
   };
   const _sfc_main$j = /* @__PURE__ */ vue.defineComponent({
     __name: "OlLegendPanel",
     props: {
-      position: { default: "right" },
-      width: { default: 280 },
-      collapsible: { type: Boolean, default: true },
+      position: { default: "left" },
+      width: { default: 260 },
       defaultCollapsed: { type: Boolean, default: false },
       showOnlyVisible: { type: Boolean, default: true },
-      visible: { type: Boolean, default: false },
-      leftOffset: { default: void 0 },
-      rightOffset: { default: void 0 },
-      topOffset: { default: void 0 },
-      bottomOffset: { default: void 0 }
+      leftOffset: {},
+      rightOffset: {},
+      topOffset: {},
+      bottomOffset: {}
     },
-    emits: ["update:visible"],
-    setup(__props, { emit: __emit }) {
+    setup(__props) {
       const props = __props;
-      const activeNames = vue.ref([]);
       const isCollapsed = vue.ref(props.defaultCollapsed);
-      const visibleLayerIds = vue.ref([]);
+      const activeNames = vue.ref([]);
       const legends = vue.ref([]);
-      const handleLayersInitialized = (layers) => {
-        console.log("Layers initialized, updating legends", layers);
-        initializeLegendsFromConfig(layers);
-      };
-      layerEventBus.on("layers-initialized", handleLayersInitialized);
+      const visibleLayerIds = vue.ref([]);
       const panelStyle = vue.computed(() => {
-        const styles = {
-          width: `${props.width}px`
+        const style2 = {
+          width: `${props.width}px`,
+          backgroundColor: "var(--el-bg-color-overlay)",
+          backdropFilter: "blur(10px)"
+        };
+        const setOffset = (key2, value) => {
+          if (value !== void 0)
+            style2[key2] = typeof value === "number" ? `${value}px` : value;
+        };
+        setOffset("top", props.topOffset);
+        setOffset("bottom", props.bottomOffset);
+        if (props.leftOffset !== void 0)
+          setOffset("left", props.leftOffset);
+        else if (props.rightOffset !== void 0)
+          setOffset("right", props.rightOffset);
+        else
+          style2[props.position] = "20px";
+        if (!style2.top && !style2.bottom)
+          style2.bottom = "100px";
+        return style2;
+      });
+      const visibleLegends = vue.computed(() => {
+        const list2 = props.showOnlyVisible ? legends.value.filter((l2) => visibleLayerIds.value.includes(l2.layerId)) : legends.value;
+        return list2;
+      });
+      const shouldShowLegend = vue.computed(() => visibleLegends.value.length > 0);
+      const getGradientStyle = (legend) => {
+        var _a3;
+        if ((_a3 = legend.colors) == null ? void 0 : _a3.length) {
+          return { background: `linear-gradient(to right, ${legend.colors.join(", ")})` };
+        }
+        return {};
+      };
+      const getIconWrapperStyle = (type, item) => {
+        const size2 = item.size || 16;
+        return {
+          width: `${size2}px`,
+          height: `${size2}px`,
+          minWidth: `${size2}px`
+          // 防止压缩
         };
-        if (props.leftOffset !== void 0) {
-          styles.left = typeof props.leftOffset === "number" ? `${props.leftOffset}px` : props.leftOffset;
-        } else if (props.rightOffset !== void 0) {
-          styles.right = typeof props.rightOffset === "number" ? `${props.rightOffset}px` : props.rightOffset;
+      };
+      const getSymbolInnerStyle = (type, item) => {
+        const style2 = {
+          width: "100%",
+          height: "100%",
+          backgroundColor: item.color || "#ccc"
+        };
+        if (type === "symbol" && item.shape) {
+          if (item.shape === "circle")
+            style2.borderRadius = "50%";
+          else if (item.shape === "triangle")
+            style2.clipPath = "polygon(50% 0%, 0% 100%, 100% 100%)";
+          else
+            style2.borderRadius = "2px";
         } else {
-          styles[props.position] = "0";
-        }
-        if (props.topOffset !== void 0) {
-          styles.top = typeof props.topOffset === "number" ? `${props.topOffset}px` : props.topOffset;
+          style2.borderRadius = "2px";
         }
-        if (props.bottomOffset !== void 0) {
-          styles.bottom = typeof props.bottomOffset === "number" ? `${props.bottomOffset}px` : props.bottomOffset;
+        if (item.borderColor) {
+          style2.border = `1px solid ${item.borderColor}`;
+          style2.boxSizing = "border-box";
         }
-        return styles;
-      });
-      const visibleLegends = vue.computed(() => {
-        if (!props.showOnlyVisible) {
-          return legends.value;
+        if (item.pattern) {
+          style2.backgroundImage = `url(${item.pattern})`;
+          style2.backgroundSize = "cover";
         }
-        return legends.value.filter(
-          (legend) => visibleLayerIds.value.includes(legend.layerId)
-        );
-      });
-      const shouldShowLegend = vue.computed(() => {
-        return visibleLegends.value.length > 0;
-      });
-      const toggleCollapse = () => {
-        isCollapsed.value = !isCollapsed.value;
+        return style2;
       };
-      const initializeLegendsFromConfig = (layers) => {
+      const toggleCollapse = () => isCollapsed.value = !isCollapsed.value;
+      const handleImageError = (e3) => e3.target.style.display = "none";
+      const updateLegends = (layers) => {
         const newLegends = [];
-        const newVisibleLayerIds = [];
+        const newVisibleIds = [];
         layers.forEach((layer2) => {
           var _a3;
-          if (layer2.visible) {
-            newVisibleLayerIds.push(layer2.id);
-          }
-          const legendConfig = layer2.legend || ((_a3 = layer2.config) == null ? void 0 : _a3.legend);
-          if (legendConfig) {
-            const newLegend = {
+          if (layer2.visible)
+            newVisibleIds.push(layer2.id);
+          const config = layer2.legend || ((_a3 = layer2.config) == null ? void 0 : _a3.legend);
+          if (config) {
+            newLegends.push({
               layerId: layer2.id,
-              title: legendConfig.title || layer2.name || layer2.id,
-              items: legendConfig.items || [],
+              title: config.title || layer2.name || layer2.id,
+              items: config.items || [],
               visible: layer2.visible,
-              type: legendConfig.type || "color"
-              // 默认类型为color
-            };
-            newLegends.push(newLegend);
+              type: config.type || "color",
+              colors: config.colors,
+              min: config.min,
+              max: config.max,
+              unit: config.unit,
+              content: config.content,
+              description: config.description
+            });
+            if (!activeNames.value.includes(layer2.id))
+              activeNames.value.push(layer2.id);
           }
         });
         legends.value = newLegends;
-        visibleLayerIds.value = newVisibleLayerIds;
+        visibleLayerIds.value = newVisibleIds;
       };
-      const handleLayerVisibilityChange = (event) => {
-        if (event.visible) {
-          if (!visibleLayerIds.value.includes(event.layerId)) {
-            visibleLayerIds.value.push(event.layerId);
-          }
+      const handleLayerVisibility = ({ layerId, visible }) => {
+        if (visible) {
+          if (!visibleLayerIds.value.includes(layerId))
+            visibleLayerIds.value.push(layerId);
         } else {
-          const index2 = visibleLayerIds.value.indexOf(event.layerId);
-          if (index2 > -1) {
-            visibleLayerIds.value.splice(index2, 1);
-          }
-        }
-        const legendIndex = legends.value.findIndex((legend) => legend.layerId === event.layerId);
-        if (legendIndex > -1) {
-          legends.value[legendIndex].visible = event.visible;
+          visibleLayerIds.value = visibleLayerIds.value.filter((id2) => id2 !== layerId);
         }
       };
-      const handleLayerAdded = (event) => {
-        var _a3;
-        const layerConfig = event.layerConfig;
-        if (layerConfig) {
-          const legendConfig = layerConfig.legend || ((_a3 = layerConfig.config) == null ? void 0 : _a3.legend);
-          if (legendConfig) {
-            const newLegend = {
-              layerId: event.layerId,
-              title: legendConfig.title || layerConfig.name || event.layerName,
-              items: legendConfig.items || [],
-              visible: event.visible,
-              type: legendConfig.type || "color"
-              // 默认类型为color
-            };
-            legends.value.push(newLegend);
-            if (event.visible) {
-              visibleLayerIds.value.push(event.layerId);
-            }
-          }
+      const handleLayerAdded = (evt) => {
+        var _a3, _b3, _c2;
+        const config = ((_a3 = evt.layerConfig) == null ? void 0 : _a3.legend) || ((_c2 = (_b3 = evt.layerConfig) == null ? void 0 : _b3.config) == null ? void 0 : _c2.legend);
+        if (config) {
+          legends.value.push({
+            layerId: evt.layerId,
+            title: config.title || evt.layerName,
+            items: config.items || [],
+            visible: evt.visible,
+            type: config.type || "color"
+          });
+          if (evt.visible)
+            visibleLayerIds.value.push(evt.layerId);
+          activeNames.value.push(evt.layerId);
         }
       };
-      const handleLayerRemoved = (event) => {
-        const legendIndex = legends.value.findIndex((legend) => legend.layerId === event.layerId);
-        if (legendIndex > -1) {
-          legends.value.splice(legendIndex, 1);
-        }
-        const visibleIndex = visibleLayerIds.value.indexOf(event.layerId);
-        if (visibleIndex > -1) {
-          visibleLayerIds.value.splice(visibleIndex, 1);
-        }
+      const handleLayerRemoved = ({ layerId }) => {
+        legends.value = legends.value.filter((l2) => l2.layerId !== layerId);
+        visibleLayerIds.value = visibleLayerIds.value.filter((id2) => id2 !== layerId);
       };
       vue.onMounted(() => {
-        console.log("LegendPanel mounted");
-        layerEventBus.on("layer-visibility-change", handleLayerVisibilityChange);
+        layerEventBus.on("layers-initialized", updateLegends);
+        layerEventBus.on("layer-visibility-change", handleLayerVisibility);
         layerEventBus.on("layer-added", handleLayerAdded);
         layerEventBus.on("layer-removed", handleLayerRemoved);
       });
       vue.onUnmounted(() => {
-        layerEventBus.off("layer-visibility-change", handleLayerVisibilityChange);
+        layerEventBus.off("layers-initialized", updateLegends);
+        layerEventBus.off("layer-visibility-change", handleLayerVisibility);
         layerEventBus.off("layer-added", handleLayerAdded);
         layerEventBus.off("layer-removed", handleLayerRemoved);
-        layerEventBus.off("layers-initialized", handleLayersInitialized);
       });
-      const getSymbolStyle = (item) => {
-        const style2 = {};
-        if (item.shape === "circle") {
-          style2.borderRadius = "50%";
-        } else if (item.shape === "square") {
-          style2.borderRadius = "2px";
-        } else if (item.shape === "triangle") {
-          style2.clipPath = "polygon(50% 0%, 0% 100%, 100% 100%)";
-        }
-        if (item.color) {
-          style2.backgroundColor = item.color;
-        }
-        if (item.borderColor) {
-          style2.border = `2px solid ${item.borderColor}`;
-        }
-        if (item.size) {
-          style2.width = `${item.size}px`;
-          style2.height = `${item.size}px`;
-        }
-        return style2;
-      };
-      const getGradientStyle = (legend) => {
-        if (legend.colors && legend.colors.length > 1) {
-          const gradient2 = legend.colors.join(", ");
-          return {
-            background: `linear-gradient(to right, ${gradient2})`
-          };
-        }
-        return {};
-      };
-      const getCategoryStyle = (item) => {
-        const style2 = {
-          width: "16px",
-          height: "16px",
-          borderRadius: "2px"
-        };
-        if (item.color) {
-          style2.backgroundColor = item.color;
-        }
-        if (item.pattern) {
-          style2.backgroundImage = `url(${item.pattern})`;
-          style2.backgroundSize = "cover";
-        }
-        return style2;
-      };
-      const getIconStyle = (item) => {
-        const style2 = {
-          width: item.size ? `${item.size}px` : "16px",
-          height: item.size ? `${item.size}px` : "16px",
-          maxWidth: "24px",
-          maxHeight: "24px"
-        };
-        return style2;
-      };
-      const handleImageError = (event) => {
-        const img = event.target;
-        img.style.display = "none";
-        console.warn("图例图标加载失败:", img.src);
-      };
       return (_ctx, _cache) => {
-        const _component_el_button = vue.resolveComponent("el-button");
+        const _component_el_icon = vue.resolveComponent("el-icon");
         const _component_el_collapse_item = vue.resolveComponent("el-collapse-item");
         const _component_el_collapse = vue.resolveComponent("el-collapse");
         const _component_el_empty = vue.resolveComponent("el-empty");
         return vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", {
-          class: vue.normalizeClass(["custom-legend-box absolute bg-white rounded-lg bottom-40px shadow-lg transition-all duration-300 max-h-[calc(100vh-40px)] overflow-hidden z-1000", { "legend-collapsed": isCollapsed.value }]),
+          class: vue.normalizeClass(["ol-legend-panel", { "is-collapsed": isCollapsed.value }]),
           style: vue.normalizeStyle(panelStyle.value)
         }, [
           vue.createElementVNode("div", _hoisted_1$j, [
-            _cache[1] || (_cache[1] = vue.createElementVNode("h3", { class: "m-0 text-sm font-semibold text-gray-800" }, "图例", -1)),
+            _cache[1] || (_cache[1] = vue.createElementVNode("span", { class: "header-title" }, "图例", -1)),
             vue.createElementVNode("div", _hoisted_2$i, [
-              vue.createVNode(_component_el_button, {
-                link: "",
-                size: "small",
+              vue.createVNode(_component_el_icon, {
+                class: "action-icon",
                 onClick: toggleCollapse,
-                icon: isCollapsed.value ? vue.unref(expand_default) : vue.unref(fold_default)
-              }, null, 8, ["icon"])
-            ])
-          ]),
-          vue.createElementVNode("div", _hoisted_3$i, [
-            vue.createElementVNode("div", _hoisted_4$i, [
-              visibleLegends.value.length > 0 ? (vue.openBlock(), vue.createBlock(_component_el_collapse, {
-                key: 0,
-                modelValue: activeNames.value,
-                "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => activeNames.value = $event),
-                class: "legend-collapse"
+                title: isCollapsed.value ? "展开" : "收起"
               }, {
                 default: vue.withCtx(() => [
-                  (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(visibleLegends.value, (legend) => {
-                    return vue.openBlock(), vue.createBlock(_component_el_collapse_item, {
-                      key: legend.layerId,
-                      title: legend.title || "未命名图例",
-                      name: legend.id,
-                      class: "legend-item"
-                    }, {
-                      default: vue.withCtx(() => [
-                        vue.createElementVNode("div", _hoisted_5$i, [
-                          legend.type === "symbol" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_6$e, [
-                            (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(legend.items, (item) => {
-                              return vue.openBlock(), vue.createElementBlock("div", {
-                                key: item.value,
-                                class: "flex items-center mb-2"
-                              }, [
-                                vue.createElementVNode("div", {
-                                  class: "w-4 h-4 mr-2 border border-gray-300",
-                                  style: vue.normalizeStyle(getSymbolStyle(item))
-                                }, null, 4),
-                                vue.createElementVNode("span", _hoisted_7$c, vue.toDisplayString(item.label), 1)
-                              ]);
-                            }), 128))
-                          ])) : legend.type === "color" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_8$9, [
-                            (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(legend.items, (item) => {
-                              return vue.openBlock(), vue.createElementBlock("div", {
-                                key: item.value,
-                                class: "flex items-center mb-1.5"
-                              }, [
-                                vue.createElementVNode("div", {
-                                  class: "w-4 h-4 mr-2 border border-gray-300 rounded-sm",
-                                  style: vue.normalizeStyle({ backgroundColor: item.color })
-                                }, null, 4),
-                                vue.createElementVNode("span", _hoisted_9$7, vue.toDisplayString(item.label), 1)
-                              ]);
-                            }), 128))
-                          ])) : legend.type === "gradient" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_10$7, [
-                            vue.createElementVNode("div", _hoisted_11$6, [
-                              vue.createElementVNode("div", {
-                                class: "w-full h-5 border border-gray-300 rounded-sm",
-                                style: vue.normalizeStyle(getGradientStyle(legend))
-                              }, null, 4),
-                              vue.createElementVNode("div", _hoisted_12$6, [
-                                vue.createElementVNode("span", null, vue.toDisplayString(legend.min), 1),
-                                vue.createElementVNode("span", null, vue.toDisplayString(legend.max), 1)
-                              ])
-                            ]),
-                            vue.createElementVNode("div", _hoisted_13$6, vue.toDisplayString(legend.unit || ""), 1)
-                          ])) : legend.type === "category" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_14$5, [
-                            (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(legend.items, (item) => {
-                              return vue.openBlock(), vue.createElementBlock("div", {
-                                key: item.value,
-                                class: "flex items-center mb-1.5"
-                              }, [
-                                vue.createElementVNode("div", {
-                                  class: "mr-2 border border-gray-300",
-                                  style: vue.normalizeStyle(getCategoryStyle(item))
-                                }, null, 4),
-                                vue.createElementVNode("span", _hoisted_15$4, vue.toDisplayString(item.label), 1)
-                              ]);
-                            }), 128))
-                          ])) : legend.type === "icon" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_16$4, [
-                            (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(legend.items, (item) => {
-                              return vue.openBlock(), vue.createElementBlock("div", {
-                                key: item.value,
-                                class: "flex items-center mb-1.5"
-                              }, [
-                                item.image ? (vue.openBlock(), vue.createElementBlock("img", {
-                                  key: 0,
-                                  src: item.image,
-                                  alt: item.label,
-                                  class: "mr-2 object-contain border border-gray-200 rounded-sm",
-                                  style: vue.normalizeStyle(getIconStyle(item)),
-                                  onError: handleImageError
-                                }, null, 44, _hoisted_17$4)) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_18$4)),
-                                vue.createElementVNode("span", _hoisted_19$4, vue.toDisplayString(item.label), 1)
-                              ]);
-                            }), 128))
-                          ])) : legend.type === "custom" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_20$4, [
-                            vue.createElementVNode("div", {
-                              innerHTML: legend.content
-                            }, null, 8, _hoisted_21$2)
-                          ])) : vue.createCommentVNode("", true),
-                          legend.description ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_22$1, vue.toDisplayString(legend.description), 1)) : vue.createCommentVNode("", true)
-                        ])
-                      ]),
-                      _: 2
-                    }, 1032, ["title", "name"]);
-                  }), 128))
+                  (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(isCollapsed.value ? "Expand" : "Fold")))
                 ]),
                 _: 1
-              }, 8, ["modelValue"])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_23$1, [
-                vue.createVNode(_component_el_empty, { description: "暂无图例" })
-              ]))
+              }, 8, ["title"])
             ])
+          ]),
+          vue.createElementVNode("div", _hoisted_3$i, [
+            visibleLegends.value.length > 0 ? (vue.openBlock(), vue.createBlock(_component_el_collapse, {
+              key: 0,
+              modelValue: activeNames.value,
+              "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => activeNames.value = $event),
+              class: "legend-collapse"
+            }, {
+              default: vue.withCtx(() => [
+                (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(visibleLegends.value, (legend) => {
+                  return vue.openBlock(), vue.createBlock(_component_el_collapse_item, {
+                    key: legend.layerId,
+                    name: legend.layerId
+                  }, {
+                    title: vue.withCtx(() => [
+                      vue.createElementVNode("span", {
+                        class: "layer-title",
+                        title: legend.title
+                      }, vue.toDisplayString(legend.title || "未命名图例"), 9, _hoisted_4$i)
+                    ]),
+                    default: vue.withCtx(() => [
+                      vue.createElementVNode("div", _hoisted_5$i, [
+                        legend.type === "gradient" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_6$d, [
+                          vue.createElementVNode("div", {
+                            class: "gradient-bar",
+                            style: vue.normalizeStyle(getGradientStyle(legend))
+                          }, null, 4),
+                          vue.createElementVNode("div", _hoisted_7$c, [
+                            vue.createElementVNode("span", null, vue.toDisplayString(legend.min), 1),
+                            vue.createElementVNode("span", null, vue.toDisplayString(legend.max), 1)
+                          ]),
+                          legend.unit ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_8$9, vue.toDisplayString(legend.unit), 1)) : vue.createCommentVNode("", true)
+                        ])) : legend.type === "custom" ? (vue.openBlock(), vue.createElementBlock("div", {
+                          key: 1,
+                          class: "legend-custom",
+                          innerHTML: legend.content
+                        }, null, 8, _hoisted_9$7)) : (vue.openBlock(true), vue.createElementBlock(vue.Fragment, { key: 2 }, vue.renderList(legend.items, (item, idx) => {
+                          return vue.openBlock(), vue.createElementBlock("div", {
+                            key: idx,
+                            class: "legend-row"
+                          }, [
+                            vue.createElementVNode("div", {
+                              class: "legend-icon",
+                              style: vue.normalizeStyle(getIconWrapperStyle(legend.type, item))
+                            }, [
+                              legend.type === "icon" && item.image ? (vue.openBlock(), vue.createElementBlock("img", {
+                                key: 0,
+                                src: item.image,
+                                class: "icon-img",
+                                onError: handleImageError
+                              }, null, 40, _hoisted_10$7)) : (vue.openBlock(), vue.createElementBlock("div", {
+                                key: 1,
+                                class: "symbol-shape",
+                                style: vue.normalizeStyle(getSymbolInnerStyle(legend.type, item))
+                              }, null, 4))
+                            ], 4),
+                            vue.createElementVNode("span", {
+                              class: "legend-label",
+                              title: item.label
+                            }, vue.toDisplayString(item.label), 9, _hoisted_11$6)
+                          ]);
+                        }), 128)),
+                        legend.description ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_12$6, vue.toDisplayString(legend.description), 1)) : vue.createCommentVNode("", true)
+                      ])
+                    ]),
+                    _: 2
+                  }, 1032, ["name"]);
+                }), 128))
+              ]),
+              _: 1
+            }, 8, ["modelValue"])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_13$6, [
+              vue.createVNode(_component_el_empty, {
+                description: "暂无图例",
+                "image-size": 60
+              })
+            ]))
           ])
         ], 6)), [
           [vue.vShow, shouldShowLegend.value]
@@ -472897,7 +472790,8 @@ ${this.attributes_.map(
       };
     }
   });
-  const OlLegendPanel_vue_vue_type_style_index_0_lang = "";
+  const OlLegendPanel_vue_vue_type_style_index_0_scoped_b1b6d5ed_lang = "";
+  const OlLegendPanel = /* @__PURE__ */ _export_sfc(_sfc_main$j, [["__scopeId", "data-v-b1b6d5ed"]]);
   class ConfigLoader {
     /**
      * 从URL加载配置文件
@@ -474025,7 +473919,7 @@ ${this.attributes_.map(
   const _hoisted_3$h = { class: "config-item" };
   const _hoisted_4$h = { class: "value-text" };
   const _hoisted_5$h = { class: "config-item" };
-  const _hoisted_6$d = { class: "value-text" };
+  const _hoisted_6$c = { class: "value-text" };
   const _hoisted_7$b = { class: "config-item" };
   const _hoisted_8$8 = { class: "value-text" };
   const _hoisted_9$6 = { class: "config-item" };
@@ -474086,7 +473980,7 @@ ${this.attributes_.map(
                 step: 1,
                 onInput: handleFilterChange
               }, null, 8, ["modelValue"]),
-              vue.createElementVNode("span", _hoisted_6$d, vue.toDisplayString(_ctx.filters.saturate) + "%", 1)
+              vue.createElementVNode("span", _hoisted_6$c, vue.toDisplayString(_ctx.filters.saturate) + "%", 1)
             ]),
             vue.createElementVNode("div", _hoisted_7$b, [
               _cache[13] || (_cache[13] = vue.createElementVNode("label", null, "亮度:", -1)),
@@ -474224,7 +474118,7 @@ ${this.attributes_.map(
   };
   const _hoisted_4$g = { class: "config-item" };
   const _hoisted_5$g = { class: "value-text" };
-  const _hoisted_6$c = { class: "config-item" };
+  const _hoisted_6$b = { class: "config-item" };
   const _hoisted_7$a = { class: "value-text" };
   const _hoisted_8$7 = {
     key: 1,
@@ -474282,7 +474176,7 @@ ${this.attributes_.map(
               }, null, 8, ["modelValue"]),
               vue.createElementVNode("span", _hoisted_5$g, vue.toDisplayString(_ctx.layerData.clusterDistance) + "px", 1)
             ]),
-            vue.createElementVNode("div", _hoisted_6$c, [
+            vue.createElementVNode("div", _hoisted_6$b, [
               _cache[7] || (_cache[7] = vue.createElementVNode("label", null, "最小距离:", -1)),
               vue.createVNode(_component_el_slider, {
                 modelValue: _ctx.layerData.minDistance,
@@ -474722,7 +474616,7 @@ ${this.attributes_.map(
   const _hoisted_3$e = { class: "text-xs font-semibold text-gray-700 px-1 py-1 border-b border-gray-200 mb-2" };
   const _hoisted_4$e = { class: "global-style-panel" };
   const _hoisted_5$e = { class: "config-section" };
-  const _hoisted_6$b = { class: "config-item" };
+  const _hoisted_6$a = { class: "config-item" };
   const _hoisted_7$9 = { class: "current-style-display" };
   const _hoisted_8$6 = { class: "style-preview" };
   const dialogType = "layer-panel";
@@ -475495,7 +475389,10 @@ ${this.attributes_.map(
         return vue.openBlock(), vue.createBlock(vue.unref(X$1), vue.mergeProps({
           modelValue: visible.value,
           "onUpdate:modelValue": _cache[4] || (_cache[4] = ($event) => visible.value = $event)
-        }, dialogProps2.value, { onClose: handleClose }), vue.createSlots({
+        }, dialogProps2.value, {
+          "append-to-body": "",
+          onClose: handleClose
+        }), vue.createSlots({
           default: vue.withCtx(() => [
             _ctx.$slots.default ? vue.renderSlot(_ctx.$slots, "default", {
               key: 0,
@@ -475665,7 +475562,7 @@ ${this.attributes_.map(
                           }, {
                             default: vue.withCtx(() => [
                               vue.createElementVNode("div", _hoisted_5$e, [
-                                vue.createElementVNode("div", _hoisted_6$b, [
+                                vue.createElementVNode("div", _hoisted_6$a, [
                                   vue.createVNode(vue.unref(ElInput), {
                                     modelValue: vue.unref(globalCustomCss),
                                     "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => vue.isRef(globalCustomCss) ? globalCustomCss.value = $event : null),
@@ -475890,7 +475787,7 @@ ${this.attributes_.map(
   const _hoisted_3$c = { class: "flex items-center justify-between" };
   const _hoisted_4$c = { class: "mb-5" };
   const _hoisted_5$c = { class: "mb-3" };
-  const _hoisted_6$a = {
+  const _hoisted_6$9 = {
     key: 0,
     class: "mb-3"
   };
@@ -476466,7 +476363,7 @@ ${this.attributes_.map(
                                   _: 1
                                 }, 8, ["modelValue"])
                               ]),
-                              printSettings.paperSize === "Custom" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_6$a, [
+                              printSettings.paperSize === "Custom" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_6$9, [
                                 vue.createElementVNode("div", _hoisted_7$8, [
                                   vue.createVNode(_component_el_input, {
                                     modelValue: printSettings.customWidth,
@@ -476974,7 +476871,7 @@ ${this.attributes_.map(
   const _hoisted_3$b = { key: 1 };
   const _hoisted_4$b = { class: "layer-title" };
   const _hoisted_5$b = ["onClick"];
-  const _hoisted_6$9 = { class: "property-key" };
+  const _hoisted_6$8 = { class: "property-key" };
   const _hoisted_7$7 = { class: "property-value" };
   const _hoisted_8$4 = ["innerHTML"];
   const _hoisted_9$3 = { key: 3 };
@@ -477168,7 +477065,7 @@ ${this.attributes_.map(
                           key: key2,
                           class: "property-item"
                         }, [
-                          vue.createElementVNode("span", _hoisted_6$9, vue.toDisplayString(key2) + ":", 1),
+                          vue.createElementVNode("span", _hoisted_6$8, vue.toDisplayString(key2) + ":", 1),
                           vue.createElementVNode("span", _hoisted_7$7, vue.toDisplayString(formatValue(value)), 1)
                         ]);
                       }), 128))
@@ -477215,15 +477112,17 @@ ${this.attributes_.map(
       };
     }
   });
-  const _hoisted_1$b = {
-    key: 11,
-    class: "absolute top-15 right-2.5 w-62.5 max-h-75 bg-white rounded-md shadow-lg z-1000 overflow-hidden md:w-50 md:top-20 md:right-1.25"
-  };
-  const _hoisted_2$a = { class: "flex items-center justify-between px-4 py-3 border-b border-gray-200 bg-gray-50" };
-  const _hoisted_3$a = { class: "max-h-50 overflow-y-auto p-2" };
-  const _hoisted_4$a = { class: "flex-1 flex flex-col gap-0.5" };
-  const _hoisted_5$a = { class: "text-xs text-gray-500" };
-  const _hoisted_6$8 = { class: "text-sm font-semibold text-gray-800 font-mono" };
+  const _hoisted_1$b = { class: "flex items-center justify-between" };
+  const _hoisted_2$a = { class: "max-h-50 overflow-y-auto p-2" };
+  const _hoisted_3$a = { class: "flex-1 flex flex-col gap-0.5" };
+  const _hoisted_4$a = {
+    class: "text-xs",
+    style: { "color": "var(--el-text-color-secondary)" }
+  };
+  const _hoisted_5$a = {
+    class: "text-sm font-semibold font-mono",
+    style: { "color": "var(--el-text-color-regular)" }
+  };
   const _sfc_main$b = /* @__PURE__ */ vue.defineComponent({
     __name: "OlMap",
     props: {
@@ -478395,6 +478294,7 @@ ${this.attributes_.map(
         var _a3;
         const _component_el_icon = vue.resolveComponent("el-icon");
         const _component_el_button = vue.resolveComponent("el-button");
+        const _component_el_card = vue.resolveComponent("el-card");
         return vue.openBlock(), vue.createElementBlock("div", {
           class: vue.normalizeClass(["relative w-full h-full overflow-hidden", { "fixed top-0 left-0 w-screen h-screen z-9999": isFullscreen.value }])
         }, [
@@ -478428,7 +478328,7 @@ ${this.attributes_.map(
                 formattedData,
                 coordinate,
                 pixel
-              })
+              }, void 0, true)
             ]),
             _: 3
           }, 8, ["config", "width", "height", "loading"]),
@@ -478517,20 +478417,19 @@ ${this.attributes_.map(
             "left-offset": finalControlsConfig.value.leftOffset,
             "right-offset": finalControlsConfig.value.rightOffset,
             "top-offset": finalControlsConfig.value.topOffset,
-            "bottom-offset": finalControlsConfig.value.bottomOffset,
-            class: "bg-white p-2 rounded-lg shadow-lg"
+            "bottom-offset": finalControlsConfig.value.bottomOffset
           }, {
             custom: vue.withCtx(({ controls }) => [
               vue.renderSlot(_ctx.$slots, "controls", {
                 controls,
                 map: map2.value
-              })
+              }, void 0, true)
             ]),
             _: 3
           }, 8, ["config", "position", "direction", "left-offset", "right-offset", "top-offset", "bottom-offset"])) : vue.createCommentVNode("", true),
-          hasToolbarSlot.value ? vue.renderSlot(_ctx.$slots, "toolbar", { key: 5 }) : vue.createCommentVNode("", true),
-          hasMapInfoSlot.value ? vue.renderSlot(_ctx.$slots, "mapInfo", { key: 6 }) : vue.createCommentVNode("", true),
-          hasMapInfoSlot.value ? vue.renderSlot(_ctx.$slots, "map-info", { key: 7 }) : vue.createCommentVNode("", true),
+          hasToolbarSlot.value ? vue.renderSlot(_ctx.$slots, "toolbar", { key: 5 }, void 0, true) : vue.createCommentVNode("", true),
+          hasMapInfoSlot.value ? vue.renderSlot(_ctx.$slots, "mapInfo", { key: 6 }, void 0, true) : vue.createCommentVNode("", true),
+          hasMapInfoSlot.value ? vue.renderSlot(_ctx.$slots, "map-info", { key: 7 }, void 0, true) : vue.createCommentVNode("", true),
           finalEnableLayerPanel.value ? (vue.openBlock(), vue.createBlock(_sfc_main$f, {
             key: 8,
             modelValue: showLayerPanel.value,
@@ -478539,30 +478438,30 @@ ${this.attributes_.map(
             hasLayerPanelSlot.value ? {
               name: "default",
               fn: vue.withCtx((panel) => [
-                vue.renderSlot(_ctx.$slots, "layerPanel", vue.normalizeProps(vue.guardReactiveProps(panel))),
-                vue.renderSlot(_ctx.$slots, "layer-panel", vue.normalizeProps(vue.guardReactiveProps(panel)))
+                vue.renderSlot(_ctx.$slots, "layerPanel", vue.normalizeProps(vue.guardReactiveProps(panel)), void 0, true),
+                vue.renderSlot(_ctx.$slots, "layer-panel", vue.normalizeProps(vue.guardReactiveProps(panel)), void 0, true)
               ]),
               key: "0"
             } : void 0,
             hasLayerPanelTitleSlot.value ? {
               name: "title",
               fn: vue.withCtx(() => [
-                vue.renderSlot(_ctx.$slots, "layerPanelTitle"),
-                vue.renderSlot(_ctx.$slots, "layer-panel-title"),
-                vue.renderSlot(_ctx.$slots, "title")
+                vue.renderSlot(_ctx.$slots, "layerPanelTitle", {}, void 0, true),
+                vue.renderSlot(_ctx.$slots, "layer-panel-title", {}, void 0, true),
+                vue.renderSlot(_ctx.$slots, "title", {}, void 0, true)
               ]),
               key: "1"
             } : void 0,
             hasLayerPanelFooterSlot.value ? {
               name: "footer",
               fn: vue.withCtx((panel) => [
-                vue.renderSlot(_ctx.$slots, "layerPanelFooter", vue.normalizeProps(vue.guardReactiveProps(panel))),
-                vue.renderSlot(_ctx.$slots, "layer-panel-footer", vue.normalizeProps(vue.guardReactiveProps(panel)))
+                vue.renderSlot(_ctx.$slots, "layerPanelFooter", vue.normalizeProps(vue.guardReactiveProps(panel)), void 0, true),
+                vue.renderSlot(_ctx.$slots, "layer-panel-footer", vue.normalizeProps(vue.guardReactiveProps(panel)), void 0, true)
               ]),
               key: "2"
             } : void 0
           ]), 1032, ["modelValue"])) : vue.createCommentVNode("", true),
-          showLegend.value ? (vue.openBlock(), vue.createBlock(_sfc_main$j, {
+          showLegend.value ? (vue.openBlock(), vue.createBlock(OlLegendPanel, {
             key: 9,
             position: finalLegendPosition.value,
             width: finalLegendWidth.value,
@@ -478574,42 +478473,55 @@ ${this.attributes_.map(
             "top-offset": props.legendTopOffset,
             "bottom-offset": props.legendBottomOffset
           }, null, 8, ["position", "width", "collapsible", "default-collapsed", "show-only-visible", "left-offset", "right-offset", "top-offset", "bottom-offset"])) : vue.createCommentVNode("", true),
-          hasLegendSlot.value ? vue.renderSlot(_ctx.$slots, "legend", { key: 10 }) : vue.createCommentVNode("", true),
-          measurementResults.value.length > 0 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$b, [
-            vue.createElementVNode("div", _hoisted_2$a, [
-              _cache[6] || (_cache[6] = vue.createElementVNode("h4", { class: "m-0 text-sm font-semibold text-gray-800" }, "测量结果", -1)),
-              vue.createVNode(_component_el_button, {
-                link: "",
-                size: "small",
-                onClick: clearAllMeasurements,
-                icon: vue.unref(delete_default)
-              }, {
-                default: vue.withCtx(() => [..._cache[5] || (_cache[5] = [
-                  vue.createTextVNode(" 清除 ", -1)
-                ])]),
-                _: 1
-              }, 8, ["icon"])
+          hasLegendSlot.value ? vue.renderSlot(_ctx.$slots, "legend", { key: 10 }, void 0, true) : vue.createCommentVNode("", true),
+          measurementResults.value.length > 0 ? (vue.openBlock(), vue.createBlock(_component_el_card, {
+            key: 11,
+            class: "measurement-card absolute top-15 right-2.5 w-62.5 max-h-75 z-1000 md:w-50 md:top-20 md:right-1.25",
+            "body-style": { padding: "0px" },
+            shadow: "always"
+          }, {
+            header: vue.withCtx(() => [
+              vue.createElementVNode("div", _hoisted_1$b, [
+                _cache[6] || (_cache[6] = vue.createElementVNode("span", {
+                  class: "text-sm font-bold",
+                  style: { "color": "var(--el-text-color-primary)" }
+                }, "测量结果", -1)),
+                vue.createVNode(_component_el_button, {
+                  link: "",
+                  size: "small",
+                  onClick: clearAllMeasurements,
+                  icon: vue.unref(delete_default)
+                }, {
+                  default: vue.withCtx(() => [..._cache[5] || (_cache[5] = [
+                    vue.createTextVNode(" 清除 ", -1)
+                  ])]),
+                  _: 1
+                }, 8, ["icon"])
+              ])
             ]),
-            vue.createElementVNode("div", _hoisted_3$a, [
-              (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(measurementResults.value, (result, index2) => {
-                return vue.openBlock(), vue.createElementBlock("div", {
-                  key: result.id,
-                  class: "flex items-center justify-between px-3 py-2 mb-1 bg-gray-50 rounded transition-colors duration-200 hover:bg-blue-50"
-                }, [
-                  vue.createElementVNode("div", _hoisted_4$a, [
-                    vue.createElementVNode("span", _hoisted_5$a, vue.toDisplayString(result.type === "length" ? "长度" : "面积"), 1),
-                    vue.createElementVNode("span", _hoisted_6$8, vue.toDisplayString(formatMeasurementValue(result)), 1)
-                  ]),
-                  vue.createVNode(_component_el_button, {
-                    link: "",
-                    size: "small",
-                    onClick: ($event) => removeMeasurement(result.id),
-                    icon: vue.unref(close_default)
-                  }, null, 8, ["onClick", "icon"])
-                ]);
-              }), 128))
-            ])
-          ])) : vue.createCommentVNode("", true),
+            default: vue.withCtx(() => [
+              vue.createElementVNode("div", _hoisted_2$a, [
+                (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(measurementResults.value, (result, index2) => {
+                  return vue.openBlock(), vue.createElementBlock("div", {
+                    key: result.id,
+                    class: "measurement-item flex items-center justify-between px-3 py-2 mb-1 rounded transition-colors duration-200"
+                  }, [
+                    vue.createElementVNode("div", _hoisted_3$a, [
+                      vue.createElementVNode("span", _hoisted_4$a, vue.toDisplayString(result.type === "length" ? "长度" : "面积"), 1),
+                      vue.createElementVNode("span", _hoisted_5$a, vue.toDisplayString(formatMeasurementValue(result)), 1)
+                    ]),
+                    vue.createVNode(_component_el_button, {
+                      link: "",
+                      size: "small",
+                      onClick: ($event) => removeMeasurement(result.id),
+                      icon: vue.unref(close_default)
+                    }, null, 8, ["onClick", "icon"])
+                  ]);
+                }), 128))
+              ])
+            ]),
+            _: 1
+          })) : vue.createCommentVNode("", true),
           map2.value && ((_a3 = finalMapConfig.value.baseLayers) == null ? void 0 : _a3.length) ? (vue.openBlock(), vue.createBlock(OlBaseLayerSwitcher, {
             key: 12,
             map: map2.value,
@@ -478626,7 +478538,8 @@ ${this.attributes_.map(
       };
     }
   });
-  const OlMap_vue_vue_type_style_index_0_lang = "";
+  const OlMap_vue_vue_type_style_index_0_scoped_736d12b7_lang = "";
+  const OlMap = /* @__PURE__ */ _export_sfc(_sfc_main$b, [["__scopeId", "data-v-736d12b7"]]);
   const _hoisted_1$a = ["href"];
   const _sfc_main$a = /* @__PURE__ */ vue.defineComponent({
     __name: "index",
@@ -499149,23 +499062,23 @@ ${this.attributes_.map(
     }
   };
   const install = (app) => {
-    app.component("OlMap", _sfc_main$b);
+    app.component("OlMap", OlMap);
     app.component("OlMapContainer", _sfc_main$n);
     app.component("OlDrawToolbar", OlDrawToolbar);
     app.component("OlControlPanel", OlControlPanel);
     app.component("OlMapSearch", _sfc_main$l);
     app.component("OlMapTooltip", _sfc_main$c);
-    app.component("OlLegendPanel", _sfc_main$j);
+    app.component("OlLegendPanel", OlLegendPanel);
     app.component("OlBaseLayerSwitcher", OlBaseLayerSwitcher);
-    app.component("CustomOpenlayer", _sfc_main$b);
+    app.component("CustomOpenlayer", OlMap);
     app.component("CustomDialog", _sfc_main$9);
     app.component("EPlusDialog", X$1);
     app.component("SvgIcon", _sfc_main$a);
   };
   const index$3 = {
     install,
-    OlMap: _sfc_main$b,
-    CustomOpenlayer: _sfc_main$b,
+    OlMap,
+    CustomOpenlayer: OlMap,
     CustomDialog: _sfc_main$9,
     EPlusDialog: X$1,
     SvgIcon: _sfc_main$a
@@ -500219,15 +500132,15 @@ ${this.attributes_.map(
         const _component_el_option_group = vue.resolveComponent("el-option-group");
         const _component_el_select = vue.resolveComponent("el-select");
         const _component_el_button = vue.resolveComponent("el-button");
-        const _component_EPlusDialog = vue.resolveComponent("EPlusDialog");
-        return vue.openBlock(), vue.createBlock(_component_EPlusDialog, {
+        return vue.openBlock(), vue.createBlock(vue.unref(X$1), {
           modelValue: dialogVisible.value,
           "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => dialogVisible.value = $event),
           title: "图上量算",
           width: "400px",
           "before-close": handleClose,
           "show-modal": false,
-          cacheId: "measurement-dialog"
+          cacheId: "measurement-dialog",
+          "append-to-body": ""
         }, {
           default: vue.withCtx(() => [
             vue.createElementVNode("div", _hoisted_1$8, [
@@ -500291,7 +500204,7 @@ ${this.attributes_.map(
                   type: "text",
                   size: "small",
                   onClick: clearMeasurement,
-                  style: { "color": "#ff4757" }
+                  style: { "color": "var(--el-color-danger)" }
                 }, {
                   default: vue.withCtx(() => [..._cache[2] || (_cache[2] = [
                     vue.createTextVNode(" 清除 ", -1)
@@ -500325,8 +500238,8 @@ ${this.attributes_.map(
       };
     }
   });
-  const MeasurementDialog_vue_vue_type_style_index_0_scoped_ac238457_lang = "";
-  const MeasurementDialog = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["__scopeId", "data-v-ac238457"]]);
+  const MeasurementDialog_vue_vue_type_style_index_0_scoped_60e80f64_lang = "";
+  const MeasurementDialog = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["__scopeId", "data-v-60e80f64"]]);
   const MeasurementDialog$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
     __proto__: null,
     default: MeasurementDialog
@@ -500562,8 +500475,7 @@ ${this.attributes_.map(
         }
       };
       return (_ctx, _cache) => {
-        const _component_EPlusDialog = vue.resolveComponent("EPlusDialog");
-        return vue.openBlock(), vue.createBlock(_component_EPlusDialog, {
+        return vue.openBlock(), vue.createBlock(vue.unref(X$1), {
           modelValue: visible.value,
           "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => visible.value = $event),
           title: "底图选择",
@@ -500572,10 +500484,10 @@ ${this.attributes_.map(
           "show-modal": false,
           draggable: true,
           resizable: true,
-          "show-close": true,
           cacheId: "basemap-dialog",
           position: "right",
           class: "basemap-dialog",
+          "append-to-body": "",
           onClose: handleClose
         }, {
           default: vue.withCtx(() => [
@@ -500605,10 +500517,11 @@ ${this.attributes_.map(
       };
     }
   });
-  const BasemapPanel_vue_vue_type_style_index_0_lang = "";
-  const BasemapPanel = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  const BasemapPanel_vue_vue_type_style_index_0_scoped_75f232fd_lang = "";
+  const BasemapPanel = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["__scopeId", "data-v-75f232fd"]]);
+  const BasemapPanel$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
     __proto__: null,
-    default: _sfc_main$7
+    default: BasemapPanel
   }, Symbol.toStringTag, { value: "Module" }));
   const _hoisted_1$6 = { class: "coordinate-content" };
   const _hoisted_2$6 = { class: "format-selection" };
@@ -513735,7 +513648,7 @@ ${this.attributes_.map(
   exports2.BaseDrawing = BaseDrawing;
   exports2.BasemapManager = BasemapManager;
   exports2.CustomDialog = _sfc_main$9;
-  exports2.CustomOpenlayer = _sfc_main$b;
+  exports2.CustomOpenlayer = OlMap;
   exports2.DrawingFactoryRegistry = DrawingFactoryRegistry;
   exports2.DrawingManager = DrawingManager;
   exports2.DrawingManagerFactory = DrawingManagerFactory;
@@ -513765,8 +513678,8 @@ ${this.attributes_.map(
   exports2.OlBaseLayerSwitcher = OlBaseLayerSwitcher;
   exports2.OlControlPanel = OlControlPanel;
   exports2.OlDrawToolbar = OlDrawToolbar;
-  exports2.OlLegendPanel = _sfc_main$j;
-  exports2.OlMap = _sfc_main$b;
+  exports2.OlLegendPanel = OlLegendPanel;
+  exports2.OlMap = OlMap;
   exports2.OlMapContainer = _sfc_main$n;
   exports2.OlMapSearch = _sfc_main$l;
   exports2.OlMapTooltip = _sfc_main$c;