cesium绑定dom弹窗（跟随模型）
思路：
2.确定标签在三维场景中的三维位置；并计算三维位置的屏幕坐标； 3.在每⼀帧的渲染中都计算⼀下这个三维坐标的屏幕位置，并把屏幕位置赋给标签。
4.当转到地球背⾯时，如果不想显⽰弹窗，则隐藏。
具体实现：
1.创建div标签
标签样式：
.tag{
position: absolute;
background-color: MidnightBlue;
background-color:rgba(0,10,40);
border-top-left-radius: 10px;
border-bottom-right-radius:10px;
opacity: 0.5;
font-size: 4px;
color: aqua;
width: 36px;
height: 44px;
padding: 1px 1px 1px;
}
创建div时，最好是id和它要跟随的对象⼀致，⽅便场景中查位置：
//txt1 txt2 txt3 为div中要显⽰的⽂本，具体样式可修改 innerHTML那⼀⾏
function addDom(id,txt1, txt2, txt3,) {
let addDivDom = ateElement('div');
let bodyDom = ElementsByClassName("cesium-viewer")[0];
bodyDom.insertBefore(addDivDom, bodyDom.lastChild);
addDivDom.classList = 'tag';
addDivDom.id = id;
addDivDom.innerHTML = '<span >' + txt1 + '</span>' + '<span >' + txt2 + '</span>' + '<p >' + txt3 + '</p>';
}
2.确定标签在三维场景中的位置并转为屏幕坐标
//三维笛卡尔坐标转屏幕坐标
function transPosition(position) {
return Cesium.SceneTransforms.wgs84ToWindowCoordinates(scene, position);
}
(1).指定位置（经纬度）
function fixDomPosition(domId,position){
var ElementById(domId);
var cartesian=Cesium.Cartesian3.fromDegrees(position.longitude,position.latitude,position.height);
var winPosi = transPosition(cartesian);
if(winPosi!==undefined&&winPosi!==null){
dom.style.display=""
dom.style.left=winPosi.x+"px";
p=winPosi.y+"px";
}else{
dom.style.display="none"
}
}
（2).跟随相同ID的模型
function modelFixDom(domId) {
工业产品生产许可证管理条例
var ById(domId);
var cartesian = entity.position._value;
var ElementById(domId);
var winPosi = transPosition(cartesian);
if(winPosi!==undefined&&winPosi!==null){
dom.style.display=""
dom.style.left=winPosi.x+"px";
p=winPosi.y+"px";
}else{
dom.style.display="none"
}
}
3.在每⼀帧的渲染中都计算⼀下这个三维坐标的屏幕位置，并把屏幕位置赋给标签。
viewer.scene.preRender.addEventListener(function () {
modelFixDom("modelDom");
var position=new Cesium.Cartographic(116.587678,40.56756,0);
fixDomPosition("fixDom",position);
})
4.如果不想地球转到背⾯仍显⽰标签，则加个判断距离判断
function modelFixDom(domId) {
var ById(domId);
var cartesian = entity.position._value;
var ElementById(domId);
var winPosi = transPosition(cartesian);
if(winPosi!==undefined&&winPosi!==null){
var res = enableShow(cartesian);
if(res){
dom.style.display=""
dom.style.left=winPosi.x+"px";
p=winPosi.y+"px";
}else{
dom.style.display="none"
}
}else{
dom.style.display="none"
}
}
function enableShow(cartesian){
var res=false;
var e = cartesian,
f = viewer.scene.camera.position,
g = viewer.scene.globe.ellipsoid.cartesianToCartographic(f).height;
if (!(g += 1 * viewer.scene.globe.ellipsoid.maximumRadius,Cesium.Cartesian3.distance(f, e) > g*4/5)) { res = true;
}
return res
}
实现效果：
完整代码：
<!doctype html>
龙牙星<html>
<head>
<title>修改默认的地图选择器内容</title>
<script src="./Cesium/Cesium.js"></script>
<meta charset="utf-8"/>
<style>
@import url("./Cesium/bucket.css");
@import url("./Cesium/Widgets/widgets.css");
html,
body,
#cesiumContainer{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.tap{
position: absolute;
background-color: MidnightBlue;
background-color:rgba(0, 10, 40);
border-top-left-radius: 10px;
border-bottom-right-radius: 10px;
opacity: 0.5;
font-size: 4px;
color: aqua;
width: 100px;
height: 100px;
padding: 1px 1px 1px;
}
</style>
</head>
<body>
<div id="cesiumContainer" ></div>
<script>
var viewer =new Cesium.Viewer("cesiumContainer",{
baseLayerPicker:false,//是否显⽰图层选择器
imageryProvider:new Cesium.UrlTemplateImageryProvider({
url:'le/vt/lyrs=s&hl=zh-CN&x={x}&{x}&y={y}&z={z}&s=Gali'
}),
})
var entity = ities.add({
model:{力量组合
uri:"../SampleData/models/CesiumAir/Cesium_Air.glb",
minimumPixelSize:64,
},
position: Cesium.Cartesian3.fromDegrees(116.4567,40.4534,100),
id:"feiji"
});
addDom("feiji","飞机⼀号","飞机2号","飞机3号");
addDom("fixDom","固定位置","固定位置2","固定位置3");
viewer.scene.preRender.addEventListener(function(){
modelFixDom("feiji");
var position =new Cesium.Cartographic(112.587678,40.56756,0);
fixDomPosition("fixDom", position);
})
function addDom(id, txt1, txt2, txt3){
let addDivDom = ateElement('div');
let bodyDom = ElementsByClassName("cesium-viewer")[0];
bodyDom.insertBefore(addDivDom, bodyDom.lastChild);
addDivDom.classList ='tap';
addDivDom.id = id;
addDivDom.innerHTML ='<span >'+ txt1 +'</span>'+'
<span >'+ txt2 +'</span>'+'<p >'+ txt3 +'</p>';
丙酮酸乙酯
}
function fixDomPosition(domId, position){
var dom = ElementById(domId);
var cartesian = Cesium.Cartesian3.fromDegrees(position.longitude, position.latitude, position.height);
var winPosi =transPosition(cartesian);
if(winPosi !== undefined && winPosi !==null){
dom.style.display =""
dom.style.left = winPosi.x +"px";
p = winPosi.y +"px";
}else{
}else{
dom.style.display ="none"
}
}电子病历基本规范
function modelFixDom(domId){
var entity = ById(domId);
var cartesian = entity.position._value;
var dom = ElementById(domId);
var winPosi =transPosition(cartesian);
if(winPosi !== undefined && winPosi !==null){
var res =enableShow(cartesian);
if(res){
dom.style.display =""
dom.style.left = winPosi.x +"px";
p = winPosi.y +"px";
}else{
dom.style.display ="none"
}
}else{
dom.style.display ="none"
}
}
function enableShow(cartesian){
var res =false;
var e = cartesian,
f = viewer.scene.camera.position,
g = viewer.scene.globe.ellipsoid.cartesianToCartographic(f).height;
if(!(g +=1* viewer.scene.globe.ellipsoid.maximumRadius, Cesium.Cartesian3.distance(f, e)> g *4/5)){ res =true;
电动升降机构}
return res
}
//三维笛卡尔坐标转屏幕坐标
function transPosition(position){
return Cesium.SceneTransforms.wgs84ToWindowCoordinates(viewer.scene, position);
}
</script>
</body>
</html>
豫公网安备41160202000603
站长QQ:729038198
关于我们
投诉建议