|
|
|
@ -2,23 +2,100 @@
|
|
|
|
|
<script setup>
|
|
|
|
|
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";
|
|
|
|
|
import {areaConversion, calculateCenter, drawGridLines} from "@/utils/ruoyi.js";
|
|
|
|
|
import {ElMessage, ElMessageBox} from "element-plus";
|
|
|
|
|
import useSettingsStore from "@/store/modules/settings.js";
|
|
|
|
|
import * as turf from '@turf/turf'
|
|
|
|
|
const polygonRef = ref(null)
|
|
|
|
|
const settingsStore = useSettingsStore()
|
|
|
|
|
// 当前地块
|
|
|
|
|
const currentMassif = ref(null)
|
|
|
|
|
const control = reactive({
|
|
|
|
|
// 地图类型
|
|
|
|
|
dataType: 1,
|
|
|
|
|
// 显示地块标签
|
|
|
|
|
massifLabel: true,
|
|
|
|
|
// 显示网格地块
|
|
|
|
|
massifGrid: false,
|
|
|
|
|
// 显示垄
|
|
|
|
|
showRidge: false,
|
|
|
|
|
// 显示垄标签
|
|
|
|
|
ridgeLabel: false,
|
|
|
|
|
// 显示植株
|
|
|
|
|
showPlant: false,
|
|
|
|
|
// 显示植株标签
|
|
|
|
|
plantLabel: false,
|
|
|
|
|
})
|
|
|
|
|
// 鼠标工具ref
|
|
|
|
|
const mouseToolRef = ref(null)
|
|
|
|
|
const router = useRouter()
|
|
|
|
|
const route = useRoute();
|
|
|
|
|
// 绘制面积(亩)
|
|
|
|
|
const floorSpace = ref(0)
|
|
|
|
|
const maxHeight = ref(window.innerHeight - 100);
|
|
|
|
|
const zoom = ref(13);
|
|
|
|
|
// 是否出于绘制模式
|
|
|
|
|
const zoom = ref(17);
|
|
|
|
|
// 是否处于绘制模式
|
|
|
|
|
const protract = ref(false)
|
|
|
|
|
// 显示鼠标绘制
|
|
|
|
|
const createdMouse = ref(false)
|
|
|
|
|
// 基地id
|
|
|
|
|
const baseId = Number(route.params.baseId)
|
|
|
|
|
// 文本标记
|
|
|
|
|
const componentText = ref([])
|
|
|
|
|
// 折线标记
|
|
|
|
|
const gridLines = ref([])
|
|
|
|
|
// 地块列表
|
|
|
|
|
const polygonList = reactive([])
|
|
|
|
|
const polygonList = reactive([
|
|
|
|
|
{
|
|
|
|
|
id: 1,
|
|
|
|
|
title: '测试地块1',
|
|
|
|
|
path:[
|
|
|
|
|
[
|
|
|
|
|
116.337325,
|
|
|
|
|
39.979046
|
|
|
|
|
],
|
|
|
|
|
[
|
|
|
|
|
116.337334,
|
|
|
|
|
39.978387
|
|
|
|
|
],
|
|
|
|
|
[
|
|
|
|
|
116.337592,
|
|
|
|
|
39.978374
|
|
|
|
|
],
|
|
|
|
|
[
|
|
|
|
|
116.337861,
|
|
|
|
|
39.979013
|
|
|
|
|
],
|
|
|
|
|
[
|
|
|
|
|
116.337799,
|
|
|
|
|
39.97906
|
|
|
|
|
]
|
|
|
|
|
],
|
|
|
|
|
fillColor:'#09a882'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
id:2,
|
|
|
|
|
title:'测试地块2',
|
|
|
|
|
path:[
|
|
|
|
|
[
|
|
|
|
|
116.338296,
|
|
|
|
|
39.978921
|
|
|
|
|
],
|
|
|
|
|
[
|
|
|
|
|
116.33829,
|
|
|
|
|
39.978668
|
|
|
|
|
],
|
|
|
|
|
[
|
|
|
|
|
116.338569,
|
|
|
|
|
39.978657
|
|
|
|
|
],
|
|
|
|
|
[
|
|
|
|
|
116.33859,
|
|
|
|
|
39.978905
|
|
|
|
|
]
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
])
|
|
|
|
|
const polygonTemp = ref(null)
|
|
|
|
|
// 鼠标绘制地块完成
|
|
|
|
|
const draw = (value) => {
|
|
|
|
@ -72,17 +149,61 @@ const resetMassif = () => {
|
|
|
|
|
'重置后本次绘制内容将会被清空,是否确认重置?重置后可重新绘制',
|
|
|
|
|
'重置地块',
|
|
|
|
|
{
|
|
|
|
|
confirmButtonText: '不,我再想想',
|
|
|
|
|
cancelButtonText: '确认重置',
|
|
|
|
|
confirmButtonText: '确认重置',
|
|
|
|
|
cancelButtonText: '不,我再想想',
|
|
|
|
|
customClass:'message-box'
|
|
|
|
|
}
|
|
|
|
|
)
|
|
|
|
|
.then(() => {
|
|
|
|
|
if (mouseToolRef.value){
|
|
|
|
|
mouseToolRef.value.$$close(true)
|
|
|
|
|
mouseToolRef.value.$$open()
|
|
|
|
|
}
|
|
|
|
|
addMassif()
|
|
|
|
|
})
|
|
|
|
|
.catch(() => {
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
// 点击确定完成绘制
|
|
|
|
|
const submitMassif = () => {
|
|
|
|
|
lazyAMapApiLoaderInstance.then(() => {
|
|
|
|
|
if (polygonTemp.value.length<3){
|
|
|
|
|
ElMessage.error('地块至少需要三个点')
|
|
|
|
|
return
|
|
|
|
|
}
|
|
|
|
|
for (let item of polygonList) {
|
|
|
|
|
if (AMap.GeometryUtil.doesRingRingIntersect(polygonTemp.value,item.path) || AMap.GeometryUtil.isRingInRing(polygonTemp.value,item.path) || AMap.GeometryUtil.isRingInRing(item.path,polygonTemp.value)){
|
|
|
|
|
ElMessage.error('当前地块与已有地块边界重合,请修改后再确认')
|
|
|
|
|
return
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
polygonList.push({path:polygonTemp.value,edit:false})
|
|
|
|
|
polygonTemp.value = undefined
|
|
|
|
|
createdMouse.value = false
|
|
|
|
|
protract.value = false
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
watch(()=>polygonList,(value)=>{
|
|
|
|
|
componentText.value = []
|
|
|
|
|
value.forEach(item=>{
|
|
|
|
|
let points = turf.points(item.path);
|
|
|
|
|
// 格式化标签位置
|
|
|
|
|
componentText.value.push({text:item.title,position:turf.center(points).geometry.coordinates})
|
|
|
|
|
// 格式化网格线显示
|
|
|
|
|
// gridLines.value.push(drawGridLines(item.path))
|
|
|
|
|
var bbox = turf.bbox(turf.lineString(item.path));
|
|
|
|
|
// 网格密度 km
|
|
|
|
|
var cellSide = 0.01;
|
|
|
|
|
var options = {units: 'kilometers'};
|
|
|
|
|
var squareGrid = turf.squareGrid(bbox, cellSide, options);
|
|
|
|
|
let newList = []
|
|
|
|
|
squareGrid.features.map(item => item.geometry.coordinates).forEach(item =>{
|
|
|
|
|
newList.push(...item)
|
|
|
|
|
})
|
|
|
|
|
gridLines.value.push(newList)
|
|
|
|
|
})
|
|
|
|
|
},{deep:true,immediate:true})
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<template>
|
|
|
|
@ -107,6 +228,7 @@ const resetMassif = () => {
|
|
|
|
|
/>
|
|
|
|
|
<!--鼠标工具-->
|
|
|
|
|
<el-amap-mouse-tool
|
|
|
|
|
ref="mouseToolRef"
|
|
|
|
|
v-if="createdMouse"
|
|
|
|
|
type="polyline"
|
|
|
|
|
:auto-clear="true"
|
|
|
|
@ -117,7 +239,8 @@ const resetMassif = () => {
|
|
|
|
|
v-for="(polygon, index) in polygonList"
|
|
|
|
|
:path="polygon.path"
|
|
|
|
|
:visible="true"
|
|
|
|
|
:editable="polygon.edit"
|
|
|
|
|
:fillColor="polygon.fillColor"
|
|
|
|
|
:editable="false"
|
|
|
|
|
/>
|
|
|
|
|
<!--多边形-->
|
|
|
|
|
<el-amap-polygon
|
|
|
|
@ -130,13 +253,31 @@ const resetMassif = () => {
|
|
|
|
|
:visible="true"
|
|
|
|
|
:editable="true"
|
|
|
|
|
/>
|
|
|
|
|
<!--灵活点标记-地块名称-->
|
|
|
|
|
<el-amap-marker
|
|
|
|
|
v-if="control.massifLabel"
|
|
|
|
|
v-for="comText in componentText"
|
|
|
|
|
:position="comText.position"
|
|
|
|
|
:visible="true"
|
|
|
|
|
:label="{content:comText.text,offset:[-50,0]}">
|
|
|
|
|
<div></div>
|
|
|
|
|
</el-amap-marker>
|
|
|
|
|
<el-amap-polyline
|
|
|
|
|
v-if="control.massifGrid"
|
|
|
|
|
v-for="grid in gridLines"
|
|
|
|
|
:path="grid"
|
|
|
|
|
:visible="true">
|
|
|
|
|
</el-amap-polyline>
|
|
|
|
|
<div class="top-block">
|
|
|
|
|
<el-button v-if="!protract" class="operate" @click="addMassif">添加地块</el-button>
|
|
|
|
|
<base-right-control v-if="!protract"/>
|
|
|
|
|
<base-right-control v-if="!protract" v-model="control"/>
|
|
|
|
|
<!--左侧操作区-->
|
|
|
|
|
<div v-if="!protract" class="operate map-left">
|
|
|
|
|
<el-button @click="addMassif">添加地块</el-button>
|
|
|
|
|
</div>
|
|
|
|
|
<!--绘制操作区-->
|
|
|
|
|
<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 type="primary" :disabled="createdMouse" @click="submitMassif">确认({{ floorSpace }}亩)</el-button>
|
|
|
|
|
<el-button @click="resetMassif">重置</el-button>
|
|
|
|
|
<el-button @click="cancelMassif">取消</el-button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
@ -145,6 +286,7 @@ const resetMassif = () => {
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
|
|
//地图上层元素
|
|
|
|
|
.top-block {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 0;
|
|
|
|
@ -156,17 +298,30 @@ const resetMassif = () => {
|
|
|
|
|
pointer-events: all;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
//地图左侧操作区
|
|
|
|
|
.map-left{
|
|
|
|
|
background: #FFFFFF;
|
|
|
|
|
width: 350px;
|
|
|
|
|
border-radius: 5px;
|
|
|
|
|
padding: 10px;
|
|
|
|
|
position: absolute;
|
|
|
|
|
left: 10px;
|
|
|
|
|
top: 20px;
|
|
|
|
|
//透明度
|
|
|
|
|
opacity:0.9;
|
|
|
|
|
}
|
|
|
|
|
//点标记图标样式
|
|
|
|
|
.local-icon {
|
|
|
|
|
width: 30px;
|
|
|
|
|
height: 30px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
//灵活点标记样式
|
|
|
|
|
:deep(.amap-marker-label) {
|
|
|
|
|
border: none;
|
|
|
|
|
border-radius: 5px;
|
|
|
|
|
padding: 5px 10px;
|
|
|
|
|
}
|
|
|
|
|
//绘制操作区
|
|
|
|
|
.protract-control {
|
|
|
|
|
position: absolute;
|
|
|
|
|
right: 20px;
|
|
|
|
@ -174,6 +329,7 @@ const resetMassif = () => {
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
<style lang="scss">
|
|
|
|
|
//修改确认弹窗样式
|
|
|
|
|
.message-box{
|
|
|
|
|
--el-messagebox-width: 450px;
|
|
|
|
|
padding: 20px;
|
|
|
|
|