ArcGIS API for Javascript结合Echarts实现弹窗动态统计图

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