怎样将一个图层中的图块(graphic),逐个显示在地图上,以呈现一种动画效果?
在我目前做的这个项目中,这些图块,其实都是同一个工程的开展面积,不同时期,面积不同。客户要求按照工程的历程,逐个展示这些面积,以形成一个动态、直观的效果。
![](https://img.laitimes.com/img/_0nNw4CM6IyYiwiM6ICdiwiI0gTMx81dsQWZ4lmZf1GLlpXazVmcvwFciV2dsQXYtJ3bm9CX9s2RkBnVHFmb1clWvB3MaVnRtp1XlBXe0xCMy81dvRWYoNHLwEzX5xCMx8FesU2cfdGLwMzX0xiRGZkRGZ0Xy9GbvNGLpZTY1EmMZVDUSFTU4VFRR9Fd4VGdsYTMfVmepNHLrJXYtJXZ0F2dvwVZnFWbp1zczV2YvJHctM3cv1Ce-cmbw5SO2kzN2QDO2EWZiljZkljZyYzX1MDN1MTM1EzLchDMyIDMy8CXn9Gbi9CXzV2Zh1WavwVbvNmLvR3YxUjLyM3Lc9CX6MHc0RHaiojIsJye.png)
思路其实也简单:
1、将图层中的图块读出来
2、依次在地图上显示这些图块
3、依次,可以用arcgis for js自带的控件: ersi/dijit/TimeSlider 来控制
但真做起来,并不容易。因为:
1、图块加载有个过程。并不是图层load完毕,图块就加载完毕了。
2、arcgis for js 3.19 版本中,并没有一个图块加载完毕的事件
因为我们要依次显示图块,就应该获得所有图块,并按工程时间进行排序。所以,如何得知图块已加载完毕?
看了网上的文章,知道可以用图层事件:update-end 并结合条件语句进行判断:
featurelayer.on("update-end", function (info)
if (info.target.graphics.length > 0) {//图块貌似已经加载完毕
//可以进行timeslider控件初始化了
但是这个”update-end”事件并不是为图块专设的,它代表的是地图变化事件,图块加载完成,拖动,都会触发这个事件。所以上述语句还不够,还要加一个判断,以避免反复初始化timeslider控件。
var init = false;
featurelayer.on("update-end", function (info)
if (info.target.graphics.length > 0 && !init) {//图块貌似已经加载完毕,且未初始化timeslider控件
init = true;
//可以进行timeslider控件初始化了
这样就可以保证初始化代码仅执行一次。
然后又发现,图块根本没显示出来。明明已经拿到图块了,里面的各种属性,数据都能读出来,怎么就不能显示呢?经过反复调试,原来图块虽然能读出来,但图块并未加载完成,由于上述代码仅执行一次,所以在这段代码里面显示图块,往往并不能成功。
最后是用两个事件来最终确定图块装载完毕时机的:
fl.on("graphic-node-add", function (g)
g.graphic.hide();//每个图块加载的时候,先hide,成功后,图块graphic的属性visible == false
});
var init = false;
fl.on("update-end", function (info)
if (info.target.graphics.length > 0 && !init) {
var tg = info.target.graphics;
if (tg[0].visible == false) {//graphic.visible默认是true,而在事件 graphic-node-add 中,graphic已置为不可见。如果此时读到graphic.visible == true,说明该图块尚未加载完成
//可以进行timeslider控件初始化了
map.setTimeSlider(timeSlider);