React使用Echarts制作3D质感地图

1、安装依赖

npm install echarts echarts-gl --save 

2、下载地图数据

        地图数据可从阿里的datav平台下载json格式的地图数据  传送门

选择好需要的地图范围，在右下角点击下载即可。

3、引入依赖包

import * as echarts from "echarts";
import "echarts-gl";

4、加载地图数据

注意地图数据要放在 src/assets目录下

 const mapData = require("./assets/changsha.json");

5、初始化echarts

initEcharts() { 
    echarts.registerMap(mapName, mapData);
    const myChart = echarts.init(
      document.getElementById("mainMap") as HTMLElement
    );

    myChart.setOption({ 
      geo3D: {
        show: true,
        map: mapName,
        shading: "realistic",
        boxDepth: 60, //地图倾斜度
        regionHeight: 3, //地图高度
        itemStyle: {
          color: "#4575b4", //地图颜色
          borderWidth: 1.5, //分界线宽度
          borderColor: "#459bca", //分界线颜色
        },
        realisticMaterial: {
          // detailTexture: 'imgs/19.jpeg',
          textureTiling: 1,
          roughness: 1,
          metalness: 0,
          roughnessAdjust: 0,
        },
        environment: new echarts.graphic.LinearGradient(
          0,
          0,
          0,
          1,
          [
            {
              offset: 0,
              color: "#09C7F7", // 天空颜色
            },
            {
              offset: 0.7,
              color: "#fff", // 地面颜色
            },
            {
              offset: 1,
              color: "#A2875E", // 地面颜色
            },
          ],
          false
        ),
        emphasis: {
          label: {
            show: true, //是否显示标签
            textStyle: {
              color: "#fff", //高亮文字颜色
              fontFamily: "微软雅黑",
            },
          },
        },
      },
    });

    //点击显示点击的地区
    myChart.on("click", function (params) {
      alert(params.name);
    });
  }

6、完整代码如下

```JavaScript
import React, { Component } from "react";
import * as echarts from "echarts";
import "echarts-gl";
const mapData = require("./assets/changsha.json");
const mapName = "changsha"; 

class Map extends Component {

  componentDidMount() {
    this.initEcharts();
  }

  initEcharts() { 
    echarts.registerMap(mapName, mapData);
    const myChart = echarts.init(
      document.getElementById("mainMap") as HTMLElement
    );

    myChart.setOption({ 
      geo3D: {
        show: true,
        map: mapName,
        shading: "realistic",
        boxDepth: 60, //地图倾斜度
        regionHeight: 3, //地图高度
        itemStyle: {
          color: "#4575b4", //地图颜色
          borderWidth: 1.5, //分界线宽度
          borderColor: "#459bca", //分界线颜色
        },
        realisticMaterial: {
          // detailTexture: 'imgs/19.jpeg',
          textureTiling: 1,
          roughness: 1,
          metalness: 0,
          roughnessAdjust: 0,
        },
        environment: new echarts.graphic.LinearGradient(
          0,
          0,
          0,
          1,
          [
            {
              offset: 0,
              color: "#09C7F7", // 天空颜色
            },
            {
              offset: 0.7,
              color: "#fff", // 地面颜色
            },
            {
              offset: 1,
              color: "#A2875E", // 地面颜色
            },
          ],
          false
        ),
        emphasis: {
          label: {
            show: true, //是否显示标签
            textStyle: {
              color: "#fff", //高亮文字颜色
              fontFamily: "微软雅黑",
            },
          },
        },
      },
    });

    //点击显示点击的地区
    myChart.on("click", function (params) {
      alert(params.name);
    });
  }

  render(): React.ReactNode {
    return <div id="mainMap" style={{ width: "100vm", height: "90vh" }}></div>;
  }
}

export default Map;

```

7、最终效果图

 

参考文章：

Echarts-实现一个下钻伪3d地图 - 掘金

Documentation - Apache ECharts

vue echarts 离线datav地图使用_三火Sunfire的博客-CSDN博客_echarts离线地图

echarts GL 3D地图 | 码农家园