底圖置換Widget使用教學
[info] 小提示：
程式碼連結：https://doc-3dgdp.colife.org.tw/samplecode/#src/testweb/widget-basemap-sample/
[info] 小提示：
構成本Widget使用之Function：
ov.TerrainView.setBaseLayer注意!!
在本範例使用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"); whiteList.Add("https://wmts.nlsc.gov.tw"); // 本範例必要的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
Widget初始化須依賴核心生成的div，所以需要寫在地形開啟後的CallBack中。
這裡先撰寫一個最基本的圖台。
index.html：
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>BaseMapWidget</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 widgetBaseMap = null; // 預留一個物件當Widget開啟成功後的手柄。
function openCallback (result) {
//設定預設底圖
terrainview.setBaseLayer({
url: "BING_MAP",
identifier: "IMAGE",
urlTemplate: "{URL}"
});
widgetBaseMap = new ov.Widget.BaseMap({view:terrainview}); //選擇要綁定的terrainview並初始化底圖置換Widget。
}
terrainview.openTerrain(
{
url: "http://127.0.0.1:8080",
identifier: "terrain",
callback: openCallback,
urlTemplate: "oview.aspx?{URL}"
}
);
到目前為止，我們只需要多加一行程式碼就能將底圖置換功能加入圖台中。
其餘客製化功能將於下方講解。
客製化修改Widget外觀及內容
初始化時客製化列表
我們可以在初始化Widget時預先自訂想要使用的底圖列表及樣式。
main.js：
//====================================================================================================
// new ov.Widget.BaseMap(param)
// ---------------------------------------------------------------------------------------------------
// param Object 參數物件。
// ---------------------------------------------------------------------------------------------------
// view ov.TerrainView 圖台物件
// listTitle String 標題內容文字
// listX Number 列表起始X位置(螢幕位置)
// listY Number 列表起始Y位置(螢幕位置)
// listWidth Number 列表寬
// listHeight Number 列表高
// iconX Number 圖示起始X位置(螢幕位置)
// iconY Number 圖示起始Y位置(螢幕位置)
// iconWidth Number 圖示寬
// iconHeight Number 圖示高
// mapSetting Array<Object> 底圖列表描述物件
// -------------------------------------------------------------------------------------------
// text String 圖層名稱文字
// title String Tooltip文字
// src String 圖片文字
// parameter Object 圖層資訊物件
// --------------------------------------------------------------------------
// url String 圖層WMTS URL
// identifier String 圖層位於WMTS的名稱
// layername String 圖層位於圖台的名稱
// urlTemplate String 代理
//====================================================================================================
let param = {};
param.view = terrainview;
param.listTitle = "圖層列表";
param.listX = 10
param.listY = 70
param.listWidth = 400
param.listHeight = 400
param.iconX = 10
param.iconY = 10
param.iconWidth = 32
param.iconHeight = 32
param.mapSetting = [
{
text: "台灣通用電子地圖",
title: "國土測繪圖資服務雲",
src: "EMAP.jpg",
parameter: {
url: "https://wmts.nlsc.gov.tw/wmts",
identifier: "EMAP",
layername: "EMAP",
urlTemplate: "OviewTLS12.aspx?{URL}"
}
}
]
var widgetBaseMap = new ov.Widget.BaseMap(param);
更新圖層列表樣式
我們可以即時更新Widget的自訂樣式。
main.js：
//====================================================================================================
// updateParameter(param)
// ---------------------------------------------------------------------------------------------------
// param Object 參數物件。
// ---------------------------------------------------------------------------------------------------
// view ov.TerrainView 圖台物件
// listTitle String 標題內容文字
// listX Number 列表起始X位置(螢幕位置)
// listY Number 列表起始Y位置(螢幕位置)
// listWidth Number 列表寬
// listHeight Number 列表高
// iconX Number 圖示起始X位置(螢幕位置)
// iconY Number 圖示起始Y位置(螢幕位置)
// iconWidth Number 圖示寬
// iconHeight Number 圖示高
// mapSetting Array<Object> 底圖列表描述物件
// -------------------------------------------------------------------------------------------
// text String 圖層名稱文字
// title String Tooltip文字
// src String 圖片文字
// parameter Object 圖層資訊物件
// --------------------------------------------------------------------------
// url String 圖層WMTS URL
// identifier String 圖層位於WMTS的名稱
// layername String 圖層位於圖台的名稱
// urlTemplate String 代理
//====================================================================================================
let param = {};
param.listTitle = "圖層列表";
param.listX = 20
param.listY = 90
param.listWidth = 500
param.listHeight = 500
param.iconX = 20
param.iconY = 20
param.iconWidth = 50
param.iconHeight = 50
param.mapSetting = [
{
text: "正射影像圖",
title: "國土測繪圖資服務雲",
src: "PHOTO2.jpg",
parameter: {
url: "https://wmts.nlsc.gov.tw/wmts",
identifier: "PHOTO2",
layername: "PHOTO2",
urlTemplate: "OviewTLS12.aspx?{URL}"
}
},
{
text: "台灣通用電子地圖",
title: "國土測繪圖資服務雲",
src: "EMAP.jpg",
parameter: {
url: "https://wmts.nlsc.gov.tw/wmts",
identifier: "EMAP",
layername: "EMAP",
urlTemplate: "OviewTLS12.aspx?{URL}"
}
}
]
widgetBaseMap.updateParameter(param);