Gml管線操作 Widget使用教學
[info] 小提示：
程式碼連結：https://doc-3dgdp.colife.org.tw/samplecode/#src/testweb/widget-gmlpipeline-sample/
[info] 小提示：
構成本Widget使用之Function：
ov.Widget.GmlPipeline
環境建置
Widget 功能需要透過 MapServer 的擴充功能來執行。擴充功能環境搭建：
步驟 1. 下載 3dgdp.gml-pipeline-widget.resource.zip 解壓縮。
步驟 2. 將資料夾內所有檔案丟入 C:\Program Files\PilotGaea\TileMap\plugins 資料夾內。
步驟 3. 重啟 MapServer 應用程式即可。
功能：
。上傳GML功能
a. 把GML管線加進圖台中(圖台要設成半透明)
。發布I3S功能
a. I3S發布的網址即是地圖伺服器對外的網址
。案件衝突功能
a. 新增衝突案件名稱、描述和管線GML
。查詢案件 a. 依照案件名稱或日期範圍查詢衝突案件
初始化Widget
Widget初始化須依賴核心生成的div，所以需要寫在地形開啟後的CallBack中。
這裡先撰寫一個最基本的圖台。
index.html：
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>GmlPipelineWidget</title>
<script src="PGWeb3D.min.js"></script>
<link rel="stylesheet" type="text/css" href="PGWeb3D.css" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
</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 widgetOGCLayer = null; // 預留一個物件當Widget開啟成功後的手柄。
function openCallback (result) {
//設定預設底圖
terrainview.setBaseLayer({
url: "BING_MAP",
identifier: "IMAGE",
urlTemplate: "{URL}"
});
widgetOGCLayer = new ov.Widget.GmlPipeline({view:terrainview}); //選擇要綁定的terrainview並初始化介接GMLe管線操作Widget。
}
terrainview.openTerrain(
{
url: "http://127.0.0.1:8080",
identifier: "terrain",
callback: openCallback,
urlTemplate: "oview.aspx?{URL}"
}
);
[info] 小提示：
可透過調整terrainview.terrainAlpha(地形不透明度)，來觀看地表下的管線
到目前為止，我們只需要多加一行程式碼就能將介接OGC圖層功能加入圖台中。