ArcGIS地图结合eCharts迁徙线入门——画一条迁徙线

本篇详细介绍如何在ArcGIS API for JavaScript的底图上用eCharts画一条迁徙线。上一篇文章介绍了eCharts的配置，如果还没有配置请先看上一篇文章。

最终实现的效果：

1.引入js和css文件

注意引入的顺序

<link  rel="stylesheet"  type="text/css" href="http://localhost:8080/arcgis_js_api/library/3.23/3.23/esri/css/esri.css" />
<script src="../dist/main.js"></script>
<script src="http://localhost:8080/arcgis_js_api/library/3.23/3.23/init.js"></script>

2.添加ArcGIS提供的basemap底图

方法还是ArcGIS API for JavaScript中提供的方法

require(["esri/map","eCharts/Echarts3Layer","dojo/domReady!"],function (Map,Echarts3Layer) {
    map = new Map("mapDiv", {
        logo: false,
        basemap: "osm",
        center: [122.45, 37.75], // longitude, latitude
        zoom: 5
    })

3.添加eCharts到图层

map.on('load',function () {
    //eCharts添加到图层
    var overlay=new Echarts3Layer(map,echarts);
    var chartsContainer=overlay.getEchartsContainer();
    var myChart=overlay.initECharts(chartsContainer);


    var option={

    myChart.setOption(option);

4.定义数据

由于我们要实现地图上点到点的连线，所以数据内容是一个个包含点的坐标的对象，而这样的对象有多个，他们构成一个数组，我们定义的data就应该是一个对象数组。

var myData=[[{
    coord: [116.4551,40.2539]
}, {
    coord: [121.4648,31.2891]
}]]

每两个点构成一个数组，表示起点跟终点。由于我们只画一条线，所以这样的数组我们只有一个。其中coord表示该对象是一个点对象。

5.定义配置选项

geo:地图配置，series：展示图表配置，lines表示我们需要的线类型图表，不同的图表类型应对应不同的数据格式。effect表示显示的特效。lineStyle表示线的样式。data是必选项，是我们要展示的数据。

var option={

    geo:{
        map:'',
        roam:true
    },

    series:[{
        name:"",
        type:'lines',
        zlevel:1,
        effect:{
            show:true,
        },
        lineStyle:{
            normal:{
                color:"#00ffff",
                width:2,
                curveness:0.2
            }
        },
        data:myData

    }]
}

完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link  rel="stylesheet"  type="text/css" href="http://localhost:8080/arcgis_js_api/library/3.23/3.23/esri/css/esri.css" />
    <script src="../dist/main.js"></script>
    <script src="http://localhost:8080/arcgis_js_api/library/3.23/3.23/init.js"></script>
</head>
<body>
<div id="mapDiv"></div>
<script>
    var map; //把map从require中拿出来,全局

//    数据因为常常有多个，所以一般按照数组来保存
        coord: [116.4551,40.2539]
    }, {
        coord: [121.4648,31.2891]
    }]]
    alert(myData[0]);

    require(["esri/map","eCharts/Echarts3Layer","dojo/domReady!"],function (Map,Echarts3Layer) {
        map = new Map("mapDiv", {
            logo: false,
            basemap: "osm",
            center: [122.45, 37.75], // longitude, latitude
            zoom: 5
        })
        map.on('load',function () {
            //eCharts添加到图层
            var overlay=new Echarts3Layer(map,echarts);
            var chartsContainer=overlay.getEchartsContainer();
            var myChart=overlay.initECharts(chartsContainer);


            var option={

                geo:{
                    map:'',
                    roam:true
                },

                series:[{
                    name:"",
                    type:'lines',
                    zlevel:1,
                    effect:{
                        show:true,
                    },
                    lineStyle:{
                        normal:{
                            color:"#00ffff",
                            width:2,
                            curveness:0.2
                        }
                    },
                    data:myData

                }]
            }
            myChart.setOption(option);
        })
    });
</script>
</body>
</html>

最后推荐一篇文章，文章作者总结的非常好：Echarts详解

ArcGIS地图结合eCharts迁徙线入门——画一条迁徙线

猜你喜欢