React中使用ECharts地图扩展

ECharts 结合百度地图API可以展示非常炫丽的地图动画。正如官网示例点击这里。

那么，在React中如何实现这样交通动态图呢？

1 React 组件

首先，我们需要引入echarts,以及 echarts的地图扩展 bmap (地图扩展，这个很关键，如果不引入，程序运行后会出现“unkNown coordinateSystem bmap”的错误)。

下面是React Component中构建含有bmap的echarts组件主要代码：

import React,{ Component,PropTypes } from 'react';
import echarts from 'echarts';
import bmap from 'echarts/extension/bmap/bmap';

import buslines from 'data/bus_lines.json';
import styles from './styles.css';

class MapDiv extends Component {
    static propTypes = {
        className: PropTypes.string,};

    constructor(props) {
        super(props);
    }

    componentDidMount() {
        this.initalECharts(buslines);
    }

    initalECharts(data) {
        const myChart = echarts.init(document.getElementById('map'));
        const hStep = 300 / (data.length - 1);
        const busLines = [].concat.apply([],data.map(function (busLine,idx) {
            let prevPt;
            let points = [];
            for (let i = 0; i < busLine.length; i += 2) {
                let pt = [busLine[i],busLine[i + 1]];
                if (i > 0) {
                    pt = [
                        prevPt[0] + pt[0],prevPt[1] + pt[1]
                    ];
                }
                prevPt = pt;

                points.push([pt[0] / 1e4,pt[1] / 1e4]);
            }
            return {
                coords: points,linestyle: {
                    normal: {
                        color: echarts.color.modifyHSL('#5A94DF',Math.round(hStep * idx))
                    }
                }
            };
        }));

        myChart.setoption({
            bmap: {
                center: [116.46,39.92],zoom: 10,roam: true,mapStyle: {
                  'styleJson': [
                    {
                      'featureType': 'water','elementType': 'all','stylers': {
                        'color': '#031628'
                      }
                    },{
                      'featureType': 'land','elementType': 'geometry','stylers': {
                        'color': '#000102'
                      }
                    },{
                      'featureType': 'highway','stylers': {
                        'visibility': 'off'
                      }
                    },{
                      'featureType': 'arterial','elementType': 'geometry.fill','stylers': {
                        'color': '#000000'
                      }
                    },'elementType': 'geometry.stroke','stylers': {
                        'color': '#0b3d51'
                      }
                    },{
                      'featureType': 'local',{
                      'featureType': 'railway','stylers': {
                        'color': '#08304b'
                      }
                    },{
                      'featureType': 'subway','stylers': {
                        'lightness': -70
                      }
                    },{
                      'featureType': 'building',{
                      'featureType': 'all','elementType': 'labels.text.fill','stylers': {
                        'color': '#857f7f'
                      }
                    },'elementType': 'labels.text.stroke','stylers': {
                        'color': '#022338'
                      }
                    },{
                      'featureType': 'green','stylers': {
                        'color': '#062032'
                      }
                    },{
                      'featureType': 'boundary','stylers': {
                        'color': '#465b6c'
                      }
                    },{
                      'featureType': 'manmade',{
                      'featureType': 'label','stylers': {
                        'visibility': 'off'
                      }
                    }
                  ]
                }
            },series: [{
                type: 'lines',coordinateSystem: 'bmap',polyline: true,data: busLines,silent: true,linestyle: {
                    normal: {
                        // color: '#c23531',
                        // color: 'rgb(200,35,45)',
                        opacity: 0.2,width: 1
                    }
                },progressiveThreshold: 500,progressive: 200
            },{
                type: 'lines',linestyle: {
                    normal: {
                        width: 0
                    }
                },effect: {
                    constantSpeed: 20,show: true,trailLength: 0.1,symbolSize: 1.5
                },zlevel: 1
            }]
        });
    }


    render() {
        return (
            <div id="map" className={styles.mapdiv}></div> ); } } export default MapDiv;

注意，需要设定map标签的 高 宽，不然echarts 不能绘制。

styles.css

.mapdiv { width: 1000px; height: 700px; }

2 百度地图API

地图组件构建完毕，然而，并不能显示地图，提示“BMap api is not loaded”。 什么原因呢？

这是因为 调用百度地图API，需要申请密钥（ak）才能使用，当申请完后，需要添加一个JavaScript到index.html文件中。

<!DOCTYPE html>
<html>
    <head>
        <Meta charset="utf-8">
        <Meta name="viewport" content="width=device-width,initial-scale=1">
        <title>Hello World</title>
        <script src="http://api.map.baidu.com/api?v=2.0&ak=ZUONbpqGBsYGXNIYHicvbAbM"></script>
    </head>
    <body>
        <div id="app"></div>
    </body>
</html>

密钥来自：https://github.com/ecomfe/echarts/blob/master/test/bmap.html

到这一步就可以显示我们期待已久的交通动态地图了。