天天看点

arcgis for js 动态依次展示图块graphic

怎样将一个图层中的图块(graphic),逐个显示在地图上,以呈现一种动画效果?

在我目前做的这个项目中,这些图块,其实都是同一个工程的开展面积,不同时期,面积不同。客户要求按照工程的历程,逐个展示这些面积,以形成一个动态、直观的效果。

arcgis for js 动态依次展示图块graphic
arcgis for js 动态依次展示图块graphic

思路其实也简单:

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);