Cesium添加HTML容器,插入HTML代码块,类似于富文本label
参考文章:https://blog.csdn.net/u012632557/article/details/105204972/ <Cesium实现Popup弹窗功能>如果需要实现弹窗功能, 直接参考原文章就可以;1.创建Popup类/*** 创建HTML模块*/var Popup = function(info){this.constructor(...
·
参考文章:https://blog.csdn.net/u012632557/article/details/105204972/ <Cesium实现Popup弹窗功能>
如果需要实现弹窗功能, 直接参考原文章就可以;
1.创建Popup类
/**
* 创建HTML模块
*/
var Popup = function(info){
this.constructor(info);
}
Popup.prototype.id=0;
Popup.prototype.constructor = function(info){
var _this = this;
_this.viewer = info.viewer;//弹窗创建的viewer
_this.geometry = info.geometry;//弹窗挂载的位置
_this.id ="popup_" +_this.__proto__.id++ ;
_this.ctn = $("<div class='bx-popup-ctn' id = '"+_this.id+"'>");
$(_this.viewer.container).append( _this.ctn);
_this.ctn.append(_this.createHtml(info.html));//嵌入的HTML代码
_this.render(_this.geometry);
_this.eventListener = _this.viewer.clock.onTick.addEventListener(function(clock) {
_this.render(_this.geometry);
})
}
// 实时刷新
Popup.prototype.render = function(geometry){
var _this = this;
var position = Cesium.SceneTransforms.wgs84ToWindowCoordinates(_this.viewer.scene,geometry)
_this.ctn.css("left",position.x- _this.ctn.get(0).offsetWidth/2);
_this.ctn.css("top",position.y- _this.ctn.get(0).offsetHeight - 10);
}
// 动态生成内容
Popup.prototype.createHtml = function(html){
return html;
}
// 关闭弹窗按钮
Popup.prototype.close=function(){
var _this = this;
_this.ctn.remove();
_this.viewer.clock.onTick.removeEventListener( _this.eventListener );
}
从原文章直接复制过来的, 稍微改了几处;
2.嵌入HTML代码,(需要位置position和html代码)
/**
*添加天气信息, 返回元素ID
*/
function addWeaTherInfo(viewer, option) {
var popup = new Popup({
viewer: viewer,
geometry: option.position,
html: option.html
})
return popup.id;
}
3.效果图,这个天气面板就是我添加进去的HTML代码块,实际就是在页面添加了一个dom节点, 不在canvas中, 但会随着地球和相机的变动,自行变换位置,达到popup效果
更多推荐
已为社区贡献1条内容
所有评论(0)