echarts GL 3D地图


北京地图.png

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

city.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
var myChart = echarts.init(document.getElementById('main'));
var options = {
    series: [{
        type: 'map3D',
        map: '北京',
        name: '北京',
        /*  
            shading三维图形的着色效果,值：
                'color'只显示颜色，不受光照等因素影响。
                'lambert'通过景点的lambert着色表现光照的明暗
                'realistic'真是感渲染
        */
        shading: 'realistic',
        // 真实感材质相关配置 shading: 'realistic'时有效
        realisticMaterial: {
            // detailTexture: 'imgs/19.jpeg',
            textureTiling: 1,
            roughness: 1,
            metalness: 0,
            roughnessAdjust: 0
        },
        // 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),
        boxDepth: 100,//地图倾斜度
        regionHeight: 5,//地图高度
        // 标签设置
        label: {
            show: true,//是否显示市
            textStyle: {
                color: "#000",//文字颜色
                fontSize: 16,//文字大小
                fontFamily: '微软雅黑',
                backgroundColor: "rgba(0,0,0,0)",//透明度0清空文字背景
            }
        },
        //三维视觉属性
        itemStyle: {
            color: '#4575b4',//地图颜色
            borderWidth: 1.5,//分界线宽度  
            borderColor: "#459bca",//分界线颜色  
        },
        // 鼠标hover高亮
        emphasis: {
            label: {
                show: true,//是否显示标签
                textStyle: {
                    color: '#fff',//高亮文字颜色
                    fontFamily: '微软雅黑'
                }
            },
        },
        selectedMode: "single",// 地图高亮单选
        // environment:'imgs/19.jpeg',
        viewControl: {
            distance: 150,// 地图视角 控制初始大小
            rotateSensitivity: 1,// 旋转
            zoomSensitivity: 1,// 缩放
        },
    }]
}
myChart.setOption(options);

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