FPS即時顯示Widget使用教學
[info] 小提示：
程式碼連結：https://doc-3dgdp.colife.org.tw/samplecode/#src/testweb/widget-fps-sample/
[info] 小提示：
構成本Widget使用之Function：
ov.TerrainView.getFPS
本章將說明FPS即時顯示Widget的使用方式。
初始化Widget
Widget初始化須依賴核心生成的div，所以需要寫在地形開啟後的CallBack中。
這裡先撰寫一個最基本的圖台。
index.html：
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>FPSWidget</title>
<script src="PGWeb3D.min.js"></script>
</head>
<body>
<div id="MyMap" style="width:100%;height:100%;position:absolute;top:0;left:0"></div>
<script src="main.js"></script>
</body>
</html>
main.js：
var terrainview = new ov.TerrainView("MyMap");
function openCallback (result) {
//設定底圖
terrainview.setBaseLayer({
url: "BING_MAP",
identifier: "IMAGE",
urlTemplate: "{URL}"
});
}
terrainview.openTerrain(
{
url: "http://127.0.0.1:8080",
identifier: "terrain",
callback: openCallback,
urlTemplate: "oview.aspx?{URL}"
}
);
再來我們要把Widget初始化加進我們撰寫好的main.js中。
main.js：
var terrainview = new ov.TerrainView("MyMap");
var widgetFPS = null; // 預留一個物件當Widget開啟成功後的手柄。
function openCallback (result) {
//設定預設底圖
terrainview.setBaseLayer({
url: "BING_MAP",
identifier: "IMAGE",
urlTemplate: "{URL}"
});
widgetFPS = new ov.Widget.FPS({view:terrainview}); //選擇要綁定的terrainview並初始化Widget。
}
terrainview.openTerrain(
{
url: "http://127.0.0.1:8080",
identifier: "terrain",
callback: openCallback,
urlTemplate: "oview.aspx?{URL}"
}
);
到目前為止，我們只需要多加一行程式碼就能將FPS即時顯示功能加入圖台中。
其餘功能將於下方講解。
Widget其餘功能
初始化時客製化
我們可以在初始化Widget時預先自訂樣式。
main.js：
//====================================================================================================
// new ov.Widget.FPS(parameter)
// ---------------------------------------------------------------------------------------------------
// param Object 參數物件。
// ---------------------------------------------------------------------------------------------------
// view ov.TerrainView 圖台物件
// style Object DOM元件style參數。
//====================================================================================================
let param = {};
param.view = terrainview;
param.style = {
width : "40px",
Height : "20px"
};
var widgetFPS = new ov.Widget.FPS(parameter);
隱藏FPS的Widget
widgetFPS.hide();
顯示FPS的Widget
widgetFPS.show();
更新Widget樣式
我們可以隨時更新Widget自訂樣式。
main.js：
//====================================================================================================
// updateParameter(parameter)
// ---------------------------------------------------------------------------------------------------
// param Object 參數物件。
// ---------------------------------------------------------------------------------------------------
// view ov.TerrainView 圖台物件
// style Object DOM元件style參數。
//====================================================================================================
let param = {};
param.view = terrainview;
param.style = {
width : "40px",
Height : "20px"
};
widgetFPS.updateParameter(parameter);