vue-openlayers-plugin 1.2.5 → 1.2.7

package/lib/index.umd.js

@@ -51540,6 +51540,12 @@ ${this.attributes_.map(
         if (interaction === this._drawInteraction || interaction === this._selectInteraction || interaction === this._modifyInteraction || interaction === this._snapInteraction) {
           return;
         }
+        if (!enable && this.shouldKeepInteractionActiveDuringDrawing(interaction)) {
+          if (interaction.setActive) {
+            interaction.setActive(true);
+          }
+          return;
+        }
         if (interaction.setActive) {
           interaction.setActive(enable);
         }
@@ -51547,6 +51553,12 @@ ${this.attributes_.map(
       this.toggleMapEventListeners(enable);
       console.log(`地图其他交互已${enable ? "启用" : "禁用"}`);
     }
+    /**
+     * 判断绘制期间是否需要保留地图交互
+     */
+    shouldKeepInteractionActiveDuringDrawing(interaction) {
+      return interaction instanceof MouseWheelZoom$1 || interaction instanceof PinchZoom$1;
+    }
     /**
      * 控制地图事件监听器的启用/禁用
      */
@@ -335083,7 +335095,7 @@ ${indentData}`);
   };
   const _hoisted_12$b = ["onClick"];
   const _hoisted_13$a = ["src", "alt"];
-  const _hoisted_14$7 = {
+  const _hoisted_14$8 = {
     key: 3,
     class: "slideshow-controls"
   };
@@ -335299,7 +335311,7 @@ ${indentData}`);
                   ], 10, _hoisted_12$b);
                 }), 128))
               ])) : vue.createCommentVNode("", true),
-              _ctx.config.slideshow && imageList.value.length > 1 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_14$7, [
+              _ctx.config.slideshow && imageList.value.length > 1 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_14$8, [
                 vue.createVNode(vue.unref(elementPlus.ElButton), {
                   class: vue.normalizeClass(["slideshow-btn", { active: isSlideshow.value }]),
                   type: isSlideshow.value ? "primary" : "default",
@@ -335381,7 +335393,7 @@ ${indentData}`);
     class: "sort-indicator"
   };
   const _hoisted_13$9 = ["onClick"];
-  const _hoisted_14$6 = { key: 0 };
+  const _hoisted_14$7 = { key: 0 };
   const _hoisted_15$5 = ["src", "alt"];
   const _hoisted_16$5 = { key: 1 };
   const _hoisted_17$5 = ["href"];
@@ -335664,7 +335676,7 @@ ${indentData}`);
                             return vue.openBlock(), vue.createElementBlock("td", {
                               key: field.key
                             }, [
-                              field.type === "image" ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_14$6, [
+                              field.type === "image" ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_14$7, [
                                 vue.createElementVNode("img", {
                                   src: getFieldValue(item, field.key || field.name),
                                   alt: field.label,
@@ -339189,7 +339201,7 @@ ${indentData}`);
   const _hoisted_11$b = { class: "result-count" };
   const _hoisted_12$9 = ["onClick"];
   const _hoisted_13$8 = { class: "item-content" };
-  const _hoisted_14$5 = ["innerHTML"];
+  const _hoisted_14$6 = ["innerHTML"];
   const _hoisted_15$4 = ["innerHTML"];
   const _hoisted_16$4 = {
     key: 0,
@@ -339720,7 +339732,7 @@ ${indentData}`);
                         vue.createElementVNode("div", {
                           class: "item-name",
                           innerHTML: highlightText(result.name, searchQuery.value)
-                        }, null, 8, _hoisted_14$5),
+                        }, null, 8, _hoisted_14$6),
                         vue.createElementVNode("div", {
                           class: "item-address",
                           innerHTML: highlightText(result.address, searchQuery.value)
@@ -339909,17 +339921,21 @@ ${indentData}`);
   const _hoisted_9$c = { class: "drawing-tool-list" };
   const _hoisted_10$c = {
     key: 0,
-    class: "drawing-menu-divider"
+    class: "drawing-import-row"
   };
   const _hoisted_11$a = {
     key: 1,
-    class: "drawing-toggle-row"
+    class: "drawing-menu-divider"
   };
   const _hoisted_12$8 = {
+    key: 2,
+    class: "drawing-toggle-row"
+  };
+  const _hoisted_13$7 = {
     key: 7,
     class: "control-divider"
   };
-  const _hoisted_13$7 = {
+  const _hoisted_14$5 = {
     key: 8,
     class: "control-section"
   };
@@ -339935,7 +339951,7 @@ ${indentData}`);
       bottomOffset: {},
       viewBookmarks: {}
     },
-    emits: ["drawing-complete", "drawing-clear"],
+    emits: ["drawing-complete", "drawing-clear", "drawing-import"],
     setup(__props, { expose: __expose, emit: __emit }) {
       const props = __props;
       const emit = __emit;
@@ -340063,7 +340079,7 @@ ${indentData}`);
         return !!((tools == null ? void 0 : tools.viewBookmarks) || props.config.viewBookmarks);
       });
       const drawingControlConfig = vue.computed(() => {
-        var _a2;
+        var _a2, _b2, _c2, _d;
         const rawConfig = ((_a2 = props.config.tools) == null ? void 0 : _a2.drawing) ?? props.config.drawing;
         if (rawConfig === false) {
           return {
@@ -340071,8 +340087,15 @@ ${indentData}`);
             trigger: "hover",
             continuous: false,
             showContinuousToggle: true,
+            showImportButton: false,
+            importOptions: {
+              clearBeforeImport: false,
+              fitToImported: true,
+              accept: ".json,.geojson"
+            },
             tools: DEFAULT_DRAWING_TOOLS,
-            onDrawEnd: void 0
+            onDrawEnd: void 0,
+            onImportEnd: void 0
           };
         }
         if (rawConfig === true || rawConfig === void 0) {
@@ -340081,8 +340104,15 @@ ${indentData}`);
             trigger: "hover",
             continuous: false,
             showContinuousToggle: true,
+            showImportButton: false,
+            importOptions: {
+              clearBeforeImport: false,
+              fitToImported: true,
+              accept: ".json,.geojson"
+            },
             tools: DEFAULT_DRAWING_TOOLS,
-            onDrawEnd: void 0
+            onDrawEnd: void 0,
+            onImportEnd: void 0
           };
         }
         const config = rawConfig;
@@ -340094,8 +340124,15 @@ ${indentData}`);
           trigger: config.trigger || "hover",
           continuous: config.continuous ?? false,
           showContinuousToggle: config.showContinuousToggle !== false,
+          showImportButton: config.showImportButton === true,
+          importOptions: {
+            clearBeforeImport: ((_b2 = config.importOptions) == null ? void 0 : _b2.clearBeforeImport) ?? false,
+            fitToImported: ((_c2 = config.importOptions) == null ? void 0 : _c2.fitToImported) ?? true,
+            accept: ((_d = config.importOptions) == null ? void 0 : _d.accept) || ".json,.geojson"
+          },
           tools: tools.length > 0 ? Array.from(new Set(tools)) : DEFAULT_DRAWING_TOOLS,
-          onDrawEnd: config.onDrawEnd
+          onDrawEnd: config.onDrawEnd,
+          onImportEnd: config.onImportEnd
         };
       });
       const isDrawingEnabled = vue.computed(() => drawingControlConfig.value.enabled);
@@ -340313,6 +340350,136 @@ ${indentData}`);
           source: "controls"
         };
       };
+      const normalizeImportedGeoJSON = (rawData) => {
+        if (typeof rawData === "string") {
+          const trimmed = rawData.trim();
+          if (!trimmed) {
+            throw new Error("文件内容为空");
+          }
+          return normalizeImportedGeoJSON(
+            JSON.parse(trimmed)
+          );
+        }
+        if (!rawData || typeof rawData !== "object") {
+          throw new Error("仅支持导入 GeoJSON 对象");
+        }
+        const geoJson = rawData;
+        if (geoJson.type === "FeatureCollection" && Array.isArray(geoJson.features)) {
+          return geoJson;
+        }
+        if (geoJson.type === "Feature") {
+          return geoJson;
+        }
+        if ("coordinates" in geoJson && typeof geoJson.type === "string") {
+          return geoJson;
+        }
+        throw new Error("文件不是有效的 GeoJSON 格式");
+      };
+      const collectImportedExtent = (geojson) => {
+        var _a2;
+        if (!currentMap.value)
+          return null;
+        try {
+          const features2 = geoJsonFormat.readFeatures(geojson, {
+            dataProjection: "EPSG:4326",
+            featureProjection: currentMap.value.getView().getProjection()
+          });
+          if (!features2.length) {
+            return null;
+          }
+          let extent3 = (_a2 = features2[0].getGeometry()) == null ? void 0 : _a2.getExtent();
+          if (!extent3) {
+            return null;
+          }
+          for (let i2 = 1; i2 < features2.length; i2 += 1) {
+            const geometry = features2[i2].getGeometry();
+            if (!geometry)
+              continue;
+            const currentExtent = geometry.getExtent();
+            extent3 = [
+              Math.min(extent3[0], currentExtent[0]),
+              Math.min(extent3[1], currentExtent[1]),
+              Math.max(extent3[2], currentExtent[2]),
+              Math.max(extent3[3], currentExtent[3])
+            ];
+          }
+          return extent3;
+        } catch (error2) {
+          console.warn("解析导入图形范围失败:", error2);
+          return null;
+        }
+      };
+      const fitToImportedGeoJSON = (geojson) => {
+        if (!currentMap.value)
+          return;
+        const extent3 = collectImportedExtent(geojson);
+        if (!extent3)
+          return;
+        currentMap.value.getView().fit(extent3, {
+          duration: 500,
+          padding: [30, 30, 30, 30],
+          maxZoom: 18
+        });
+      };
+      const importDrawings = () => {
+        var _a2;
+        const drawingManager = (_a2 = mapManager == null ? void 0 : mapManager.value) == null ? void 0 : _a2.getDrawingManager();
+        if (!drawingManager) {
+          elementPlus.ElMessage.warning("绘制管理器未初始化");
+          return;
+        }
+        const input = document.createElement("input");
+        input.type = "file";
+        input.accept = drawingControlConfig.value.importOptions.accept;
+        input.onchange = (event) => {
+          var _a3;
+          const file = (_a3 = event.target.files) == null ? void 0 : _a3[0];
+          if (!file) {
+            return;
+          }
+          const reader = new FileReader();
+          reader.onload = (loadEvent) => {
+            var _a4, _b2, _c2;
+            try {
+              const parsedGeojson = normalizeImportedGeoJSON(
+                ((_a4 = loadEvent.target) == null ? void 0 : _a4.result) ?? ""
+              );
+              if (drawingControlConfig.value.importOptions.clearBeforeImport) {
+                drawingManager.clearAll();
+              }
+              const drawings = drawingManager.addGeoJSONData(parsedGeojson);
+              if (!drawings.length) {
+                elementPlus.ElMessage.warning("未识别到可导入的图形");
+                return;
+              }
+              if (drawingControlConfig.value.importOptions.fitToImported) {
+                fitToImportedGeoJSON(parsedGeojson);
+              }
+              const result = {
+                fileName: file.name,
+                importedCount: drawings.length,
+                geojson: parsedGeojson,
+                drawings: drawings.map((drawing) => buildDrawingResult(drawing)),
+                source: "controls"
+              };
+              (_c2 = (_b2 = drawingControlConfig.value).onImportEnd) == null ? void 0 : _c2.call(_b2, result);
+              emit("drawing-import", result);
+              elementPlus.ElMessage.success(`成功导入 ${drawings.length} 个图形`);
+              isDrawingMenuOpen.value = false;
+            } catch (error2) {
+              console.error("导入图形失败:", error2);
+              elementPlus.ElMessage.error(
+                error2 instanceof Error ? error2.message : "导入图形失败"
+              );
+            }
+          };
+          reader.onerror = () => {
+            elementPlus.ElMessage.error("读取文件失败");
+          };
+          reader.readAsText(file);
+        };
+        input.click();
+      };
       const cleanupDrawingListeners = () => {
         if (boundDrawingManager && boundDrawingEndHandler && boundModeChangeHandler) {
           boundDrawingManager.off("drawing-end", boundDrawingEndHandler);
@@ -340727,7 +340894,7 @@ ${indentData}`);
                 ]),
                 default: vue.withCtx(() => [
                   vue.createElementVNode("div", _hoisted_8$d, [
-                    _cache[5] || (_cache[5] = vue.createElementVNode("div", { class: "drawing-menu-title" }, "快捷绘制", -1)),
+                    _cache[6] || (_cache[6] = vue.createElementVNode("div", { class: "drawing-menu-title" }, "快捷绘制", -1)),
                     vue.createElementVNode("div", _hoisted_9$c, [
                       (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(drawingControlConfig.value.tools, (tool) => {
                         return vue.openBlock(), vue.createBlock(vue.unref(elementPlus.ElTooltip), {
@@ -340778,26 +340945,45 @@ ${indentData}`);
                         }, 1032, ["content"]);
                       }), 128))
                     ]),
-                    drawingControlConfig.value.showContinuousToggle || isDrawingActive.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_10$c)) : vue.createCommentVNode("", true),
-                    drawingControlConfig.value.showContinuousToggle ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_11$a, [
+                    drawingControlConfig.value.showImportButton ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_10$c, [
+                      vue.createVNode(vue.unref(elementPlus.ElButton), {
+                        size: "small",
+                        text: "",
+                        class: "drawing-import-btn",
+                        onClick: importDrawings
+                      }, {
+                        default: vue.withCtx(() => [
+                          vue.createVNode(vue.unref(elementPlus.ElIcon), null, {
+                            default: vue.withCtx(() => [
+                              vue.createVNode(vue.unref(iconsVue.Upload))
+                            ]),
+                            _: 1
+                          }),
+                          _cache[3] || (_cache[3] = vue.createElementVNode("span", null, "导入图形", -1))
+                        ]),
+                        _: 1
+                      })
+                    ])) : vue.createCommentVNode("", true),
+                    drawingControlConfig.value.showContinuousToggle || isDrawingActive.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_11$a)) : vue.createCommentVNode("", true),
+                    drawingControlConfig.value.showContinuousToggle ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_12$8, [
                       vue.createVNode(vue.unref(elementPlus.ElCheckbox), {
                         modelValue: continuousDrawing.value,
                         "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => continuousDrawing.value = $event)
                       }, {
-                        default: vue.withCtx(() => [..._cache[3] || (_cache[3] = [
+                        default: vue.withCtx(() => [..._cache[4] || (_cache[4] = [
                           vue.createTextVNode(" 是否连续绘制 ", -1)
                         ])]),
                         _: 1
                       }, 8, ["modelValue"])
                     ])) : vue.createCommentVNode("", true),
                     isDrawingActive.value ? (vue.openBlock(), vue.createBlock(vue.unref(elementPlus.ElButton), {
-                      key: 2,
+                      key: 3,
                       size: "small",
                       text: "",
                       class: "drawing-stop-btn",
                       onClick: stopQuickDrawing
                     }, {
-                      default: vue.withCtx(() => [..._cache[4] || (_cache[4] = [
+                      default: vue.withCtx(() => [..._cache[5] || (_cache[5] = [
                         vue.createTextVNode(" 停止绘制 ", -1)
                       ])]),
                       _: 1
@@ -340807,8 +340993,8 @@ ${indentData}`);
                 _: 1
               }, 8, ["placement", "trigger", "visible", "disabled"])
             ])) : vue.createCommentVNode("", true),
-            (((_o2 = _ctx.config.tools) == null ? void 0 : _o2.clearAll) || _ctx.config.clearAll) && (hasOtherTools.value || isDrawingEnabled.value || ((_p = _ctx.config.tools) == null ? void 0 : _p.zoom) || _ctx.config.zoom || ((_q = _ctx.config.tools) == null ? void 0 : _q.rotate) || _ctx.config.rotate) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_12$8)) : vue.createCommentVNode("", true),
-            ((_r2 = _ctx.config.tools) == null ? void 0 : _r2.clearAll) || _ctx.config.clearAll ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_13$7, [
+            (((_o2 = _ctx.config.tools) == null ? void 0 : _o2.clearAll) || _ctx.config.clearAll) && (hasOtherTools.value || isDrawingEnabled.value || ((_p = _ctx.config.tools) == null ? void 0 : _p.zoom) || _ctx.config.zoom || ((_q = _ctx.config.tools) == null ? void 0 : _q.rotate) || _ctx.config.rotate) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_13$7)) : vue.createCommentVNode("", true),
+            ((_r2 = _ctx.config.tools) == null ? void 0 : _r2.clearAll) || _ctx.config.clearAll ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_14$5, [
               vue.createVNode(vue.unref(elementPlus.ElButton), {
                 class: "control-btn",
                 title: "清空绘制内容",
@@ -340832,8 +341018,8 @@ ${indentData}`);
       };
     }
   });
-  const OlControlPanel_vue_vue_type_style_index_0_scoped_2ee216d4_lang = "";
-  const OlControlPanel = /* @__PURE__ */ _export_sfc(_sfc_main$w, [["__scopeId", "data-v-2ee216d4"]]);
+  const OlControlPanel_vue_vue_type_style_index_0_scoped_5317d890_lang = "";
+  const OlControlPanel = /* @__PURE__ */ _export_sfc(_sfc_main$w, [["__scopeId", "data-v-5317d890"]]);
   const _hoisted_1$u = {
     key: 0,
     class: "ol-legend-header"
@@ -366118,7 +366304,7 @@ ${indentData}`);
       popupConfig: {},
       enableGeolocation: { type: Boolean, default: true }
     },
-    emits: ["map-ready", "map-click", "map-dblclick", "map-contextmenu", "map-move", "zoom-change", "feature-click", "tooltip-show", "tooltip-hide", "layer-change", "measurement-change", "measurement-start", "measurement-end", "measurement-result", "context-menu", "bookmark-action", "marker-action", "tool-action", "drawing-complete", "drawing-clear", "search", "search-select", "search-clear", "popup-show", "popup-hide", "popup-close"],
+    emits: ["map-ready", "map-click", "map-dblclick", "map-contextmenu", "map-move", "zoom-change", "feature-click", "tooltip-show", "tooltip-hide", "layer-change", "measurement-change", "measurement-start", "measurement-end", "measurement-result", "context-menu", "bookmark-action", "marker-action", "tool-action", "drawing-complete", "drawing-clear", "drawing-import", "search", "search-select", "search-clear", "popup-show", "popup-hide", "popup-close"],
     setup(__props, { expose: __expose, emit: __emit }) {
       const currentLegends = vue.ref([]);
       const currentLayers = vue.ref([]);
@@ -366990,6 +367176,9 @@ ${indentData}`);
       const onDrawingClear = (event) => {
         emit("drawing-clear", event);
       };
+      const onDrawingImport = (result) => {
+        emit("drawing-import", result);
+      };
       const onPrintAction = (data2) => {
         console.log("打印操作:", data2);
         switch (data2.action) {
@@ -367678,7 +367867,8 @@ ${indentData}`);
             "bottom-offset": finalControlsConfig.value.bottomOffset,
             "view-bookmarks": props.viewBookmarks,
             onDrawingComplete,
-            onDrawingClear
+            onDrawingClear,
+            onDrawingImport
           }, {
             custom: vue.withCtx(({ controls }) => [
               vue.renderSlot(_ctx.$slots, "controls", {
@@ -367815,8 +368005,8 @@ ${indentData}`);
       };
     }
   });
-  const OlMap_vue_vue_type_style_index_0_scoped_610dbb17_lang = "";
-  const OlMap = /* @__PURE__ */ _export_sfc(_sfc_main$n, [["__scopeId", "data-v-610dbb17"]]);
+  const OlMap_vue_vue_type_style_index_0_scoped_984651bc_lang = "";
+  const OlMap = /* @__PURE__ */ _export_sfc(_sfc_main$n, [["__scopeId", "data-v-984651bc"]]);
   const ol = "";
   const Property$1 = {
     ACCURACY: "accuracy",

package/lib/style.css

@@ -888,7 +888,7 @@ to {
   .position-bottom-right {
     bottom: 5px;
 }
-}.control-bar[data-v-2ee216d4] {
+}.control-bar[data-v-5317d890] {
   display: flex;
   align-items: center;
   gap: 0;
@@ -901,77 +901,77 @@ to {
   border: 1px solid var(--el-border-color-light);
   transition: all 0.3s ease;
 }
-.control-bar[data-v-2ee216d4]:hover {
+.control-bar[data-v-5317d890]:hover {
   box-shadow: var(--el-box-shadow);
   border-color: var(--el-border-color-hover);
 }
-.control-bar.flex-col[data-v-2ee216d4] {
+.control-bar.flex-col[data-v-5317d890] {
   flex-direction: column;
   width: fit-content;
 }
-.control-bar.flex-row[data-v-2ee216d4] {
+.control-bar.flex-row[data-v-5317d890] {
   flex-direction: row;
   height: fit-content;
 }
-.control-section[data-v-2ee216d4] {
+.control-section[data-v-5317d890] {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 4px;
   /* Inherit direction from parent implicitly via flex layout */
 }
-.flex-col .control-section[data-v-2ee216d4] {
+.flex-col .control-section[data-v-5317d890] {
   flex-direction: column;
   width: 100%;
 }
-.flex-row .control-section[data-v-2ee216d4] {
+.flex-row .control-section[data-v-5317d890] {
   flex-direction: row;
   height: 100%;
 }
-.control-divider[data-v-2ee216d4] {
+.control-divider[data-v-5317d890] {
   background-color: var(--el-border-color-light);
 }
-.flex-col .control-divider[data-v-2ee216d4] {
+.flex-col .control-divider[data-v-5317d890] {
   width: 80%;
   height: 1px;
   margin: 4px 0;
 }
-.flex-row .control-divider[data-v-2ee216d4] {
+.flex-row .control-divider[data-v-5317d890] {
   width: 1px;
   height: 16px; /* Explicit height for horizontal mode */
   margin: 0 4px;
 }
 
 /* ensure buttons themselves are interactive */
-.control-btn[data-v-2ee216d4] {
+.control-btn[data-v-5317d890] {
   pointer-events: auto;
   margin: 0 !important; /* Ensure no margin interferes */
   transition: transform 0.1s;
 }
-.control-btn[data-v-2ee216d4]:active {
+.control-btn[data-v-5317d890]:active {
   transform: scale(0.95);
 }
 
 /* reset Element Plus button default adjacent margin and use our gap instead */
-[data-v-2ee216d4] .el-button + .el-button {
+[data-v-5317d890] .el-button + .el-button {
   margin-left: 0 !important;
 }
 
 /* make sure all EP interactive widgets are clickable */
-[data-v-2ee216d4] .el-button,[data-v-2ee216d4] .el-slider,[data-v-2ee216d4] .el-icon {
+[data-v-5317d890] .el-button,[data-v-5317d890] .el-slider,[data-v-5317d890] .el-icon {
   pointer-events: auto;
 }
-.drawing-menu-panel-content[data-v-2ee216d4] {
+.drawing-menu-panel-content[data-v-5317d890] {
   display: flex;
   flex-direction: column;
 }
-.drawing-menu-title[data-v-2ee216d4] {
+.drawing-menu-title[data-v-5317d890] {
   margin-bottom: 8px;
   font-size: 12px;
   font-weight: 600;
   color: var(--el-text-color-primary);
 }
-.drawing-tool-list[data-v-2ee216d4] {
+.drawing-tool-list[data-v-5317d890] {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 8px;
@@ -979,7 +979,7 @@ to {
   overflow-y: auto;
   padding: 4px;
 }
-.drawing-tool-btn[data-v-2ee216d4] {
+.drawing-tool-btn[data-v-5317d890] {
   width: 32px;
   height: 32px;
   margin: 0 !important;
@@ -988,17 +988,24 @@ to {
   align-items: center;
   font-size: 16px; /* Icon size */
 }
-.drawing-menu-divider[data-v-2ee216d4] {
+.drawing-import-row[data-v-5317d890] {
+  margin-top: 8px;
+}
+.drawing-import-btn[data-v-5317d890] {
+  width: 100%;
+  justify-content: flex-start;
+}
+.drawing-menu-divider[data-v-5317d890] {
   height: 1px;
   margin: 8px 0;
   background: var(--el-border-color-light);
 }
-.drawing-toggle-row[data-v-2ee216d4] {
+.drawing-toggle-row[data-v-5317d890] {
   display: flex;
   align-items: center;
   justify-content: space-between;
 }
-.drawing-stop-btn[data-v-2ee216d4] {
+.drawing-stop-btn[data-v-5317d890] {
   justify-content: flex-start;
   width: 100%;
   margin-top: 6px !important;
@@ -1725,7 +1732,7 @@ label {
   width: 100% !important;
   height: 100% !important;
 }
-.context-menu[data-v-610dbb17] {
+.context-menu[data-v-984651bc] {
   background: var(--el-bg-color-overlay);
   border: 1px solid var(--el-border-color-light);
   border-radius: var(--el-border-radius-base);
@@ -1734,7 +1741,7 @@ label {
   min-width: 140px;
   overflow: hidden;
 }
-.context-menu .context-menu-item[data-v-610dbb17] {
+.context-menu .context-menu-item[data-v-984651bc] {
   display: flex;
   align-items: center;
   padding: 8px 16px;
@@ -1743,14 +1750,14 @@ label {
   color: var(--el-text-color-primary);
   transition: all 0.2s;
 }
-.context-menu .context-menu-item[data-v-610dbb17]:hover {
+.context-menu .context-menu-item[data-v-984651bc]:hover {
   background-color: var(--el-fill-color-light);
   color: var(--el-color-primary);
 }
-.context-menu .context-menu-item:hover .el-icon[data-v-610dbb17] {
+.context-menu .context-menu-item:hover .el-icon[data-v-984651bc] {
   color: var(--el-color-primary);
 }
-.context-menu .context-menu-item .el-icon[data-v-610dbb17] {
+.context-menu .context-menu-item .el-icon[data-v-984651bc] {
   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.2.5",
+  "version": "1.2.7",
   "description": "A Vue 3 plugin for OpenLayers with custom components and utilities",
   "main": "lib/index.umd.js",
   "module": "lib/index.esm.js",

package/types/components/OlControlPanel.vue.d.ts

@@ -1,6 +1,6 @@
 import { Ref } from 'vue';
 import { Map } from 'ol';
-import { MapControlsConfig, MapControlDrawingClearEvent, MapControlDrawingResult, ViewBookmark } from '../types';
+import { MapControlsConfig, MapControlDrawingClearEvent, MapControlDrawingImportResult, MapControlDrawingResult, ViewBookmark } from '../types';
 
 interface Props {
     config: MapControlsConfig;
@@ -39,12 +39,14 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
 }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     "drawing-complete": (result: MapControlDrawingResult) => void;
     "drawing-clear": (event: MapControlDrawingClearEvent) => void;
+    "drawing-import": (result: MapControlDrawingImportResult) => void;
 }, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<Props>, {
     position: string;
     direction: string;
 }>>> & Readonly<{
     "onDrawing-complete"?: (result: MapControlDrawingResult) => any;
     "onDrawing-clear"?: (event: MapControlDrawingClearEvent) => any;
+    "onDrawing-import"?: (result: MapControlDrawingImportResult) => any;
 }>, {
     position: "bottom-left" | "bottom-right" | "top-left" | "top-right";
     direction: "horizontal" | "vertical";

package/types/components/OlControlPanel.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"OlControlPanel.vue.d.ts","sourceRoot":"","sources":["../../src/components/OlControlPanel.vue"],"names":[],"mappings":"AAmUA;AAsBA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC/B,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,IAAI,CAAC;AAkB9B,OAAO,KAAK,EACV,iBAAiB,EAEjB,2BAA2B,EAC3B,uBAAuB,EAEvB,YAAY,EACb,MAAM,UAAU,CAAC;AAKlB,UAAU,KAAK;IACb,MAAM,EAAE,iBAAiB,CAAC;IAC1B,QAAQ,CAAC,EAAE,UAAU,GAAG,WAAW,GAAG,aAAa,GAAG,cAAc,CAAC;IACrE,SAAS,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACtC,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC7B,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC9B,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC/B,aAAa,CAAC,EAAE,YAAY,EAAE,CAAC;CAChC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAo2DD,wBAQG;AACH,KAAK,sBAAsB,CAAC,CAAC,IAAI,CAAC,SAAS,SAAS,GAAG,KAAK,GAAG,CAAC,CAAC;AACjE,KAAK,6BAA6B,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE,SAAS,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;KAAE,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAAC,QAAQ,EAAE,IAAI,CAAA;KAAE;CAAE,CAAC;AAC9M,KAAK,kBAAkB,CAAC,CAAC,EAAE,CAAC,IAAI;KAE1B,CAAC,IAAI,MAAM,IAAI,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC,GAAG,CAAC,SAAS,MAAM,CAAC,GAAG,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG;QACxE,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC,CAAA;KACb,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CACT,CAAC;AACN,KAAK,cAAc,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,GAAG,EAAE,CAAC"}
+{"version":3,"file":"OlControlPanel.vue.d.ts","sourceRoot":"","sources":["../../src/components/OlControlPanel.vue"],"names":[],"mappings":"AA+UA;AA8BA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC/B,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,IAAI,CAAC;AAmB9B,OAAO,KAAK,EACV,iBAAiB,EAEjB,2BAA2B,EAC3B,6BAA6B,EAC7B,uBAAuB,EAEvB,YAAY,EACb,MAAM,UAAU,CAAC;AAKlB,UAAU,KAAK;IACb,MAAM,EAAE,iBAAiB,CAAC;IAC1B,QAAQ,CAAC,EAAE,UAAU,GAAG,WAAW,GAAG,aAAa,GAAG,cAAc,CAAC;IACrE,SAAS,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACtC,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC7B,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC9B,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC/B,aAAa,CAAC,EAAE,YAAY,EAAE,CAAC;CAChC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0lED,wBAQG;AACH,KAAK,sBAAsB,CAAC,CAAC,IAAI,CAAC,SAAS,SAAS,GAAG,KAAK,GAAG,CAAC,CAAC;AACjE,KAAK,6BAA6B,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE,SAAS,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;KAAE,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAAC,QAAQ,EAAE,IAAI,CAAA;KAAE;CAAE,CAAC;AAC9M,KAAK,kBAAkB,CAAC,CAAC,EAAE,CAAC,IAAI;KAE1B,CAAC,IAAI,MAAM,IAAI,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC,GAAG,CAAC,SAAS,MAAM,CAAC,GAAG,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG;QACxE,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC,CAAA;KACb,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CACT,CAAC;AACN,KAAK,cAAc,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,GAAG,EAAE,CAAC"}

package/types/components/OlMap.vue.d.ts

@@ -2,7 +2,7 @@ import { default as Map } from 'ol/Map';
 import { MeasurementTool } from '../core/measurementTool';
 import { PopupManager, PopupConfig, PopupType, PopupManagerConfig } from './OlMapPopup';
 import { GeoJSONInput } from '../core/geoJsonLocationTool';
-import { MapConfig, LayerConfig, LegendConfig, MeasurementResult, MapEventCallbacks, MapClickEvent, TooltipTemplate, TooltipData, SearchResult, FeatureInput, LayerInput, MapControlsConfig, MapControlDrawingClearEvent, MapControlDrawingResult, MapSearchConfig, ViewBookmark, BookmarkAction } from '../types';
+import { MapConfig, LayerConfig, LegendConfig, MeasurementResult, MapEventCallbacks, MapClickEvent, TooltipTemplate, TooltipData, SearchResult, FeatureInput, LayerInput, MapControlsConfig, MapControlDrawingClearEvent, MapControlDrawingImportResult, MapControlDrawingResult, MapSearchConfig, ViewBookmark, BookmarkAction } from '../types';
 import { DrawingManagerConfig } from '../core/drawing/DrawingManager';
 
 interface Props {
@@ -238,6 +238,7 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<im
     "tool-action": (data: Record<string, any>) => void;
     "drawing-complete": (result: MapControlDrawingResult) => void;
     "drawing-clear": (event: MapControlDrawingClearEvent) => void;
+    "drawing-import": (result: MapControlDrawingImportResult) => void;
     search: (query: string) => void;
     "search-select": (result: SearchResult) => void;
     "search-clear": () => void;
@@ -283,6 +284,7 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<im
     "onBookmark-action"?: (data: BookmarkAction) => any;
     "onDrawing-complete"?: (result: MapControlDrawingResult) => any;
     "onDrawing-clear"?: (event: MapControlDrawingClearEvent) => any;
+    "onDrawing-import"?: (result: MapControlDrawingImportResult) => any;
     "onTool-action"?: (data: Record<string, any>) => any;
     "onMap-dblclick"?: (event: MapClickEvent) => any;
     "onMap-contextmenu"?: (event: MapClickEvent) => any;