Echarts-百度地图省分着色

最新推荐文章于 2024-08-10 03:58:35 发布

weixin_34044273

最新推荐文章于 2024-08-10 03:58:35 发布

阅读量1.1k

点赞数

文章标签： javascript ViewUI

原文链接：https://segmentfault.com/a/1190000014717854

版权

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

起因

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

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

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

百度地图 API

可参考官方文档：

Echarts结合百度地图官方实例

流程

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

<script src="./js/echarts/bmap.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您自己的ak"></script>

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

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

获取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);