本文共 1664 字，大约阅读时间需要 5 分钟。

怎样将一个图层中的图块（graphic），逐个显示在地图上，以呈现一种动画效果？

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

但真做起来，并不容易。因为：

因为我们要依次显示图块，就应该获得所有图块，并按工程时间进行排序。所以，如何得知图块已加载完毕？

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控件初始化了        }    }});

这是我弄的时候，耗费时间最长的环节。至于TimeSlider，只是一个控件，没什么好讲的。唯一要提醒的是，并不需要将TimeSlider加到map对象。

map.setTimeSlider(timeSlider);

这样会导致图块根本出不来，去掉就好了。但在有的地图中，有无这句都没问题。不知道是做什么用的，完全多余的一条语句。

转载地址：https://leftfist.blog.csdn.net/article/details/78712873 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！