vue-openlayers-plugin 1.0.82 → 1.0.85

package/lib/MyMarkersDialog-fbbd0aeb.mjs

@@ -0,0 +1,584 @@
+import { defineComponent, inject, computed, ref, reactive, onUnmounted, watch, resolveComponent, openBlock, createElementBlock, Fragment, createVNode, withCtx, createElementVNode, unref, normalizeClass, createTextVNode, toDisplayString, renderList, createBlock, withModifiers } from "vue";
+import { i as plus_default, j as folder_opened_default, k as download_default, m as delete_default, s as search_default, n as location_filled_default, o as edit_default, M as MarkerDrawingAdapter, t as toLonLat } from "./index-5a13e877.mjs";
+import { E as ElMessageBox } from "./index-14efa785.mjs";
+import "ol";
+const _hoisted_1 = { class: "markers-content" };
+const _hoisted_2 = { class: "toolbar" };
+const _hoisted_3 = { class: "search-filter" };
+const _hoisted_4 = { class: "markers-list" };
+const _hoisted_5 = { class: "marker-name" };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "MyMarkersDialog",
+  props: {
+    modelValue: { type: Boolean }
+  },
+  emits: ["update:modelValue", "markerAction"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const mapRef = inject("map");
+    const drawingManagerRef = inject("drawingManager");
+    const map = computed(() => mapRef == null ? void 0 : mapRef.value);
+    const drawingManager = computed(() => drawingManagerRef == null ? void 0 : drawingManagerRef.value);
+    const dialogVisible = computed({
+      get: () => props.modelValue,
+      set: (value) => emit("update:modelValue", value)
+    });
+    const searchKeyword = ref("");
+    const filterCategory = ref("");
+    const markers = ref([]);
+    const showAddDialog = ref(false);
+    const editingIndex = ref(-1);
+    let markerAdapter = null;
+    const markerForm = reactive({
+      name: "",
+      category: "默认",
+      description: "",
+      longitude: 117.238548,
+      latitude: 31.806682,
+      color: "#409eff"
+    });
+    const cancelAddMarker = () => {
+      showAddDialog.value = false;
+      Object.assign(markerForm, {
+        name: "",
+        category: "默认",
+        description: "",
+        longitude: 117.238548,
+        latitude: 31.806682,
+        color: "#409eff"
+      });
+    };
+    const confirmAddMarker = () => {
+      var _a;
+      if (!markerForm.name.trim()) {
+        console.warn("请输入标记名称");
+        return;
+      }
+      const newMarker = {
+        id: Date.now().toString(),
+        name: markerForm.name.trim(),
+        category: markerForm.category || "默认",
+        description: ((_a = markerForm.description) == null ? void 0 : _a.trim()) || "",
+        longitude: markerForm.longitude || 117.238548,
+        latitude: markerForm.latitude || 31.806682,
+        color: markerForm.color || "#409eff",
+        createTime: (/* @__PURE__ */ new Date()).toISOString()
+      };
+      markers.value.push(newMarker);
+      cancelAddMarker();
+      console.log("标记添加成功");
+    };
+    const categories = computed(() => {
+      const cats = [...new Set(markers.value.map((m) => m.category))];
+      return cats.filter((cat) => cat);
+    });
+    const filteredMarkers = computed(() => {
+      let result = markers.value;
+      if (searchKeyword.value) {
+        const keyword = searchKeyword.value.toLowerCase();
+        result = result.filter(
+          (marker) => marker.name.toLowerCase().includes(keyword) || marker.description.toLowerCase().includes(keyword)
+        );
+      }
+      if (filterCategory.value) {
+        result = result.filter(
+          (marker) => marker.category === filterCategory.value
+        );
+      }
+      return result;
+    });
+    computed(() => {
+      const today = /* @__PURE__ */ new Date();
+      today.setHours(0, 0, 0, 0);
+      return markers.value.filter((marker) => {
+        const markerDate = new Date(marker.createTime);
+        return markerDate >= today;
+      }).length;
+    });
+    const handleSearch = () => {
+    };
+    const isAddingMarker = ref(false);
+    const mapClickHandler = ref(null);
+    const initializeMarkerAdapter = () => {
+      if (map.value && drawingManager.value && !markerAdapter) {
+        markerAdapter = new MarkerDrawingAdapter(map.value);
+        markerAdapter.on("markerAdded", (marker) => {
+          markers.value.push(marker);
+        });
+        markerAdapter.on("markerUpdated", (marker) => {
+          const index = markers.value.findIndex((m) => m.id === marker.id);
+          if (index >= 0) {
+            markers.value[index] = marker;
+          }
+        });
+        markerAdapter.on("markerDeleted", (markerId) => {
+          const index = markers.value.findIndex((m) => m.id === markerId);
+          if (index >= 0) {
+            markers.value.splice(index, 1);
+          }
+        });
+        markerAdapter.on("markerClicked", (marker) => {
+          console.log("标记被点击:", marker.name);
+        });
+        markerAdapter.on("markersCleared", () => {
+          markers.value = [];
+        });
+      }
+    };
+    const showAddMarker = () => {
+      isAddingMarker.value = !isAddingMarker.value;
+      if (isAddingMarker.value) {
+        initializeMarkerAdapter();
+        startAddingMarker();
+      } else {
+        cancelAddingMarker();
+      }
+    };
+    const startAddingMarker = () => {
+      if (!map.value || !drawingManager.value)
+        return;
+      drawingManager.value.setMode("point", {
+        allowContinuousDrawing: false
+      });
+      const handleDrawingEnd = (drawing) => {
+        var _a;
+        const coordinate = drawing.getCoordinate();
+        if (coordinate) {
+          (_a = drawingManager.value) == null ? void 0 : _a.removeDrawing(drawing);
+          showMarkerInputDialog(coordinate);
+        }
+        cancelAddingMarker();
+      };
+      drawingManager.value.on("drawing-end", handleDrawingEnd);
+      mapClickHandler.value = handleDrawingEnd;
+    };
+    const cancelAddingMarker = () => {
+      if (!drawingManager.value)
+        return;
+      drawingManager.value.setMode("none");
+      if (mapClickHandler.value) {
+        drawingManager.value.off("drawing-end", mapClickHandler.value);
+        mapClickHandler.value = null;
+      }
+      isAddingMarker.value = false;
+    };
+    const showMarkerInputDialog = (coordinate) => {
+      var _a;
+      const mapProjection = (_a = map.value) == null ? void 0 : _a.getView().getProjection().getCode();
+      const lonLat = mapProjection === "EPSG:4326" || mapProjection === "EPSG:4490" ? coordinate : toLonLat(coordinate);
+      editingIndex.value = -1;
+      Object.assign(markerForm, {
+        name: "",
+        category: "默认",
+        description: "",
+        longitude: lonLat[0],
+        latitude: lonLat[1],
+        color: "#409eff"
+      });
+      showAddDialog.value = true;
+    };
+    const editMarker = (marker, index) => {
+      editingIndex.value = index;
+      Object.assign(markerForm, {
+        name: marker.name,
+        category: marker.category,
+        description: marker.description,
+        longitude: marker.longitude,
+        latitude: marker.latitude,
+        color: marker.color
+      });
+      showAddDialog.value = true;
+    };
+    const deleteMarker = (index) => {
+      ElMessageBox.confirm("确定要删除这个标记吗？", "确认删除", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning"
+      }).then(() => {
+        const marker = markers.value[index];
+        if (markerAdapter) {
+          try {
+            markerAdapter.removeMarker(marker.id);
+            console.log("标记删除成功");
+          } catch (error) {
+            console.error("删除标记失败: " + error.message);
+          }
+        } else {
+          console.error("标记管理器未初始化");
+        }
+      }).catch(() => {
+      });
+    };
+    const locateMarker = (marker) => {
+      if (markerAdapter) {
+        try {
+          markerAdapter.flyToMarker(marker.id);
+          console.log(`正在定位到${marker.name}`);
+        } catch (error) {
+          console.error("定位标记失败: " + error.message);
+        }
+      } else {
+        console.error("标记管理器未初始化");
+      }
+    };
+    const clearAllMarkers = () => {
+      ElMessageBox.confirm("确定要清空所有标记吗？此操作不可恢复！", "确认清空", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning"
+      }).then(() => {
+        if (markerAdapter) {
+          try {
+            markerAdapter.clearAllMarkers();
+            console.log("已清空所有标记");
+          } catch (error) {
+            console.error("清空标记失败: " + error.message);
+          }
+        } else {
+          console.error("标记管理器未初始化");
+        }
+      }).catch(() => {
+      });
+    };
+    const importMarkers = () => {
+      const input = document.createElement("input");
+      input.type = "file";
+      input.accept = ".json";
+      input.onchange = (e) => {
+        var _a;
+        const file = (_a = e.target.files) == null ? void 0 : _a[0];
+        if (file) {
+          const reader = new FileReader();
+          reader.onload = (e2) => {
+            var _a2;
+            try {
+              const data = JSON.parse((_a2 = e2.target) == null ? void 0 : _a2.result);
+              if (Array.isArray(data) && markerAdapter) {
+                markerAdapter.clearAllMarkers();
+                let successCount = 0;
+                for (const item of data) {
+                  try {
+                    const marker = {
+                      ...item,
+                      createTime: typeof item.createTime === "string" ? item.createTime : new Date(item.createTime).toISOString()
+                    };
+                    markerAdapter.addMarker(marker);
+                    successCount++;
+                  } catch (error) {
+                    console.warn("导入标记失败:", item, error);
+                  }
+                }
+                console.log(`成功导入${successCount}个标记`);
+              } else if (!Array.isArray(data)) {
+                console.error("文件格式不正确");
+              } else {
+                console.error("标记管理器未初始化");
+              }
+            } catch (error) {
+              console.error("文件解析失败");
+            }
+          };
+          reader.readAsText(file);
+        }
+      };
+      input.click();
+    };
+    const exportMarkers = () => {
+      if (markers.value.length === 0) {
+        console.warn("没有标记可以导出");
+        return;
+      }
+      const data = JSON.stringify(markers.value, null, 2);
+      const blob = new Blob([data], { type: "application/json" });
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement("a");
+      a.href = url;
+      a.download = `markers_${(/* @__PURE__ */ new Date()).toISOString().split("T")[0]}.json`;
+      a.click();
+      URL.revokeObjectURL(url);
+      console.log("标记导出成功");
+    };
+    const formatTime = (time) => {
+      return new Date(time).toLocaleDateString();
+    };
+    const handleClose = () => {
+      dialogVisible.value = false;
+      searchKeyword.value = "";
+      filterCategory.value = "";
+    };
+    onUnmounted(() => {
+      if (markerAdapter) {
+        markerAdapter.destroy();
+        markerAdapter = null;
+      }
+    });
+    watch([() => props.map, () => props.drawingManager], () => {
+      if (props.map && props.drawingManager) {
+        initializeMarkerAdapter();
+        if (markerAdapter) {
+          const existingMarkers = markerAdapter.getAllMarkers();
+          markers.value = existingMarkers;
+        }
+      }
+    }, { immediate: true });
+    return (_ctx, _cache) => {
+      const _component_el_button = resolveComponent("el-button");
+      const _component_el_input = resolveComponent("el-input");
+      const _component_el_option = resolveComponent("el-option");
+      const _component_el_select = resolveComponent("el-select");
+      const _component_el_icon = resolveComponent("el-icon");
+      const _component_el_table_column = resolveComponent("el-table-column");
+      const _component_el_table = resolveComponent("el-table");
+      const _component_EPlusDialog = resolveComponent("EPlusDialog");
+      const _component_el_form_item = resolveComponent("el-form-item");
+      const _component_el_form = resolveComponent("el-form");
+      return openBlock(), createElementBlock(Fragment, null, [
+        createVNode(_component_EPlusDialog, {
+          modelValue: dialogVisible.value,
+          "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => dialogVisible.value = $event),
+          title: "我的标记",
+          width: "600px",
+          "before-close": handleClose,
+          "show-modal": false,
+          cacheId: "markers-dialog",
+          class: "markers-dialog"
+        }, {
+          default: withCtx(() => [
+            createElementVNode("div", _hoisted_1, [
+              createElementVNode("div", _hoisted_2, [
+                createVNode(_component_el_button, {
+                  type: "primary",
+                  icon: unref(plus_default),
+                  onClick: showAddMarker,
+                  class: normalizeClass({ "adding-marker": isAddingMarker.value })
+                }, {
+                  default: withCtx(() => [
+                    createTextVNode(toDisplayString(isAddingMarker.value ? "取消添加" : "添加标记"), 1)
+                  ]),
+                  _: 1
+                }, 8, ["icon", "class"]),
+                createVNode(_component_el_button, {
+                  icon: unref(folder_opened_default),
+                  onClick: importMarkers
+                }, {
+                  default: withCtx(() => [..._cache[6] || (_cache[6] = [
+                    createTextVNode(" 导入标记 ", -1)
+                  ])]),
+                  _: 1
+                }, 8, ["icon"]),
+                createVNode(_component_el_button, {
+                  icon: unref(download_default),
+                  onClick: exportMarkers
+                }, {
+                  default: withCtx(() => [..._cache[7] || (_cache[7] = [
+                    createTextVNode(" 导出标记 ", -1)
+                  ])]),
+                  _: 1
+                }, 8, ["icon"]),
+                createVNode(_component_el_button, {
+                  icon: unref(delete_default),
+                  onClick: clearAllMarkers,
+                  disabled: markers.value.length === 0
+                }, {
+                  default: withCtx(() => [..._cache[8] || (_cache[8] = [
+                    createTextVNode(" 清空全部 ", -1)
+                  ])]),
+                  _: 1
+                }, 8, ["icon", "disabled"])
+              ]),
+              createElementVNode("div", _hoisted_3, [
+                createVNode(_component_el_input, {
+                  modelValue: searchKeyword.value,
+                  "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => searchKeyword.value = $event),
+                  placeholder: "搜索标记名称或备注...",
+                  "prefix-icon": unref(search_default),
+                  clearable: "",
+                  onInput: handleSearch,
+                  style: { "width": "300px" }
+                }, null, 8, ["modelValue", "prefix-icon"]),
+                createVNode(_component_el_select, {
+                  modelValue: filterCategory.value,
+                  "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => filterCategory.value = $event),
+                  placeholder: "筛选分类",
+                  clearable: "",
+                  style: { "width": "120px", "margin-left": "10px" }
+                }, {
+                  default: withCtx(() => [
+                    createVNode(_component_el_option, {
+                      label: "全部",
+                      value: ""
+                    }),
+                    (openBlock(true), createElementBlock(Fragment, null, renderList(categories.value, (category) => {
+                      return openBlock(), createBlock(_component_el_option, {
+                        key: category,
+                        label: category,
+                        value: category
+                      }, null, 8, ["label", "value"]);
+                    }), 128))
+                  ]),
+                  _: 1
+                }, 8, ["modelValue"])
+              ]),
+              createElementVNode("div", _hoisted_4, [
+                createVNode(_component_el_table, {
+                  data: filteredMarkers.value,
+                  height: "300",
+                  onRowClick: locateMarker,
+                  class: "markers-table"
+                }, {
+                  default: withCtx(() => [
+                    createVNode(_component_el_table_column, {
+                      prop: "name",
+                      label: "名称",
+                      width: "120"
+                    }, {
+                      default: withCtx(({ row }) => [
+                        createElementVNode("div", _hoisted_5, [
+                          createVNode(_component_el_icon, {
+                            color: row.color,
+                            size: "16"
+                          }, {
+                            default: withCtx(() => [
+                              createVNode(unref(location_filled_default))
+                            ]),
+                            _: 2
+                          }, 1032, ["color"]),
+                          createElementVNode("span", null, toDisplayString(row.name), 1)
+                        ])
+                      ]),
+                      _: 1
+                    }),
+                    createVNode(_component_el_table_column, {
+                      prop: "category",
+                      label: "分类",
+                      width: "80"
+                    }),
+                    createVNode(_component_el_table_column, {
+                      prop: "description",
+                      label: "备注",
+                      "show-overflow-tooltip": ""
+                    }),
+                    createVNode(_component_el_table_column, {
+                      prop: "createTime",
+                      label: "创建时间",
+                      width: "120"
+                    }, {
+                      default: withCtx(({ row }) => [
+                        createTextVNode(toDisplayString(formatTime(row.createTime)), 1)
+                      ]),
+                      _: 1
+                    }),
+                    createVNode(_component_el_table_column, {
+                      label: "操作",
+                      width: "120"
+                    }, {
+                      default: withCtx(({ row, $index }) => [
+                        createVNode(_component_el_button, {
+                          type: "text",
+                          size: "small",
+                          onClick: withModifiers(($event) => editMarker(row, $index), ["stop"]),
+                          icon: unref(edit_default)
+                        }, {
+                          default: withCtx(() => [..._cache[9] || (_cache[9] = [
+                            createTextVNode(" 编辑 ", -1)
+                          ])]),
+                          _: 2
+                        }, 1032, ["onClick", "icon"]),
+                        createVNode(_component_el_button, {
+                          type: "text",
+                          size: "small",
+                          onClick: withModifiers(($event) => deleteMarker($index), ["stop"]),
+                          icon: unref(delete_default),
+                          class: "delete-btn"
+                        }, {
+                          default: withCtx(() => [..._cache[10] || (_cache[10] = [
+                            createTextVNode(" 删除 ", -1)
+                          ])]),
+                          _: 2
+                        }, 1032, ["onClick", "icon"])
+                      ]),
+                      _: 1
+                    })
+                  ]),
+                  _: 1
+                }, 8, ["data"])
+              ])
+            ])
+          ]),
+          _: 1
+        }, 8, ["modelValue"]),
+        createVNode(_component_EPlusDialog, {
+          modelValue: showAddDialog.value,
+          "onUpdate:modelValue": _cache[5] || (_cache[5] = ($event) => showAddDialog.value = $event),
+          title: "添加标记",
+          width: "350px",
+          "show-modal": false,
+          "append-to-body": "",
+          cacheId: "marker-form"
+        }, {
+          footer: withCtx(() => [
+            createVNode(_component_el_button, { onClick: cancelAddMarker }, {
+              default: withCtx(() => [..._cache[11] || (_cache[11] = [
+                createTextVNode("取消", -1)
+              ])]),
+              _: 1
+            }),
+            createVNode(_component_el_button, {
+              type: "primary",
+              onClick: confirmAddMarker
+            }, {
+              default: withCtx(() => [..._cache[12] || (_cache[12] = [
+                createTextVNode("确定", -1)
+              ])]),
+              _: 1
+            })
+          ]),
+          default: withCtx(() => [
+            createVNode(_component_el_form, {
+              model: markerForm,
+              "label-width": "60px"
+            }, {
+              default: withCtx(() => [
+                createVNode(_component_el_form_item, {
+                  label: "名称",
+                  required: ""
+                }, {
+                  default: withCtx(() => [
+                    createVNode(_component_el_input, {
+                      modelValue: markerForm.name,
+                      "onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => markerForm.name = $event),
+                      placeholder: "请输入标记名称",
+                      maxlength: "20",
+                      "show-word-limit": ""
+                    }, null, 8, ["modelValue"])
+                  ]),
+                  _: 1
+                }),
+                createVNode(_component_el_form_item, { label: "备注" }, {
+                  default: withCtx(() => [
+                    createVNode(_component_el_input, {
+                      modelValue: markerForm.description,
+                      "onUpdate:modelValue": _cache[4] || (_cache[4] = ($event) => markerForm.description = $event),
+                      type: "textarea",
+                      rows: 3,
+                      placeholder: "请输入备注信息",
+                      maxlength: "100",
+                      "show-word-limit": ""
+                    }, null, 8, ["modelValue"])
+                  ]),
+                  _: 1
+                })
+              ]),
+              _: 1
+            }, 8, ["model"])
+          ]),
+          _: 1
+        }, 8, ["modelValue"])
+      ], 64);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};