cesium自定义气泡窗口infoWindow
2024-10-11 07:38:39
前言
cesium 官网的api文档介绍地址cesium官网api,里面详细的介绍 cesium 各个类的介绍,还有就是在线例子:cesium 官网在线例子,这个也是学习 cesium 的好素材。
自定义气泡窗口与cesium默认窗口效果对比
cesium 点击弹出气泡窗口显示的位置固定在地图的右上角,默认效果
对于习惯 arcgis 或者 openlayer 气泡窗口样式的 giser 来说,感觉不太适应,加上公司的领导也想要 arcgis 气泡窗口的那种样式效果,所以自定义了类似 arcgis 模板的气泡窗口模式,可以随着地图移动而移动,简单版本样式效果如下
具体实现思路
- 气泡窗 css 样式
/*自定义气泡窗口样式模板*/
.closeButton{width:12px;height:12px;float:right;cursor:pointer;margin-top:4px;background:url(images/mainImage.png) no-repeat -31px -54px;}
.infowin3DContent{pointer-events:auto;}
.infowin3D{ width:300px; border:2px solid #CCC; position:absolute; background-color:#FFF;display:none;}
.arrow{ position:absolute; width:40px; height:40px; bottom:-40px;}
.arrow *{ display:block; border-width:20px; position:absolute; border-style:solid dashed dashed dashed; font-size:0; line-height:0; }
.arrow em{border-color:#CCC transparent transparent;}
.arrow span{border-color:#FFF transparent transparent; top:-3px;}
- 想要在地图显示气泡窗口样式的div挺容易的,但是想要实现气泡窗口随地图移动而移动,这点需要监听地图的范围变化事件以及移动监听事件才行。由于个人的研究 cesium 时间不久以及水平有限,尝试了这种思路,动手开发了一段时间,但是未能实现,还是比较遗憾的。可是这种效果又是领导想要的,逼急了,无意中发现了 cesium 的选中是随着地图拖动而拖动的,F12 扑捉看看,发现是 SVG 绘制出来的效果,放在 cesium-selection-wrapperdiv 里面。所以,个人决定从 cesium 源代码修改下手,新增气泡窗口div在里面,其实这种投机取巧的做法,不太推荐,破坏了源代码的原始性了。
修改源代码之处:SelectionIndicator 构造函数里面,新增部分如下
//自定义部分
var infowin = document.createElement('div');
infowin.className= 'infowin3D';
el.appendChild(infowin);
//箭头
var arrow = document.createElement('div');
arrow.className= 'arrow';
infowin.appendChild(arrow);
var em = document.createElement("em");
var span = document.createElement("span");
arrow.appendChild(em);
arrow.appendChild(span);
//气泡窗口内容div
var content = document.createElement('div');
content.setAttribute('id', 'infowin3DContent');
content.className= 'infowin3DContent';
infowin.appendChild(content);
//自定义部分结束
- 上面的步骤只是实现了一个空 div 气泡窗口,里面并没有内容信息的,内容是调用气泡窗口时候动态构造的,所以自己封装了一个调用气泡窗口的函数
更多的详情见:GIS之家小专栏
文章尾部提供源代码下载,对本专栏感兴趣的话,可以关注一波
最新文章
- 统计分析中Type I Error与Type II Error的区别
- Microsoft Office 2010/2013安装组件预设
- 【转】SQL 操作类
- canvas缓动2
- [Linux][Hadoop] 运行WordCount例子
- Hadoop_YARN框架
- 一份完整的nginx配置
- codeforces A. Dima and Continuous Line 解题报告
- C++11的一些新特性
- ListView使用自定义适配器的情况下实现适配器的文本和图标控件点击事件执行Activity界面中的方法
- ECMAScript 5.1 Edition DOC 学习笔记
- WebApp 框架
- 1653: [Usaco2006 Feb]Backward Digit Sums
- 集成 ssh第一阶段
- JavaScript垃圾收集-标记清除和引用计数
- 实现PC视频播放最强画质教程( Potplayer播放器+MADVR插件)【转】
- laravel 读写分离源码解析
- int 转double , 转float
- 朴素贝叶斯法(naive Bayes algorithm)
- [转][mysql]创建函数失败(1418错误)mysql双主模式导致的问题