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.
287 lines
7.5 KiB
HTML
287 lines
7.5 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>VOR数据接入</title>
|
|
<script src="./Cesium/Cesium.js"></script>
|
|
<script src="/Public/js/jquery-1.10.2.min.js"></script>
|
|
<style>
|
|
@import url(./Cesium/Widgets/widgets.css);
|
|
html,
|
|
body,
|
|
#cesiumContainer {
|
|
width: 100%;
|
|
height: 100%;
|
|
margin: 0;
|
|
padding: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.cesium-viewer-geocoderContainer,
|
|
.cesium-home-button,
|
|
.cesium-sceneModePicker-wrapper,
|
|
.cesium-navigationHelpButton-wrapper,
|
|
.cesium-viewer-bottom{
|
|
display: none !important;
|
|
}
|
|
/* .cesium-toolbar-button{
|
|
display: none
|
|
} */
|
|
.ol-popup {
|
|
position: absolute;
|
|
background-color: rgba(255, 255, 255, 0.1);
|
|
box-shadow: 4px 0px 0px rgba(36, 73, 117, 1);
|
|
border-radius: 2px;
|
|
border: 1px solid #244975;
|
|
border-bottom: none;
|
|
top: -1000px;
|
|
width: 120px;
|
|
min-height: 64px;
|
|
z-index: 999;
|
|
padding: 0;
|
|
}
|
|
|
|
.ol-popup:after,
|
|
.ol-popup:before {
|
|
top: 100%;
|
|
border: solid transparent;
|
|
content: " ";
|
|
height: 0;
|
|
width: 0;
|
|
position: absolute;
|
|
pointer-events: none;
|
|
}
|
|
.popup-title{
|
|
text-align: center;
|
|
font-size: 18px;
|
|
padding:0 20px ;
|
|
font-weight:bolder;
|
|
z-index: 9999;
|
|
margin: auto;
|
|
}
|
|
.ol-popup-closer {
|
|
text-decoration: none;
|
|
position: absolute;
|
|
top: 2px;
|
|
right: 8px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.ol-popup-closer:hover {
|
|
color: orange;
|
|
}
|
|
|
|
.ol-popup-closer:after {
|
|
content: "";
|
|
}
|
|
.popup-list{
|
|
margin:7px 0;
|
|
}
|
|
.popup-label{
|
|
float:left;
|
|
color:#5084c2;
|
|
}
|
|
.popup-con{
|
|
display: flex;
|
|
justify-content: space-evenly;
|
|
}
|
|
.popup-con p{
|
|
margin:0;
|
|
text-align: center;
|
|
}
|
|
.popup-bot{
|
|
position: absolute;
|
|
bottom: -15px;
|
|
left: -2px;
|
|
display: flex;
|
|
justify-content: space-evenly;
|
|
}
|
|
.popup-bot p{
|
|
margin:0;
|
|
font-size: 14px;
|
|
}
|
|
</style>
|
|
|
|
</head>
|
|
<body>
|
|
<div id="cesiumContainer"></div>
|
|
<fieldset id="popup" class="ol-popup">
|
|
|
|
</fieldset>
|
|
<script>
|
|
const czml = [
|
|
{
|
|
id: "document",
|
|
name: "CZML Point",
|
|
version: "1.0",
|
|
},
|
|
];
|
|
var viewer = new Cesium.Viewer("cesiumContainer");
|
|
viewer.camera.setView({
|
|
destination: Cesium.Cartesian3.fromDegrees(116.46, 39.92, 10000000.0),
|
|
}); // 设置初始位置
|
|
var mhvorUrl = 'https://hx.feizhiyi.com/api/mhvor';
|
|
$.ajax({
|
|
url: mhvorUrl,
|
|
type: 'GET',
|
|
data:{},
|
|
dataType: 'json',
|
|
success: function(data) {
|
|
console.log(data.data.data)
|
|
var mhvorData = data.data.data;
|
|
for(let i = 0;i<mhvorData.length;i++){
|
|
var vordata = {
|
|
id: "billboard02",
|
|
name: "name",
|
|
billboard: {
|
|
image:"../Public/img/icon02.png",
|
|
scale: 0.5,
|
|
width: 36,
|
|
height: 28,
|
|
},
|
|
label: {
|
|
fillColor: {
|
|
rgba: [36, 73, 117, 255]
|
|
},
|
|
font: "16px Helvetica",
|
|
verticalOrigin: "CENTER",//垂直位置
|
|
horizontalOrigin: "RIGHT",//水平位置
|
|
pixelOffset: {
|
|
cartesian2: [-12, 0]
|
|
},
|
|
style: "FILL_AND_OUTLINE",
|
|
text: "name",
|
|
showBackground: false,
|
|
backgroundColor: {
|
|
rgba: [112, 89, 57, 200]
|
|
}
|
|
},
|
|
position: {
|
|
cartographicDegrees: [118.0166667, 24.56666667, 0]
|
|
}
|
|
};
|
|
vordata.id = mhvorData[i].id;
|
|
vordata.name = mhvorData[i].id;
|
|
vordata.position.cartographicDegrees = [mhvorData[i].long,mhvorData[i].lat,0]
|
|
vordata.label.text = mhvorData[i].txt_name;
|
|
czml.push(vordata);
|
|
}
|
|
console.log(czml);
|
|
|
|
},
|
|
error: function(error) {
|
|
console.error("Error fetching forecast data: ", error);
|
|
}
|
|
});
|
|
const container = document.getElementById("popup");
|
|
var forecastApiUrl = "https://hx.feizhiyi.com/api/mhvor/";
|
|
let handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
|
|
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+pick.id.id,
|
|
type: 'GET',
|
|
data:{},
|
|
dataType: 'json',
|
|
success: function(data) {
|
|
// vor详情
|
|
var real = data.data.data;
|
|
container.innerHTML = `
|
|
<legend class="popup-title">`+ real.txt_name + `</legend>
|
|
<div class="popup-list">
|
|
<div class="popup-con">
|
|
<p>`+ real.val_freq + `</p>
|
|
<p>`+ real.code_id + `</p>
|
|
</div>
|
|
</div>
|
|
<div class="popup-list">
|
|
<div class="popup-con">
|
|
<p>`+ real.code_channel + `</p>
|
|
</div>
|
|
</div>
|
|
<div class="popup-bot">
|
|
<p>`+ real.geo_lat_accuracy + `</p>
|
|
<p> </p>
|
|
<p>`+ real.geo_long_accuracy + `</p>
|
|
</div>
|
|
`
|
|
// 将实体集合添加到Cesium的Viewer中
|
|
let ray = viewer.camera.getPickRay(e.position);
|
|
cartesian = viewer.scene.globe.pick(ray, viewer.scene);
|
|
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);
|
|
// 设置当前的缩放级别阈值
|
|
let hidePopupAtZoomLevel = 15;
|
|
|
|
// 监听viewer的zoom事件
|
|
viewer.scene.camera.moveEnd.addEventListener(function() {
|
|
const zoomLevel = viewer.camera.zoom;
|
|
if (zoomLevel > hidePopupAtZoomLevel) {
|
|
console.log(1111)
|
|
container.style.visibility = "hidden" // 当缩放级别超过阈值时隐藏弹窗
|
|
}
|
|
});
|
|
//1、实时更新位置。2、解决滚动不隐藏问题
|
|
viewer.scene.postRender.addEventListener(() => {
|
|
if (!cartesian) return
|
|
//保证弹窗可以随着地球的转动而转动
|
|
let windowPosition = Cesium.SceneTransforms.wgs84ToWindowCoordinates(viewer.scene, cartesian);
|
|
container.style.left = windowPosition.x + 22 + "px"
|
|
container.style.top = windowPosition.y - 48 + "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 < 200000) {
|
|
container.style.visibility = "visible"
|
|
} else {
|
|
container.style.visibility = "hidden"
|
|
}
|
|
|
|
})
|
|
|
|
// 改变鼠标样式
|
|
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);
|
|
|
|
viewer.baseLayerPicker.viewModel.selectedImagery = viewer.baseLayerPicker.viewModel.imageryProviderViewModels[4];
|
|
setTimeout("changeState()", 500)
|
|
function changeState(){
|
|
const dataSourcePromise = Cesium.CzmlDataSource.load(czml);
|
|
viewer.dataSources.add(dataSourcePromise);
|
|
viewer.zoomTo(dataSourcePromise);
|
|
}
|
|
</script>
|
|
</body>
|
|
</html> |