cesium 隐藏entity_cesium中随entity动态变化的弹出框
原理介绍:
1.监听鼠标单击事件,获取点击屏幕位置e.position,综合弹出框宽高,动态设置弹出框位置。
bubble.style.left = e.position.x-70+"px";
var divheight = bubble.offsetHeight;
var divy = e.position.y - divheight -50;
2.添加entity的描述时,绑定弹出框table
3.监听帧渲染结束事件,获取实时位置,动态改变弹出框 viewer.scene.postRender.addEventListener(function (e) {});
添加的_cartesian转屏幕坐标,实时改变
_pm_position_2 = Cesium.SceneTransforms.wgs84ToWindowCoordinates(scene, _cartesian);
以下是代码:(基于supermap的demo改写的,加载数据路径可能不同)
动态气泡
对象属性
/**
* 动态添加气泡窗口
*/
function onload(Cesium) {
var viewer = new Cesium.Viewer('cesiumContainer', {
//infoBox: false, //点击要素之后显示的信息,默认true
});
var scene = viewer.scene;
var globe = viewer.scene.globe;
viewer.scene.undergroundMode = true; //设置开启地下场景
viewer.scene.screenSpaceCameraController.minimumZoomDistance = -1000;//设置相机最小缩放距离,距离地表-1000米
viewer.scene.terrainProvider.isCreateSkirt = false; // 关闭裙边
viewer._cesiumWidget._creditContainer.style.display = "none";//隐藏logo
//加载本地osgb数据
var promise_underground = scene.open('http://www.supermapol.com/realspace/services/3D-pipe/rest/realspace');
//promise.then方式加载数据
promise_underground.then(function (layers) {
//var overGroundLayer = scene.layers.find('Config');//
});
/***加载二维地图
*/
viewer.imageryLayers.addImageryProvider(new Cesium.BingMapsImageryProvider({
url: 'https://dev.virtualearth.net',
mapStyle: Cesium.BingMapsStyle.AERIAL,
key: URL_CONFIG.BING_MAP_KEY
}));
//设置相机视角
scene.camera.setView({
//destination: new Cesium.Cartesian3(-2654051.707084536, 3570921.9596162816, 4570167.290651748),
destination: new Cesium.Cartesian3.fromDegrees(126.62239531477519, 45.76877337892773, 100),
orientation: {
heading: 6.255714027185674,
pitch: -0.3054587954655701,
roll: 6.283090080629748
}
});
//添加三维气泡点
viewer.entities.add({
id: 'point1',
position: Cesium.Cartesian3.fromDegrees(126.62286665737508, 45.768049657165975, 10 + 0.5),
billboard: {
image: 'images/location4.png',
width: 30,
height: 40,
},
description: "chufa\ndata:this is data.",
label: {
//text: "llll11",
//backgroundColor: new Cesium.Color(0.165, 0.165, 0.165, 0.8)
}
});
/*
气泡
*/
var table = document.getElementById("tableContainer");
var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
var _position, _pm_position, _cartesian;
var camera = viewer.scene.camera;
handler.setInputAction(function (e) {
//viewer.infoBox = infoboxContainer;
$("#bubble1").show();
viewer.entities.removeAll();
var position = scene.pickPosition(e.position); //单击位置
var positionObj = scene.pick(e.position);//选中的对象
//将笛卡尔坐标转化为经纬度坐标
var cartographic = Cesium.Cartographic.fromCartesian(position);
var longitude = Cesium.Math.toDegrees(cartographic.longitude);
var latitude = Cesium.Math.toDegrees(cartographic.latitude);
var height = cartographic.height;
var cartesian = scene.globe.pick(camera.getPickRay(e.position), scene);
var cartographic = scene.globe.ellipsoid.cartesianToCartographic(cartesian);
var picks = Cesium.SceneTransforms.wgs84ToWindowCoordinates(scene, cartesian);
var bubble = document.getElementById("bubble1");
//设置弹出框位置
bubble.style.left = e.position.x-70+"px";
var divheight = bubble.offsetHeight;
var divy = e.position.y - divheight -50;//50px为.bubble:after--20x50
bubble.style.top = divy + "px";
bubble.style.visibility = "visible"; //visibility: "hidden"
_position = e.position;
_cartesian = cartesian;
_pm_position = { x: picks.x, y: picks.y }
//viewer.selectedEntity = entity;
//在点击位置添加对应点
viewer.entities.add(new Cesium.Entity({
name: "位置信息",
billboard: {
image: 'images/location4.png',
width: 30,
height: 40,
},
position: Cesium.Cartesian3.fromDegrees(longitude, latitude, height + 0.5),
description: createDescription(Cesium, table, [longitude, latitude, height])
}));
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
$("#close").click(function () {
$("#bubble1").hide();
});
//创建描述位置的对话框
function createDescription(Cesium,table, properties) {
var simpleStyleIdentifiers = ['经度', '纬度', '高度'];
var html = '';
for (var key in properties) {
if (properties.hasOwnProperty(key)) {
if (simpleStyleIdentifiers.indexOf(key) !== -1) {
continue;
}
var value = properties[key];
if (Cesium.defined(value) && value !== '') {
html += '
' + simpleStyleIdentifiers[key] + '' + value + '';
}
}
}
if (html.length > 0) {
html = '
';
}
table.innerHTML = html;
}
/***
* 弹出框随漫游移动
*/
var _pm_position_2;
//每帧渲染结束监听
viewer.scene.postRender.addEventListener(function (e) {
if (_pm_position != _pm_position_2) {
_pm_position_2 = Cesium.SceneTransforms.wgs84ToWindowCoordinates(scene, _cartesian);
var popw = document.getElementById("bubble1").offsetWidth;
var poph = document.getElementById("bubble1").offsetHeight;
var trackPopUpContent_ = window.document.getElementById("bubble1");
//trackPopUpContent_.style.visibility = "visible";
trackPopUpContent_.style.left = _pm_position_2.x-70+"px";
trackPopUpContent_.style.top = _pm_position_2.y - (poph + 50) + "px";
}
});
}
cesium 隐藏entity_cesium中随entity动态变化的弹出框相关推荐
- html自定义js程序,JS中微信小程序自定义底部弹出框
实现微信小程序底部弹出框效果,代码分为html,css和js两部分,具体代码详情大家参考下本文. html CSS .commodity_screen { width: 100%; height: 1 ...
- electron中使用 alert和comfirm等弹出框都会致使input无法获得焦点
问题如题所示 解决方法: const {dialog} = require('electron').remote; alert = function(str){var options = {type: ...
- rp9弹出框设置隐藏
1.新建动态面板,作为弹出框-(一般作为新增.修改弹框使用),在面板中添加相关控件. 2.设置弹框相关控件作为组合,右键组合,设置为隐藏. 3.在主界面设置弹框的出现触发机制,比如在"新增& ...
- axure 点击按钮弹出框_Axure动态面板教程:弹出框效果的制作
作为一名互联网产品设计人员,相信很多同行每天上班电脑上都会运行着一个软件--Axure,她能帮助网站需求设计者,快捷而简便的创建基于网站构架图的带注释页面示意图.操作流程图.以及交互设计,并可自动生成 ...
- [js]uploadify结合jqueryUI弹出框上传,js中的冒出的bug,又被ie坑了
引言 最近在一个项目中,在用户列表中需要对给没有签名样本的个别用户上传签名的样本,就想到博客园中上传图片使用弹出框方式,博客园具体怎么实现的不知道,只是如果自己来弄,想到两个插件的结合使用,在弹出框中 ...
- layui 子页面写弹出框覆盖父页面,以及给弹框中的表单赋值
咋说呢,因为对 layui 不太熟悉,这个弹出框搞了好久,看了好多解决方案,大致尝试了一下其中几种,在坑中无法自拔...总之终于搞出来了,在这里分享一下我的笔记. 着急的直接 戳这里 看解决代码. 尝 ...
- vue点击input框出现弹窗_vue组件实现弹出框点击显示隐藏效果
本文实例为大家分享了vue实现弹出框点击显示隐藏的具体代码,供大家参考,具体内容如下 效果如下图 由于我的更改密码弹出框是一个组件引用的,所以在一开始是隐藏的,这就需要在当前的页面上对弹出框组件设置v ...
- el-table动态渲染表格列el-table-column且里边嵌套el-popover弹出框语法
总结下表格中每列的动态渲染实现语法:vue + element <el-table><template v-if="columns.length > 0"& ...
- vue框架elemnet-ui中Popover弹出框的使用
vue框架elemnet-ui中Popover弹出框的使用 ** 一.如何修改内置的el-popover样式(亲测有效) ** 1.在vue页面文件中使用el-popover组件时,在style标签中 ...
- vue 组件弹出框点击显示隐藏
本案实现的效果如下图 由于我的更改密码弹出框是一个组件引用的,所以在一开始是隐藏的,这就需要在当前的页面上对弹出框组件设置v-show,但是在弹出框显示出来的时候,操作执行完后当前页面的更改按钮已经被 ...
最新文章
- 合唱队形(递增再递减的最长子序列)
- 水仙花数(3.1)(Java)
- SyntaxError: (unicode error) ‘unicodeescape‘ codec can‘t decode bytes in positio n 131-135: truncate
- 阿里达摩院数学竞赛考题曝光!4道题限时48小时,网友:题目能看懂但就是不会做...
- 【Ubuntu】 Ubuntu18.04修改主机名
- alibab仓库 idea_01.微服务架构编码、构建
- IntelliJ IDEA for Mac中的Maven操作窗口详解
- android tabpageindicator 参数,Android实现Tab布局的4种方式(Fragment+TabPageIndicator+ViewPager)...
- Javascript实现KMP算法
- Git命令学习总结(-)
- windows中的凭据管理
- python的DataFrame排序问题
- day4--numpy
- mysql所选路径已经存在_Win10环境下安装压缩包版本MySQL-8.0.13
- 谷歌地球专业版:Google Earth Pro for Mac中文免费版
- learning的反义词英文_常见英语词汇反义词大全
- 惯性力偶矩公式中j_惯性力偶矩的计算
- oracle nlv 全称,oracle: OCA-047-题解与实验(9)--SQL语句中COUNT和NLV的用法
- 在电路中,耦合是什么?有哪些方式?
- mysql减五元,[MySQL]處理字元編碼的一些心得