You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
197 lines
6.8 KiB
HTML
197 lines
6.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<!-- Use correct character set. -->
|
|
<meta charset="utf-8" />
|
|
<!-- Tell IE to use the latest, best version. -->
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
|
<!-- Make the application on mobile take up the full browser screen and disable user scaling. -->
|
|
<meta name="viewport"
|
|
content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
|
|
<title>城市天气数据接入!</title>
|
|
<link rel="stylesheet" href="/Public/css/index.css" />
|
|
<script src="./Cesium/Cesium.js"></script>
|
|
<script src="/Public/js/jquery-1.10.2.min.js"></script>
|
|
<script src="/Public/js/city-point-data.js"></script>
|
|
<style>
|
|
@import url(./Cesium/Widgets/widgets.css);
|
|
</style>
|
|
|
|
</head>
|
|
<body>
|
|
<div id="cesiumContainer"></div>
|
|
<div id="popup" class="ol-popup">
|
|
<a id="popup-closer" class="ol-popup-closer"></a>
|
|
<div id="popup-content" class="popup-content">
|
|
|
|
</div>
|
|
</div>
|
|
<script>
|
|
const czml = city;
|
|
var viewer = new Cesium.Viewer("cesiumContainer");
|
|
|
|
viewer.camera.setView({
|
|
destination: Cesium.Cartesian3.fromDegrees(116.46, 39.92, 10000000.0),
|
|
}); // 设置初始位置
|
|
|
|
viewer.baseLayerPicker.viewModel.selectedImagery = viewer.baseLayerPicker.viewModel.imageryProviderViewModels[4];
|
|
const dataSourcePromise = Cesium.CzmlDataSource.load(czml);
|
|
viewer.dataSources.add(dataSourcePromise);
|
|
viewer.zoomTo(dataSourcePromise);
|
|
const container = document.getElementById("popup");
|
|
const content = document.getElementById("popup-content");
|
|
const closer = document.getElementById("popup-closer");
|
|
var forecastApiUrl = "http://nmc.cn/rest/weather";
|
|
let handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
|
|
// 改变鼠标样式
|
|
handler.setInputAction((e) => {
|
|
let pick = viewer.scene.pick(e.endPosition);
|
|
if (Cesium.defined(pick)) {
|
|
viewer._container.style.cursor = "pointer"
|
|
} else {
|
|
viewer._container.style.cursor = ""
|
|
}
|
|
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
|
|
let cartesian = null;
|
|
handler.setInputAction(e => {
|
|
let pick = viewer.scene.pick(e.position);
|
|
if (Cesium.defined(pick)) {
|
|
$('.cesium-viewer-infoBoxContainer').hide();
|
|
// 使用jQuery的$.ajax方法异步获取数据
|
|
$.ajax({
|
|
url: forecastApiUrl,
|
|
type: 'GET',
|
|
data:{stationid:pick.id.id},
|
|
dataType: 'json',
|
|
success: function(data) {
|
|
// 城市天气
|
|
var real = data.data.real;
|
|
var predict = data.data.predict;
|
|
content.innerHTML = `
|
|
<div class="popup-title">`+ real.station.province + `-`+ real.station.city + `</div>
|
|
<div class="popup-contents">
|
|
<div class="popup-list">
|
|
<label class="popup-label">最近天气实况：</label>
|
|
<div class="popup-con">
|
|
<p>`+ real.publish_time +`更新</p>
|
|
</div>
|
|
</div>
|
|
<div class="popup-list">
|
|
<label class="popup-label">温度：</label>
|
|
<div class="popup-con">
|
|
<p>`+ real.weather.temperature +`℃</p>
|
|
</div>
|
|
</div>
|
|
<div class="popup-list">
|
|
<label class="popup-label">体感温度：</label>
|
|
<div class="popup-con">
|
|
<p>`+ real.weather.feelst +`℃</p>
|
|
</div>
|
|
</div>
|
|
<div class="popup-list">
|
|
<label class="popup-label">降水量：</label>
|
|
<div class="popup-con">
|
|
<p>`+ real.weather.rain +`</p>
|
|
</div>
|
|
</div>
|
|
<div class="popup-list">
|
|
<label class="popup-label">相对湿度：</label>
|
|
<div class="popup-con">
|
|
<p>`+ real.weather.humidity +`%</p>
|
|
</div>
|
|
</div>
|
|
<div class="popup-list">
|
|
<label class="popup-label">风向：</label>
|
|
<div class="popup-con">
|
|
<p>`+ real.wind.direct +`</p>
|
|
</div>
|
|
</div>
|
|
<div class="popup-list">
|
|
<label class="popup-label">风速：</label>
|
|
<div class="popup-con">
|
|
<p>`+ real.wind.power +` - `+ real.wind.speed+`m/s</p>
|
|
</div>
|
|
</div>
|
|
<div class="popup-titles">未来7天天气 <span>`+ predict.publish_time +`更新</span></div>
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th scope="col">日期</th>
|
|
<th scope="col">天气</th>
|
|
<th scope="col">温度</th>
|
|
<th scope="col">风向</th>
|
|
<th scope="col">风速</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="detail"></tbody>
|
|
</table>
|
|
</div>
|
|
`
|
|
const detail = document.getElementById("detail");
|
|
var detaildata = predict.detail;
|
|
console.log(detaildata);
|
|
detail.innerHTML = ''
|
|
for(let i = 0;i<detaildata.length;i++){
|
|
detail.innerHTML += `
|
|
<tr>
|
|
<td>`+ detaildata[i].date +`</td>
|
|
<td>`+ detaildata[i].day.weather.info +`-`+ detaildata[i].night.weather.info +`</td>
|
|
<td>`+ detaildata[i].day.weather.temperature +`℃-`+ detaildata[i].night.weather.temperature +`℃</td>
|
|
<td>`+ detaildata[i].day.wind.direct +`-`+ detaildata[i].night.wind.direct +`</td>
|
|
<td>`+ detaildata[i].day.wind.power +`-`+ detaildata[i].night.wind.power +`</td>
|
|
</tr>`
|
|
}
|
|
// 将实体集合添加到Cesium的Viewer中
|
|
container.style.visibility = "visible"
|
|
},
|
|
error: function(error) {
|
|
console.error("Error fetching forecast data: ", error);
|
|
}
|
|
});
|
|
}
|
|
else {
|
|
container.style.visibility = "hidden"
|
|
cartesian = null;
|
|
}
|
|
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
|
|
|
|
//1、实时更新位置。2、解决滚动不隐藏问题
|
|
viewer.scene.postRender.addEventListener(() => {
|
|
if (!cartesian) return
|
|
//保证弹窗可以随着地球的转动而转动
|
|
let windowPosition = Cesium.SceneTransforms.wgs84ToWindowCoordinates(viewer.scene, cartesian);
|
|
container.style.left = windowPosition.x - 32 + "px"
|
|
container.style.top = windowPosition.y - 348 + "px"
|
|
|
|
// 相机高度
|
|
let camera_height = viewer.camera.positionCartographic.height;
|
|
// 相机高度+地球最大半径
|
|
let height_total = camera_height + viewer.scene.globe.ellipsoid.maximumRadius
|
|
// 实体和相机之间的距离
|
|
let distance_camera_entity = Cesium.Cartesian3.distance(viewer.camera.position, cartesian)
|
|
|
|
if (((distance_camera_entity < height_total)) && camera_height < 50000000) {
|
|
container.style.visibility = "visible"
|
|
} else {
|
|
container.style.visibility = "hidden"
|
|
}
|
|
|
|
})
|
|
|
|
// 关闭弹窗
|
|
closer.onclick = () => {
|
|
container.style.visibility = "hidden"
|
|
cartesian = null;
|
|
}
|
|
const containers = document.getElementsByClassName("ol-scene");
|
|
const closers = document.getElementById("scene-closer");
|
|
const opens = document.getElementById("qx-but");
|
|
opens.onclick = () => {
|
|
$('.ol-scene').show()
|
|
}
|
|
closers.onclick = () => {
|
|
$('.ol-scene').hide()
|
|
}
|
|
</script>
|
|
</body>
|
|
</html> |