使用圖觀™統一API偵錯程式
課程2
哈嘍，小夥伴們大家好，歡迎大家來到圖觀統一開發API及 API偵錯程式入門課程的第2課。上節內容，我們向大家介紹了圖觀 統一開發API的基本概念，以及圖觀 統一開發API 介面的分類、方法指令正規化、方法回撥結果正規化、事件訂閱正規化等內容。
本節課程，我們主要講解圖觀統一開發API的輔助除錯工具——圖觀統一API偵錯程式。
本節課程安排
第一部分：【圖觀統一API偵錯程式 概述】
第二部分：【建立除錯場景】
第三部分：【單體測試功能介紹】
第四部分：【繪製和生成模擬程式碼】
第五部分：【使用綜合測試】
第六部分：【使用案例庫】
（點選影片，觀看本節完整版教程）
本節課程，我們會為大家手把手講解操作，
使用圖觀統一API偵錯程式建立一個新專案，完成快速測試基本介面，並且在場景中進行資料標繪和模擬程式碼生成，最後將全部的自定程式碼儲存成綜合測試程式碼
的的操作方法。
本節課程詳解
一、圖觀 統一 API 偵錯程式 概述
圖觀統一API偵錯程式，可呼叫圖觀端渲染或流渲染三維場景服務，基於統一開發API示例程式碼，進行簡單修改程式碼模板，即可快速除錯場景互動效果，修改操作所見所見即所得，助您快速掌握開發技能。
具備以下優勢特點：
1。
內建圖觀 統一開發API全部最新程式碼
，程式碼可以脫離介面偵錯程式，在圖觀統一開發API SDK中單獨執行。
2。可以
幫助開發者省去使用程式開發IDE搭建環境、執行程式的繁瑣步驟
，線上輕鬆測試圖觀已經發布的場景。
3。
內建大量的圖觀統一開發API標準功能測試程式碼
，可以在您的場景中預設執行。其程式碼片段亦可作為您的開發手冊進行查閱，並複製到您的工程程式碼中。
4。提供
繪製功能
，可以在載入的圖觀場景中標繪點、線、面數據，
獲得基於場景真實座標，並且匯出資料
。
5。提供
生成模擬程式碼功能
，可以根據您的
標繪點線面資料，生成圖層資料以及程式碼
。解決您在沒有真實資料時，開發專案需要生成模擬資料的苦惱。
6。
綜合測試功能
，可以
儲存您的測試程式碼
，或者
生成的模擬程式碼
，以備後續呼叫。
二、建立除錯場景
1.軟硬體環境準備
如果您準備使用圖觀統一API偵錯程式 載入除錯場景，需要具備以下
硬體和軟體
的條件。
首先是
硬體環
境，因為圖觀統一API偵錯程式主要圍繞三維場景來進行使用，所以硬體環境尤其是顯示卡能力還是需要一定要求的。一般情況下，我們建議您的硬體環境 具備：
8G記憶體，有獨立顯示卡，NVIDIA GTX 960及以上的筆記本或者桌上型電腦
。
針對
軟體環境
，作業系統
Windows，MacOS，Linux均可
；
瀏覽器推薦您使用Google Chrome 瀏覽器，
並
確保瀏覽器版本是2021年1月之後版本
。
您可以在瀏覽器位址列中輸入：chrome：//settings/help，或者透過選單 -> 設定 -> 關於Chrome檢視您的瀏覽器版本資訊。
2.登入 統一API偵錯程式
您可透過瀏覽器，
輸入網址：https：//www。tuguan。net，登入圖觀官網。
點選導航欄右側的
登入
按鈕，在登入介面中輸入已開通好的賬號和密碼後，點選登入，就進入到了業務管理介面，在“我的業務”中選擇“
介面偵錯程式服務
”點選前往按鈕，就進入到了偵錯程式的首頁。
現在大家看到的就是API偵錯程式的首頁，頁面左側是
場景管理列表
，在這裡我們可以對我們所有場景進行分類整理，便於我們後續查詢。中間Tab欄可切換
工作臺
和
案例庫
，預設顯示的是工作臺介面。
工作臺可新建場景並展示所有已建立場景
；
案例庫中的案例可以進行預覽到匯入到自己的工作臺；
頁面右上顯示公告、幫助及使用者設定。
3.建立場景
瞭解了圖觀統一API偵錯程式的主介面功能後，我們來為大家演示講解，如果建立一個場景。首先，我們在工作臺介面中，點選“
新建場景
”，將會彈出“新建場景”的對話方塊面板，我們可以根據需要呼叫的場景服務來填寫資訊。
比如，我們建立一個 “端渲染”場景，場景名稱命名為“智慧社群，在“場景連結“中輸入我們想要呼叫的場景服務地址，點選“確定“即可完成場景的建立。
滑鼠懸停在我們剛剛建立的場景面板上，可以喚醒隱藏的功能選單，我們可以對該場景進行“重新命名”、“移動”、“複製”、“刪除”。
現在我們點選
編輯
按鈕，開啟該場景，進入場景後，可以看到：
介面上方是“
單體測試
”和“
綜合測試
”切換按鈕；
右側是“
場景資訊
”，點選後會在場景前方透過懸浮面板展現端渲染的實時的幀率、三角面數、定點數和繪製呼叫，這些資訊在做場景效能分析，排查效能問題時比較有用。
“
儲存
”按鈕，如果在綜合測試、繪製、生成模擬程式碼功能中有修改內容，大家在做的時候一定要記得隨時點選這個按鈕儲存我們的頁面。
“
設定
”按鈕，點選“設定”按鈕，裡面可以修改當前場景地址，並且設定場景繪製功能的樣式，在後續課程中還會詳細講解該功能。
三、 單體測試功能介紹
點選“
單體測試
“按鈕進入到工作介面，在單體測試中：
介面左側最主要的位置顯示的是我們需要除錯的三維場景；
在場景的左上角，是“
工具欄
“，包含”
獲取經緯度
“、”
獲取當前視角引數
“、”
繪製
“和”
生成
模擬程式碼
“幾個工具，後面我們會進行詳細介紹；
中間的選單列表，分別是“
場景物件
”、“
圖層物件
”和“
全域性物件
”三大類功能介面，每個類別下我們已經內建了圖觀統一開發API全部可以除錯執行的介面；
“
場景物件
”介面上半部分還列舉出了場景的內建狀態和場景中模型和建築物件列表。這個功能比較有用，您
可以零程式碼的完成切換場景狀態、控制模型顯隱的操作
。
“
場景物件
”下部分的“模型”、“建築”、“特殊”分類，以及與“場景物件”同級別的“圖層物件”、“全域性物件”列表中的功能，點選後，都將出現在右上方的程式碼面板中，透過點選程式碼面板右上方的“執行”按鈕可以執行程式碼。
如果修改程式碼，可以再次點選“
執行
”檢視修改完的效果。如果想儲存修改的程式碼，可以點選“
新增到綜合測試
”。執行程式碼的執行結果會出現在右下方的“
事件日誌
“面板中。
在瞭解過單體測試的介面功能之後，我們來為大家演示講解一下，如何使用場景物件。
在場景物件中，如果您選中了一個模型節點，將會在“模型”程式碼執行的時候使用這個模型ID。我們先從場景物件列表中選中“
小區底座
“，在“
模型
“分類面板中，選中”
獲取模型關節資料
“，可以看到，右上角程式碼模版中已經有相應的圖觀API指令，並且id對應了選中的小區底座，點選“
執行
”按鈕，可以在下方“
事件日誌
”中看到小區底座對應的關節資料
接下來，我們來講解演示，如何使用圖層物件。
如果場景已經設定好了基準點，對應了場景和經緯度資訊，在圖層物件中的
所有圖層測試資料都會自動圍繞著這個場景中心點的經緯度來模擬生成
。在全域性物件中選中“
其他控制
”，點選“
獲取當前基準位置
”，並執行程式碼，可以在下方事件日誌中看到本場景已經設定了經緯度基準點。
在圖層物件中選中“
地標點
”，點選“
新增地標點
”，並執行，可以在左側的場景中看到已經添加了一個地標點。可以看到右上方程式碼面板中，coord資訊是在本場景中心點附近，我們可以在微調一下程式碼，點選執行後可以實時看到我們所作操作的效果變化。
這裡我們要說的一點是，可以在程式碼面板中看到，
介面偵錯程式中單體測試的圖層程式碼要多一些，每個圖層的新增都是由clearOverlayType、addLandmark和focusById組成的
。這樣可以避免重複新增造成的id重複問題，並且在新增後，還可以自動聚焦到新新增的物件上。所以在介面偵錯程式，並沒有單獨的“聚焦”測試程式碼，這些程式碼都是放到了新增圖層的程式碼裡。
四、繪製和生成模擬程式碼
前面我們也提到了圖觀統一API偵錯程式的工具欄功能，下面我們就為大家逐一講解演示一下。在二次開發場景過程中，會經常遇上在場景內獲得點位、鏡頭資訊甚至是生成模擬資料的需求，這些在介面偵錯程式中都有對應的功能。
1.獲取場景點位資訊
如果只是
獲取單個點位
，最快速的方法是使用工具欄的【
獲取經緯度
】功能。
首先我們點選工具欄上“獲取經緯度”按鈕，在您需要拾取經緯度資訊的位置單擊，即可彈出返回獲取結果對話方塊，可以看到獲取的經緯度結果和JSON資訊。JSON格式的介面資料又有兩種coordType，為0的型別是經緯度資訊，為1的是相對於場景中心點的直角座標系XYZ偏移，單位是米。這些資訊都可以透過旁邊的複製按鈕快速複製。
2.獲取鏡頭資訊
點選【
獲取當前視角引數
】按鈕，將會彈出返回對話方塊，可以看到透過工具我們獲取了當前的視點資訊和JOSN資訊，這些資料也可以透過旁邊的複製按鈕快速複製出來，並且應用到TGAPI其他介面當中。
3.繪製
工具欄上的【
繪製
】功能，是非常重要的。比如在實際業務中，需要標繪人員位置、巡邏軌跡、巡邏區域等應用，這個時候，就可以用到“繪製”功能。
進入到繪製功能之前，需要
先使用“設定”功能
。在設定面板中，我們點選進入 標繪設定， 確認路線和區域的屬性設定，特別是
路線寬度
和
圍欄高度
這兩個引數，預設情況下這兩個數值的單位都是米，
在不同大小的場景下，需要靈活調整，確保這個數值不會過大或者過小造成看不到的問題
。本場景我們可以將路線寬度設定為1，區域的圍欄高度設定為20，點選確定。
設定好了基本的屬性之後，我們來進行點繪製。首先是在場景中新增點，我們點選繪製按鈕，會彈出繪製對話方塊，繪製對話方塊 共有三個頁籤功能，分別是“
點
”、“
路徑
”、”
區域
“。
（1）點繪製
在“
點
”功能下，點選
繪製
按鈕，我們可以在場景中透過單擊，新增點位。新增的點位出現在對話方塊列表中，透過列表右側的編輯按鈕修改點名稱。標繪完成後，我們還可以對標繪點進行編輯。
在列表中，選中一個點，可以在左側三維場景中所對應的點位上出現 平移互動軸，使用 平移互動軸 可以修改點的位置，平移互動軸 有7個不同的平移方向組合：
單向移動
：拖拽這個軸，只會沿著x、y、z其中某一個方向移動。
平面移動
：拖拽這個面，只會沿著xy平面、yz平面、xz平面其中某一個平面移動。
自由移動
：拽轉這個點，座標點會隨意移動，基於當前視角狀態的透視關係移動，請謹慎使用。
再次點選繪製按鈕
，退出繪製和編輯狀態
。
（2）路徑繪製
掌握了點繪製之後，我們來演示一下
路徑繪製
的操作。
首先是新增路徑，在繪製對話方塊裡，選擇“
路徑
”Tab頁籤，點選
繪製
按鈕。在三維場景中您希望開始繪製的地方單擊，新增第一個點。然後繼續在場景中單擊，新增點位繪製出一條路徑，新增時，我們可以看到，在新增第二個點之後的每一個最後點的旁邊，會有
確定
和
取消
兩個按鈕，我們可以隨時點選確認結束繪製或取消繪製。
在標繪過程中，我們
可以透過滑鼠進行場景調整操作
，滑鼠
右鍵拖拽可以旋轉場景
，
中鍵滾輪縮放場景
，
中鍵點選拖拽平移場景
。
標繪完成後，點選
確定
按鈕，新增的路徑會出現在列表中，透過列表右側的編輯按鈕修改路徑名稱。
再次點選 繪製 按鈕，退出新增狀態
。
新增完路徑之後，我們可以
對標繪的路徑做哪些編輯操作
呢？接下來我們就為大家逐一講解。
在場景中，我們點選繪製好的路徑，可以再次進入到編輯路徑的狀態，
使用平移互動軸，可以調整整個路徑的位置；點選+號，可以在路徑上新增一個新的關鍵點；單擊關鍵點可以進入關鍵點編輯狀態，
這個時候，
可以透過 平移互動軸 調整單個點的位置，路徑的每個點可以位於不同的高度；使用關鍵點右側的刪除圖示，刪除單個點。
這裡要
強調
一下，
如果路徑上只有兩個點，不會有單個點的刪除按鈕，這時刪除路徑需要透過路徑列表中，選中路徑，再單擊 刪除 按鈕
。單擊場景的其他位置，可以退出關鍵點編輯狀態，返回路徑編輯狀態。再次單擊場景的其他位置，退出路徑編輯狀態。
（3）區域繪製
掌握了路徑標繪之後，接下來我們將演示講解區域的繪製。
在繪製對話方塊裡，選擇“
區域
”功能點選
繪製
按鈕，進入繪製狀態。在場景中透過單擊，新增第一個點，然後繼續在場景中單擊新增其他點位，進行區域的繪製。在第三個點和之後的每一個最後點的旁邊，會有
確定
和
取消
兩個按鈕。標繪完成後，點選“
確定
“按鈕，
再次點選 繪製 按鈕，退出新增狀態
。
在繪製過程中，滑鼠右鍵拖拽仍然可以旋轉場景，中鍵滾輪縮放場景，中鍵點選拖拽平移場景。
完成區域繪製後，還可以對繪製區域進行編輯：
在三維場景中或者區域列表中，單擊一個已經繪製好的區域，可以進入到編輯狀態。這時，您
可以透過 平移互動軸 調整整個區域位置。透過加號圖示在區域上新增一個新的關鍵點。單擊關鍵點可以進入關鍵點編輯狀態
，這個時候，
可以透過 平移互動軸 調整單個點的位置
，
如果修改了單個點的高度，整個區域的高度也會發生變化
。
點選關鍵點右側的刪除圖示，可以刪除單個點
。
如果區域上只有三個點，不會有單個點的刪除按鈕，這時刪除區域需要透過區域列表中，選中區域，再單擊刪除 按鈕
。
單擊場景的其他位置，可以退出關鍵點編輯狀態，返回區域編輯狀態。再次單擊場景的其他位置，退出區域編輯狀態。
4.生成模擬程式碼
掌握了繪製工具的使用之後，接下來就是工具欄中最後一個工具的使用了。
工具欄上的第四個按鈕，是非常重要的【
生成模擬程式碼
】功能。點選這個按鈕，會彈出 生成模擬程式碼 對話方塊。對話方塊分為三個Tab頁籤，分別是“
圖層
”， “模
型/特效
”和“
視點
”。每個Tab頁簽下方可以選擇更加具體的程式碼型別，點選右側的“加號”按鈕，可以生成對應型別的模擬程式碼。
這裡我們為大家演示
如何生成一個三維柱圖的模擬程式碼
。首先，我們選中 圖層 Tab頁籤，在圖層型別中選擇
三維柱圖
，然後點選“
+
“按鈕。彈出
生成模擬程式碼 – 三維柱圖對話方塊
，左側是對於圖層程式碼的設定選項，每個選項都對應圖觀統一開發API的指令引數，中間是列舉在 繪製 面板中的點資料。這裡的資料型別是根據生成圖觀統一開發API程式碼所需要的資料型別載入的。例如三維柱圖只能關聯中心點座標，所以只能看到圖層資料 - 點。在這裡，我們選擇 預設圖層，圖層的全部子節點都會被選中。
右側面板比較特殊，並不是所有的圖層都有的，只有圖觀統一開發API引數需要value的圖層，才會有這個區域。因為柱圖在關聯點的位置後，還需要一個value決定柱圖的高度。所以這裡可以有資料的最小值下限、最大值上限，另外還提供了多種分佈方式可以選擇，對於
value的隨機結果
，可以透過
生成預覽
檢視。
點選
確定
按鈕，完成生成三維柱圖的模擬程式碼編輯，柱圖出現在每棟樓的樓頂，並且在圖層列表中多了一個3DCloumn圖層。
滑鼠懸浮在圖層上，可以啟用圖層操作按鈕，如影片中所示，功能分別是“修改”，“新增到綜合測試”、“定位”和“隱藏”
。這裡點選
新增到綜合測試
，彈出新的對話方塊，點選 建立空白測試項，然後點選 新增。點選
綜合測試
並且將列表滾動到最下方，點選最後一項，
可以在右上方的程式碼區域看到剛才生成好的圖觀統一開發API指令和測試資料
。您可以在程式碼區域繼續編輯程式碼，編輯完成後別忘記儲存。
五、使用綜合測試
隨著前面的操作，我們已經進入到了
綜合測試頁面
，在綜合測試列表中，選中其中一項，可以在右側看到測試程式碼，還可以在列表中修改名稱或者刪除。修改程式碼後，使用
儲存
按鈕進行儲存。
在列表的最下方，可以點選 “+ ”新增綜合測試項 新增一個新的空白測試項
。
六、使用案例庫
最後一個小節，我們來講一講API偵錯程式的案例庫功能。
使用案例庫，您可以快速瀏覽API偵錯程式的場景中的程式碼執行，並且將您感興趣的案例匯入到自己的工作臺中，繼續進行參考、編輯
。
返回到之前的
案例庫頁面
，找到 我們剛剛預覽的專案，滑鼠點選
匯出
按鈕。
在彈出的匯出對話方塊中，選擇一個希望匯入工作臺的節點。一般選擇 根節點 也可以。
點選 確定 按鈕。
這樣案例庫的示例工程就會出現在 工作臺 對應的節點目錄下。開啟後，跳轉到 綜合測試 可以看到示例程式碼功能。
在後續的課程中，我們將要演示的全部示例程式碼片段，都存在於這個案例工程裡，並以此場景進行演示。
所以請您在進行後面課程之前，先將案例庫中的專案匯入到自己的工作臺中
。
本節總結
本節課我們事無鉅細地和大家介紹了圖觀統一API偵錯程式的介面功能、軟硬體環境準備、如何進行場景程式碼除錯、標繪和模擬資料匯出等內容。相信大家已經掌握了今天課程的內容，那本節課程到這裡就結束啦~
下節預告
如何進行場景的二次開發呢？都需要做哪些必備工作？下節課，我們將圍繞“如何建立應用和創景“給大家做詳細的講解，記得一定要持續關注我們哦~
圖觀
線上試用地址
圖觀™引擎現可申請免費試用！現在試用還可獲得1對1技術支援和專屬大禮包~還等什麼，快快聯絡我們體驗圖觀™引擎的強大功能吧~
1.訪問圖觀™官方網站，在瀏覽器中輸入網址：
https://www.tuguan.net
在圖觀™官方網站中，您可獲取圖觀™最新產品技術動態以及全面的開發指引，幫助您快速瞭解圖觀™數字孿生視覺化引擎。
2.新增數字冰雹客服微信，稽核通過後可獲取體驗邀請碼。
掃碼新增好友
內測申請/一對一諮詢
關注公眾號，瞭解更多資訊
