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。