parent
0121ef077e
commit
c66e6e9c1e
@ -0,0 +1,56 @@
|
|||||||
|
<script setup>
|
||||||
|
const maxHeight = ref(window.innerHeight - 100);
|
||||||
|
const zoom = ref(12);
|
||||||
|
const center = ref(null);
|
||||||
|
const created = ref(false)
|
||||||
|
const amapMouseType = ref('polyline')
|
||||||
|
const polygonList = ref([])
|
||||||
|
const draw = (value) => {
|
||||||
|
polygonList.value.push(value)
|
||||||
|
console.log(value);
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="app-container" :style="{height:maxHeight+'px'}">
|
||||||
|
<el-amap
|
||||||
|
:center="center"
|
||||||
|
:zoom="zoom"
|
||||||
|
>
|
||||||
|
<div class="top-block">
|
||||||
|
<el-button class="operate" @click="created = !created">添加地块</el-button>
|
||||||
|
</div>
|
||||||
|
<!--卫星云图-->
|
||||||
|
<el-amap-layer-satellite :visible="true" />
|
||||||
|
<!--定位控件-->
|
||||||
|
<el-amap-control-geolocation :visible="true"/>
|
||||||
|
<!--鼠标工具-->
|
||||||
|
<el-amap-mouse-tool
|
||||||
|
v-if="created"
|
||||||
|
:type="amapMouseType"
|
||||||
|
:auto-clear="true"
|
||||||
|
@draw="draw"
|
||||||
|
/>
|
||||||
|
<!--多边形-->
|
||||||
|
<el-amap-polygon
|
||||||
|
v-for="(polygon, index) in polygonList"
|
||||||
|
:path="polygon"
|
||||||
|
:visible="true"
|
||||||
|
:editable="true"
|
||||||
|
/>
|
||||||
|
</el-amap>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.top-block{
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
pointer-events:none;//值none表示鼠标事件“穿透”该元素并且指定该元素“下面”的任何东西。
|
||||||
|
.operate{
|
||||||
|
pointer-events: all;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
Loading…
Reference in new issue