digital-agriculture-screen/src/components/centerMap.vue

<template>
  <div class="map-center-warp">
    <!-- <img :src="getAssetsFile('images/vsualized/gmmap.png')" class="map-img" /> -->
    <div class="map-pos">
      <custom-echart-maps height="100%" width="100%" :option="chartsData.option" :geo="geoData" :name="mapName" @click="mapClick" />
    </div>

    <el-dialog v-model="isShow" :title="currentMap.name + dialogTitle" width="360" :before-close="handleClose" custom-class="map-info-dialog">
    </el-dialog>
  </div>
</template>
<script setup>
import { isEmpty, getAssetsFile } from '@/utils';
import { ref, reactive, onMounted } from 'vue';
import { useRoute } from 'vue-router';
import geoJsonData from '../components/530926geo.json'; // 根据实际情况调整路径
const route = useRoute();
const props = defineProps({
  dialogTitle: {
    type: String,
    default: '首页',
  },
});
var aspectScale = 0.8807505292367753;
// var iconUrl = 'http://localhost:9529/sub-government-screen-service/src/assets/images/vsualized/home/partbg.png';
// var iconUrl = getAssetsFile('images/vsualized/gmmap.png').href;
var iconUrl = getAssetsFile('images/vsualized/gmmap2.png').href;

const isShow = ref(false);
let geoData = geoJsonData;
let mapName = ref('ZJ' + route.name);
const chartsData = reactive({
  option: {
    title: {
      text: '',
      left: 'center',
    },
    tooltip: {
      trigger: 'item',
      formatter: function (params) {
        if (params.seriesType === 'effectScatter') {
          return `${params.name}: (${params.value[0]}, ${params.value[1]})`;
        }
        return params.name;
      },
    },
    toolbox: {
      show: false,
      orient: 'vertical',
      left: 'right',
      top: 'center',
      feature: {
        // dataView: { readOnly: false },
        // restore: {},
        // saveAsImage: {},
      },
    },
    geo3D: {
      map: mapName.value,
      roam: true,
      zoom: 1,
      left: '30px',
      show: true,
      zlevel: -1, // 必须设置，
      viewControl: {
        distance: 115,
        alpha: 60,
        beta: 0,
        minBeta: -360,
        maxBeta: 720,
        // 限制视角，使不能旋转缩放平移
        // rotateSensitivity: 0,
        // zoomSensitivity: 0,
        // panSensitivity: 0,
      },
      itemStyle: {
        // 三维地理坐标系组件 中三维图形的视觉属性，包括颜色，透明度，描边等。
        color: 'rgba(75,255,180,0.2)', // 地图板块的颜色
        opacity: 1, // 图形的不透明度 [ default: 1 ]
        borderWidth: 1.5, // (地图板块间的分隔线)图形描边的宽度。加上描边后可以更清晰的区分每个区域   [ default: 0 ]
        borderColor: '#4bffb4', // 图形描边的颜色。[ default: #333 ]
      },
      label: {
        show: true,
        distance: 0,
        color: '#000',
        padding: [6, 4, 2, 4],
        borderRadius: 4,
        backgroundColor: 'rgba(255,255,255,0.2)',
        textStyle: {
          fontSize: 12,
          color: '#E87813', // 地图初始化区域字体颜色
          borderWidth: 0,
          borderColor: '#000',
        },
      },
      emphasis: {
        //高亮状态的效果
        label: {
          show: true,
          color: '#fff',
        },
        itemStyle: {
          color: 'rgba(75,255,180,0.3)', // 地图板块的颜色
        },
      },
    },
    series: [
      {
        type: 'map3D',
        map: mapName.value,
        zoom: 1,
        left: '30px',
        viewControl: {
          distance: 115,
          alpha: 60,
          beta: 0,
          minBeta: -360,
          maxBeta: 720,
          // 限制视角，使不能旋转缩放平移
          // rotateSensitivity: 0,
          // zoomSensitivity: 0,
          // panSensitivity: 0,
        },
        itemStyle: {
          // 三维地理坐标系组件 中三维图形的视觉属性，包括颜色，透明度，描边等。
          color: 'rgba(75,255,180,0.2)', // 地图板块的颜色
          opacity: 1, // 图形的不透明度 [ default: 1 ]
          borderWidth: 1.5, // (地图板块间的分隔线)图形描边的宽度。加上描边后可以更清晰的区分每个区域   [ default: 0 ]
          borderColor: '#4bffb4', // 图形描边的颜色。[ default: #333 ]
        },
        label: {
          show: true,
          distance: 0,
          color: '#000',
          padding: [6, 4, 2, 4],
          borderRadius: 4,
          backgroundColor: 'rgba(255,255,255,0.2)',
          textStyle: {
            fontSize: 12,
            color: '#E87813', // 地图初始化区域字体颜色
            borderWidth: 0,
            borderColor: '#000',
          },
        },
        emphasis: {
          //高亮状态的效果
          label: {
            show: true,
            color: '#fff',
          },
          itemStyle: {
            color: 'rgba(75,255,180,0.3)', // 地图板块的颜色
          },
        },
      },
    ],
  },
});

let currentMap = reactive({});

const mapClick = (data) => {
  isShow.value = true;
  currentMap = data;
  console.info('mapClick', data);
};
const handleClose = () => {
  isShow.value = false;
};
onMounted(() => {
  console.info('iconUrl', iconUrl);
});
</script>
<style lang="scss" scoped>
div {
  box-sizing: border-box;
}
::v-deep() {
  .el-dialog {
    background: url('@/assets/images/vsualized/mapopup.png') no-repeat left top;
    min-height: 200px;
    max-height: 500px;
    overflow-y: auto;
    background-size: 100% 100%;
    padding: 16px;
  }
  .el-dialog__header {
    margin-top: 10px;
    text-align: left;
    padding-left: 48px;
    .el-dialog__title,
    i {
      color: #fff !important;
    }
    .el-dialog__headerbtn {
      top: 8px !important;
    }
  }
}
.map-center-warp {
  width: 100%;
  text-align: center;
  position: relative;
  height: 90%;
  .map-img {
    width: 80%;
    height: 80%;
    position: absolute;
    bottom: 0;
    left: 50%;
    object-fit: contain;
    transform: translateX(-50%);
    max-width: 1000px;
    max-height: 1000px;
  }
  .map-pos {
    width: 100%;
    height: 100%;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
  }
}
</style>