既有成屋展示Widget使用教學
[info] 小提示:
程式碼連結:https://doc-3dgdp.colife.org.tw/samplecode/#src/testweb/widget-readilyavailablehousedisplay-sample/
[info] 測試檔案下載:
下載連結:點擊此處下載
[info] 小提示:
構成本Widget使用之Function:
ov.Widget.ReadilyAvailableHouseDisplay
注意!!
在本範例使用proxy前請先修改oviewTLS12.aspx,如下所示:
private bool ValidateWhiteList(string url) { bool ret = false; List<string> whiteList = new List<string>(); whiteList.Add("http://127.0.0.1:8080"); // 本範例必要的proxy URL,已經存在的可以不用再加一次 whiteList.Add("https://other.proxy.url"); // 其他proxy的 URL,可依照需求自行增加 // must validate white list foreach (string s in whiteList) { if (url.ToLower().StartsWith(s.ToLower()))// CompareNoCase { ret = true; break; } } return ret; }
如果還有需求可以在
whiteList.Add("https://api.n2yo.com");
之後新增proxy URL。
環境建置
Widget 功能需要透過 MapServer 的擴充功能來執行。擴充功能環境搭建:
步驟 1. 下載 3dgdp.readily-available-house-widget.resource.zip 解壓縮。
步驟 2. 將資料夾內所有檔案丟入 C:\Program Files\PilotGaea\TileMap\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>ReadilyAvailableHouseWidget</title>
<script src="PGWeb3D.min.js"></script>
<script src="https://widgets.colife.org.tw/widget/3dgdp.readily-available-house-display-widget.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://widgets.colife.org.tw/widget/3dgdp.readily-available-house-display-widget.css" />
</head>
<body>
<div id="MyControl" style="position: absolute;z-index:1;color: white;background-color:black;">
<button id="openWidget" onclick="openWidget()" style="left: 5px; top: 7px; position: absolute; width: 120px; border-radius: 7px;">開啟Widget</button>
</div>
<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: "oview.aspx?{URL}"
});
}
terrainview.openTerrain(
{
url: 'https://data-3dgdp.colife.org.tw/Sample_src/PGWebJS/13.0/oviewRP.ashx', // 或您自己的O'View MapServer服務
identifier: "範例地形圖",
callback: openCallback,
}
);
再來我們要把Widget初始化加進我們撰寫好的main.js
中。
main.js
:
var terrainview = new ov.TerrainView("MyMap");
var widget = null; // 預留一個物件當Widget開啟成功後的手柄。
function openCallback (result) {
//設定預設底圖
terrainview.setBaseLayer({
url: "BING_MAP",
identifier: "IMAGE",
urlTemplate: "oview.aspx?{URL}"
});
}
terrainview.openTerrain(
{
url: 'https://data-3dgdp.colife.org.tw/Sample_src/PGWebJS/13.0/oviewRP.ashx', // 或您自己的O'View MapServer服務
identifier: "範例地形圖",
callback: openCallback,
}
);
function openWidget() {
widget = new ov.Widget.ReadilyAvailableHouseDisplay({
view: terrainview,
urlTemplate: "oview.aspx?{URL}" // 這邊代理網址可依實際環境需要調整
});//選擇要綁定的terrainview並初始化既有成屋展示Widget
var button = document.getElementById("openWidget");
button.disabled = true;
setTimeout(function () {
button.disabled = false;
}, 1000);
}
到目前為止,我們已成功將ReadilyAvailableHouseDisplay Widget加入圖台中。