各位大佬，前端小白剛剛接觸cesium,在實作cesium彈出氣泡窗時產生以下問題，望以解答，本人無腦
彈出氣泡窗如何跟隨地球旋轉縮放，此處該轉換的是螢屏坐標還是世界坐標？
如何在滑鼠點擊空值時 取消JSON的選中時效果 ？
原始碼如下
var geoDataSource = null;
var handler = new Cesium.ScreenSpaceEventHandler(scene.canvas);
var ellipsoid = scene.globe.ellipsoid;
handler.setInputAction(function (movement) {
var cartesian =viewer.scene.pickPosition(movement.position);//viewer.scene.globe.pick(viewer.camera.getPickRay(movement.position), scene) ;//viewer.camera.pickEllipsoid(, ellipsoid);//movement.endPosition
// var pm_position = Cesium.SceneTransforms.wgs84ToWindowCoordinates(cartographic);
//console.log("position:"+position);
if (cartesian) {
//將笛卡爾坐標轉換為地理坐標
var cartographic = Cesium.Cartographic.fromCartesian(cartesian);
//獲取滑鼠點擊位置的經緯度
var longitudeString = Cesium.Math.toDegrees(cartographic.longitude);
var latitudeString = Cesium.Math.toDegrees(cartographic.latitude);
//var height = cartographic.hegiht
console.log("點擊位置的坐標："+latitudeString+","+longitudeString);
console.log("movement:"+movement.position.x+","+movement.position.y);
//根據點擊的坐標點獲取點所在的面
var polygon = getPolygonByPoint(turf.point([longitudeString, latitudeString]));
if(polygon){
console.log("面的屬性資訊："+JSON.stringify(polygon.properties));
//加載獲取的面
if (geoDataSource) {
viewer.dataSources.remove(geoDataSource);
}
var pGeoJsonDataSource = Cesium.GeoJsonDataSource.load(polygon, {
clampToGround: true,
//設定面的顏色
fill: Cesium.Color.RED.withAlpha(0.5)
});
pGeoJsonDataSource.then(function (dataSource) {
geoDataSource = dataSource;
//加載dataSource
viewer.dataSources.add(dataSource);
var entities=dataSource.entities.values,entityCount=entities.length;
for(var i=0;i<entityCount;i++){
entities[i].description=
"<div>"+
//"<td>"+entities[i].polygon.properties.name+"</td>" + //為什么要點到.name才行 properties全出來但name沒了？
"</div>"
; //此處為cesium infobox 內容
viewer.trackedEntity=entities[i]
}
});
var content ="<div id='infowin' style='border-bottom: 1px solid #C6CBCE;'>"+
"<span style='margin-left: 5px;'>屬性表</span>"+
"<div id='infoClose3D' class='closeButton' style='margin-right: 4px;'><i class=\"fa fa-times-circle-o\" aria-hidden=\"true\"></i></div>"+
//"<div id='infoClose3D' class='closeButton' style='margin-right: 4px;'><i class=\"fa fa-times-circle-o\" aria-hidden=\"true\"></i></div>"+
"</div>"+
"<div>"+
"<table border='0'>" +
"<thead>" +
"<tr>" +
"<th>建筑名稱</th>" +
'<td>'+polygon.properties.name+'</td>' +
//"<td>屬性三</td>" +
//"<td>屬性四</td>" +
//"<td>屬性五</td>" +
"</tr>" +
"</thead>"+
"<tbody>" +
"<tr>" +
"<th>建造時間</th>"+
'<td>'+polygon.properties.Time+'</</td>'+
//"<th>測驗3</th>"+
//"<th>測驗4</th>"+
//"<th>測驗5</th>"+
"</tr>"+
"<tr>" +
"<th>相關描述</th>"+
'<td>'+polygon.properties.word+'</td>'+
//"<th>測驗3</th>"+
//"<th>測驗4</th>"+
//"<th>測驗5</th>"+
"</tr>"+
//以下為自己加的
"<tr>"+
"<th>建筑高度</th>"+
'<td>'+polygon.properties.height+'</td>'+
"</tr>"+
//"<tr>"+
//"<td colspan='2' align='center'><img src=https://bbs.csdn.net/""+polygon.properties.img+"\" width=\""+polygon.properties.w+"\" width=\""+polygon.properties.h+"\" /></td>"+
//"</tr>"+
"<tr>"+
"<td colspan='2' align='center'><video src=https://bbs.csdn.net/""+polygon.properties.video+"\" width=\""+polygon.properties.w+"\" width=\""+polygon.properties.h+"\" poster=\""+polygon.properties.img+"\" controls='controls'/></td>"+
"</tr>"+
"</tbody>"+
"</table>"+
"</div>"
;
var obj = {position:movement.position,content:content};
infoWindow(obj);
}else {
console.warn("此位置無資料！")
$('.infowin3D').hide();//此處為點擊無資料處隱藏氣泡窗
}
} else {
}
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
var position = Cesium.Cartesian3.fromDegrees(0.0,0.0);
//自定義部分
var infowin = document.createElement('div'); //創建一個元素節點 div 并命名為infowin
infowin.className= 'infowin3D'; //設定fan hui 屬性值為infowin3D
document.body.appendChild(infowin); //將div添加到<body>中
//箭頭
var arrow = document.createElement('div');
arrow.className= 'arrow';
infowin.appendChild(arrow);
var em = document.createElement("em");
var span = document.createElement("span");
arrow.appendChild(em);
arrow.appendChild(span);
//氣泡視窗內容div
var content = document.createElement('div'); //新建一個元素節點 div 并命名為content
content.setAttribute('id', 'infowin3DContent'); //設定div的屬性型別 屬性名稱為id 屬性值為infowin3DContent
content.className= 'infowin3DContent'; //設定回傳元素 屬性值為infowin3DContent
infowin.appendChild(content); //在父節點infowin新增節點div
//自定義部分結束
function infoWindow(obj) {
if(obj){
//viewer.scene.postRender.addEventListener(function(movement){
//obj = Cesium.SceneTransforms.wgs84ToWindowCoordinates(scene, position);
//console.log(obj.position.x)
//if(obj){
//pmposition2 = Cesium.SceneTransforms.wgs84ToWindowCoordinates(scene, _cartesian);
//var popw = document.getElementById("infowin3D").offsetWidth;
//var poph = document.getElementById("infowin3D").offsetHeight;
//var x = changedC.longitude;
//var y = changedC.latitude;
//$('.infowin3D').css('left', obj.position.x + 'px');
//$('.infowin3D').css('top', obj.position.y - 10 + 'px');
// var trackPopUpContent_= window.document.getElementById("infowin3D");
// trackPopUpContent_.style.left = pmposition2.x-70+"px";
// trackPopUpContent_.style.top = pmposition2.y - (poph + 50) + "px";
//}
//})
var x,y;
var setPosition = function(){
var changedC = Cesium.SceneTransforms.wgs84ToWindowCoordinates(scene, position);
console.log(changedC);
if (changedC) {
x = changedC.x;
y = changedC.y;
}
};
//console.log(obj.position.x,obj.position.y);
viewer.scene.postRender.addEventListener(setPosition);
$(".arrow").css("left",($(".infowin3D").width()/2-20));
// 填充內容
$("#infowin3DContent").empty();
$("#infowin3DContent").append(obj.content);
$(".infowin3D").css('left', x-($(".infowin3D").width()/2) );
$(".infowin3D").css('top', y-($(".infowin3D").height()+$('.arrow').height()));
//$(".infowin3D").css("left",obj.position.x-($(".infowin3D").width()/2));
//$(".infowin3D").css("top",obj.position.y-($(".infowin3D").height()+$('.arrow').height()));
$(".infowin3D").show();
$("#infoClose3D").click(function () {
$(".infowin3D").hide();
});
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/91254.html
標籤：JavaScript