|
|
@ -38,6 +38,8 @@ const control = reactive({
|
|
|
|
showPlant: false,
|
|
|
|
showPlant: false,
|
|
|
|
// 显示植株标签
|
|
|
|
// 显示植株标签
|
|
|
|
plantLabel: false,
|
|
|
|
plantLabel: false,
|
|
|
|
|
|
|
|
// 显示地标
|
|
|
|
|
|
|
|
showPoi: true,
|
|
|
|
})
|
|
|
|
})
|
|
|
|
// 鼠标工具ref
|
|
|
|
// 鼠标工具ref
|
|
|
|
const mouseToolRef = ref(null)
|
|
|
|
const mouseToolRef = ref(null)
|
|
|
@ -207,12 +209,24 @@ watch(() => polygonList, (value) => {
|
|
|
|
// 格式化网格线显示
|
|
|
|
// 格式化网格线显示
|
|
|
|
// gridLines.value.push(drawGridLines(item.path))
|
|
|
|
// gridLines.value.push(drawGridLines(item.path))
|
|
|
|
var bbox = turf.bbox(turf.lineString(item.path));
|
|
|
|
var bbox = turf.bbox(turf.lineString(item.path));
|
|
|
|
|
|
|
|
var polygon = turf.polygon([[...item.path, item.path[0]]]);
|
|
|
|
// 网格密度 km
|
|
|
|
// 网格密度 km
|
|
|
|
var cellSide = 0.01;
|
|
|
|
var cellSide = 0.01;
|
|
|
|
var options = {units: 'kilometers'};
|
|
|
|
var options = {units: 'kilometers'};
|
|
|
|
var squareGrid = turf.squareGrid(bbox, cellSide, options);
|
|
|
|
var squareGrid = turf.squareGrid(bbox, cellSide, options);
|
|
|
|
let newList = []
|
|
|
|
let newList = []
|
|
|
|
squareGrid.features.map(item => item.geometry.coordinates).forEach(item => {
|
|
|
|
const filteredGrid = turf.featureCollection([]);
|
|
|
|
|
|
|
|
// 遍历网格中的每一个单元(多边形)
|
|
|
|
|
|
|
|
squareGrid.features.forEach(gridCell => {
|
|
|
|
|
|
|
|
// 使用turf.intersect检查网格单元是否与原始多边形相交
|
|
|
|
|
|
|
|
const intersection = turf.intersect(polygon, gridCell);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 如果有交集(即该网格单元至少部分位于多边形内),则保留
|
|
|
|
|
|
|
|
if (intersection) {
|
|
|
|
|
|
|
|
filteredGrid.features.push(gridCell);
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
filteredGrid.features.map(item => item.geometry.coordinates).forEach(item => {
|
|
|
|
newList.push(...item)
|
|
|
|
newList.push(...item)
|
|
|
|
})
|
|
|
|
})
|
|
|
|
gridLines.value.push(newList)
|
|
|
|
gridLines.value.push(newList)
|
|
|
@ -239,6 +253,25 @@ const clickCurrentMassif = (item) => {
|
|
|
|
// 点击的中心点
|
|
|
|
// 点击的中心点
|
|
|
|
center.value = turf.center(points).geometry.coordinates
|
|
|
|
center.value = turf.center(points).geometry.coordinates
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
// 删除地块
|
|
|
|
|
|
|
|
const delMassif = (item,index) => {
|
|
|
|
|
|
|
|
ElMessageBox.confirm(
|
|
|
|
|
|
|
|
'地块删除后,将无法被找回,是否人要删除该地块?',
|
|
|
|
|
|
|
|
'删除地块',
|
|
|
|
|
|
|
|
{
|
|
|
|
|
|
|
|
confirmButtonText: '确认删除',
|
|
|
|
|
|
|
|
cancelButtonText: '不,我再想想',
|
|
|
|
|
|
|
|
customClass: 'message-box'
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
).then(()=>{
|
|
|
|
|
|
|
|
polygonList.splice(index,1)
|
|
|
|
|
|
|
|
ElMessage.success(`${item.label || '地块'}删除成功`)
|
|
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
const updMassifStatus = (item,enabled) => {
|
|
|
|
|
|
|
|
item.enabled = enabled
|
|
|
|
|
|
|
|
ElMessage.success(`${item.title || '地块'}状态已更新为${enabled?'启用':'禁用'}`)
|
|
|
|
|
|
|
|
}
|
|
|
|
</script>
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
<template>
|
|
|
|
<template>
|
|
|
@ -246,6 +279,7 @@ const clickCurrentMassif = (item) => {
|
|
|
|
<el-amap
|
|
|
|
<el-amap
|
|
|
|
:center="center"
|
|
|
|
:center="center"
|
|
|
|
:zoom="zoom"
|
|
|
|
:zoom="zoom"
|
|
|
|
|
|
|
|
:features="control.showPoi?['bg','point','road','building']:['bg']"
|
|
|
|
>
|
|
|
|
>
|
|
|
|
<!--卫星云图-->
|
|
|
|
<!--卫星云图-->
|
|
|
|
<el-amap-layer-satellite :visible="true"/>
|
|
|
|
<el-amap-layer-satellite :visible="true"/>
|
|
|
@ -270,13 +304,13 @@ const clickCurrentMassif = (item) => {
|
|
|
|
@draw="draw"
|
|
|
|
@draw="draw"
|
|
|
|
/>
|
|
|
|
/>
|
|
|
|
<!--多边形-->
|
|
|
|
<!--多边形-->
|
|
|
|
|
|
|
|
<!-- @mousedown="clickCurrentMassif(polygon)"-->
|
|
|
|
<el-amap-polygon
|
|
|
|
<el-amap-polygon
|
|
|
|
v-for="(polygon, index) in polygonList"
|
|
|
|
v-for="(polygon, index) in polygonList"
|
|
|
|
:path="polygon.path"
|
|
|
|
:path="polygon.path"
|
|
|
|
:visible="true"
|
|
|
|
:visible="true"
|
|
|
|
:fillColor="polygon.fillColor"
|
|
|
|
:fillColor="polygon.fillColor"
|
|
|
|
:editable="false"
|
|
|
|
:editable="false"
|
|
|
|
@mousedown="clickCurrentMassif(polygon)"
|
|
|
|
|
|
|
|
/>
|
|
|
|
/>
|
|
|
|
<!--多边形-->
|
|
|
|
<!--多边形-->
|
|
|
|
<el-amap-polygon
|
|
|
|
<el-amap-polygon
|
|
|
@ -324,7 +358,8 @@ const clickCurrentMassif = (item) => {
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<el-collapse-transition>
|
|
|
|
<el-collapse-transition>
|
|
|
|
<div class="massif-list" v-show="showMassifList">
|
|
|
|
<div class="massif-list" v-show="showMassifList">
|
|
|
|
<div class="massif-item" :class="{'massif-item-click':item.id === currentMassif?.id}" v-for="(item,index) in polygonList" @click="clickCurrentMassif(item)">
|
|
|
|
<div class="massif-item" :class="{'massif-item-click':item.id === currentMassif?.id}"
|
|
|
|
|
|
|
|
v-for="(item,index) in polygonList" @click="clickCurrentMassif(item)">
|
|
|
|
<el-row>
|
|
|
|
<el-row>
|
|
|
|
<el-col :span="12">
|
|
|
|
<el-col :span="12">
|
|
|
|
<div class="title">
|
|
|
|
<div class="title">
|
|
|
@ -349,7 +384,25 @@ const clickCurrentMassif = (item) => {
|
|
|
|
{{ item.enabled ? '启用' : '禁用' }}
|
|
|
|
{{ item.enabled ? '启用' : '禁用' }}
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="more">
|
|
|
|
<div class="more">
|
|
|
|
|
|
|
|
<el-popover placement="right" :width="60" trigger="click">
|
|
|
|
|
|
|
|
<template #reference>
|
|
|
|
<i-more theme="outline" size="24" fill="#5c5e5d"/>
|
|
|
|
<i-more theme="outline" size="24" fill="#5c5e5d"/>
|
|
|
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<div>
|
|
|
|
|
|
|
|
<div class="more-item">
|
|
|
|
|
|
|
|
地块详情
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="more-item">
|
|
|
|
|
|
|
|
编辑地块
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="more-item" @click="delMassif(item,index)">
|
|
|
|
|
|
|
|
删除地块
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="more-item" @click="updMassifStatus(item,!item.enabled)">
|
|
|
|
|
|
|
|
{{ item.enabled?'禁用':'启用' }}地块
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</el-popover>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</el-col>
|
|
|
|
</el-col>
|
|
|
@ -437,32 +490,39 @@ const clickCurrentMassif = (item) => {
|
|
|
|
border-radius: 5px;
|
|
|
|
border-radius: 5px;
|
|
|
|
float: left;
|
|
|
|
float: left;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.title-text {
|
|
|
|
.title-text {
|
|
|
|
margin-left: 10px;
|
|
|
|
margin-left: 10px;
|
|
|
|
float: left;
|
|
|
|
float: left;
|
|
|
|
font-size: 16px;
|
|
|
|
font-size: 16px;
|
|
|
|
|
|
|
|
|
|
|
|
.crop {
|
|
|
|
.crop {
|
|
|
|
font-size: 12px;
|
|
|
|
font-size: 12px;
|
|
|
|
margin-top: 2px;
|
|
|
|
margin-top: 2px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.massif-item-click {
|
|
|
|
.massif-item-click {
|
|
|
|
border: 1px solid v-bind(theme) !important;
|
|
|
|
border: 1px solid v-bind(theme) !important;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.massif-item {
|
|
|
|
.massif-item {
|
|
|
|
border-radius: 5px;
|
|
|
|
border-radius: 5px;
|
|
|
|
border-bottom: 1px solid rgba(0, 0, 0, 0.08);
|
|
|
|
border-bottom: 1px solid rgba(0, 0, 0, 0.08);
|
|
|
|
padding: 10px;
|
|
|
|
padding: 10px;
|
|
|
|
margin: 0 -5px;
|
|
|
|
margin: 0 -5px;
|
|
|
|
|
|
|
|
|
|
|
|
.massif-item-right {
|
|
|
|
.massif-item-right {
|
|
|
|
display: flex;
|
|
|
|
display: flex;
|
|
|
|
justify-content: flex-end;
|
|
|
|
justify-content: flex-end;
|
|
|
|
align-items: center;
|
|
|
|
align-items: center;
|
|
|
|
font-size: 14px;
|
|
|
|
font-size: 14px;
|
|
|
|
color: #5c5e5d;
|
|
|
|
color: #5c5e5d;
|
|
|
|
|
|
|
|
|
|
|
|
div {
|
|
|
|
div {
|
|
|
|
margin: 0 3px;
|
|
|
|
margin: 0 3px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.more {
|
|
|
|
.more {
|
|
|
|
//鼠标悬浮变成点击
|
|
|
|
//鼠标悬浮变成点击
|
|
|
|
cursor: pointer;
|
|
|
|
cursor: pointer;
|
|
|
@ -486,7 +546,16 @@ const clickCurrentMassif = (item) => {
|
|
|
|
background: none;
|
|
|
|
background: none;
|
|
|
|
color: #FFFFFF;
|
|
|
|
color: #FFFFFF;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.more-item {
|
|
|
|
|
|
|
|
text-align: center;
|
|
|
|
|
|
|
|
//鼠标悬浮变成点击
|
|
|
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
|
|
|
padding: 5px 0;
|
|
|
|
|
|
|
|
&:hover {
|
|
|
|
|
|
|
|
background-color: var(--el-color-primary-light-9);
|
|
|
|
|
|
|
|
color: var(--el-color-primary);
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
//绘制操作区
|
|
|
|
//绘制操作区
|
|
|
|
.protract-control {
|
|
|
|
.protract-control {
|
|
|
|
position: absolute;
|
|
|
|
position: absolute;
|
|
|
@ -495,11 +564,18 @@ const clickCurrentMassif = (item) => {
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</style>
|
|
|
|
</style>
|
|
|
|
<style lang="scss">
|
|
|
|
<style lang="scss">
|
|
|
|
|
|
|
|
.el-popover.el-popper{
|
|
|
|
|
|
|
|
min-width: 100px;
|
|
|
|
|
|
|
|
padding: 5px;
|
|
|
|
|
|
|
|
}
|
|
|
|
//修改确认弹窗样式
|
|
|
|
//修改确认弹窗样式
|
|
|
|
.message-box {
|
|
|
|
.message-box {
|
|
|
|
--el-messagebox-width: 450px;
|
|
|
|
--el-messagebox-width: 450px;
|
|
|
|
padding: 20px;
|
|
|
|
padding: 20px;
|
|
|
|
|
|
|
|
.el-message-box__message{
|
|
|
|
|
|
|
|
text-align: center;
|
|
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
|
|
}
|
|
|
|
.el-message-box__btns {
|
|
|
|
.el-message-box__btns {
|
|
|
|
justify-content: center;
|
|
|
|
justify-content: center;
|
|
|
|
}
|
|
|
|
}
|
|
|
|