ECharts 散點圖+百度地圖（案例轉載） bmap scatter
ECharts 實作地圖散點圖（下）
上一篇我們介紹了如何使用 ehcarts 内置地圖實作地圖上繪制的散點圖，這篇中，我們将講解如何在百度地圖上繪制散點圖。
一、初始準備
首先要建立 html 和引入 ECharts 包，具體說明詳見上篇：[ECharts 實作地圖散點圖（一）](/2016/04/28/echarts-map-tutorial.html)。
二、引入echarts百度地圖擴充包
在 github 上下載下傳 ECharts 擴充 bmap.js，放在 /extension/ 目錄下，并引入 html 中：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ECharts map Demo</title>
</head>
<body>
<div id="map-wrap" style="height: 500px;">
<!-- 這裡以後是地圖 -->
</div>
</body>
<script src="/dep/echarts.min.js"></script>
<script src="/extension/bmap.js"></script>
</html>
|
三、繪制地圖
1.在 js 中，建立 ECharts 示例，并為其設定配置項 option：
var bmapChart = echarts.init(document.getElementById('map-wrap'));
var option = {
// 這裡是 ECharts 的配置項，接下來會說明
}
bmapChart.setOption(option);
|
2.添加百度地圖：
在 option 中添加 bmap 相關設定：
var option = {
bmap: {
center: [116.307698, 40.056975], // 中心位置坐标
zoom: 5, // 地圖縮放比例
roam: true // 開啟使用者縮放
}
}
|
ECharts 将百度地圖部配置設定置內建在了 bmap 中，包括：
| 參數 | 說明 | 格式 |
| center | 中心點的百度坐标 | 坐标數組, 如：[116.307698, 40.056975] |
| zoom | 初始縮放比 | number |
| roam | 是否允許使用者縮放操作 | boolean |
| mapStyle | 地圖自定義樣式 | object, 如：{ styleJson: [...] } |
這樣百度地圖就加載到頁面中了，這裡顯示百度地圖的預設樣式，稍後第四部分将為百度地圖添加自定義樣式的配置：
百度地圖1
四、繪制散點圖
繪制散點圖的方法與上篇中繪制散點圖方法相同，需要修改的部分是，将散點圖的坐标系
coordinateSystem
改成使用 bmap
var myData = [
{name: '海門', value: [121.15, 31.89, 90]},
{name: '鄂爾多斯', value: [109.781327, 39.608266, 120]},
{name: '招遠', value: [120.38, 37.35, 142]},
{name: '舟山', value: [122.207216, 29.985295, 123]},
...
]
var option = {
bmap: {
...
},
visualMap: { // 視覺映射元件
type: 'continuous',
min: 0,
max: 200,
calculable: true,
inRange: {
color: ['#50a3ba','#eac736','#d94e5d']
},
textStyle: {
color: '#fff'
}
}
series: [
{
name: '銷量',
type: 'scatter',
coordinateSystem: 'bmap', // 坐标系使用bmap
data: myData
}
]
}
|
繪制散點後的百度地圖：
百度地圖2
四、 自定義百度地圖樣式
地圖的樣式配置
bmap.mapStyle
中
styleJson
與百度地圖内置的樣式配置一緻，具體參考百度地圖API開發指南中 定制個性地圖章節的介紹。
這裡我們設定一個較暗色調的地圖,如下：
var option = {
bmap: {
center: [116.307698, 40.056975],
zoom: 5,
roam: true, // 允許縮放
mapStyle: { // 百度地圖自定義樣式
styleJson: [
// 陸地
{
"featureType": "land",
"elementType": "all",
"stylers": {
"color": "#073763"
}
},
// 水系
{
"featureType": "water",
"elementType": "all",
"stylers": {
"color": "#073763",
"lightness": -54
}
},
// 國道與高速
{
"featureType": "highway",
"elementType": "all",
"stylers": {
"color": "#45818e"
}
},
// 邊界線
{
"featureType": "boundary",
"elementType": "all",
"stylers": {
"color": "#ffffff",
"lightness": -62,
"visibility": "on"
}
},
// 行政标注
{
"featureType": "label",
"elementType": "labels.text.fill",
"stylers": {
"color": "#ffffff",
"visibility": "on"
}
},
{
"featureType": "label",
"elementType": "labels.text.stroke",
"stylers": {
"color": "#444444",
"visibility": "on"
}
}
]
}
},
...
}
|
實作效果如下圖：
ECharts 散點圖+百度地圖（案例轉載） 百度地圖3
除了上述四個配置，其他地圖設定都可以通過 百度地圖提供的API 實作
擷取百度地圖執行個體的方法如下：
var bmap = bmapCharts.getModel().getComponent('bmap').getBMap(); // 百度地圖執行個體
|
例如，我們可以為地圖添加一個縮放控件和一個比例尺：
bmap.addControl(new BMap.NavigationControl()); // 縮放控件
bmap.addControl(new BMap.ScaleControl()); // 比例尺
|
ECharts 散點圖+百度地圖（案例轉載） 樹立目标，保持活力，gogogo！
