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 ...
最新文章
- dump文件的生成及的分析
- PyQ4标准输入框——QInputDialog(一)
- 用到f6的快捷键_RHINO快捷键这么多,GH电池组又太复杂怎么办?
- Android 文件的存储和加载
- ipython安装成功却无法运营_pyspider显示安装成功但仍无法运行
- 模型优化秘诀:从数据的角度分析,零代码也可以提升精度
- Eclipse is running in a JRE, but a JDK is required
- L2-004. 这是二叉搜索树吗?-PAT团体程序设计天梯赛GPLT
- 分数化简通分:最大公约数与最小公倍数
- CSS 基础教程:CSS 选择器
- Android_CTF: kgb_messenger
- Leetcode 120. Triangle 三角形问题(动态规划经典) 解题报告
- 百练4083我爱北大 解析
- python在大数据处理的应用
- chrome绿色版制作方法
- application-dev.yml、application-test.yml、application-prod.yml的区别
- matlab数据归一化(补充),matlab数据归一化(补充)
- 坏小子军团Stary造了一块电动滑板,想帮你用最低的代价去耍(zhuang)酷(bi)
- 华为手机显示您的手机未连接服务器,手机提示链接不到服务器
- MODIS数据批量裁剪并合成月尺度数据:以MOD13A1为例
热门文章
- 前后端分离项目,vue+uni-app+php+mysql外卖点餐系统设计与实现(H5移动项目)
- OA选型时所产生的一些误区
- 自动控制原理是计算机学科吗,自动控制原理是自动化学科的重要理论基础(基本概念).doc...
- XPlaye/文曲兰/梨花带雨播放器程序开源
- h5+js判断网速连接最快的服务器
- Revit机电翻模插件【管线编辑】跨系统分类
- 2018 年度新增开源软件排行榜之国产 TOP 50[转载]
- spring + mybatis + c3p0 整合(配置篇)
- 51单片机LED点阵屏学习笔记
- CSS圆角边框-盒子阴影-文字阴影