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