cesium 之自定义气泡窗口 infoWindow 篇

时间：2022-08-03 00:14:08

前言

cesium 官网的api文档介绍地址cesium官网api，里面详细的介绍 cesium 各个类的介绍，还有就是在线例子：cesium 官网在线例子，这个也是学习 cesium 的好素材。

自定义气泡窗口与cesium默认窗口效果对比

  • cesium 点击弹出气泡窗口显示的位置固定在地图的右上角，默认效果
    cesium 之自定义气泡窗口 infoWindow 篇

  • 对于习惯 arcgis 或者 openlayer 气泡窗口样式的 giser 来说，感觉不太适应，加上公司的领导也想要 arcgis 气泡窗口的那种样式效果，所以自定义了类似 arcgis 模板的气泡窗口模式，可以随着地图移动而移动，简单版本样式效果如下
    cesium 之自定义气泡窗口 infoWindow 篇

具体实现思路

  • 气泡窗 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之家小专栏

文章尾部提供源代码下载，对本专栏感兴趣的话，可以关注一波

相关文章