更換地形教學
本章將說明更換地形的方法。
[info] 小提示：
程式碼連結：https://doc-3dgdp.colife.org.tw/samplecode/#src/testweb/change-terrain-sample/
更換地形
這裡先撰寫一個最基本的圖台。
並在圖台中加入單選選單以用來切換地形。
index.html：
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>更換地形</title>
<script src="PGWeb3D.min.js"></script>
<link rel="stylesheet" type="text/css" href="./css/PGWeb3D.css" />
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
</head>
<body>
<div id="MyControl" style="position: absolute;z-index:1;color: white;background-color:black;">
<form name="terrainChange">
<fieldset>
<legend>選擇地形:</legend>
<div>
<input type="radio" id="terrain" name="terrainChangeRadios" value="範例地形圖" checked/>
<label for="terrain">範例地形圖</label>
</div>
<div>
<input type="radio" id="gebco_2021_geotiff" name="terrainChangeRadios" value="海底高程" />
<label for="gebco_2021_geotiff">海底高程</label>
</div>
</fieldset>
</form>
</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");
terrainview.openTerrain(
{
url: "http://127.0.0.1:8080",
identifier: "terrain",
callback: openCallback,
urlTemplate: "oview.aspx?{URL}"
}
);
function openCallback (result) {
//設定底圖
terrainview.setBaseLayer({
url: "BING_MAP",
identifier: "IMAGE",
urlTemplate: "{URL}"
});
}
再來我們要把地形切換事件加進我們撰寫好的main.js中。
使用reloadTerrain方法來重新讀取新的地形。
main.js：
var terrainview = new ov.TerrainView("MyMap");
var rad = document.terrainChange.terrainChangeRadios; // 取得選單物件
terrainview.openTerrain(
{
url: "http://127.0.0.1:8080",
identifier: "terrain",
callback: openCallback,
urlTemplate: "oview.aspx?{URL}"
}
);
function openCallback (result) {
//設定預設底圖
terrainview.setBaseLayer({
url: "BING_MAP",
identifier: "IMAGE",
urlTemplate: "{URL}"
});
}
//加入切換地形事件
for (var i = 0; i < rad.length; i++) {
rad[i].addEventListener("change", function () {
if (terrainview) terrainview.reloadTerrain(this.value);
});
}