本篇详细介绍如何在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详解