React 实现 Echarts 3D地图

 推荐两个写地图组件常用到的网站：

获取地图json网站：https://datav.aliyun.com/portal/school/atlas/area_selector

拾取坐标点网站：拾取坐标系统

import React, {forwardRef, useEffect, useState} from "react";
import * as echarts from "echarts";
import chinaMap from "../chinaMap.json" //地图json
import locationPng from "../location.png";

const ThreeModelMap = ({height, width, chartInfo}) => {
  const [myMap, setMyMap] = useState()
  const [areaData, setAreaData] = useState([])

  useEffect(async () => {
    const mapDom = document.getElementById('myMap')
    const myChart = echarts.init(mapDom)

    echarts.registerMap('chinaMap', chinaMap);

    const data = [{
      name: "上海市",
      value: 402,
    },
      {
        name: "南昌市",
        value: 4617,
      },
    ];

    const scatterData = [
      // 每个数据点的格式为 [经度, 纬度, 高度, 标记物的值]
      {name: '上海市', value: [121.474216,31.234941, 2000, 1]},
      {name: '南昌市', value: [115.871484,28.688441, 2000, 2]}
    ]

    //背景图纹理填充实现渐变
    let canvas = document.createElement("canvas");
    let ctx = canvas.getContext('2d');
    canvas.width = 65;
    canvas.height = 65;
    //绘制颜色偏向
    const Grd = ctx.createLinearGradient(0, 100, 100, 0);
    Grd.addColorStop(0, "orange");
    Grd.addColorStop(1, "blue");
    ctx.fillStyle = Grd;
    ctx.fillRect(0, 0, 100, 100);

    const option = {
      backgroundColor: 'rgba(0,0,0,1)',
      tooltip:{
        show:true
      },
      geo3D: {
        map: 'chinaMap', // 地图类型，这里以中国地图为例
        roam: false, // 是否开启鼠标缩放和平移漫游
        viewControl: {
          beta: 10, // 设置视角的左右旋转度数
          alpha: 40, // 设置视角的上下旋转度数
          // 设置视角的距离
          distance: 140
        },
        shading: 'realistic',
        // 设置渐变色
        realisticMaterial: {
          roughness: 1,
          textureTiling: 1,
          detailTexture: ctx.canvas.toDataURL()
        },
        label: {
          show: true,
          textStyle: {
            color: '#fff',
          },
          formatter: (params) => {
            return params.name;
          },
          borderRadius: 4,
        },
        regionHeight: 10, //地图厚度
        itemStyle: {
          color: '#65a9dc',
          borderColor: '#FFFFFF',
          borderWidth: 1,
          opacity: 1,
        },
        aspectScale: 0.9, //长宽比
        selectedMode: false, //是否允许选中多个区域
        data: [],
      },
      series: [
        {
          type: 'effectScatter',
          coordinateSystem: 'geo3D',
          rippleEffect: {
            scale: 10,
            brushType: 'stroke',
          },
          showEffectOn: 'render',
          itemStyle: {
            normal: {
              color: '#00FFFF',
            }
          },
          label: {
            normal: {
              color: '#fff',
            },
          },
          symbol: 'circle',
          symbolSize: [10, 5],
          data: scatterData,
          z: 998,
        },
        {
          type: 'scatter3D',
          coordinateSystem: 'geo3D',
          itemStyle: {
            color: '#00FFF6',
          },
          // symbol: 'image://' + locationPng, //使用图片需加上前缀
          symbol: 'circle',
          symbolSize: 20,
          z: 999,
          data: scatterData,
        },
      ],
    }

    myChart.setOption(option);
  },[])

  useEffect(() => {
    if(myMap) {
      myMap.resize()
    }
  },[height, width])

  return <div id={"myMap"} style={{height: height, width: width}}></div>
}
 export default forwardRef(ThreeModelMap)