echarts3 + 百度地图API展示自定义地图
最近接到一个任务，在前段展示地图，要求是底图要暗色的。目前国内提供地图服务比较知名的也就是高德、百度、天地图。前两个如果商用貌似是要收费的，天地图则完全免费。另外一个需求是要在地图上面根据某些点的值来渲染一个圆形，值越大图形越大。想了想echarts的demo里面就有这种实现。于是决定采用echarts+百度地图API来实现。另外其实还有一个需求，是要画一些地区边界，但已有的是ArcGIS的服务，需要利用arcTool转换工具将要素转成json格式，然后用这个Json的Path数据在echarts的地图中传入就可以了。
废话不多说，直接上干货。
//main.js
window.onload = function () {
create();
}
var create = function () {
var convertData = function (data) {
var res = [];
for (var i = 0; i < data.length; i++) {
var geoCoord = geoCoordMap[data[i].name];
if (geoCoord) {
res.push({
name: data[i].name,
value: geoCoord.concat(data[i].value)
});
}
}
return res;
};
option = {
bmap: {
center: [102.84093, 24.94741],
zoom: 13,
roam: true,
mapStyle: {
styleJson: [
{
"featureType": "water",
"elementType": "all",
"stylers": {
"color": "#044161"
}
},
{
"featureType": "land",
"elementType": "all",
"stylers": {
"color": "#004981"
}
},
{
"featureType": "boundary",
"elementType": "geometry",
"stylers": {
"color": "#064f85"
}
},
{
"featureType": "railway",
"elementType": "all",
"stylers": {
"visibility": "off"
}
},
{
"featureType": "highway",
"elementType": "geometry",
"stylers": {
"color": "#004981"
}
},
{
"featureType": "highway",
"elementType": "geometry.fill",
"stylers": {
"color": "#005b96",
"lightness": 1
}
},
{
"featureType": "highway",
"elementType": "labels",
"stylers": {
"visibility": "off"
}
},
{
"featureType": "arterial",
"elementType": "geometry",
"stylers": {
"color": "#004981"
}
},
{
"featureType": "arterial",
"elementType": "geometry.fill",
"stylers": {
"color": "#00508b"
}
},
{
"featureType": "poi",
"elementType": "all",
"stylers": {
"visibility": "off"
}
},
{
"featureType": "green",
"elementType": "all",
"stylers": {
"color": "#056197",
"visibility": "off"
}
},
{
"featureType": "subway",
"elementType": "all",
"stylers": {
"visibility": "off"
}
},
{
"featureType": "manmade",
"elementType": "all",
"stylers": {
"visibility": "off"
}
},
{
"featureType": "local",
"elementType": "all",
"stylers": {
"visibility": "off"
}
},
{
"featureType": "arterial",
"elementType": "labels",
"stylers": {
"visibility": "off"
}
},
{
"featureType": "boundary",
"elementType": "geometry.fill",
"stylers": {
"color": "#029fd4"
}
},
{
"featureType": "building",
"elementType": "all",
"stylers": {
"color": "#1a5787"
}
},
{
"featureType": "label",
"elementType": "all",
"stylers": {
"visibility": "off"
}
}
]
}
},
series: [{
name: "转换后",
type: 'lines',
coordinateSystem: 'bmap',
polyline: true,
data: [{
coords: paths,//paths数据在后面贴出
lineStyle: {
normal: {
opacity: 1,
width: 4,
color: '#666'
},
emphasis: {
width: 6
}
}
}]
}, {
name: "原始数据",
type: 'lines',
coordinateSystem: 'bmap',
polyline: true,
data: [{
coords: paths,
lineStyle: {
normal: {
opacity: 1,
width: 4,
color: "#ff0000"
},
emphasis: {
width: 6
}
}
}]
}, {
name: 'pm2.5',
type: 'scatter',
coordinateSystem: 'bmap',
data: convertData(data),
symbolSize: function (val) {
return val[2] / 2;
},
label: {
normal: {
formatter: '{b}',
position: 'right',
show: false
},
emphasis: {
show: true
}
},
itemStyle: {
normal: {
color: '#ddb926'
}
}
}, {
name: 'Top 5',
type: 'effectScatter',
coordinateSystem: 'bmap',
data: convertData(data.sort(function (a, b) {
return b.value - a.value;
}).slice(0, 6)),
symbolSize: function (val) {
return val[2] / 2;
},
showEffectOn: 'render',
rippleEffect: {
brushType: 'stroke'
},
hoverAnimation: true,
label: {
normal: {
formatter: '{b}',
position: 'right',
show: true
}
},
itemStyle: {
normal: {
color: '#f4e925',
shadowBlur: 10,
shadowColor: '#333'
}
},
zlevel: 1
}]
};
var mapCharts = echarts.init(document.getElementById('main'));
mapCharts.setOption(option);
var bmap = mapCharts.getModel().getComponent('bmap').getBMap();
bmap.addControl(new BMap.MapTypeControl());
}elementType:
1.geometry
2.geometry.stroke //图形边框色
3.labels
4.labels.text.stroke //字体边框色
5.abels.text.fill //字体填充色 //data数据
var data = [
{name: '海门', value: 9},
{name: '鄂尔多斯', value: 12},
//...
];
//geoCoordMap
var geoCoordMap = {
'海门':[121.15,31.89],
'鄂尔多斯':[109.781327,39.608266],
//...
};
//paths
var paths = [
[
102.84768879000006,
25.055725092000046
],
[
102.84802354000004,
25.055680186000075
],
//...
];注意
1. 因为用到了”bmap”，所以需要有百度API的开发者key。