ArcGIS API for Javascript结合Echarts实现弹窗动态统计图
实现的思路主要是通过鼠标事件获取属性信息,利用graphic 的InfoTemplate属性,把echarts统计图集成到弹窗中。以统计华东地区1995、2000、2005年的农村居民人均纯收入为例,效果如下图所示:
代码讲解
1、新建图层
huadong
用于获取动态属性数据、glayer
用来高亮显示查询的要素
//新建FeatureLayer
var huadong= new FeatureLayer("http://localhost:6080/arcgis/rest/services/huadong/MapServer/0",{
mode: FeatureLayer.MODE_SNAPSHOT,
outFields: ["*"]
});
map.addLayer(huadong);
//高亮显示的图层
var glayer = new GraphicsLayer({
id:"huadong"
});
map.addLayer(glayer);
2、设置变量
showFields
为我们待统计的属性名称(与要素服务相对应)、eventControl
用于控制鼠标事件
//统计属性
var showFields = ["华东历年农村居民人均纯收入.Y1995","华东历年农村居民人均纯收入.Y2000","华东历年农村居民人均纯收入.Y2005"];
var eventControl = 0;
3、绑定事件
对要素服务图层,主要通过mouse-over
事件获取到对应graphic的属性值,然后执行Click回调函数;对高亮图层,主要通过mouse-out
事件实现高亮效果的清除功能。
on(huadong,"mouse-over",Click