對于互聯(lián)網(wǎng)審計系統(tǒng)及公安系統(tǒng)來說，終端的軌跡與回放的意義在于實施隨時追蹤和記錄終端行為軌跡，其目的是為了監(jiān)控和抓捕嫌疑人。其實，在很多的場合我們都應用到，像共享經(jīng)濟項目（共享單車、滴滴等）都會采集到終端的數(shù)據(jù)，以至于在平臺進行管控。

具體設(shè)計如下：

（說明：文中所涉及數(shù)字分別為X、Y、W、H）

順序為：底稿——state1（軌跡按鈕及軌跡列表的制作——動態(tài)面板1（軌跡列表）——動態(tài)面板2（）底稿地圖+三個水滴顯示（動態(tài)地圖，按照鼠標按下與主頁面進入進行用例設(shè)置）-動態(tài)面板（軌跡線）），state1中包含6個動態(tài)面板，其中3個是屬于水滴，一個屬于軌跡列表，一個屬于軌跡線，state1進入即是一個動態(tài)頁面（此頁面用來設(shè)置底稿及軌跡按鈕）。

預覽效果圖

制作底稿

制作底稿的目的是為了放置動態(tài)面板和按鈕部件。

拖入兩個矩形，先拖如底稿矩形部件，然后在頭部拖入一個矩形部件，底稿為0，40，1000，460，頭部為0，0，1000，40，使其處于統(tǒng)一位置即可，我這屬于參考；然后，拉入文字標簽部件，寫：追蹤。

底稿，其實就是一個動態(tài)面板的state1，在state1下放置的地圖，如下：

軌跡底稿及軌跡回放按鈕制作

拖入動態(tài)面板，并命名為：軌跡，尺寸為：0，40，1000，460（與主頁底稿保持一致）；然后，命名一個單頁的動態(tài)頁面名稱：state1（防止遺忘）；

（此舉等有了地圖后再做，以便有個參考）在當前的底稿上（地圖），拉入按鈕部件，并命名為：軌跡回放。

制作軌跡素材

從百度地圖或高德地圖處截圖插入到當前頁面，已地圖作為底稿，拖入動態(tài)面板，并建立三個水滴標志，然后，將水滴標志改為動態(tài)面板，設(shè)置不同顏色；并設(shè)置用例：

軌跡點及底稿圖

用例設(shè)置如下（三個水滴點統(tǒng)一設(shè)置，當拖動時的動作）：

添加軌跡線

在軌跡點及底稿圖中三水滴位置插入動態(tài)面板，拖入兩根先并進行設(shè)置，兩根線設(shè)置為粗顯，顏色任意；短線為：0，0，179，158；長線為：179，0，281，225；然后推出至軌跡/State1位置。

軌跡條件設(shè)置

軌跡回放按鈕：用例設(shè)置——鼠標單擊時，并在用例中設(shè)置限制如下：

短線設(shè)置
長線設(shè)置

完成按鈕的設(shè)置后，即可預覽，其中，水滴可在頁面中進行移動。

建議

按照整體思路：先放置好動態(tài)面板，然后再進行添加素材，最后根據(jù)放置水滴的位置再放置軌跡線的動態(tài)頁面，其中軌跡線的動態(tài)頁面需在水滴的范圍內(nèi)，軌跡線不能超出動態(tài)頁面的范圍；具體如下：

1、放置動態(tài)面板及按鈕和下拉部件，使首頁先固定；如圖：

2、在動態(tài)頁面state1，插入動態(tài)頁面及底稿，其中底稿為地圖圖片素材；（注意：水滴的動態(tài)頁面需要先放置水滴以后再設(shè)置為動態(tài)頁面，并記錄水滴放置的坐標，此坐標有利于軌跡線的顯示）；如圖：

3、軌跡線的放置與設(shè)置（具體的設(shè)置已經(jīng)在上面提到）

本文由 @唐先生 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載