Echarts-百度地图省分着色

通过Echarts3结合百度地图，对全国省分进行着色。

起因

由于Echarts3中，不再使用china.js文件：

ECharts 之前提供下载的矢量地图数据来自第三方，由于部分数据不符合国家《测绘法》规定，目前暂时停止下载服务。
建议大家使用以百度地图为底图的形式，参考实例：http://echarts.baidu.com/demo.html#map-polygon

学习百度地图使用方法，先用各省分着色练手。

百度地图 API

可参考官方文档：

• 百度地图开放平台：JavaScript API v2.0类参考
• 百度地图开放平台：JavaScript API

Echarts结合百度地图官方实例

• ECharts 实现地图散点图（下）
• http://echarts.baidu.com/demo.html#map-polygon

流程

1. 在首页中引入bmap.js与百度地图的api

2. 初始化echarts图表，并setOption百度地图的参数

var bmapCharts = echarts.init(document.getElementById('chinaProvMap'));
var option = {
  bmap: {} // 此处为空，各类参数后面通过百度地图api进行设置
}

3. 获取bmap并进行地图设置

var map = bmapCharts.getModel().getComponent('bmap').getBMap();

百度地图配置代码

let provList = new Array(["黑龙江","#F09ABD"],["吉林省","#01933F"],["辽宁","#FAC300"],["内蒙古","#FCF502"],["河北","#F09ABD"],["北京","#FCF502"],["天津","#01933F"],["山东省","#FCF502"],["江苏","#D8EDDA"],["上海","#B9B4C8"],["浙江","#FCF502"],["福建","#FAC300"],["台湾","#F09ABD"],["广东","#FCF502"],["香港","#F09ABD"],["澳门","#F09ABD"],["海南","#F09ABD"],["广西","#FAC300"],["云南","#FCF502"],["西藏","#B9B4C8"],["新疆","#FAC300"],["甘肃","#01933F"],["青海","#F09ABD"],["四川","#FAC300"],["贵州","#01933F"],["重庆","#B9B4C8"],["湖南","#F09ABD"],["江西","#01933F"],["湖北","#FCF502"],["安徽","#FAC300"],["河南","#B9B4C8"],["陕西","#F09ABD"],["山西","#01933F"],["宁夏","#FAC300"]); //通过取色器获取各省颜色

map.centerAndZoom("兰州", 5); //取兰州作为中心点

map.addControl(new BMap.NavigationControl()); // 缩放控件
map.addControl(new BMap.ScaleControl()); // 比例尺
map.enableScrollWheelZoom();
function getBoundary(provItem){    
  // console.log(provItem);   
  var bdary = new BMap.Boundary();
  bdary.get(provItem[0], function(rs){       //获取行政区域
    var count = rs.boundaries.length; //行政区域的点有多少个
    if (count === 0) {
        alert('未能获取当前输入行政区域');
        return ;
    }
    var pointArray = [];
    for (var i = 0; i < count; i++) {
        let ply = new BMap.Polygon(rs.boundaries[i], {strokeWeight: 1, strokeColor: "#aaaaaa", fillColor: provItem[1]}); //建立多边形覆盖物
        map.addOverlay(ply);  //添加覆盖物
        pointArray = pointArray.concat(ply.getPath());      
    }    
  });   
}

setTimeout(function(){
  provList.forEach(function(item){
    getBoundary(item);
  });
}, 20);

效果

局部图

整体图

参考文章

1. 在百度地图或谷歌地图给中国各省着色并高亮显示
2. 百度百科-中国地图
3. 百度地图画多边形区域

Echarts-百度地图省分着色