cesium 之自定义气泡窗口 infoWindow 后续优化篇(附源码下载)
2023-09-11 14:19:51 时间
前言
cesium 官网的api文档介绍地址cesium官网api,里面详细的介绍 cesium 各个类的介绍,还有就是在线例子:cesium 官网在线例子,这个也是学习 cesium 的好素材。
该篇文章实现的自定义气泡窗口是基于修改 cesium 源代码基础上,这种做法只是援兵之计,凑合应付的,投机取巧罢了,实际上是不太适合的,cesium api 更新版本替换,又得手动的去设置一下源代码;本篇则是从另一个角度真正的实现了自定义气泡窗口,气泡窗口的样式定义则是 leaflet 风格的,效果截图如下:
具体实现思路
- 气泡窗口 css 样式
/*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 { text-align: center; max-height: 200px; overflow-y: auto; background: white; box-shadow: 0 3px 14px rgba(0,0,0,0.4); padding: 1px; text-align: left; border-radius: 12px; } .leaflet-popup-content { margin: 13px 19px; line-height: 1.4; } .leaflet-popup-tip-container { margin: 0 auto; width: 40px; height: 20px; position: relative; overflow: hidden; } .leaflet-popup-tip { background: white; box-shadow: 0 3px 14px rgba(0,0,0,0.4); width: 17px; height: 17px; padding: 1px; margin: -10px auto 0; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); }
- 气泡窗口 div 面板
//动态添加气泡窗口DIV var infoDiv = '<div id="trackPopUp" style="display:none;">'+ '<div id="trackPopUpContent" class="leaflet-popup" style="top:5px;left:0;">'+ '<a class="leaflet-popup-close-button" href="#">×</a>'+ '<div class="leaflet-popup-content-wrapper">'+ '<div id="trackPopUpLink" class="leaflet-popup-content" style="max-width: 300px;"></div>'+ '</div>'+ '<div class="leaflet-popup-tip-container">'+ '<div class="leaflet-popup-tip"></div>'+ '</div>'+ '</div>'+ '</div>'; $("#"+cesium.mapDivId).append(infoDiv);
气泡窗口 div 面板看实际情况的,也可以设置在页面 htm l里面,我这里由于需要,是在 js 动态添加进来的。
更多的详情见:GIS之家小专栏
文章尾部提供源代码下载,对本专栏感兴趣的话,可以关注一波
相关文章
- ABP源码分析二十四:Notification
- C# ini文件操作【源码下载】
- python实现抖音多线程下载无水印视频【附源码】
- java坦克大战源码下载
- boost 源码编译 的 Makefile.am写法备份
- 【转载】okhttp源码解析
- 通用社区登陆组件技术分享(开源)下篇:OAuth 源码下载及原理解说
- 【云栖大会】阿里云开放AliSQL数据库源码下载
- MFC Windows 程序设计[九十八]之新款取色器(附源码)
- TMS FlexCel for VCL6.X 源码版,TMS FlexCel 7.1 特殊版
- Java项目练习:后台管理系统——管理员管理模块(附源码下载地址)
- Android 11.0 无源码apk授予QUERY_ALL_PACKAGES权限
- Mac上WebRTC源码下载和编译
- ijkplayer源码分析 read_thread流程
- 视频直播源码在Android端实现1对1音视频实时通话
- 【Android 安装包优化】p7zip 源码交叉编译 Android 平台可执行程序 ( 下载 p7zip 源码 | 交叉编译 Android 中使用 7z 可执行程序 )
- 【Android 安装包优化】WebP 应用 ( libwebp 源码下载 | Android.mk 和 Application.mk 构建脚本修改 | libwebp 函数库编译 )
- 雄踞AppStore榜首的游戏<别踩到白块儿>源码分析和下载(一)
- Android源码编译FFmpeg4.0.2单独so库for Android(验证可用)
- 基于Python的scrapy框架的广州天气爬虫源码下载
- 第二人生的源码分析(二十一)显示人物名称的字体
- 基于Socket通讯(C#)和WebSocket协议(net)编写的两种聊天功能(文末附源码下载地址)
- Android源码批量下载及导入到Eclipse
- libvirt零知识学习2 —— libvirt源码下载
- tensordot 的源码解读