地块绘制组件

src/utils/ruoyi.js

@@ -1,5 +1,3 @@
-
-
 /**
  * 通用js方法封装处理
  * Copyright (c) 2019 ruoyi
@@ -37,7 +35,9 @@ export function parseTime(time, pattern) {
     const time_str = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => {
         let value = formatObj[key]
         // Note: getDay() returns 0 on Sunday
-    if (key === 'a') { return ['日', '一', '二', '三', '四', '五', '六'][value] }
+        if (key === 'a') {
+            return ['日', '一', '二', '三', '四', '五', '六'][value]
+        }
         if (result.length > 0 && value < 10) {
             value = '0' + value
         }
@@ -88,7 +88,7 @@ export function selectDictLabel(datas, value) {
 
 // 回显数据字典（字符串数组）
 export function selectDictLabels(datas, value, separator) {
-  if (value === undefined || value.length ===0) {
+    if (value === undefined || value.length === 0) {
         return "";
     }
     if (Array.isArray(value)) {
@@ -198,13 +198,14 @@ export function handleTree(data, id, parentId, children) {
             }
         }
     }
+
     return tree;
 }
 
 /**
-* 参数处理
-* @param {*} params  参数
-*/
+ * 参数处理
+ * @param {*} params  参数
+ */
 export function tansParams(params) {
     let result = ''
     for (const propName of Object.keys(params)) {
@@ -232,7 +233,8 @@ export function tansParams(params) {
 export function getNormalPath(p) {
     if (p.length === 0 || !p || p == 'undefined') {
         return p
-  };
+    }
+    ;
     let res = p.replace('//', '/')
     if (res[res.length - 1] === '/') {
         return res.slice(0, res.length - 1)
@@ -244,6 +246,7 @@ export function getNormalPath(p) {
 export function blobValidate(data) {
     return data.type !== 'application/json'
 }
+
 /**
  * 转换字体颜色
  *
@@ -299,3 +302,23 @@ export function findTextColor(colorValue) {
         return false;
     }
 }
+
+/**
+ * 面积转换
+ * @param value 单位面积
+ * @param from 从那个单位
+ * @param arrive 转换到那个单位
+ * @returns {number}
+ */
+export function areaConversion(value, from = '平方米', arrive = '亩') {
+    //10000平米 = 15亩 = 1公顷
+    var fRate = {//换算率
+        '公顷': {'亩': 15, '平方米': 10000},
+        '亩': {'平方米': 10000 / 15, '公顷': 1 / 15},
+        '平方米': {'亩': 15 / 10000, '公顷': 1 / 10000}
+    };
+    var v = parseFloat(value);//得到原来的值
+    //执行换算，注意fRate的取值，得到上一次的单位节点，再取当前单位的换算率
+    var rst = (v * fRate[from][arrive]).toFixed(4);//保留4位小数
+    return parseFloat(rst)
+}

src/views/system/base/mapMarkers.vue

@@ -108,5 +108,7 @@ const selectPoi = ({poi}) => {
   border: none;
   border-radius: 5px;
   padding: 5px 10px;
+  //鼠标悬浮变成点击
+  cursor: pointer;
 }
 </style>

src/views/system/base/massifMap.vue

@@ -1,14 +1,64 @@
 <!--基地点坐标-->
 <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";
+import {areaConversion} from "@/utils/ruoyi.js";
+import {ElMessageBox} from "element-plus";
+const polygonRef = ref(null)
 const router = useRouter()
 const route = useRoute();
+// 绘制面积(亩)
+const floorSpace = ref(0)
 const maxHeight = ref(window.innerHeight - 100);
 const zoom = ref(13);
-onMounted(()=>{
-  console.log(route.params);
-})
+// 是否出于绘制模式
+const protract = ref(false)
+// 显示鼠标绘制
+const createdMouse = ref(false)
+// 基地id
+const baseId = Number(route.params.baseId)
+// 地块列表
+const polygonList = reactive([])
+const polygonTemp = ref(null)
+// 鼠标绘制地块完成
+const draw = (value) => {
+  // polygonList.push({
+  //   edit: false,
+  //   path: value
+  // })
+  polygonTemp.value = value
+  computeArea(value)
+  createdMouse.value = false
+}
+const computeArea = (value) => {
+  lazyAMapApiLoaderInstance.then(() => {
+    // 算出平米
+    let number = Math.round(AMap.GeometryUtil.ringArea(value));
+    // 算出亩
+    floorSpace.value = areaConversion(number)
+  })
+}
+// 修改多边形事件
+const updateMassif = (value) => {
+  // 获取多边形路径
+  let newPath = polygonRef.value.$$getInstance().getPath().map(item =>item.toArray())
+  polygonTemp.value = newPath
+  computeArea(newPath)
+}
+// 点击新增地块
+const addMassif = () => {
+  createdMouse.value = true
+  polygonTemp.value = undefined
+  protract.value = true
+  floorSpace.value = 0
+}
+// 取消绘制地块
+const cancelMassif = () => {
+  polygonTemp.value = undefined
+  protract.value = false
+  createdMouse.value = false
+}
+// 当前中心点
 const center = ref([
   116.338461,
   39.97947
@@ -17,6 +67,22 @@ const center = ref([
 const selectPoi = ({poi}) => {
   center.value = poi.location.toArray()
 }
+const resetMassif = () => {
+  ElMessageBox.confirm(
+      '重置后本次绘制内容将会被清空,是否确认重置?重置后可重新绘制',
+      '重置地块',
+      {
+        confirmButtonText: '不，我再想想',
+        cancelButtonText: '确认重置',
+        customClass:'message-box'
+      }
+  )
+      .then(() => {
+        addMassif()
+      })
+      .catch(() => {
+      })
+}
 </script>
 
 <template>
@@ -26,45 +92,96 @@ const selectPoi = ({poi}) => {
         :zoom="zoom"
     >
       <!--卫星云图-->
-      <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-search-box
           :visible="false"
           :debounce="1000"
           @select="selectPoi"
       />
+      <!--鼠标工具-->
+      <el-amap-mouse-tool
+          v-if="createdMouse"
+          type="polyline"
+          :auto-clear="true"
+          @draw="draw"
+      />
+      <!--多边形-->
+      <el-amap-polygon
+          v-for="(polygon, index) in polygonList"
+          :path="polygon.path"
+          :visible="true"
+          :editable="polygon.edit"
+      />
+      <!--多边形-->
+      <el-amap-polygon
+          ref="polygonRef"
+          v-if="!!polygonTemp"
+          :path="polygonTemp"
+          @addnode="updateMassif"
+          @removenode="updateMassif"
+          @adjust="updateMassif"
+          :visible="true"
+          :editable="true"
+      />
       <div class="top-block">
-        <base-right-control />
+        <el-button v-if="!protract" class="operate" @click="addMassif">添加地块</el-button>
+        <base-right-control v-if="!protract"/>
+        <!--绘制操作区-->
+        <div v-if="protract" class="protract-control operate">
+          <el-button type="primary" :disabled="createdMouse">确认({{ floorSpace }}亩)</el-button>
+          <el-button @click="resetMassif" :disabled="createdMouse">重置</el-button>
+          <el-button @click="cancelMassif">取消</el-button>
+        </div>
       </div>
     </el-amap>
   </div>
 </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;
 }
+.protract-control {
+  position: absolute;
+  right: 20px;
+  top: 10px;
+}
+</style>
+<style lang="scss">
+.message-box{
+  --el-messagebox-width: 450px;
+  padding: 20px;
+  .el-message-box__btns{
+    justify-content: center;
+  }
+  .el-button{
+    border-radius: 20px;
+  }
+}
 </style>