|
|
@@ -1,14 +1,14 @@
|
|
|
<template>
|
|
|
<div class="edit-map">
|
|
|
- <custom-header name="勾画区域"></custom-header>
|
|
|
+ <custom-header :name="viewOnly ? '查看区域' : '勾画区域'"></custom-header>
|
|
|
<div class="edit-map-content">
|
|
|
- <div class="edit-map-tip">操作提示:拖动圆点,即可调整地块边界</div>
|
|
|
+ <div class="edit-map-tip" v-if="!viewOnly">操作提示:拖动圆点,即可调整地块边界</div>
|
|
|
<div class="map-container" ref="mapContainer"></div>
|
|
|
<div class="edit-map-footer">
|
|
|
<div class="footer-back" @click="goBack">
|
|
|
<img class="back-icon" src="@/assets/img/home/go-back.png" alt="" />
|
|
|
</div>
|
|
|
- <div class="edit-map-footer-btn">
|
|
|
+ <div class="edit-map-footer-btn" v-if="!viewOnly">
|
|
|
<div class="btn-delete" @click="deletePolygon">删除地块</div>
|
|
|
<div class="btn-cancel" @click="goBack">取消</div>
|
|
|
<div class="btn-confirm" @click="confirm">确认</div>
|
|
|
@@ -20,7 +20,7 @@
|
|
|
|
|
|
<script setup>
|
|
|
import customHeader from "@/components/customHeader.vue";
|
|
|
-import { ref, onMounted, onActivated, onDeactivated } from "vue";
|
|
|
+import { ref, computed, onMounted, onActivated, onDeactivated } from "vue";
|
|
|
import DrawRegionMap from "./map/drawRegionMap.js";
|
|
|
import { useRouter, useRoute } from "vue-router";
|
|
|
import { convertPointToArray } from "@/utils/index";
|
|
|
@@ -32,11 +32,14 @@ const mapContainer = ref(null);
|
|
|
const drawRegionMap = new DrawRegionMap();
|
|
|
|
|
|
const type = ref(null);
|
|
|
+const viewOnly = computed(() => route.query.viewOnly === "1" || route.query.viewOnly === "true");
|
|
|
|
|
|
onMounted(() => {
|
|
|
type.value = route.query.type;
|
|
|
const point = route.query.mapCenter || "POINT (113.6142086995688 23.585836479509055)";
|
|
|
- drawRegionMap.initMap(point, mapContainer.value);
|
|
|
+ const editable = !viewOnly.value;
|
|
|
+ const showPoint = !viewOnly.value;
|
|
|
+ drawRegionMap.initMap(point, mapContainer.value, editable, true, showPoint);
|
|
|
|
|
|
// 地图初始化之后(比如 initPreviewMap 里)
|
|
|
// const regions = [
|
|
|
@@ -58,24 +61,50 @@ onMounted(() => {
|
|
|
onActivated(() => {
|
|
|
const point = route.query.mapCenter || "POINT (113.6142086995688 23.585836479509055)";
|
|
|
|
|
|
+ // 从编辑态进入仅查看时,需重新初始化为不可编辑
|
|
|
+ if (viewOnly.value && drawRegionMap.kmap && drawRegionMap.editable) {
|
|
|
+ drawRegionMap.destroyMap();
|
|
|
+ drawRegionMap.initMap(point, mapContainer.value, false, true, false);
|
|
|
+ }
|
|
|
+
|
|
|
// 先绘制地块
|
|
|
const polygonData = route.query.polygonData;
|
|
|
+ const rawRangeWkt = route.query.rangeWkt;
|
|
|
+ const rangeWkt = rawRangeWkt ? decodeURIComponent(rawRangeWkt) : null;
|
|
|
|
|
|
- const rangeWkt = route.query.rangeWkt;
|
|
|
if (rangeWkt) {
|
|
|
- const regions = JSON.parse(rangeWkt)?.geometryArr.map(item => ({
|
|
|
- geometry: item,
|
|
|
- status: "unresolved",
|
|
|
- updatedTime: route.query.updatedTime,
|
|
|
- }));
|
|
|
- drawRegionMap.setStatusRegions(regions);
|
|
|
+ let regions = [];
|
|
|
+ try {
|
|
|
+ const parsed = JSON.parse(rangeWkt);
|
|
|
+ if (parsed && Array.isArray(parsed.geometryArr)) {
|
|
|
+ regions = parsed.geometryArr.map((item) => ({
|
|
|
+ geometry: item,
|
|
|
+ status: "unresolved",
|
|
|
+ updatedTime: route.query.updatedTime,
|
|
|
+ }));
|
|
|
+ } else if (typeof rangeWkt === "string" && rangeWkt.trim().length > 10) {
|
|
|
+ regions = [{ geometry: rangeWkt.trim(), status: "unresolved", updatedTime: route.query.updatedTime }];
|
|
|
+ }
|
|
|
+ } catch (_) {
|
|
|
+ if (typeof rangeWkt === "string" && rangeWkt.trim().length > 10) {
|
|
|
+ regions = [{ geometry: rangeWkt.trim(), status: "unresolved", updatedTime: route.query.updatedTime }];
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if (regions.length) {
|
|
|
+ drawRegionMap.setStatusRegions(regions);
|
|
|
+ if (viewOnly.value && drawRegionMap.fitAllRegions) {
|
|
|
+ drawRegionMap.fitAllRegions();
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
- if (polygonData) {
|
|
|
+ if (!viewOnly.value && polygonData) {
|
|
|
drawRegionMap.setAreaGeometry(JSON.parse(polygonData)?.geometryArr);
|
|
|
}
|
|
|
|
|
|
- // 再设置地图中心位置,确保视图在 mapCenter
|
|
|
- drawRegionMap.setMapPosition(convertPointToArray(point));
|
|
|
+ // 查看模式下已通过 fitAllRegions 适配;编辑模式再设置地图中心
|
|
|
+ if (!viewOnly.value) {
|
|
|
+ drawRegionMap.setMapPosition(convertPointToArray(point));
|
|
|
+ }
|
|
|
});
|
|
|
|
|
|
onDeactivated(() => {
|