ArcGIS底图+eCharts 迁徙图图显示与隐藏

通过使用Echarts3Layer.js扩展,可以实现在ArcGIS底图上添加eCharts图表,可以简单得到比ArcGIS API for JS更好的效果。

一般的eCharts图表可以通过clear()方法或echarts.setOption(option,true);方法去掉,但是此处不行。因为此处新增加的实际是一个新的图层。我通过修改Echarts3Layer.js源码实现了图层的显示与隐藏。

效果如以下录屏所示:

如果你不想了解如何修改的:文末提供修改后Echart3Layer.js的下载链接以及使用方法。

修改步骤:

原来新增加的图层并没有ID属性,因此我们没法设置该图层的属性,我们通过尝试增加ID属性,来获得该图层的实例,并设置其CSS属性来实现其显示与隐藏。

1、打开Echarts3Layer文件

打开后发现代码是被工程化的,并不易读,但没关系,这并不影响。

2、找到以下代码

var n=this._echarts3Container=document.createElement("div");

直接搜索即可

3、在这句代码后面添加以下代码

n.id="echarts3-div",

设置新图层的id属性

源码修改完毕。

 4、在代码中设置图表的显示与隐藏

设置隐藏图表

$('#echarts3-div').css('opacity','0')

图表显示: 

$('#echarts3-div').css('opacity','1')

———————————————————————————————————————————————————

修改后ECharts3Layer.js下载链接及用法

下载链接:

CSDN下载: https://download.csdn.net/download/scaped/10911390

百度网盘下载:https://pan.baidu.com/s/158u-InbdnZUicpCq7ILZOQ   提取码:41k1

使用方法:

1、将下载后的eCharts3Layer.js文件替换你原来的eCharts3Layer.js文件

2、如果你引入了jQuery,在你的代码中通过以下代码设置图表隐藏:

$('#echarts3-div').css('opacity','0')

通过以下代码设置图表显示: 

$('#echarts3-div').css('opacity','1')

 

没有更多推荐了,返回首页

私密
私密原因:
请选择设置私密原因
  • 广告
  • 抄袭
  • 版权
  • 政治
  • 色情
  • 无意义
  • 其他
其他原因:
120
出错啦
系统繁忙,请稍后再试