echarts GL 3D地图（设置不同区域颜色）

image.png

ECharts 提供了两种格式的地图数据，一种是可以直接通过 script 标签引入的 js 文件，引入后会自动注册地图名字和数据。还有一种是 JSON 文件，需要通过 AJAX 异步加载后手动注册。
用json文件会在谷歌浏览器上会出现跨域的问题，在这里用的是直接引入beijing.js（需要下载数据文件）文件。

city.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!-- <script src='js/jquery.js'></script> -->
    <title>map3D</title>
</head>

<body>
    <div style="width:1200px;height: 800px;margin: auto;">
        <div id="main" style="width: 100%;height:800px;"></div>
    </div>
</body>
<script src="js/echarts.min.js"></script>
<script src='js/echarts-gl.js'></script>
<script src="js/beijing.js"></script>
<script src="js/map3d.js"></script>

</html>

map3d.js

var myChart = echarts.init(document.getElementById('main'));
var data = [
    {name: '延庆区', selected: false,value: 1},
    {name: '怀柔区', selected: false,value: 2},
    {name: '密云区', selected: false,value: 3},
    {name: '平谷区', selected: false,value: 4},
    {name: '顺义区', selected: false,value: 5},
    {name: '昌平区', selected: false,value: 6},
    {name: '海淀区', selected: false,value: 7},
    {name: '西城区', selected: false,value: 8},
    {name: '东城区', selected: false,value: 9},
    {name: '朝阳区', selected: false,value: 10},
    {name: '通州区', selected: false,value: 11},
    {name: '大兴区', selected: false,value: 12},
    {name: '丰台区', selected: false,value: 13},
    {name: '房山区', selected: false,value: 14},
    {name: '石景山区', selected: false,value: 15},
    {name: '门头沟区', selected: false,value: 16}
];
var splitList = [
    {start:1, end:1, label: '延庆区', color: '#cfc5de'},
    {start:2, end:2, label: '怀柔区', color: '#f1ebd1'},
    {start:3, end:3, label: '密云区', color: '#feffdb'},
    {start:4, end:4, label: '平谷区', color: '#e0cee4'},
    {start:5, end:5, label: '顺义区', color: '#fde8cd'},
    {start:6, end:6, label: '昌平区', color: '#e4f1d7'},
    {start:7, end:7, label: '海淀区', color: '#fffed7'},
    {start:8, end:8, label: '西城区', color: '#e4f1d7'},
    {start:9, end:9, label: '东城区', color: '#e4f1d7'},
    {start:10, end:10, label: '朝阳区', color: '#fffed7'},
    {start:11, end:11, label: '通州区', color: '#fffed8'},
    {start:12, end:12, label: '大兴区', color: '#dccee7'},
    {start:13, end:13, label: '丰台区', color: '#fffed7'},
    {start:14, end:14, label: '房山区', color: '#fce8cd'},
    {start:15, end:15, label: '石景山区', color: '#ddceeb'},
    {start:16, end:16, label: '门头沟区', color: '#e4f1d3'}
];
var options = {
    series: [{
        type: 'map3D',
        map: '北京',
        name: '北京',
        boxDepth: 100,//地图倾斜度
        regionHeight: 5,//地图厚度
        // environment: 'imgs/19.jpeg',
        //环境贴图，这里用的是渐变色
        environment: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
            offset: 0, color: '#09C7F7' // 天空颜色
        }, {
            offset: 0.7, color: '#fff' // 地面颜色
        }, {
            offset: 1, color: '#A2875E' // 地面颜色
        }], false),
        // 标签设置
        label: {
            show: true,//是否显示市
            // formatter: '{b} : test{c}',
            textStyle: {
                color: "#000",//文字颜色
                fontSize: 16,//文字大小
                fontFamily: '微软雅黑',
                // opacity: 0,
                backgroundColor: "rgba(0,0,0,0)",//透明度0清空文字背景 
            },
        },
        //三维视觉属性
        itemStyle: {
            opacity: 1, // 透明度
            // color: '#4575b4',//地图颜色
            borderWidth: 1.5,//分界线宽度   
            borderColor: "#459bca",//分界线颜色  
        },
        // 鼠标hover高亮
        emphasis: {
            label: {
                show: true,//是否显示标签
                textStyle: {
                    color: 'yellow',//高亮文字颜色
                    fontSize: 32,
                    fontFamily: '微软雅黑'
                },
                formatter: '{b}: {c}'
            },
            //高亮区块颜色
            // itemStyle: {
            //     color: '#000'
            // }
        },
        groundplane: {
            show: false
        },
        data: data,
        
        //用了没有效果，还没找到原因，求指点
        regions: [
            {   // 可对单个地图区域进行设置
                name: '昌平区',    // 所对应的地图区域的名称
                //regionHeight: '', // 区域的高度，可以设置不同的高度用来表达数据的大小。当 GeoJSON 为建筑的数据时，也可以通过这个值表示简直的高度。
                itemStyle: {    // 单个区域的样式设置
                    color: '#00FF00',
                    opacity: 1,
                    borderWidth: 0.4,
                    borderColor: '#5F9EA0'
                },
            }, {
                name: '海淀区',
                itemStyle: {
                    color: '#EEEE00',
                    opacity: 1,
                    borderWidth: 0.4,
                    borderColor: '#5F9EA0'
                }
            }
        ],
        /*  
            shading三维图形的着色效果,值：
                'color'只显示颜色，不受光照等因素影响。
                'lambert'通过景点的lambert着色表现光照的明暗
                'realistic'真是感渲染
        */
        shading: 'realistic',
        // 真实感材质相关配置 shading: 'realistic'时有效
        realisticMaterial: {
            detailTexture: '#fff', // 纹理贴图
            textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
            roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
            metalness: 0, // 0材质是非金属 ，1金属
            roughnessAdjust: 0
        },
        viewControl: {
            distance: 150,// 地图视角 控制初始大小
            rotateSensitivity: 1,// 旋转
            zoomSensitivity: 1,// 缩放
        },
        // postEffect: {
        //     enable: true
        // }
    }],
    dataRange: {
        splitList: splitList
    },
    // ECharts 视觉映射「visualMap」组件 注释掉 dataRange 后可查看效果
    // visualMap: {
    //     show: false,
    //     min: 0,
    //     max: 15,
    //     inRange: {
    //         color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']
    //     }
    // }
}
myChart.setOption(options);

以上是简单的绘制出地方地图，其他效果需要根据官网api继续添加配置。