首页 > 代码库 > cesium自定义气泡窗口infoWindow后续优化篇
cesium自定义气泡窗口infoWindow后续优化篇
http://www.cnblogs.com/giserhome/p/6248858.html
该篇文章实现的自定义气泡窗口是基于修改cesium源代码基础上,这种做法只是援兵之计,凑合应付的,投机取巧罢了,实际上是不太适合的,cesium api更新版本替换,又得手动的去设置一下源代码;本篇则是从另一个角度真正的实现了自定义气泡窗口,气泡窗口的样式定义则是leaflet风格的,效果截图如下:
具体实现思路:
1.气泡窗口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);}
2.气泡窗口div面板
//动态添加气泡窗口DIVvar 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="http://www.mamicode.com/#">×</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面板看实际情况的,也可以设置在页面html里面,我这里由于需要,是在js动态添加进来的。
3.核心的实现思路部分:如何动态刷新气泡窗口的位置
(1)cesium的点击事件Cesium.ScreenSpaceEventType.LEFT_CLICK监听鼠标的当前位置坐标,然后根据当前坐标去动态更新气泡窗口div的显示位置;
(2)监听cesium的postRender变化事件,这里特别关键,因为你拖拽球体移动,气泡窗口div也要对应移动的,气泡窗口的位置变化跟cesium球体是要动态刷新的;
附上部分关键代码:
cesium点击事件,获取当前位置
handler3D.setInputAction(function(movement) { //点击弹出气泡窗口 var pick = cesium.cesiumViewer.scene.pick(movement.position); if(pick && pick.id){//选中某模型 } else{ $(‘#trackPopUp‘).hide(); } }, Cesium.ScreenSpaceEventType.LEFT_CLICK); //加载3D模型
新气泡窗口的位置更新
function positionPopUp (c) {var x = c.x - ($(‘#trackPopUpContent‘).width()) / 2;var y = c.y - ($(‘#trackPopUpContent‘).height());$(‘#trackPopUpContent‘).css(‘transform‘, ‘translate3d(‘ + x + ‘px, ‘ + y + ‘px, 0)‘);}
postRender变化事件
var removeHandler = viewer.scene.postRender.addEventListener(function () {var changedC = Cesium.SceneTransforms.wgs84ToWindowCoordinates(viewer.scene, id._position._value);// If things moved, move the popUp tooif ((c.x !== changedC.x) || (c.y !== changedC.y)) {c = changedC;}});
cesium自定义气泡窗口infoWindow后续优化篇
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。