|
|
@ -1,14 +1,64 @@
|
|
|
|
<!--基地点坐标-->
|
|
|
|
<!--基地点坐标-->
|
|
|
|
<script setup>
|
|
|
|
<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 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 router = useRouter()
|
|
|
|
const route = useRoute();
|
|
|
|
const route = useRoute();
|
|
|
|
|
|
|
|
// 绘制面积(亩)
|
|
|
|
|
|
|
|
const floorSpace = ref(0)
|
|
|
|
const maxHeight = ref(window.innerHeight - 100);
|
|
|
|
const maxHeight = ref(window.innerHeight - 100);
|
|
|
|
const zoom = ref(13);
|
|
|
|
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([
|
|
|
|
const center = ref([
|
|
|
|
116.338461,
|
|
|
|
116.338461,
|
|
|
|
39.97947
|
|
|
|
39.97947
|
|
|
@ -17,6 +67,22 @@ const center = ref([
|
|
|
|
const selectPoi = ({poi}) => {
|
|
|
|
const selectPoi = ({poi}) => {
|
|
|
|
center.value = poi.location.toArray()
|
|
|
|
center.value = poi.location.toArray()
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
const resetMassif = () => {
|
|
|
|
|
|
|
|
ElMessageBox.confirm(
|
|
|
|
|
|
|
|
'重置后本次绘制内容将会被清空,是否确认重置?重置后可重新绘制',
|
|
|
|
|
|
|
|
'重置地块',
|
|
|
|
|
|
|
|
{
|
|
|
|
|
|
|
|
confirmButtonText: '不,我再想想',
|
|
|
|
|
|
|
|
cancelButtonText: '确认重置',
|
|
|
|
|
|
|
|
customClass:'message-box'
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
)
|
|
|
|
|
|
|
|
.then(() => {
|
|
|
|
|
|
|
|
addMassif()
|
|
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
.catch(() => {
|
|
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
}
|
|
|
|
</script>
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
<template>
|
|
|
|
<template>
|
|
|
@ -26,45 +92,96 @@ const selectPoi = ({poi}) => {
|
|
|
|
:zoom="zoom"
|
|
|
|
:zoom="zoom"
|
|
|
|
>
|
|
|
|
>
|
|
|
|
<!--卫星云图-->
|
|
|
|
<!--卫星云图-->
|
|
|
|
<el-amap-layer-satellite :visible="true" />
|
|
|
|
<el-amap-layer-satellite :visible="true"/>
|
|
|
|
<!--定位控件-->
|
|
|
|
<!--定位控件-->
|
|
|
|
<el-amap-control-geolocation :visible="false"/>
|
|
|
|
<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
|
|
|
|
<el-amap-search-box
|
|
|
|
:visible="false"
|
|
|
|
:visible="false"
|
|
|
|
:debounce="1000"
|
|
|
|
:debounce="1000"
|
|
|
|
@select="selectPoi"
|
|
|
|
@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">
|
|
|
|
<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>
|
|
|
|
</div>
|
|
|
|
</el-amap>
|
|
|
|
</el-amap>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
|
<style scoped lang="scss">
|
|
|
|
.top-block{
|
|
|
|
.top-block {
|
|
|
|
position: absolute;
|
|
|
|
position: absolute;
|
|
|
|
top: 0;
|
|
|
|
top: 0;
|
|
|
|
width: 100%;
|
|
|
|
width: 100%;
|
|
|
|
height: 100%;
|
|
|
|
height: 100%;
|
|
|
|
pointer-events:none;//值none表示鼠标事件“穿透”该元素并且指定该元素“下面”的任何东西。
|
|
|
|
pointer-events: none; //值none表示鼠标事件“穿透”该元素并且指定该元素“下面”的任何东西。
|
|
|
|
.operate{
|
|
|
|
.operate {
|
|
|
|
//该控件可以点击
|
|
|
|
//该控件可以点击
|
|
|
|
pointer-events: all;
|
|
|
|
pointer-events: all;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.local-icon{
|
|
|
|
|
|
|
|
|
|
|
|
.local-icon {
|
|
|
|
width: 30px;
|
|
|
|
width: 30px;
|
|
|
|
height: 30px;
|
|
|
|
height: 30px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
:deep(.amap-marker-label){
|
|
|
|
|
|
|
|
|
|
|
|
:deep(.amap-marker-label) {
|
|
|
|
border: none;
|
|
|
|
border: none;
|
|
|
|
border-radius: 5px;
|
|
|
|
border-radius: 5px;
|
|
|
|
padding: 5px 10px;
|
|
|
|
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>
|
|
|
|
</style>
|