Cesium 学习记录(4)自定义 letflet风格 气泡窗口

之前文章被抄袭过,抄袭者我就说一句好自为之,现在csdn没办法举报和投诉,有时间了我绝对追究到底欢迎转载,不欢迎一个字不改还说自己是原创的。乐于知识分享,转载请注明原作者和地址,谢谢。=================================================================在Web GIS开发的过程中,我们非常需要一个信息窗口去展示点击实体的功能,Cesiu...
摘要由CSDN通过智能技术生成

之前文章被抄袭过,抄袭者我就说一句好自为之,现在csdn没办法举报和投诉,有时间了我绝对追究到底微笑

欢迎转载,不欢迎一个字不改还说自己是原创的。乐于知识分享,转载请注明原作者和地址,谢谢。

=================================================================

在Web GIS开发的过程中,我们非常需要一个信息窗口去展示点击实体的功能,Cesium自带的InfoWindow是比较方便调用的,但是有很多局限性:比如它只能出现在右上角;比如它的样式不太美观;比如它的按钮无法响应js的onclick事件~

这个时候我就在想百度地图、高德地图的SDK多好用啊,气泡两行代码就可以生成了~在我百思不得解的时候,cesium交流群里的大大们告诉我——自定义气泡窗口。听起来非常麻烦呢,于是我就马不停蹄地开始实践啦~

思想和部分核心代码参考GIS之家的博文cesium自定义气泡窗口infoWindow后续优化篇点击打开链接 ,非常有启发性的一篇文章,这里就不再赘述了,不过GIS之家的文章非常简练,作为小白的我刚开始是一头雾水的。本章主要是对附上我经过几日的努力编写出的完整实现代码,以供大家参考。

CSS

@CHARSET "UTF-8";
/*leaflet风格气泡窗口样式模板*/
.leaflet-popup {
    position: absolute;
    text-align: center;
}
.leaflet-popup-close-button {
    position: absolute;
    top: 0;
    right: 0;
    padding: 4px 4px 0 0;
    text-align: center;
    width: 18px;
    height: 14px;
    font: 16px/14px Tahoma, Verdana, sans-serif;
    color: #c3c3c3;
    text-decoration: none;
    font-weight: bold;
    background: transparent;
}
.leaflet-popup-content-wrapper {
 
  • 14
    点赞
  • 46
    收藏
    觉得还不错? 一键收藏
  • 22
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 22
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值