龍山寺風力風向玫瑰圖展示 Widget使用教學
[info] 小提示：
初始化Widget
Widget初始化須依賴核心生成的div，所以需要寫在地形開啟後的CallBack中。
這裡先撰寫一個最基本的圖台，並帶有風力風向圖放置區(div)。
index.html：
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>風力風向玫瑰圖Widget</title>
<script src="PGWeb3D.min.js"></script>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<載入 jquery-ui 讓畫面可以移動 -->
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>
<載入 echarts 玫瑰圖套件 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.4.3/echarts.min.js"></script>
<載入 echarts 玫瑰圖函式庫 -->
<script src="include.js"></script>
</head>
<body>
<div id="MyMap" style="width:100%;height:100%;position:absolute;top:0;left:0"></div>
<!--風力風向圖放置區-->
<div reqc="div風力風向資訊" class="divWindClass">
<h2 class="h2Class" reqc="h2Move">風力風向資訊</h2>
<div reqc="div風速放TABLE區"></div>
<!--玫瑰圖區-->
<div reqc="theRoseChart"
style="
width: 100%;
height: 300px;
margin-top: 5px;
border: 0px;
background-color: #fff;
"></div>
</div>
<script src="main.js"></script>
</body>
</html>
再來我們要把 CSS 初始化加進 head 或另外寫 css 樣式檔引入。
style:
<style>
/*--風力風向圖放置區--*/
/* 可移動的標題 */
.h2Class {
text-align: center;
background-color: rgba(223, 223, 255, 0.9);
margin: 0px;
cursor: move;
}
/*表格 項目 顏色*/
.thetable th {
background-color: orange;
}
/* 風力風向資訊 div 樣式 */
.divWindClass {
position: absolute;
z-index: 150;
left: 5px;
top: 60px;
border: 1px solid #00f;
border-radius: 3px;
background-color: rgba(255, 255, 255, 0.9);
}
</style>
再來我們要把Widget初始化加進我們撰寫好的main.js中。
main.js：
var terrainview = new window.ov.TerrainView("MyMap");
var widgetBaseMap = null; // 預留一個物件當Widget開啟成功後的手柄。
terrainview.openTerrain({
url: "http://127.0.0.1:8080",
identifier: "範例地形圖",
callback: openCallback,
urlTemplate: "https://sample.pilotgaea.com.tw/Oview.aspx?{URL}"
});
// 在使用其他圖層前必須要先讀入地形 其他圖層的新增都會在callback中
function openCallback(result) {
// 設定底圖
terrainview.setBaseLayer({
url: "BING_MAP",
identifier: "IMAGE"
// urlTemplate: "https://sample.pilotgaea.com.tw/Oview.aspx?{URL}"
});
// 設定初始位置
let initialPos = new window.GeoPoint(
121.2347878442796,
23.427553934089445,
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);
let param = {};
param.view = terrainview;
param.listTitle = "圖層列表";
param.listX = 10;
param.listY = 70;
param.listWidth = 400;
param.listHeight = 340;
param.iconX = 10;
param.iconY = 10;
param.iconWidth = 32;
param.iconHeight = 32;
widgetBaseMap = new window.ov.Widget.BaseMap(param);
//程式開始
//讓標題可以移動
$("div[reqc='div風力風向資訊'").draggable({
handle: $("h2[reqc='h2Move']")
});
//透過 ajax 載入風力風向 資料
//資料來源：文化資產氣象資訊系統
myAjax_async(
"https://monitor.boch.gov.tw/DataTransfer/WebService/WSTransfer.ashx?op=GET&SN=75&key=F24B25BD43A48203",
"",
function (xml_data) {
//console.log(xml_data);
//載入完成，顯示下面的提示
smallComment("風力風向載入完成...", 2000, false, {});
//物件 ○ 存放解析氣象資料 xml 的內容 (key/value)
let o = new Object();
// 取得的風向、風速，畫紅色箭頭、玫瑰圖使用
let windDir = 0;
let windSpeed = 0;
//解析 xml 內容
$(xml_data)
.find("Observation")
.find("*")
.each(function (index, dom) {
var tagName = $(dom).prop("tagName");
var tagValue = $(dom).text();
switch (tagName) {
case "WINDSPEED": //取得風速
windSpeed = parseFloat(tagValue);
o[tagName] = tagValue;
break;
case "WINDDIR": //取得風向
// 在風向裡加一個紅箭頭
o[tagName] =
tagValue +
" ";
windDir = parseFloat(tagValue);
break;
default:
o[tagName] = tagValue;
break;
}
});
// 製作直式表格
var table = print_table_v(
[o],
"STATIONNAME,SENSORTYPENAME,LOCALTIME,TEMP,HUM,WINDSPEED,WINDDIR,BAR,RAIN,UV", // 要顯示的項目
"站名,資料來源,資料時間,氣溫(℃),相對溼度(%),風速(m),風向(度),氣壓(bar),累計雨量(mm),紫外線(nm)", // 顯示的中文標題
"thetable table_v" //額外註冊的 css 樣式
);
// 控制區放入 Table
$("div[reqc='div風速放TABLE區']").html(table);
// 風向紅箭頭方向，使用 CSS rotate 調整
$("img[reqc='imgRedArrow']").css({
transform: "rotate(" + windDir + "deg)"
});
//加入玫瑰圖
// 動態載入 echart，使用方式在 include.js wind_rose_chart
wind_rose_chart($("div[reqc='theRoseChart']")[0], [[windSpeed, windDir]]);
}
);
}
到目前為止，我們已經成功將介接龍山寺風力風向玫瑰圖加入圖台中。