天文歷API開發教學
[info] 小提示：
程式碼連結：https://doc-3dgdp.colife.org.tw/samplecode/#src/testweb/almanac/
功能說明
本範例文件說明如何在圖台中實現天文曆的功能
[info] 特別提醒：
天文曆本質上是將 DateTime 元素和圖台的時間屬性綁定
本範例使用的 DateTime 元素是 jQuery 的 datetimepicker(v1.3.6)
可從沙盒中取得或是自行前往官網下載
亦可採用 HTML 原生的 DateTime Input 或其他符合自己需求的元件再參考本範例的作法綁定
index.html：
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Almanac DEMO</title>
<!-- 引用 js -->
<script src="PGWeb3D.min.js"></script>
<script src="jquery.js"></script>
<script src="jquery.datetimepicker.full.js"></script>
<!-- 引用 css -->
<link href="PGWeb3D.css" rel="stylesheet" type="text/css" />
<link href="jquery.datetimepicker.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="MyControl" style="position: absolute;z-index: 1;color: white;background-color: black;left: 20px;">
<div>
<div style="margin: 5px 5px 5px 5px;">
<label for="cbAlmanac">天文曆</label><input type="checkbox" id="cbAlmanac" onchange="toggleAlmanac(this)" />
</div>
<div id="almanacContainer">
<div id="almanac" style="overflow: auto; padding: 10px;">
<input id="dtpAlmanac" type="text" />
<div id="almanacType" style="overflow: auto;">
<button
style="width: 100%;height: 30px;border: none;font-weight: bold;font-size: 16px;border-radius: 5px;background-color: royalblue;color: white;"
onclick="setTimeNow()">
使 用 現 在 時 間
</button>
</div>
</div>
</div>
</div>
</div>
<div id="MyMap" style="width: 100%;height: 100%;position: absolute;top: 0px;left: 0px;"></div>
<script src="main.js"></script>
</body>
</html>
main.js：
// 設定地形圖台伺服器IP
const mapServer = "http://127.0.0.1:8080";
// 初始化地形圖台
var terrainview = new window.ov.TerrainView("MyMap");
window.terrainview = terrainview;
// 設定天文歷預設為關閉
$("#almanac").hide();
// 開啟地形
terrainview.openTerrain({
url: mapServer,
identifier: "terrain",
urlTemplate: "https://sample.pilotgaea.com.tw/Oview.aspx?{URL}",
callback: openMapResEvent,
});
// 地形開啟後的callback
function openMapResEvent(result) {
// 設定底圖
terrainview.setBaseLayer({
url: "BING_MAP",
identifier: "IMAGE",
});
// 設定相機位置及姿態
initializeCamera();
}
// 設定相機位置及姿態
function initializeCamera() {
let initialPos = new window.GeoPoint(
121.2347878442796,
23.59645908598587,
465850.0013822634
);
let initialV = new window.Geo3DPoint(0, 0, -1);
let initialUp = new window.Geo3DPoint(0, 1, 0);
let initialCamera = new window.ov.Camera(initialPos, initialV, initialUp);
terrainview.gotoCamera(initialCamera, false);
}
// 天文歷開關
function toggleAlmanac(cbox) {
if (cbox.checked) {
// 顯示天文歷
$("#almanac").show();
// 設定圖台的光源狀態, 此設定視需求而定, 本範例中以光源來呈現時間變化故設定為true
terrainview.enableLight = true;
// 取得光源屬性物件
let lp = window.terrainview.lightProperty;
// 設定光源為自動更新
lp.isAutoUpdateByDate = true;
// 更新光源屬性物件
window.terrainview.lightProperty = lp;
} else {
// 隱藏天文歷
$("#almanac").hide();
// 關閉圖台的光源狀態
terrainview.enableLight = false;
}
}
// 設定圖台引擎為當下時間
function setTimeNow() {
// 設定圖台引擎為當下時間, 此時間為Client端的系統時間
terrainview.date = new Date();
// 重設天文歷控制項
jQuery("#dtpAlmanac").datetimepicker("reset");
}
// 初始化天文歷, 詳細請參考 https://xdsoft.net/jqplugins/datetimepicker/
$(function () {
jQuery("#dtpAlmanac").datetimepicker({
show: false,
format: "d.m.Y H:i",
inline: true,
// DateTime Input 通常會有一個 callback function, 用來接收使用者輸入的時間
// 以 jQuery Datetimepicker 為例, 就是 onChangeDateTime
onChangeDateTime: function (dp, $input) {
// 在此將使用者輸入的時間設定給圖台引擎即可, 由於開啟天文曆時已設定了自動更新, 所以圖台引擎會自動更新光源
window.terrainview.date = dp;
},
});
});