百度地图bmap + echarts的结合以及运用

百度地图bmap + echarts的结合以及运用

最近在学习echarts时，在官方用例中看到echarts结合百度地图的官方用例，查阅之后分享一下我最近的经验所得。其中我在他处找到了相关示例：

首先引入相关文件：

文件引入后,在相关echarts文件中配置相关option：

var len = data.rows.length    //  data.rows是后台返回站点的数组
var mapChart = echarts.init(document.getElementById('myChart'));   //  初始化echarts
// 将得到的数据转换成需要的二维数组的形式
var array = [];
for (var i=0;i<len;i++) {
    var arr0 = [];
arr0.push(data.rows[i].longitude,data.rows[i].latitude,data.rows[i].orgName,data.rows[i].place,data.rows[i].orgId);
    array.push(arr0);
}
//  最终 array 的形式：[[120.3, 30.2, '第一个站点',  1],[100.3, 50.2, '第二个站点',  2]...]
mapChart.setOption({    //  地图相关配置项
    bmap: {
        center: [121.060838, 31.11664],    //  中心点
        zoom: 12,          //  放大倍数
        roam: true,
    },
    title: {      //  标题样式
        x: "center",
        subtextStyle: {
            color: '#00F6FF',
            fontSize: 15,
            textShadowColor: "#64FAFF",
            textShadowBlur: 5,
            textShadowOffsetX: 0,
            textShadowOffsetY: 0,
        },
    },
    tooltip: {   //  每个站点的显示信息
        trigger: 'item',
        formatter: function (params) {   //  params是数组array里每个项
            return "所属区域：" + params.value[2] + "<br/>地点：" + params.value[3] + "<br>经度：" + params.value[1] + "<br/>纬度：" + params.value[0] + "<br/>"
        }
    },
    series: [{
        type: 'scatter',
        coordinateSystem: 'bmap',
        symbol: "circle",      // 标识点的样式
        symbolSize: "16",     // 标识点的大小
        color: "#0031C4",     // 标识点的颜色
        data: array,     // 标识点的数组array
    }]
});
// 点击每个站点可以进行相关操作
mapChart.on("click",function (e) {
   console.log(e)    //  每个标识点的信息
})
var bmap = mapChart.getModel().getComponent('bmap').getBMap();    // 通过echarts实例获取地图实例的方法
bmap.addControl(new BMap.MapTypeControl({mapTypes: [BMAP_NORMAL_MAP, BMAP_SATELLITE_MAP]}));    //  看这里 http://lbsyun.baidu.com/cms/jsapi/reference/jsapi_reference_3_0.html#a2b15
// bmap.setMapStyle({style: 'midnight'});  //  地图样式 
// http://lbsyun.baidu.com/index.php?title=jspopular/guide/custom    官网v2.0
// http://lbsyun.baidu.com/custom/list.htm     官网v2.0
//默认地图样式(normal)
//清新蓝风格(light)
//黑夜风格(dark)
//清新蓝绿风格(bluish)
//高端灰风格(grayscale)
//强边界风格(hardedge)
//青春绿风格(darkgreen)
//浪漫粉风格(pink)
//午夜蓝风格(midnight)
//自然绿风格(grassgreen)
//精简风格(googlelite)
//红色警戒风格(redalert)

//  上面这些模板样式如果无法满足需求，可以自己编辑个性化样式   http://lbsyun.baidu.com/index.php?title=jspopular3.0/guide/custom

$(window).resize(function () {   // 视图大小自适应
    mapChart.resize();
})

至此bmap+echarts的结合就到这就初步完成了。