三維傾斜攝影模型發布國際3D傳輸標準I3S服務Widget使用教學
[info] 小提示：
程式碼連結：https://doc-3dgdp.colife.org.tw/samplecode/#src/testweb/widget-photogrammetrymodellayertoi3s-sample/
[info] 小提示：
構成本Widget使用之Function：
ov.DoCommand.doByHandleov.DoCommand.doSync
環境建置
Widget功能需要透過MapServer的擴充功能來執行。
擴充功能環境搭建：
步驟1. 將MapServer產品安裝目錄(預設路徑：C:\Program Files\PilotGaea\TileMap)底下的/templates/photogrammetryModelLayerToI3SPlugin.zip解壓縮。
[info] 包含檔案如下： PhotogrammetryModelLayerToI3SPlugin.dll
步驟2. 將PhotogrammetryModelLayerToI3SPlugin.dll丟入/plugins資料夾內。
步驟3. 重啟MapServer應用程式即可。
初始化Widget
Widget初始化須依賴核心生成的div，所以需要寫在地形開啟後的CallBack中。
這裡先撰寫一個最基本的圖台，並帶有圖層選單。
index.html：
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>PhotogrammetryModelLayerToI3S</title>
<script src="PGWeb3D.min.js"></script>
<link href="PGWeb3D.css" rel="stylesheet" type="text/css" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
<div id="MyMap" style="width:100%;height:100%;"></div>
<script src="main.js"></script>
</body>
</html>
main.js：
var terrainview = new ov.TerrainView("MyMap");
var photogrammetryModelLayerToI3S = null; //後面會補上widget
function openCallback (result) {
//設定底圖
terrainview.setBaseLayer({
url: "BING_MAP",
identifier: "IMAGE",
urlTemplate: "{URL}"
});
}
terrainview.openTerrain(
{
url: "http://127.0.0.1:8080",
identifier: "terrain",
urlTemplate: "oview.aspx?{URL}",
callback: openCallback
}
);
再來我們要把Widget初始化加進我們撰寫好的main.js中。
main.js：
var terrainview = new ov.TerrainView("MyMap");
var photogrammetryModelLayerToI3S = null; //後面會補上widget
function openCallback (result) {
//設定預設底圖
terrainview.setBaseLayer({
url: "BING_MAP",
identifier: "IMAGE",
urlTemplate: "{URL}"
});
photogrammetryModelLayerToI3S = new ov.Widget.PhotogrammetryModelLayerToI3S({ view: terrainview });
}
terrainview.openTerrain(
{
url: "http://127.0.0.1:8080",
identifier: "terrain",
urlTemplate: "oview.aspx?{URL}",
callback: openCallback
}
);
到目前為止，我們已經成功將傾斜攝影轉I3S功能加入圖台中。