72 lines
2.0 KiB
Vue
72 lines
2.0 KiB
Vue
<template>
|
|
<div class="plant-gs-warp">
|
|
<div ref="viewwarp" class="plant-gs-content" :style="{ 'background-image': 'url(' + getAssetsFile('images/plant/bg1.png') + ')' }">
|
|
<el-amap :zoom="11" :center="[99.402267, 23.538889]" ref="mapRef">
|
|
<!-- 带孔洞的四边形 -->
|
|
<el-amap-layer-satellite :visible="visible" />
|
|
<el-amap-polygon :path="polygon" :fill-opacity="0.5" fill-color="#748cb7" stroke-color="transparent" />
|
|
</el-amap>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script setup>
|
|
import { isEmpty, getAssetsFile } from '@/utils';
|
|
import { ref, reactive, onMounted } from 'vue';
|
|
import { ElAmap, ElAmapPolygon } from '@vuemap/vue-amap';
|
|
onMounted(() => {});
|
|
|
|
const zoom = ref(15);
|
|
const center = ref([121.5273285, 31.21515044]);
|
|
const polygon = reactive([
|
|
[
|
|
[99.406653, 23.534142], // 左下角
|
|
[99.706653, 23.534142], // 右下角
|
|
[99.706653, 23.834142], // 右上角
|
|
[99.406653, 23.834142], // 左上角
|
|
],
|
|
[
|
|
[99.506653, 23.634142], // 耿马镇边界点 1
|
|
[99.606653, 23.634142], // 耿马镇边界点 2
|
|
[99.606653, 23.734142], // 耿马镇边界点 3
|
|
[99.506653, 23.734142], // 耿马镇边界点 4
|
|
],
|
|
]);
|
|
|
|
const mapRef = ref(null);
|
|
onMounted(() => {});
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.plant-gs-warp {
|
|
height: 100%;
|
|
padding: 10px 0;
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
.plant-gs-content {
|
|
background-size: 100% 100%;
|
|
background-repeat: no-repeat;
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
::v-deep() {
|
|
.vc-viewer {
|
|
height: calc(100% - 30px) !important;
|
|
width: calc(100% - 20px) !important;
|
|
margin: 20px 10px 10px 10px !important;
|
|
}
|
|
canvas {
|
|
border-radius: 10px !important;
|
|
}
|
|
.cesium-viewer-bottom {
|
|
display: none !important;
|
|
}
|
|
.el-vue-amap {
|
|
border-radius: 10px !important;
|
|
height: calc(100% - 30px) !important;
|
|
width: calc(100% - 20px) !important;
|
|
margin: 20px 10px 10px 10px !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|