cesium 局部加载_Cesium自定义HTML弹窗
展示示例图:
Cesium自定义HTML弹窗
核心的实现思路部分:
(1)cesium 的点击事件 Cesium.ScreenSpaceEventType.LEFT_CLICK 监听左键单击鼠标事件获取当前位置坐标,然后根据当前笛卡尔坐标去确认气泡窗口div的显示位置;
(2)监听 cesium 的 postRender 每一帧变化的监听事件,该事件就是为了确认你在转动球体时,气泡只定位到当前位置,不会出现偏差,该事件每帧的移动时,重新对气泡进行重新定位,屏幕坐标到笛卡尔坐标的转换。
1.左键鼠标单击监听事件
//获取当前点击的位置坐标
var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
handler.setInputAction(function(movement) {
/* var windowPosition = viewer.camera.getPickRay(movement.position);
var cartesianCoordinates = viewer.scene.globe.pick(windowPosition, viewer.scene);
var cartoCoordinates = viewer.scene.globe.ellipsoid.cartesianToCartographic(cartesianCoordinates); */
var cartesian2 = viewer.camera.pickEllipsoid(movement.position, viewer.scene.globe.ellipsoid);
var carto2 = viewer.scene.globe.ellipsoid.cartesianToCartographic(cartesian2);
latitude = carto2.latitude * 180 / Math.PI;
longitude = carto2.longitude * 180 / Math.PI;
//alert("纬度:"+latitude+","+"经度:"+longitude);
var cartesian = viewer.scene.pickPosition(movement.position);
//弹窗 参数
var paramObj = {
id: 'trackPopUpContent',
HTMLdiv: '
'
纬度:' +
latitude + ',
经度:' + longitude + '
' +
'
',
Offset: {
x: 0,
y: 0
},
coordinate: cartesian, //笛卡尔坐标参数
lineStyle: {
Linewidth: 3,
Lineheight: 25,
Linebackground: '#409EFF'
},
CircleStyle: {
Circleradius: 8,
Circlecolor: '#409EFF'
},
heighthidenum: 1000, //高度隐藏值
}
//固定弹窗 位置
PopupCoordinatePositioning(paramObj);
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
2.地图每一帧变化的监听事件
viewer.scene.postRender.addEventListener(function() { // 每一帧都去计算气泡的正确位置
if (Popups.length > 0) {
for (var i = 0; i < Popups.length; i++) {
var infoboxContainer = document.getElementById(Popups[i].PopupsID); //morphComplete
if (infoboxContainer != null) {
//var infoboxContainer = document.getElementById("bubble");//morphComplete
if (Popups[i].scenePosition) {
var canvasHeight = viewer.scene.canvas.height;
var windowPosition = new Cesium.Cartesian2();
Cesium.SceneTransforms.wgs84ToWindowCoordinates(viewer.scene, Popups[i].scenePosition, windowPosition);
infoboxContainer.style.bottom = (canvasHeight - windowPosition.y + Popups[i].paramObj.Offset.y) + 'px';
infoboxContainer.style.left = (windowPosition.x + -(infoboxContainer.scrollWidth / 2)) + 'px';
}
}
}
}
});
cesium 局部加载_Cesium自定义HTML弹窗相关推荐
- cesium 局部加载_cesium自定义气泡窗口infoWindow后续优化篇 - GIS之家
摘要:http://www.cnblogs.com/giserhome/p/6248858.html该篇文章实现的自定义气泡窗口是基于修改cesium源代码基础上,这种做法只是援兵之计,凑合应付的,投 ...
- cesium 局部加载_Cesium(四)常用代码总结
1.阴影效果 viewer.shadows = true; 2.取消左键双击事件 viewer.cesiumWidget.screenSpaceEventHandler.removeInputActi ...
- cesium首次加载gltf模型成功
接此: https://blog.csdn.net/bcbobo21cn/article/details/111305160 根据资料gltf格式模型可以直接在cesium上加载: 网上搜索gltf, ...
- cesium 3dtiles 加载本地数据_记一次Cesium地形数据生成过程
问题描述 有一小块带高程值的点状数据,需要根据该数据生成Cesium支持的3dtiles数据,在Cesium中显示.经过一周多时间的摸索,终于能够在Cesium中加载成功.现将数据处理流程做个记录,以 ...
- jQuery中的ajax、jquery中ajax全局事件、load实现页面无刷新局部加载、ajax跨域请求jsonp、利用formData对象向服务端异步发送二进制数据,表单序列化(异步获取表单内容)
jQuery中使用ajax: 在jQuery中使用ajax首先需要引入jQuery包,其引入方式可以采用网络资源,也可以下载包到项目文件中,这里推荐下载包到文件中:市面上有多个版本的jQuery库,这 ...
- cesium 直接加载 geotiff 影像图
前言 最近碰到了一个需求,需要通过 cesium 直接加载 geotiff 影像图. 咋一听,这个需求好像蛮奇怪,cesium 本身本来就支持加载 tile 影像图,也就是所谓的切片地图.原理其实就是 ...
- Cesium Primitives加载大量图标点
Cesium Primitives加载大量图标点 前言 效果 关键代码 前言 使用entity的方式加载大量图标点会出现卡顿现象,cesium提供了BillboardCollection可以实现大量图 ...
- Cesium本地加载地形(dem高程)数据
cesium本地加载dem数据,首先需要下载地区的高程数据,一般通常在地理空间数据云里面下载:http://www.gscloud.cn/ 这里一般可以下载到90m和30m精度的数据,当然也可以用自己 ...
- Cesium|xt3d加载中国地形
Cesium|xt3d加载中国地形 效果 代码 预览地址 效果 代码 <!DOCTYPE html> <html lang="zh-CN"><head ...
最新文章
- 近期活动盘点:智慧园区大数据精准招商思享会、数据法学研讨会、海外学者短期讲学(12.21-12.24)
- 汉仪尚巍手书_官宣,汉仪字库入选“十大著作权合作伙伴”啦!
- C++ static 用法
- SAP Spartacus 读取 Cart 的原理分析
- 用vbs往服务器发送文件,[转] Windows 下命令行/VBS脚本,发送带附件邮件.
- 213. 打家劫舍 II(JavaScript)
- 【JavsScript】webapp的优化整理
- 解决Cell重用问题
- 关于Big-Endian 和Little-Endian
- 古今地名对照总表 (按笔划数排序,强烈推荐的资料)
- 适合于初学者—软路由全探索系列(二):探索群晖 VMM 虚拟机旁路由安装及设置
- vcf 文件拼接(snp、indel)
- Unicode、UTF-8、UTF-16之间的区别
- 跟我学Python图像处理丨关于图像金字塔的图像向下取样和向上取样
- window.print() 文字过多会打印不全_明天开始打印准考证,你需要注意这些!
- caffe/ windows 10 /Can't parse message of type caffe.NetParameter because it is missing required
- 北美票房排行榜 实时_诸城客房管理软件排行榜
- vue3 reactive函数用法
- TortoiseGit和Git密钥配置图文教程
- mysql5.7.17 卸载_怎么卸载mysql-5.7.17-winx64