From e47bc808875b29f1e865918b8fa79d9c26458c2b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=B4=BE=E8=82=83?= <15833576927@163.com>
Date: Mon, 20 May 2024 15:30:55 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E9=87=91=E5=85=89=E5=86=9C?=
 =?UTF-8?q?=E5=9C=BA=EF=BC=88=E5=B9=BF=E8=A5=BF=E5=86=9C=E5=9E=A6=E8=82=B2?=
 =?UTF-8?q?=E7=A7=8D=E5=9F=BA=E5=9C=B0=EF=BC=89=E6=BC=94=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/system/base/mapMarkers.vue |  42 ++++++----
 src/views/system/base/massifMap.vue  | 119 +++++++++++++++++++++++++--
 2 files changed, 137 insertions(+), 24 deletions(-)

diff --git a/src/views/system/base/mapMarkers.vue b/src/views/system/base/mapMarkers.vue
index 8b21677..f143a25 100644
--- a/src/views/system/base/mapMarkers.vue
+++ b/src/views/system/base/mapMarkers.vue
@@ -1,20 +1,26 @@
 <!--基地点坐标-->
 <script setup>
-import {ElAmap, useGeolocation ,lazyAMapApiLoaderInstance} from "@vuemap/vue-amap";
+import {ElAmap, useGeolocation, lazyAMapApiLoaderInstance} from "@vuemap/vue-amap";
 import BaseRightControl from "@/views/system/base/baseRightControl.vue";
+
 const router = useRouter()
 const maxHeight = ref(window.innerHeight - 100);
 const zoom = ref(13);
 const center = ref([
-  116.338461,
-  39.97947
+  107.5856025,
+  22.484856
 ]);
 const baseList = ref([
   {
-    baseId:1,
-    position:[116.338461, 39.97947],
-    label:'测试',
-  }
+    baseId: 1,
+    position: [116.338461, 39.97947],
+    label: '测试',
+  },
+  {
+    baseId: 2,
+    position: [107.5856025, 22.484856],
+    label: '金光农场（广西农垦育种基地）',
+  },
 ])
 const control = reactive({
   // 地图类型
@@ -39,7 +45,7 @@ const control = reactive({
 const clickBase = ref(null)
 const clickMarker = (value) => {
   clickBase.value = value
-  router.push({path:'/system/base/massifMap/'+value.baseId})
+  router.push({path: '/system/base/massifMap/' + value.baseId})
   console.log(value);
 }
 onBeforeMount(() => {
@@ -75,19 +81,19 @@ const selectPoi = ({poi}) => {
         :features="control.showPoi?['bg','point','road','building']:['bg']"
     >
       <!--卫星云图-->
-      <el-amap-layer-satellite :visible="true" />
+      <el-amap-layer-satellite :visible="true"/>
       <!--定位控件-->
       <el-amap-control-geolocation :visible="false"/>
       <!--地图缩放控件-->
-      <el-amap-control-tool-bar :visible="true" />
+      <el-amap-control-tool-bar :visible="true"/>
       <!--比例尺-->
-      <el-amap-control-scale :visible="true" />
+      <el-amap-control-scale :visible="true"/>
       <!--灵活点标记-->
       <el-amap-marker
           v-for="item in baseList"
           :position="item.position"
           :title="item.label"
-          :label="{content:item.label,offset:[5,0]}"
+          :label="{content:item.label,offset:[0,0]}"
           :visible="true"
           :draggable="false"
           @click="clickMarker(item)"
@@ -108,22 +114,24 @@ const selectPoi = ({poi}) => {
 </template>
 
 <style scoped lang="scss">
-.top-block{
+.top-block {
   position: absolute;
   top: 0;
   width: 100%;
   height: 100%;
-  pointer-events:none;//值none表示鼠标事件“穿透”该元素并且指定该元素“下面”的任何东西。
-  .operate{
+  pointer-events: none; //值none表示鼠标事件“穿透”该元素并且指定该元素“下面”的任何东西。
+  .operate {
     //该控件可以点击
     pointer-events: all;
   }
 }
-.local-icon{
+
+.local-icon {
   width: 30px;
   height: 30px;
 }
-:deep(.amap-marker-label){
+
+:deep(.amap-marker-label) {
   border: none;
   border-radius: 5px;
   padding: 5px 10px;
diff --git a/src/views/system/base/massifMap.vue b/src/views/system/base/massifMap.vue
index 710dfd4..79be0d8 100644
--- a/src/views/system/base/massifMap.vue
+++ b/src/views/system/base/massifMap.vue
@@ -48,7 +48,7 @@ const mouseToolRef = ref(null)
 // 绘制面积(亩)
 const floorSpace = ref(0)
 const maxHeight = ref(window.innerHeight - 100);
-const zoom = ref(17);
+const zoom = ref(16);
 // 是否处于绘制模式
 const protract = ref(false)
 // 显示鼠标绘制
@@ -62,6 +62,54 @@ const gridLines = ref([])
 const polygonList = reactive([
   {
     id: 1,
+    title: '地块1',
+    cropType: '甘蔗',
+    path: [
+      [
+        107.585681,
+        22.481152
+      ],
+      [
+        107.585536,
+        22.481152
+      ],
+      [
+        107.585524,
+        22.48856
+      ],
+      [
+        107.585662,
+        22.48844
+      ],
+    ],
+    fillColor: undefined
+  },
+  {
+    id: 2,
+    title: '地块2',
+    cropType: '甘蔗',
+    path: [
+      [
+        107.585526,
+        22.481149
+      ],
+      [
+        107.585274,
+        22.481137
+      ],
+      [
+        107.585257,
+        22.48857
+      ],
+      [
+        107.585515,
+        22.48839
+      ]
+    ],
+    fillColor: undefined
+  },
+    {
+    id: 3,
     title: '测试地块1',
     cropType: '甘蔗',
     path: [
@@ -89,7 +137,7 @@ const polygonList = reactive([
     fillColor: undefined
   },
   {
-    id: 2,
+    id: 4,
     title: '测试地块2',
     cropType: '甘蔗',
     path: [
@@ -160,6 +208,66 @@ const ridgeList = ref([
       ]
     ]
   },
+  {
+    id:1,
+    polygonId:1,
+    title:'垄1',
+    path:[
+      [
+        107.585681,
+        22.481152
+      ],
+      [
+        107.585662,
+        22.48844
+      ]
+    ]
+  },
+  {
+    id:2,
+    polygonId:1,
+    title:'垄28',
+    path:[
+      [
+        107.585536,
+        22.481152
+      ],
+      [
+        107.585524,
+        22.48856
+      ]
+    ]
+  },
+  {
+    id:3,
+    polygonId:2,
+    title:'垄1',
+    path:[
+      [
+        107.585526,
+        22.481149
+      ],
+      [
+        107.585515,
+        22.48839
+      ]
+    ]
+  },
+  {
+    id:3,
+    polygonId:2,
+    title:'垄43',
+    path:[
+      [
+        107.585274,
+        22.481137
+      ],
+      [
+        107.585257,
+        22.48857
+      ]
+    ]
+  },
 ])
 // 植株列表
 const plantList = ref([
@@ -305,8 +413,8 @@ const cancelMassif = () => {
 }
 // 当前中心点
 const center = ref([
-  116.338461,
-  39.97947
+  107.5856025,
+  22.484856
 ]);
 // 进入搜索选择的位置
 const selectPoi = ({poi}) => {
@@ -477,7 +585,6 @@ const toAddMassif = () => {
           :path="polygonTemp"
           @addnode="updateMassif"
           @removenode="updateMassif"
-          :zooms="[13,20]"
           @adjust="updateMassif"
           :visible="true"
           :editable="true"
@@ -496,7 +603,6 @@ const toAddMassif = () => {
       <el-amap-polyline
           v-if="control.massifGrid"
           v-for="grid in gridLines"
-          :zooms="[16,20]"
           stroke-color="#e36ea4"
           :path="grid"
           :visible="true">
@@ -505,7 +611,6 @@ const toAddMassif = () => {
       <el-amap-polyline
           v-if="control.showRidge"
           v-for="ridge in ridgeList"
-          :zooms="[16,20]"
           :strokeWeight="5"
           strokeColor="#a4e36e"
           :path="ridge.path"