天天看點

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