vue-openlayers-plugin 1.0.82 → 1.0.85

package/lib/MeasurementDialog-b86c21c6.mjs

@@ -0,0 +1,369 @@
+import { defineComponent, inject, computed, ref, watch, resolveComponent, openBlock, createBlock, withCtx, createElementVNode, createVNode, createTextVNode, toDisplayString, createElementBlock, Fragment, renderList, normalizeClass } from "vue";
+import { f as formatMeasurementResult, g as getUnitByType, d as _export_sfc } from "./index-5a13e877.mjs";
+import "ol";
+const getIconPath = (name) => {
+  return `/icons/${name}.svg`;
+};
+const icons = {
+  distance: getIconPath("distance"),
+  area: getIconPath("area"),
+  coordinate: getIconPath("coordinate"),
+  angle: getIconPath("angle"),
+  location: getIconPath("location"),
+  // 添加其他需要的图标
+  marker: getIconPath("marker"),
+  clear: getIconPath("clear"),
+  close: getIconPath("close"),
+  fullscreen: getIconPath("fullscreen"),
+  exitFullscreen: getIconPath("exit-fullscreen")
+};
+const _hoisted_1 = { class: "measurement-content h-full flex flex-col" };
+const _hoisted_2 = { class: "measurement-header flex justify-between items-center px-6 py-4" };
+const _hoisted_3 = { class: "measurement-result py-8 text-center" };
+const _hoisted_4 = { class: "result-value" };
+const _hoisted_5 = { class: "tool-grid flex-1 py-5" };
+const _hoisted_6 = ["onClick"];
+const _hoisted_7 = ["src", "alt"];
+const _hoisted_8 = { class: "tool-label" };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "MeasurementDialog",
+  props: {
+    modelValue: { type: Boolean }
+  },
+  emits: ["update:modelValue"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const measurementToolRef = inject("measurementTool");
+    const measurementTool = computed(() => measurementToolRef == null ? void 0 : measurementToolRef.value);
+    const dialogVisible = computed({
+      get: () => props.modelValue,
+      set: (value) => emit("update:modelValue", value)
+    });
+    const activeTool = ref(null);
+    const measurementResult = ref(null);
+    const measurementTools = [
+      { type: "distance", icon: icons.distance, label: "空间距离" },
+      { type: "area", icon: icons.area, label: "水平面积" },
+      { type: "coordinate", icon: icons.coordinate, label: "坐标测量" },
+      { type: "angle", icon: icons.angle, label: "角度" }
+    ];
+    const selectedUnit = ref("auto");
+    const onUnitChange = () => {
+      console.log("单位变化:", selectedUnit.value);
+      if (!measurementResult.value)
+        return;
+      const resultType = measurementResult.value.type || activeTool.value;
+      if (resultType === "distance" && measurementResult.value.value !== void 0) {
+        const result = formatMeasurementResult(measurementResult.value.value, "length", selectedUnit.value);
+        measurementResult.value = {
+          ...measurementResult.value,
+          distance: result.formatted
+        };
+      } else if (resultType === "area" && measurementResult.value.value !== void 0) {
+        const result = formatMeasurementResult(measurementResult.value.value, "area", selectedUnit.value);
+        measurementResult.value = {
+          ...measurementResult.value,
+          area: result.formatted
+        };
+      } else if (resultType === "angle" && measurementResult.value.value !== void 0) {
+        const result = formatMeasurementResult(measurementResult.value.value, "angle", selectedUnit.value);
+        measurementResult.value = {
+          ...measurementResult.value,
+          angle: result.formatted
+        };
+      }
+    };
+    const checkUnitCompatibility = (tool, unit) => {
+      const distanceUnits = ["m", "km"];
+      const areaUnits = ["m²", "km²"];
+      const angleUnits = ["°", "rad"];
+      if (tool === "distance" && distanceUnits.includes(unit))
+        return true;
+      if (tool === "area" && areaUnits.includes(unit))
+        return true;
+      if (tool === "angle" && angleUnits.includes(unit))
+        return true;
+      return false;
+    };
+    const isMouseActive = ref(false);
+    const mouseTooltip = ref("");
+    const setActiveTool = (tool, unitConfig) => {
+      if (!measurementTool.value) {
+        console.warn("measurementTool未初始化");
+        return;
+      }
+      measurementResult.value = null;
+      if (measurementTool.value) {
+        measurementTool.value.stopMeasurement();
+      }
+      activeTool.value = tool;
+      const toolType = tool;
+      if (unitConfig) {
+        selectedUnit.value = getUnitByType(toolType);
+      } else {
+        if (selectedUnit.value !== "auto" && !checkUnitCompatibility(tool, selectedUnit.value)) {
+          selectedUnit.value = "auto";
+        }
+      }
+      isMouseActive.value = true;
+      switch (tool) {
+        case "distance":
+          mouseTooltip.value = "点击地图上两点或多点测量距离";
+          measurementTool.value.startDistanceMeasurement((result) => {
+            handleMeasurementResult(result);
+          }, selectedUnit.value);
+          break;
+        case "area":
+          mouseTooltip.value = "点击地图绘制多边形测量面积";
+          measurementTool.value.startAreaMeasurement((result) => {
+            handleMeasurementResult(result);
+          }, selectedUnit.value);
+          break;
+        case "coordinate":
+          mouseTooltip.value = "点击地图获取坐标信息";
+          measurementTool.value.startCoordinateMeasurement((result) => {
+            handleMeasurementResult(result);
+          });
+          break;
+        case "angle":
+          mouseTooltip.value = "点击地图测量角度";
+          measurementTool.value.startAngleMeasurement((result) => {
+            handleMeasurementResult(result);
+          }, selectedUnit.value);
+          break;
+      }
+    };
+    const getDisplayValue = () => {
+      if (!measurementResult.value)
+        return "0";
+      const resultType = measurementResult.value.type || activeTool.value;
+      if (resultType === "distance" && measurementResult.value.distance) {
+        return measurementResult.value.distance;
+      } else if (resultType === "area" && measurementResult.value.area) {
+        return measurementResult.value.area;
+      } else if (resultType === "angle" && measurementResult.value.angle) {
+        return measurementResult.value.angle;
+      } else if (resultType === "coordinate" && measurementResult.value.longitude) {
+        return `${measurementResult.value.longitude}°, ${measurementResult.value.latitude}°`;
+      }
+      return "0";
+    };
+    const handleMeasurementResult = (result) => {
+      var _a, _b, _c;
+      console.log("接收到测量结果:", result);
+      activeTool.value = null;
+      if (result.type === "length") {
+        measurementResult.value = {
+          type: "distance",
+          value: result.value,
+          // 保存原始数值用于单位转换
+          unit: result.unit,
+          distance: result.distance || ((_a = result.value) == null ? void 0 : _a.toString()) || "0",
+          area: null
+        };
+      } else if (result.type === "area") {
+        measurementResult.value = {
+          type: "area",
+          value: result.value,
+          // 保存原始数值用于单位转换
+          unit: result.unit,
+          distance: null,
+          area: result.area || ((_b = result.value) == null ? void 0 : _b.toString()) || "0"
+        };
+      } else if (result.type === "angle") {
+        measurementResult.value = {
+          type: "angle",
+          value: result.value,
+          // 保存原始数值用于单位转换
+          unit: result.unit,
+          angle: result.angle || ((_c = result.value) == null ? void 0 : _c.toString()) || "0"
+        };
+      } else if (result.type === "coordinate") {
+        measurementResult.value = {
+          type: "coordinate",
+          longitude: result.longitude,
+          latitude: result.latitude
+        };
+      } else {
+        measurementResult.value = result;
+      }
+      isMouseActive.value = false;
+    };
+    const handleMapMeasurementResult = (result) => {
+      console.log("接收到地图测量结果:", result);
+      if (result.type === "distance") {
+        measurementResult.value = {
+          type: "distance",
+          distance: result.value,
+          area: null
+        };
+      } else if (result.type === "area") {
+        measurementResult.value = {
+          type: "area",
+          distance: null,
+          area: result.value
+        };
+      } else if (result.type === "angle") {
+        measurementResult.value = {
+          type: "angle",
+          angle: result.value
+        };
+      } else if (result.type === "coordinate") {
+        measurementResult.value = {
+          type: "coordinate",
+          longitude: result.longitude,
+          latitude: result.latitude,
+          elevation: result.elevation
+        };
+      } else {
+        measurementResult.value = result;
+      }
+      isMouseActive.value = false;
+    };
+    __expose({
+      handleMapMeasurementResult
+    });
+    const clearMeasurement = () => {
+      measurementResult.value = null;
+      if (measurementTool.value) {
+        measurementTool.value.clearMeasurements();
+      }
+      activeTool.value = null;
+      isMouseActive.value = false;
+      mouseTooltip.value = "";
+    };
+    const stopAllMeasurement = () => {
+      measurementResult.value = null;
+      if (measurementTool.value) {
+        measurementTool.value.clearMeasurements();
+      }
+      activeTool.value = null;
+      isMouseActive.value = false;
+      mouseTooltip.value = "";
+    };
+    const handleClose = () => {
+      dialogVisible.value = false;
+      stopAllMeasurement();
+      mouseTooltip.value = "";
+    };
+    watch(dialogVisible, (newVal) => {
+      if (!newVal) {
+        handleClose();
+      }
+    });
+    return (_ctx, _cache) => {
+      const _component_el_option = resolveComponent("el-option");
+      const _component_el_option_group = resolveComponent("el-option-group");
+      const _component_el_select = resolveComponent("el-select");
+      const _component_el_button = resolveComponent("el-button");
+      const _component_EPlusDialog = resolveComponent("EPlusDialog");
+      return openBlock(), createBlock(_component_EPlusDialog, {
+        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"
+      }, {
+        default: withCtx(() => [
+          createElementVNode("div", _hoisted_1, [
+            createElementVNode("div", _hoisted_2, [
+              createVNode(_component_el_select, {
+                modelValue: selectedUnit.value,
+                "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => selectedUnit.value = $event),
+                placeholder: "自动",
+                size: "small",
+                style: { "width": "120px" },
+                onChange: onUnitChange
+              }, {
+                default: withCtx(() => [
+                  createVNode(_component_el_option, {
+                    label: "自动",
+                    value: "auto"
+                  }),
+                  createVNode(_component_el_option_group, { label: "距离单位" }, {
+                    default: withCtx(() => [
+                      createVNode(_component_el_option, {
+                        label: "米",
+                        value: "m"
+                      }),
+                      createVNode(_component_el_option, {
+                        label: "千米",
+                        value: "km"
+                      })
+                    ]),
+                    _: 1
+                  }),
+                  createVNode(_component_el_option_group, { label: "面积单位" }, {
+                    default: withCtx(() => [
+                      createVNode(_component_el_option, {
+                        label: "平方米",
+                        value: "m²"
+                      }),
+                      createVNode(_component_el_option, {
+                        label: "平方千米",
+                        value: "km²"
+                      })
+                    ]),
+                    _: 1
+                  }),
+                  createVNode(_component_el_option_group, { label: "角度单位" }, {
+                    default: withCtx(() => [
+                      createVNode(_component_el_option, {
+                        label: "度",
+                        value: "°"
+                      }),
+                      createVNode(_component_el_option, {
+                        label: "弧度",
+                        value: "rad"
+                      })
+                    ]),
+                    _: 1
+                  })
+                ]),
+                _: 1
+              }, 8, ["modelValue"]),
+              createVNode(_component_el_button, {
+                type: "text",
+                size: "small",
+                onClick: clearMeasurement,
+                style: { "color": "#ff4757" }
+              }, {
+                default: withCtx(() => [..._cache[2] || (_cache[2] = [
+                  createTextVNode(" 清除 ", -1)
+                ])]),
+                _: 1
+              })
+            ]),
+            createElementVNode("div", _hoisted_3, [
+              createElementVNode("div", _hoisted_4, toDisplayString(getDisplayValue()), 1)
+            ]),
+            createElementVNode("div", _hoisted_5, [
+              (openBlock(), createElementBlock(Fragment, null, renderList(measurementTools, (tool) => {
+                return createElementVNode("div", {
+                  key: tool.type,
+                  class: normalizeClass(["tool-item", { active: activeTool.value === tool.type }]),
+                  onClick: ($event) => setActiveTool(tool.type)
+                }, [
+                  createElementVNode("img", {
+                    src: tool.icon,
+                    alt: tool.label,
+                    class: "tool-icon"
+                  }, null, 8, _hoisted_7),
+                  createElementVNode("span", _hoisted_8, toDisplayString(tool.label), 1)
+                ], 10, _hoisted_6);
+              }), 64))
+            ])
+          ])
+        ]),
+        _: 1
+      }, 8, ["modelValue"]);
+    };
+  }
+});
+const MeasurementDialog = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-ac238457"]]);
+export {
+  MeasurementDialog as default
+};