daimp-front/sub-government-screen-service/src/views/plant/components/plantgs.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>