qiusj
/
meface
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
meface/docs/article/visual/echarts_map.md

20 KiB
Raw Blame History

title date author sticky tags categories
ECharts地图图表 2021-04-06 ac 3
ECharts
BMap
可视化

很多数据具有很强区域的属性，如果想从宏观的角度去分析在不同地区的对比情况，这时候就需要使用到地图了。

1. 简介

在ECharts中地图图表的使用方式有两种方式：

  • 使用百度地图的API进行连网的在线展示
  • 矢量地图，使用矢量数据(geojson)绘制地图

使用百度地图的API需要申请一个ak，坐标系是百度的BD09；

矢量地图图表使用的数据是geojson，坐标系是WGS84的地理坐标。

2. 矢量图表

2.1 数据获取

需要的geojson数据可以从 地图选择器 中下载；

image-20210406112712156

2.2 绘制图形

绘制步骤：

  1. 加载地图数据
  2. 将geojson对象注册到ECharts的全局对象中
  3. 配置地理坐标系组件

示例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入在线CDN echarts.js -->
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.0.2/dist/echarts.js"></script>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">

        fetch('/data/china.json').then(function(response){
            return response.json();
        }).then(function(result){
            // console.log(result);
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('main'));

            //在echarts中注册地图矢量数据
            echarts.registerMap('china',result);
            // 指定图表的配置项和数据
            var option = {
                //配置地理坐标系组件
                geo:{
                    type: 'map',
                    map: 'china',
                    roam: true, //设置允许缩放以及拖动的效果
                    label:{
                        show: true
                    },
                    zoom: 4, //初始化缩放比例
                    center: [113,23], //设置初始化中心点
                    itemStyle: {		           // 定义样式
                        areaColor: '#f4f1de',      // 普通状态下的样式
                        borderColor: '#111'  
                    },
                    emphasis: {					   // 高亮状态下的样式
                        itemStyle:{
                            areaColor: '#f5cac3'
                        },
                        label:{
                            color:'#000',
                            fontSize:14
                        }
                    }
                }
            };

            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        });
    </script>
</body>
</html>

2.3 常见效果

  • 唯一值渲染（如，根据name属性，不同城市显示不同的颜色），步骤：
    1. 准备数据，矢量数据china.json，城市空气质量数据airData。
    2. 显示基本的中国地图
    3. 将城市空气质量数据设置给series
    4. 设置geoIndex和type 将series下的数据和geo关联起来
    5. 结合visualMap配合使用，达到过滤的效果

示例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入在线CDN echarts.js -->
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.0.2/dist/echarts.js"></script>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        let airData = [
            { name: '北京市', value: 39.92 },
            { name: '天津市', value: 39.13 },
            { name: '上海市', value: 31.22 },
            { name: '重庆市', value: 66 },
            { name: '河北省', value: 147 },
            { name: '河南省', value: 113 },
            { name: '云南省', value: 25.04 },
            { name: '辽宁省', value: 50 },
            { name: '黑龙江省', value: 114 },
            { name: '湖南省', value: 175 },
            { name: '安徽省', value: 117 },
            { name: '山东省', value: 92 },
            { name: '新疆维吾尔自治区', value: 84 },
            { name: '江苏省', value: 67 },
            { name: '浙江省', value: 84 },
            { name: '江西省', value: 96 },
            { name: '湖北省', value: 273 },
            { name: '广西壮族自治区', value: 59 },
            { name: '甘肃省', value: 99 },
            { name: '山西省', value: 39 },
            { name: '内蒙古自治区', value: 58 },
            { name: '陕西省', value: 61 },
            { name: '吉林省', value: 51 },
            { name: '福建省', value: 29 },
            { name: '贵州省', value: 71 },
            { name: '广东省', value: 38 },
            { name: '青海省', value: 57 },
            { name: '西藏自治区', value: 24 },
            { name: '四川省', value: 58 },
            { name: '宁夏回族自治区', value: 52 },
            { name: '海南省', value: 54 },
            { name: '台湾省', value: 88 },
            { name: '香港特别行政区', value: 66 },
            { name: '澳门特别行政区', value: 77 },
            { name: '南海诸岛', value: 55 }
        ];
        fetch('/data/china.json').then(function(response){
            return response.json();
        }).then(function(result){
            console.log(result);
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('main'));

            //在echarts中注册地图矢量数据
            echarts.registerMap('china',result);
            // 指定图表的配置项和数据
            var option = {
                //配置地理坐标系组件
                geo:{
                    type: 'map',
                    map: 'china',
                    roam: true, //设置允许缩放以及拖动的效果
                    label:{
                        show: false,
                        fontSize: 10
                    },
                    // zoom: 4, //初始化缩放比例
                    center: [108.948024,34.263161] //设置初始化中心点
                },
                series: [
                    {
                        data: airData,
                        geoIndex: 0, // 将空气质量的数据和第0个geo配置关联在一起
                        type: 'map'
                    }
                ],
                visualMap: {
                    min: 0,
                    max: 300,
                    inRange: {
                        symbolSize: [30, 100],
                        color: ['white', 'red'] // 控制颜色渐变的范围
                    },
                    calculable: true // 出现滑块
                }
            };
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        });
       
    </script>
</body>
</html>
  • 地图与散点图结合，即在一个echarts实例里面绘制多个图表，所以在series数组里面增加一个元素，且类型type为effectScatter。
    1. 给series下增加新的对象
    2. 准备好散点数据，设置给新的对象data
    3. 配置新对象的type为effectScatter
    4. 让散点图使用地理坐标系统：coordinateSystem: 'geo'
    5. 让涟漪的效果更加明显rippleEffect:{scale:10}

let airData = [
    { name: '北京市', value: 39.92 },
    { name: '天津市', value: 39.13 },
    { name: '上海市', value: 31.22 },
    { name: '重庆市', value: 66 },
    { name: '河北省', value: 147 },
    { name: '河南省', value: 113 },
    { name: '云南省', value: 25.04 },
    { name: '辽宁省', value: 50 },
    { name: '黑龙江省', value: 114 },
    { name: '湖南省', value: 175 },
    { name: '安徽省', value: 117 },
    { name: '山东省', value: 92 },
    { name: '新疆维吾尔自治区', value: 84 },
    { name: '江苏省', value: 67 },
    { name: '浙江省', value: 84 },
    { name: '江西省', value: 96 },
    { name: '湖北省', value: 273 },
    { name: '广西壮族自治区', value: 59 },
    { name: '甘肃省', value: 99 },
    { name: '山西省', value: 39 },
    { name: '内蒙古自治区', value: 58 },
    { name: '陕西省', value: 61 },
    { name: '吉林省', value: 51 },
    { name: '福建省', value: 29 },
    { name: '贵州省', value: 71 },
    { name: '广东省', value: 38 },
    { name: '青海省', value: 57 },
    { name: '西藏自治区', value: 24 },
    { name: '四川省', value: 58 },
    { name: '宁夏回族自治区', value: 52 },
    { name: '海南省', value: 54 },
    { name: '台湾省', value: 88 },
    { name: '香港特别行政区', value: 66 },
    { name: '澳门特别行政区', value: 77 },
    { name: '南海诸岛', value: 55 }
];
let scatterData = [
    // { name: '成都', value: [104.06, 30.67] },
    // { name: '重庆', value: [106.54, 29.59] },
    // { name: '杭州', value: [120.19, 30.26] },
    // { name: '武汉', value: [114.31, 30.52] },
    // { name: '西安', value: [108.95, 34.27] },
    // { name: '天津', value: [117.2, 39.13] },
    // { name: '苏州', value: [120.62, 31.32] },
    // { name: '南京', value: [118.78, 32.04] },
    // { name: '郑州', value: [113.65, 34.76] },
    // { name: '长沙', value: [113, 28.21] },
    { name: '东莞', value: [113.75, 23.04] },

    // { name: '沈阳', value: [123.38, 41.8] },
    // { name: '青岛', value: [120.33, 36.07] },
    // { name: '合肥', value: [117.27, 31.86] },
    // { name: '佛山', value: [113.11, 23.05] },
];
fetch('/data/china.json').then(function (response) {
    return response.json();
}).then(function (result) {
    console.log(result);
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));

    //在echarts中注册地图矢量数据
    echarts.registerMap('china', result);
    // 指定图表的配置项和数据
    var option = {
        //配置地理坐标系组件
        geo: {
            type: 'map',
            map: 'china',
            roam: true, //设置允许缩放以及拖动的效果
            label: {
                show: false,
                fontSize: 10
            },
            zoom: 4, //初始化缩放比例
            center: [113.75, 23.04] //设置初始化中心点
        },
        series: [
            {
                data: airData,
                geoIndex: 0, // 将空气质量的数据和第0个geo配置关联在一起
                type: 'map'
            }, {
                // 配置散点的坐标数据
                data: scatterData, 
                type: 'effectScatter',
                // 指明散点使用的坐标系统  geo的坐标系统，
                // 可选值：'cartesian2d'、'polar'、'geo'、'bmap'
                coordinateSystem: 'geo', 
                rippleEffect: {
                    color: '#ccc',//涟漪动画的颜色
                    scale: 3 // 设置涟漪动画的缩放比例
                },
                // symbolSize:[10,20],
                // showEffectOn: 'emphasis',
                label:{
                    color: '#219ebc',
                    show: true,
                    formatter:function(row){
                        return row.name;
                    }
                },
                itemStyle:{
                    color: '#ccc'
                }
            }
        ],
        visualMap: {
            min: 0,
            max: 300,
            inRange: {
                symbolSize: [30, 100],
                color: ['white', 'red'] // 控制颜色渐变的范围
            },
            calculable: true // 出现滑块
        }
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
});

看起来效果不佳，因为同时配置了visualMap参数，影响了一些参数的表现，如symbolSize，itemStyle等。

3. 结合百度地图

百度地图很多API都需要连网使用，如果是一些简单的数据加载、图标绘制、控件等在客户端就可以完成的可以不需要网络，但对于百度地图提供的一些接口、服务类，像地理编码、POI 查询、出行路线规划等需要服务端处理并返回结果。

3.1 ak与坐标

首先需要在百度开发平台 上用百度账号创建应用获取ak。

目前国内主要有以下三种坐标系：

  • WGS84：为一种大地坐标系，也是目前广泛使用的GPS全球卫星定位系统使用的坐标系。

  • GCJ02：又称火星坐标系，是由中国国家测绘局制订的地理信息系统的坐标系统。由WGS84坐标系经加密后的坐标系。

  • BD09：为百度坐标系，在GCJ02坐标系基础上再次加密。其中bd09ll表示百度经纬度坐标，bd09mc表示百度墨卡托米制坐标。

非中国地区地图，服务坐标统一使用WGS84坐标。

百度官方提供了其他坐标系与BD09的坐标转换接口

3.2 基础配置

ECharts中使用百度地图还需要引入echarts对百度地图的扩展包bmap.js ：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入在线CDN echarts.js -->
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.0.2/dist/echarts.js"></script>
    <!-- 引入百度地图API-->
    <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=<Your Key Here>"></script>
    <!-- 引入echarts百度地图扩展包-->
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/extension/bmap.min.js"></script>
    <style>
        html,
        body {
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 100%;height:100%;"></div>
    <script type="text/javascript">
        var bmapChart = echarts.init(document.getElementById('main'));
        var option = {
            bmap: {
                center: [113.9702, 22.47971], // 中心位置坐标
                zoom: 12, // 地图缩放比例
                roam: true // 开启用户缩放
            }
        }
        bmapChart.setOption(option);
    </script>
</body>
</html>

ECharts将百度地图部分配置集成在了bmap中，包括：

参数 说明 格式
center 中心点的百度坐标 坐标数组, 如：[116.307698, 40.056975]
zoom 初始缩放比 number
roam 是否允许用户缩放操作 boolean
mapStyle 地图自定义样式 object, 如：{ styleJson: [...] }

3133

3.3 百度地图主题

echarts通过bmap在内部已经创建了一个百度地图的实例，如果想在地图添加控件或修改样式，需要先获取内部的地图实例：

// 通过echarts实例获取地图实例的方法
var bmap = bmapChart.getModel().getComponent('bmap').getBMap();    

//修改样式
//百度提供的样式有：normal、light、dark、redalert、googlelite、
//grassgreen、midnight、pink、darkgreen、bluish、grayscale、hardedge
bmap.setMapStyle({style:'midnight'});

//添加控件
bmap.addControl(new BMap.NavigationControl());

百度地图个性化模板列表

5838085

3.3 绘制散点图

跟矢量地图类似，提供一个series，但coordinateSystem参数需要配置为bmap。

完整代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入在线CDN echarts.js -->
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.0.2/dist/echarts.js"></script>

    <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=<Your Key Here>"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/extension/bmap.min.js"></script>
    <style>
        html,body {width: 100%;height: 100%;}
    </style>
</head>

<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 100%;height:100%;"></div>
    <script type="text/javascript">
        //新一线城市,坐标不对，这里只是演示效果
        let scatterData = [
            { name: '成都', value: [104.06, 30.67] },
            { name: '重庆', value: [106.54, 29.59] },
            { name: '杭州', value: [120.19, 30.26] },
            { name: '武汉', value: [114.31, 30.52] },
            { name: '西安', value: [108.95, 34.27] },
            { name: '天津', value: [117.2, 39.13] },
            { name: '苏州', value: [120.62, 31.32] },
            { name: '南京', value: [118.78, 32.04] },
            { name: '郑州', value: [113.65, 34.76] },
            { name: '长沙', value: [113, 28.21] },
            { name: '东莞', value: [113.75, 23.04] },
            { name: '沈阳', value: [123.38, 41.8] },
            { name: '青岛', value: [120.33, 36.07] },
            { name: '合肥', value: [117.27, 31.86] },
            { name: '佛山', value: [113.11, 23.05] },
        ];

        let bmapChart = echarts.init(document.getElementById('main'));

        let option = {
            bmap: {
                center: [108.95, 34.27], // 中心位置坐标
                zoom: 5, // 地图缩放比例
                roam: true // 开启用户缩放
            },
            series: [{
                // 配置散点的坐标数据
                data: scatterData,
                type: 'effectScatter',
                // 指明散点使用的坐标系统  geo的坐标系统，
                // 可选值：'cartesian2d'、'polar'、'geo'、'bmap'
                coordinateSystem: 'bmap',
                rippleEffect: {
                    color: '#ccc',//涟漪动画的颜色
                    scale: 3 // 设置涟漪动画的缩放比例
                },
                symbolSize: 20,
                showEffectOn: 'render',
                label: {
                    color: '#219ebc',
                    show: true,
                    formatter: function (row) {
                        return row.name;
                    }
                },
                itemStyle: {
                    color: '#ccc'
                }
            }]
        }

        bmapChart.setOption(option);
        // 通过echarts实例获取地图实例的方法
        let bmap = bmapChart.getModel().getComponent('bmap').getBMap();
        //修改样式
        //百度提供的样式有：normal、light、dark、redalert、googlelite、
        //grassgreen、midnight、pink、darkgreen、bluish、grayscale、hardedge
        bmap.setMapStyle({ style: 'midnight' });

        //添加控件
        bmap.addControl(new BMap.NavigationControl());
    </script>
</body>
</html>

image-20210407102942158

参考文章

[1] ECharts 实现地图散点图（下） https://efe.baidu.com/blog/echarts-map-tutorial-2/

[2] 坐标转换 http://lbsyun.baidu.com/index.php?title=jspopular/guide/coorinfo