通过echarts构建3d中国地图样式

通过echarts构建3d中国地图样式

使用echarts-gl加上阿里云提供的chain-geo.json数据实现中国地图的瓦片

构建demo --- ECharts-GL 实现世界级、国家级、省市级 3D 地图本篇文章既是 3D 地图的扫盲篇章，也是开启你从二维地图迈向 - 掘金

创建template模板

<!-- 全屏地图容器 -->
<div class="map-container">
    <div id="china-map-chart" class="china-map-chart"></div>
</div>

构建script函数

<script setup>
   // 导入中国地图GeoJSON数据
import chinaGeoJson from '@/json/ChinaGeo.json'
       // 初始化中国地图
   initChinaMap() {
     const chartDom = document.getElementById('china-map-chart')
     if (!chartDom) return

     this.chinaMapChart = echarts.init(chartDom, 'macarons')

     // 注册地图
     echarts.registerMap('china', chinaGeoJson)
     // 地图配置参数
     const option = {
       backgroundColor: 'transparent',
       tooltip: {
         trigger: 'item',
         formatter: function(params) {
           return params.name
         },
         backgroundColor: 'rgba(0, 0, 0, 0.8)',
         borderColor: '#00d4ff',
         borderWidth: 1,
         textStyle: {
           color: '#ffffff',
           fontSize: 14
         }
       },
       series: [
         {
           type: 'map3D',
           map: 'china',
           // 标签设置，显示省份名称
           label: {
             show: true,
             formatter: function(params) {
               return params.name
             },
             color: '#ffffff',
             fontSize: 10
           },
           itemStyle: {
             color: '#1e3a8a',
             opacity: 0.5,
             borderColor: '#00d4ff',
             borderWidth: 1
           }
         }
       ]
     }

     this.chinaMapChart.setOption(option)

     // 响应式调整[地图鼠标调整大小样式]
     window.addEventListener('resize', () => {
       if (this.chinaMapChart) {
         this.chinaMapChart.resize()
       }
     })
   }
</script>

全屏样式设计

// 中央地图容器 - 全屏显示
.map-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 5;

  // 在背景图片上面，但在其他模块下面
  
  .china-map-chart {
    width: 100%;
    height: 100%;
  }
}