vue-openlayers-plugin 1.0.82 → 1.0.85

package/lib/index-5b1583d0.mjs

@@ -0,0 +1,839 @@
+import { inject, computed, ref, onMounted, resolveComponent, openBlock, createElementBlock, createVNode, withCtx, Fragment, renderList, createElementVNode, normalizeClass, toDisplayString, unref, createTextVNode, createCommentVNode, createBlock } from "vue";
+import { d as _export_sfc, $ as DrawingManager, a0 as close_default } from "./index-5a13e877.mjs";
+import "ol";
+const icons = {
+  pointMarker: "/icons/point.png",
+  editMarker: "/icons/edit.png",
+  deleteMarker: "/icons/delete.png",
+  qqMarker: "/icons/qq.png",
+  typhoonMarker: "/icons/typhoon.png",
+  roadMarker: "/icons/road.png"
+};
+const _hoisted_1$2 = { class: "mark-tab-container" };
+const _hoisted_2$2 = { class: "continuous-switch" };
+const _hoisted_3$2 = { class: "tools-grid" };
+const _hoisted_4$2 = ["onClick"];
+const _hoisted_5$2 = ["src"];
+const _hoisted_6$2 = { class: "tool-label" };
+const _hoisted_7$2 = {
+  key: 0,
+  class: "stop-drawing-section"
+};
+const _sfc_main$2 = {
+  __name: "MarkTab",
+  setup(__props) {
+    const mapRef = inject("map");
+    const map = computed(() => mapRef == null ? void 0 : mapRef.value);
+    const drawingManager = ref(null);
+    const drawTypes = [
+      { label: "点", value: "point" },
+      { label: "线", value: "line" },
+      { label: "面", value: "polygon" },
+      { label: "多几何", value: "multi" },
+      { label: "复合标绘", value: "composite" },
+      { label: "编辑工具", value: "edit" }
+    ];
+    const toolMap = {
+      point: [
+        { icon: icons.pointMarker, label: "单点", type: "simple-point" },
+        { icon: icons.pointMarker, label: "图标点", type: "icon-point" },
+        { icon: icons.editMarker, label: "自定义点", type: "custom-point" },
+        { icon: icons.deleteMarker, label: "删除点", type: "delete-point" },
+        { icon: icons.qqMarker, label: "QQ图标点", type: "qq-point" },
+        { icon: icons.typhoonMarker, label: "台风GIF点", type: "typhoon-point" },
+        { icon: "i-carbon-radio-button", label: "扩散点", type: "diffusion-point" },
+        { icon: "i-carbon-text-small-caps", label: "文字", type: "simple-text" },
+        {
+          icon: "i-carbon-annotation-visibility",
+          label: "气泡",
+          type: "bubble-text"
+        },
+        { icon: "i-carbon-text-font", label: "样式文字", type: "styled-text" }
+      ],
+      line: [
+        { icon: "i-carbon-chart-line", label: "折线", type: "polyline" },
+        { icon: "i-carbon-close-outline", label: "闭合线", type: "closed-line" },
+        { icon: "i-carbon-chart-curve", label: "曲线", type: "curve-line" },
+        { icon: "i-carbon-arrow-right", label: "箭头线", type: "arrow-line" },
+        { icon: icons.roadMarker, label: "图片线", type: "image-line" }
+      ],
+      polygon: [
+        { icon: "i-carbon-checkbox-checked", label: "矩形", type: "rectangle" },
+        { icon: "i-carbon-circle-dash", label: "圆形", type: "circle" },
+        { icon: "i-carbon-cube", label: "多边形", type: "polygon" },
+        { icon: "i-carbon-star", label: "星形", type: "star" }
+      ],
+      composite: [
+        {
+          icon: "i-carbon-location-current",
+          label: "点位文字",
+          type: "point-with-text"
+        },
+        { icon: "i-carbon-text-link", label: "线带文字", type: "line-with-text" },
+        {
+          icon: "i-carbon-chart-area",
+          label: "面带文字",
+          type: "polygon-with-text"
+        },
+        { icon: "i-carbon-map", label: "标注点", type: "marker-with-label" }
+      ],
+      multi: [
+        { icon: "i-carbon-location", label: "多点", type: "multi-point" },
+        { icon: "i-carbon-chart-multiline", label: "多线", type: "multi-line" },
+        { icon: "i-carbon-layers", label: "多面", type: "multi-polygon" }
+      ],
+      edit: [
+        { icon: "i-carbon-cursor-1", label: "选择", type: "select" },
+        { icon: "i-carbon-edit", label: "编辑", type: "modify" },
+        { icon: "i-carbon-trash-can", label: "删除", type: "delete" },
+        { icon: "i-carbon-copy", label: "复制", type: "duplicate" },
+        { icon: "i-carbon-close", label: "取消", type: "cancel" }
+      ]
+    };
+    const selectedType = ref("multi");
+    const activeDrawingTool = ref(null);
+    const continuousDrawing = ref(false);
+    const currentTools = computed(() => toolMap[selectedType.value] || []);
+    onMounted(() => {
+      if (map.value) {
+        drawingManager.value = new DrawingManager({
+          map: map.value,
+          enableSnap: true,
+          enableModify: true,
+          enableSelect: true,
+          allowContinuousDrawing: false,
+          // 不允许连续标绘
+          defaultStyle: {
+            fill: {
+              color: "rgba(255, 255, 255, 0.2)"
+            },
+            stroke: {
+              color: "#ffcc33",
+              width: 2
+            },
+            image: {
+              radius: 7,
+              fill: {
+                color: "#ffcc33"
+              }
+            }
+          }
+        });
+        drawingManager.value.on("drawing-end", (drawing) => {
+          const feature = drawing.getFeature();
+          const geometry = feature ? feature.getGeometry() : null;
+          if (geometry) {
+            drawing.getCoordinates();
+            console.log(
+              `成功添加${getToolLabelByType(activeDrawingTool.value)}`
+            );
+            drawingManager.value.setMode("select");
+          }
+        });
+      } else {
+        console.error("地图实例未找到");
+      }
+    });
+    const getToolLabelByType = (type) => {
+      for (const category in toolMap) {
+        const tool = toolMap[category].find((t) => t.type === type);
+        if (tool)
+          return tool.label;
+      }
+      return "标绘";
+    };
+    const handleToolClick = (tool) => {
+      if (!map.value || !drawingManager.value) {
+        console.error("地图实例未找到");
+        return;
+      }
+      const currentMode = drawingManager.value.getMode();
+      if (currentMode !== "none" && currentMode !== "select" && currentMode !== "modify") {
+        drawingManager.value.setMode("none");
+        console.log(
+          `已停止当前${getToolLabelByType(activeDrawingTool.value)}标绘，开始${tool.label}标绘`
+        );
+      }
+      activeDrawingTool.value = tool.type;
+      switch (tool.type) {
+        case "simple-point":
+          drawingManager.value.setMode("point", {
+            image: {
+              radius: 5,
+              fill: {
+                color: "#ff4444"
+              },
+              stroke: {
+                color: "#fffccc",
+                width: 2
+              }
+            },
+            allowContinuousDrawing: continuousDrawing.value
+          });
+          console.log(`开始绘制${tool.label}，请在地图上点击添加点位`);
+          break;
+        case "icon-point":
+          drawingManager.value.setMode("point", {
+            image: {
+              src: icons.pointMarker,
+              scale: 1.2,
+              anchor: [0.5, 1],
+              anchorXUnits: "fraction",
+              anchorYUnits: "fraction"
+            },
+            allowContinuousDrawing: continuousDrawing.value
+          });
+          console.log(`开始绘制${tool.label}，请在地图上点击添加图标点`);
+          break;
+        case "custom-point":
+          drawingManager.value.setMode("point", {
+            image: {
+              src: icons.editMarker,
+              scale: 1,
+              anchor: [0.5, 0.5],
+              anchorXUnits: "fraction",
+              anchorYUnits: "fraction"
+            },
+            allowContinuousDrawing: continuousDrawing.value
+          });
+          console.log(`开始绘制${tool.label}，请在地图上点击添加自定义点`);
+          break;
+        case "diffusion-point":
+          drawingManager.value.setMode("point", {
+            pointStyle: "diffusion",
+            diffusionConfig: {
+              ringCount: 3,
+              maxRadius: 50,
+              duration: 2e3,
+              color: "rgba(64, 158, 255, 0.6)",
+              centerColor: "#409eff",
+              centerSize: 8,
+              delay: 500
+            },
+            allowContinuousDrawing: continuousDrawing.value
+          });
+          console.log(`开始绘制${tool.label}，请在地图上点击添加扩散点`);
+          break;
+        case "gif-point":
+          drawingManager.value.setMode("point", {
+            pointStyle: "gif",
+            gifConfig: {
+              url: "",
+              scale: 1,
+              opacity: 0.8,
+              anchor: [0.5, 0.5]
+            },
+            allowContinuousDrawing: continuousDrawing.value
+          });
+          console.log(`开始绘制${tool.label}，请在地图上点击添加GIF动画点`);
+          break;
+        case "simple-text":
+          drawingManager.value.setMode("text", {
+            text: {
+              font: "14px Arial",
+              fill: {
+                color: "#333333"
+              },
+              stroke: {
+                color: "#ffffff",
+                width: 2
+              },
+              offsetY: -15
+            },
+            allowContinuousDrawing: continuousDrawing.value
+          });
+          console.log(
+            `开始绘制${tool.label}，请在地图上点击添加文字标注（支持连续标绘）`
+          );
+          break;
+        case "bubble-text":
+          drawingManager.value.setMode("text", {
+            text: {
+              font: "16px Arial",
+              fill: {
+                color: "#ffffff"
+              },
+              backgroundFill: {
+                color: "rgba(0, 123, 255, 0.8)"
+              },
+              backgroundStroke: {
+                color: "#2c5aa0",
+                width: 2
+              },
+              padding: [10, 16, 10, 16],
+              offsetY: -5
+            },
+            allowContinuousDrawing: continuousDrawing.value
+          });
+          console.log(`开始绘制${tool.label}，请在地图上点击添加气泡文字`);
+          break;
+        case "styled-text":
+          drawingManager.value.setMode("text", {
+            text: {
+              font: "bold 20px Arial",
+              fill: {
+                color: "#1a365d"
+              },
+              stroke: {
+                color: "#ffffff",
+                width: 3
+              },
+              backgroundFill: {
+                color: "rgba(255, 215, 0, 0.9)"
+              },
+              backgroundStroke: {
+                color: "#ff6b35",
+                width: 3
+              },
+              padding: [12, 20, 12, 20],
+              offsetY: -8
+            },
+            allowContinuousDrawing: continuousDrawing.value
+          });
+          console.log(`开始绘制${tool.label}，请在地图上点击添加样式文字`);
+          break;
+        case "straight-line":
+          drawingManager.value.setMode("line", {
+            stroke: {
+              color: "#1890ff",
+              width: 3
+            },
+            allowContinuousDrawing: continuousDrawing.value
+          });
+          console.log(`开始绘制${tool.label}，请在地图上点击绘制直线`);
+          break;
+        case "polyline":
+          drawingManager.value.setMode("line", {
+            stroke: {
+              color: "#52c41a",
+              width: 2,
+              lineDash: [5, 5]
+            },
+            allowContinuousDrawing: continuousDrawing.value
+          });
+          console.log(`开始绘制${tool.label}，请在地图上点击绘制折线`);
+          break;
+        case "closed-line":
+          drawingManager.value.setMode("polygon", {
+            stroke: {
+              color: "#ffc107",
+              width: 2
+            },
+            fillOpacity: 0,
+            allowContinuousDrawing: continuousDrawing.value
+          });
+          console.log(`开始绘制${tool.label}，请在地图上点击绘制闭合线`);
+          break;
+        case "curve-line":
+          drawingManager.value.setMode("line", {
+            stroke: {
+              color: "#722ed1",
+              width: 3,
+              lineCap: "round",
+              lineJoin: "round"
+            },
+            allowContinuousDrawing: continuousDrawing.value
+          });
+          console.log(`开始绘制${tool.label}，请在地图上点击绘制曲线`);
+          break;
+        case "arrow-line":
+          drawingManager.value.setMode("line", {
+            stroke: {
+              color: "#ff6b35",
+              width: 3,
+              lineCap: "round",
+              lineJoin: "round"
+            },
+            showArrow: true,
+            arrowSize: 12,
+            arrowColor: "#ff6b35",
+            allowContinuousDrawing: continuousDrawing.value
+          });
+          console.log(`开始绘制${tool.label}，请在地图上点击绘制箭头线`);
+          break;
+        case "image-line":
+          drawingManager.value.setMode("line", {
+            imagePattern: {
+              src: icons.roadMarker
+            },
+            allowContinuousDrawing: continuousDrawing.value
+          });
+          console.log(`开始绘制道路线，请在地图上点击绘制道路线`);
+          break;
+        case "rectangle":
+          drawingManager.value.setMode("rectangle", {
+            fill: {
+              color: "rgba(24, 144, 255, 0.3)"
+            },
+            stroke: {
+              color: "#1890ff",
+              width: 2
+            },
+            allowContinuousDrawing: continuousDrawing.value
+          });
+          console.log(`开始绘制${tool.label}，请在地图上拖拽绘制矩形`);
+          break;
+        case "circle":
+          drawingManager.value.setMode("circle", {
+            fill: {
+              color: "rgba(82, 196, 26, 0.3)"
+            },
+            stroke: {
+              color: "#52c41a",
+              width: 2
+            },
+            allowContinuousDrawing: continuousDrawing.value
+          });
+          console.log(`开始绘制${tool.label}，请在地图上拖拽绘制圆形`);
+          break;
+        case "polygon":
+          drawingManager.value.setMode("polygon", {
+            fill: {
+              color: "rgba(255, 193, 7, 0.3)"
+            },
+            stroke: {
+              color: "#ffc107",
+              width: 2
+            },
+            allowContinuousDrawing: continuousDrawing.value
+          });
+          console.log(
+            `开始绘制${tool.label}，请在地图上点击绘制多边形，双击结束`
+          );
+          break;
+        case "star":
+          drawingManager.value.setMode("star", {
+            fill: {
+              color: "rgba(255, 87, 34, 0.3)"
+            },
+            stroke: {
+              color: "#ff5722",
+              width: 2
+            },
+            allowContinuousDrawing: continuousDrawing.value
+          });
+          console.log(`开始绘制${tool.label}，请在地图上拖拽绘制星形`);
+          break;
+        case "delete-point":
+          drawingManager.value.setMode("point", {
+            image: {
+              src: icons.deleteMarker,
+              scale: 1,
+              anchor: [0.5, 0.5],
+              anchorXUnits: "fraction",
+              anchorYUnits: "fraction"
+            }
+          });
+          console.log(`开始绘制${tool.label}，请在地图上点击添加删除标记点`);
+          break;
+        case "qq-point":
+          drawingManager.value.setMode("point", {
+            image: {
+              src: icons.qqMarker,
+              scale: 0.8,
+              anchor: [0.5, 0.5],
+              anchorXUnits: "fraction",
+              anchorYUnits: "fraction"
+            }
+          });
+          console.log(`开始绘制${tool.label}，请在地图上点击添加QQ图标点`);
+          break;
+        case "typhoon-point":
+          drawingManager.value.setMode("point", {
+            pointStyle: "gif",
+            gifConfig: {
+              url: icons.typhoonMarker,
+              scale: 0.6,
+              opacity: 1,
+              anchor: [0.5, 0.5]
+            }
+          });
+          console.log(`开始绘制${tool.label}，请在地图上点击添加台风GIF点`);
+          break;
+        case "multi-point":
+          drawingManager.value.setMode("multipoint", {
+            image: {
+              radius: 6,
+              fill: {
+                color: "#ff6b35"
+              },
+              stroke: {
+                color: "#ffffff",
+                width: 2
+              }
+            },
+            allowContinuousDrawing: continuousDrawing.value
+          });
+          console.log(
+            `开始绘制${tool.label}，请在地图上点击添加多个点位，双击结束`
+          );
+          break;
+        case "multi-line":
+          drawingManager.value.setMode("multilinestring", {
+            stroke: {
+              color: "#722ed1",
+              width: 3,
+              lineDash: [10, 5]
+            },
+            allowContinuousDrawing: continuousDrawing.value
+          });
+          console.log(
+            `开始绘制${tool.label}，请在地图上绘制多条线段，双击结束每条线`
+          );
+          break;
+        case "multi-polygon":
+          drawingManager.value.setMode("multipolygon", {
+            fill: {
+              color: "rgba(114, 46, 209, 0.3)"
+            },
+            stroke: {
+              color: "#722ed1",
+              width: 2
+            },
+            allowContinuousDrawing: continuousDrawing.value
+          });
+          console.log(
+            `开始绘制${tool.label}，请在地图上绘制多个多边形，双击结束每个多边形`
+          );
+          break;
+        case "select":
+          drawingManager.value.setMode("select");
+          console.log("已切换到选择模式，点击图形进行选择");
+          break;
+        case "modify":
+          drawingManager.value.setMode("modify");
+          console.log("已切换到编辑模式，选择图形后可拖拽编辑");
+          break;
+        case "delete":
+          if (drawingManager.value.deleteSelectedDrawing()) {
+            console.log("已删除选中的图形");
+          } else {
+            console.warn("请先选择要删除的图形");
+          }
+          break;
+        case "duplicate":
+          if (drawingManager.value.duplicateSelectedDrawing()) {
+            console.log("已复制选中的图形");
+          } else {
+            console.warn("请先选择要复制的图形");
+          }
+          break;
+        case "cancel":
+          drawingManager.value.setMode("none");
+          console.log("已取消当前操作");
+          activeDrawingTool.value = null;
+          break;
+        default:
+          console.log(`${tool.label}功能正在开发中`);
+          break;
+      }
+    };
+    const stopDrawing = () => {
+      if (drawingManager.value) {
+        drawingManager.value.setMode("none");
+        console.log(
+          `已停止${getToolLabelByType(activeDrawingTool.value)}标绘`
+        );
+        activeDrawingTool.value = null;
+      }
+    };
+    return (_ctx, _cache) => {
+      const _component_el_option = resolveComponent("el-option");
+      const _component_el_select = resolveComponent("el-select");
+      const _component_el_switch = resolveComponent("el-switch");
+      const _component_el_button = resolveComponent("el-button");
+      return openBlock(), createElementBlock("div", _hoisted_1$2, [
+        createVNode(_component_el_select, {
+          modelValue: selectedType.value,
+          "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => selectedType.value = $event),
+          placeholder: "选择标绘类型",
+          class: "type-select"
+        }, {
+          default: withCtx(() => [
+            (openBlock(), createElementBlock(Fragment, null, renderList(drawTypes, (item) => {
+              return createVNode(_component_el_option, {
+                key: item.value,
+                label: item.label,
+                value: item.value
+              }, null, 8, ["label", "value"]);
+            }), 64))
+          ]),
+          _: 1
+        }, 8, ["modelValue"]),
+        createElementVNode("div", _hoisted_2$2, [
+          _cache[2] || (_cache[2] = createElementVNode("span", { class: "switch-label" }, "连续标绘模式", -1)),
+          createVNode(_component_el_switch, {
+            modelValue: continuousDrawing.value,
+            "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => continuousDrawing.value = $event),
+            size: "small"
+          }, null, 8, ["modelValue"])
+        ]),
+        createElementVNode("div", _hoisted_3$2, [
+          (openBlock(true), createElementBlock(Fragment, null, renderList(currentTools.value, (tool, idx) => {
+            return openBlock(), createElementBlock("div", {
+              key: idx,
+              class: "tool-item",
+              onClick: ($event) => handleToolClick(tool)
+            }, [
+              tool.icon.startsWith("data:image") || tool.icon.includes(".svg") ? (openBlock(), createElementBlock("img", {
+                key: 0,
+                src: tool.icon,
+                class: "tool-image",
+                alt: "tool icon"
+              }, null, 8, _hoisted_5$2)) : (openBlock(), createElementBlock("i", {
+                key: 1,
+                class: normalizeClass([tool.icon, "tool-icon-large"])
+              }, null, 2)),
+              createElementVNode("span", _hoisted_6$2, toDisplayString(tool.label), 1)
+            ], 8, _hoisted_4$2);
+          }), 128))
+        ]),
+        activeDrawingTool.value && continuousDrawing.value ? (openBlock(), createElementBlock("div", _hoisted_7$2, [
+          createVNode(_component_el_button, {
+            type: "danger",
+            size: "small",
+            onClick: stopDrawing,
+            icon: unref(close_default)
+          }, {
+            default: withCtx(() => [..._cache[3] || (_cache[3] = [
+              createTextVNode(" 停止当前标绘 ", -1)
+            ])]),
+            _: 1
+          }, 8, ["icon"])
+        ])) : createCommentVNode("", true)
+      ]);
+    };
+  }
+};
+const MarkTab = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-b5ca6d89"]]);
+const _hoisted_1$1 = { class: "list-tab-container" };
+const _hoisted_2$1 = { class: "toolbar" };
+const _hoisted_3$1 = { class: "toolbar-left" };
+const _hoisted_4$1 = { class: "data-count" };
+const _hoisted_5$1 = { class: "list-content" };
+const _hoisted_6$1 = { class: "tree-node" };
+const _hoisted_7$1 = {
+  key: 1,
+  class: "empty-state"
+};
+const _sfc_main$1 = {
+  __name: "ListTab",
+  setup(__props) {
+    const groups = ref([
+      { id: 1, label: "labelP" },
+      { id: 2, label: "canvasLabel" },
+      { id: 3, label: "div" }
+    ]);
+    const defaultProps = {
+      children: "children",
+      label: "label"
+    };
+    const addGroup = () => {
+      console.log("新增分组");
+    };
+    const refresh = () => {
+      console.log("刷新数据");
+    };
+    return (_ctx, _cache) => {
+      const _component_el_button = resolveComponent("el-button");
+      const _component_el_tree = resolveComponent("el-tree");
+      return openBlock(), createElementBlock("div", _hoisted_1$1, [
+        createElementVNode("div", _hoisted_2$1, [
+          createElementVNode("div", _hoisted_3$1, [
+            _cache[2] || (_cache[2] = createElementVNode("span", { class: "toolbar-title" }, "分组管理:", -1)),
+            createVNode(_component_el_button, {
+              type: "primary",
+              link: "",
+              onClick: addGroup
+            }, {
+              default: withCtx(() => [..._cache[0] || (_cache[0] = [
+                createElementVNode("i", { class: "i-carbon-add toolbar-icon" }, null, -1)
+              ])]),
+              _: 1
+            }),
+            createVNode(_component_el_button, {
+              type: "primary",
+              link: "",
+              onClick: refresh
+            }, {
+              default: withCtx(() => [..._cache[1] || (_cache[1] = [
+                createElementVNode("i", { class: "i-carbon-renew toolbar-icon" }, null, -1)
+              ])]),
+              _: 1
+            })
+          ]),
+          createElementVNode("div", _hoisted_4$1, "共" + toDisplayString(groups.value.length) + "条数据", 1)
+        ]),
+        createElementVNode("div", _hoisted_5$1, [
+          groups.value.length ? (openBlock(), createBlock(_component_el_tree, {
+            key: 0,
+            data: groups.value,
+            "show-checkbox": "",
+            "node-key": "id",
+            "default-expand-all": "",
+            props: defaultProps,
+            class: "tree-component"
+          }, {
+            default: withCtx(({ data }) => [
+              createElementVNode("div", _hoisted_6$1, [
+                _cache[3] || (_cache[3] = createElementVNode("i", { class: "i-carbon-folder node-icon" }, null, -1)),
+                createElementVNode("span", null, toDisplayString(data.label), 1)
+              ])
+            ]),
+            _: 1
+          }, 8, ["data"])) : (openBlock(), createElementBlock("div", _hoisted_7$1, "暂无数据"))
+        ])
+      ]);
+    };
+  }
+};
+const ListTab = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-148877f2"]]);
+const _hoisted_1 = { class: "dialog-content" };
+const _hoisted_2 = { class: "toolbar" };
+const _hoisted_3 = { class: "toolbar-left" };
+const _hoisted_4 = ["onClick"];
+const _hoisted_5 = { class: "toolbar-right" };
+const _hoisted_6 = ["onClick"];
+const _hoisted_7 = { class: "content-area" };
+const _sfc_main = {
+  __name: "index",
+  setup(__props) {
+    const visible = ref(true);
+    const activeTab = ref("mark");
+    const leftTools = [
+      { icon: "i-carbon-folder-open", label: "打开文件", action: "openFile" },
+      { icon: "i-carbon-layers", label: "叠加文件", action: "overlayFile" },
+      { icon: "i-carbon-save", label: "保存", action: "saveFile" }
+    ];
+    const rightTools = [
+      { icon: "i-carbon-trash-can", label: "删除", action: "delete" },
+      { icon: "i-carbon-lock", label: "锁定", action: "lock" },
+      { icon: "i-carbon-popup", label: "绑定Popup", action: "bindPopup" }
+    ];
+    const handleClose = () => {
+      visible.value = false;
+    };
+    const handleToolClick = (tool, position, index2) => {
+      console.log(`点击了${position}侧第${index2 + 1}个工具: ${tool.label}，执行动作: ${tool.action}`);
+      switch (tool.action) {
+        case "openFile":
+          console.log("打开文件功能");
+          break;
+        case "overlayFile":
+          console.log("叠加文件功能");
+          break;
+        case "saveFile":
+          console.log("保存功能");
+          break;
+        case "delete":
+          console.warn("删除功能");
+          break;
+        case "lock":
+          console.log("锁定功能");
+          break;
+        case "bindPopup":
+          console.log("绑定Popup功能");
+          break;
+      }
+    };
+    return (_ctx, _cache) => {
+      const _component_el_tooltip = resolveComponent("el-tooltip");
+      const _component_el_tab_pane = resolveComponent("el-tab-pane");
+      const _component_el_tabs = resolveComponent("el-tabs");
+      const _component_EPlusDialog = resolveComponent("EPlusDialog");
+      return openBlock(), createBlock(_component_EPlusDialog, {
+        modelValue: visible.value,
+        "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => visible.value = $event),
+        title: "图上标绘",
+        width: "500px",
+        height: "auto",
+        "show-modal": false,
+        draggable: true,
+        "show-fullscreen": false,
+        "close-on-click-modal": false,
+        "close-on-press-escape": false,
+        "custom-class": "map-drawing-dialog",
+        cacheId: "drawing-dialog",
+        onClose: handleClose
+      }, {
+        default: withCtx(() => [
+          createElementVNode("div", _hoisted_1, [
+            createElementVNode("div", _hoisted_2, [
+              createElementVNode("div", _hoisted_3, [
+                (openBlock(), createElementBlock(Fragment, null, renderList(leftTools, (tool, idx) => {
+                  return createVNode(_component_el_tooltip, {
+                    key: idx,
+                    content: tool.label,
+                    placement: "bottom",
+                    effect: "light"
+                  }, {
+                    default: withCtx(() => [
+                      createElementVNode("i", {
+                        class: normalizeClass([tool.icon, "tool-icon"]),
+                        onClick: ($event) => handleToolClick(tool, "left", idx)
+                      }, null, 10, _hoisted_4)
+                    ]),
+                    _: 2
+                  }, 1032, ["content"]);
+                }), 64))
+              ]),
+              createElementVNode("div", _hoisted_5, [
+                (openBlock(), createElementBlock(Fragment, null, renderList(rightTools, (tool, idx) => {
+                  return createVNode(_component_el_tooltip, {
+                    key: idx,
+                    content: tool.label,
+                    placement: "bottom",
+                    effect: "light"
+                  }, {
+                    default: withCtx(() => [
+                      createElementVNode("i", {
+                        class: normalizeClass([tool.icon, "tool-icon"]),
+                        onClick: ($event) => handleToolClick(tool, "right", idx)
+                      }, null, 10, _hoisted_6)
+                    ]),
+                    _: 2
+                  }, 1032, ["content"]);
+                }), 64))
+              ])
+            ]),
+            createElementVNode("div", _hoisted_7, [
+              createVNode(_component_el_tabs, {
+                modelValue: activeTab.value,
+                "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => activeTab.value = $event),
+                "tab-position": "bottom",
+                class: "tabs-container"
+              }, {
+                default: withCtx(() => [
+                  createVNode(_component_el_tab_pane, {
+                    label: "标号",
+                    name: "mark"
+                  }, {
+                    default: withCtx(() => [
+                      createVNode(MarkTab)
+                    ]),
+                    _: 1
+                  }),
+                  createVNode(_component_el_tab_pane, {
+                    label: "列表",
+                    name: "list"
+                  }, {
+                    default: withCtx(() => [
+                      createVNode(ListTab)
+                    ]),
+                    _: 1
+                  })
+                ]),
+                _: 1
+              }, 8, ["modelValue"])
+            ])
+          ])
+        ]),
+        _: 1
+      }, 8, ["modelValue"]);
+    };
+  }
+};
+const index = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-c695eece"]]);
+export {
+  index as default
+};