cesium 之自定义气泡窗口 infoWindow 篇
前言
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之家小专栏
文章尾部提供源代码下载,对本专栏感兴趣的话,可以关注一波
cesium 之自定义气泡窗口 infoWindow 篇相关推荐
- cesium 之自定义气泡窗口 infoWindow 后续优化篇(附源码下载)
前言 cesium 官网的api文档介绍地址cesium官网api,里面详细的介绍 cesium 各个类的介绍,还有就是在线例子:cesium 官网在线例子,这个也是学习 cesium 的好素材. 该 ...
- cesium 局部加载_cesium自定义气泡窗口infoWindow后续优化篇 - GIS之家
摘要:http://www.cnblogs.com/giserhome/p/6248858.html该篇文章实现的自定义气泡窗口是基于修改cesium源代码基础上,这种做法只是援兵之计,凑合应付的,投 ...
- 百度地图JavaScript API自定义覆盖物、自定义信息窗口增删时的显示问题
项目中,需求:在百度地图上实时画出车辆,并能点击车辆弹出信息框查看实时信息. 实现:通过不停的画覆盖物并删除掉.点击覆盖物时弹出信息窗口. 问题:删除掉覆盖物后信息窗也删除掉了.因为信息窗是建立在覆盖 ...
- 百度地图api html信息窗口,百度地图 javascript api自定义信息窗口
百度 js api中存在infoWindow的类,就是marker 点击后显示的信息窗口, 他存在一下问题 1.在map中只能显示一个infowindow, 2.该信息窗口的样式无法修改,显示的内容具 ...
- 自定义百度地图InfoWindow样式
最近在做大屏的可视化开发的时候遇到需要自定义信息窗口的需求,但是百度地图自带的infoWindow虽然可以通过插入html字符串的形式自定义信息,但是它自带有白色背景,没有找到去掉其默认背景颜色的属性 ...
- Swift 高德地图自定义大头针自定义气泡
自定义大头针和自定义气泡的代码官方文档上都写的很详细,我这里不再记录,这篇主要记录的是自定义气泡上面有一个按钮,点击按钮响应对应事件的场景,效果如下: 上面的车是自定义的大头针,点击大头针弹出自定义气 ...
- 百度地图鼠标滑过marker时打开自定义信息窗口
在百度地图上实现鼠标滑过marker时打开自定义的信息窗口,当鼠标滑出marker时关闭已打开的信息窗口. 首先,需要在地图上添加一个marker,具体如下所示: $.ajax({async:fals ...
- android愤怒小鸟游戏、自定义View、掌上餐厅App、OpenGL自定义气泡、抖音电影滤镜效果等源码...
2019独角兽企业重金招聘Python工程师标准>>> Android精选源码 精练的范围选择器,范围和单位可以自定义 自定义View做的小鸟游戏 android popwindow ...
- JavaScript 时间戳(互相转换)(自定义格式)- 案例篇
文章目录 JavaScript 时间戳(自定义格式)转换 - 案例(含代码) 一.时间戳(`s` 秒) 1. `转化顺序` · 说明: 2. 效果图: 3. 代码: 二.时间戳(`ms` 毫秒) 1. ...
最新文章
- java单元测试启动类配置_Springboot 单元测试简单介绍和启动所有测试类的方法
- 这么多年,终于有人讲清楚Transformer了
- Could not get dialect instance.
- Qt for ios 在 xcode 中编译(便于调试)
- 遥感图像场景分类常用数据集
- 阅读王概凯老师架构漫谈系列总结
- FlatBuffers要点
- python初始环境安装
- win7 apache php mysql 配置64,win7 64位 Apache+php+mysql配置方法
- arbotix导入出错
- 三菱电机NC monitor 序列号申请
- 基于SpringBoot的个人博客系统【完整项目源码】
- DevExpress Office文件API打印 PDF 文档
- 【Android Studio】XUI框架的使用记录:源代码Demo安装+从Demo中获取捷径快速开发自己的APP
- 搞了三天终于成功跑起来GitHub上的vue-element-admin最新解决办法!(mac系统亲测有效)
- mezzanine安装(python2.7+nginx+mysql+supervisor)
- 405 (Method Not Allowed)
- fwr310虚拟服务器设置,Fast迅捷FWR310无线路由器怎么设置
- 高通平台GPIO模拟PWM控制背光
- JS获取上周(自然周、最近七天)、上月(自然月、最近一个月)、全年的开始和结束日期