echarts3D地图：旋转、添加纹理图片（vue3）

首先安装echarts和echarts-gl依赖，注意的是，echarts-gl版本需安装低版本，且与echarts5版本不兼容，需要单独安装4版本，这里我安装的4.2.1版本。

$ npm install echarts4@npm:echarts@4.2.1 echarts-gl@1.1.0

npm可以安装echarts的不同版本，要求安装时命名不同，如下：

npm install echarts4@npm:echarts@4
npm install echarts5@npm:echarts@5

安装完成后package.json里的依赖会有如下代码：

"echarts4": "^npm:echarts@4.2.1",
"echarts-gl": "1.1.0",
"echarts": "^5.5.1",

其他vue文件正常引入echarts，地图vue文件引入echarts4：

import echarts from 'echarts4';

3D地图跟echarts图表一般的使用和配置差不多，就series中type: 'map3D'以及给地图命名map: name。

其他更多属性和配置大家可以在echarts文档进行查阅：Documentation - Apache ECharts

加载3D旋转地图完整代码：

<template>
  <div id="map-chart"></div>
</template>
<script lang="ts" setup>
import echarts from 'echarts4';
import 'echarts-gl';
import DaZhouJson from '../../../assets/datas/DaZhou.json';
import { onMounted, ref } from 'vue';
let mapOption = {};
const init = (name: String, mapJson) => {
  echarts.registerMap(name, mapJson);//注册地图
  mapOption = {
    tooltip: {
      show: false,
    },
    series: [{
      type: 'map3D',//地图类型
      map: name,
      boxWidth: 55,
      boxHeight: 6,
      boxDepth: 80,
      //材质的设置
      realisticMaterial: {
        roughness: 1,//粗糙度，0为完全光滑，1完全粗糙
        textureTiling: 32 //材质细节纹理的平铺
      },
      //光源的设置
      light: {
        main: {
          intensity: 1,//主光源强度
          shadow: true,//是否显示阴影
          alpha: 150,//主光源方向角度
          beta: 170//主光源方向角度
        },
        ambient: {
          intensity: 0//环境光强度
        }
      },
      //地面的背景颜色
      groundPlane: {
        show: false,
        color: 'transparent'
      },
      //特效设置
      postEffect: {
        enable: true//是否开启特效
      },
      //标签样式
      label: {
        show: true,
        formatter: function (params) {
          return params.name;
        },
        distance: 0,//标签距离图形的距离
        textStyle: {
          color: '#ffffff',
          fontWeight: 'normal',
          fontSize: 16,
          backgroundColor: 'rgba(255,255,255,0)'
        },
      },
      //区域的颜色
      itemStyle: {
        color: '#73a4ff',
        borderColor: 'rgb(62,215,213)',
        borderWidth: 1
      },
      //高亮样式
      emphasis: {
        label: {
          show: true,//是否显示标签
          distance: 10//标签距离图形的距离
        },
        itemStyle: {
          color: '#3b7efc',
        }
      },
      // 用于鼠标的旋转，缩放等视角控制。
      viewControl: {
        projection: "orthographic", // 投影方式，默认为透视投影'perspective'，也支持设置为正交投影'orthographic'
        autoRotate: true, // 是否开启自动旋转
      }
    },
    ]};
};
onMounted(() => {
  init('DaZhou', DaZhouJson);
  var mapChart = echarts.init(document.getElementById('map-chart'));
  mapChart.setOption(mapOption);
});
</script>

<style scoped lang="less">
#map-chart {
  width: 930px;
  height: 100%;
}
</style>

效果如图：（旋转效果自行运行查看）

地图数据来自阿里云：DataV.GeoAtlas地理小工具系列 (aliyun.com)

我是直接把数据保存为文件然后引入进来的：

import DaZhouJson from '../../../assets/datas/DaZhou.json';

也可以直接远程请求地图JSON数据：

//引入axios
import axios from 'axios';


// 远程请求地图 geoJson 数据
axios.get("https://geo.datav.aliyun.com/areas_v3/bound/511700_full.json")
  .then((res) => {
    // 请求完成的地图 geoJson 数据
    let DaZhouJson = res.data;
  });

添加纹理图片：

（这里我随便找的个图片，主要想看看是否可行）

// 引入图片
import doc from '../../../assets/images/screen/layout/header.png';

// 在mapOption的series里配置
series: [{
      // 将echarts设置为纹理
      shading: 'realistic',
      realisticMaterial: {
        // 引入纹理贴图
        detailTexture: doc,
        textureTiling: 1//纹理平铺
      },
    },
    ]

效果如图：