cesium 之自定义气泡窗口 infoWindow 后续优化篇

内容概览

1.基于cesium 实现气泡窗口 infoWindow 后续优化
2.源代码 demo 下载

该篇文章实现的自定义气泡窗口是基于修改 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 = '

  '+ '

  '+ '×'+ '

  '+ '

  '+ '

  '+ '

  '+ '

  '+ '

  '+ '

  '+ '
  '; $("#"+cesium.mapDivId).append(infoDiv);

气泡窗口 div 面板看实际情况的，也可以设置在页面 htm l里面，我这里由于需要，是在 js 动态添加进来的。

• 核心的实现思路部分：如何动态刷新气泡窗口的位置
  （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 too
if ((c.x !== changedC.x) || (c.y !== changedC.y)) {
c = changedC;
}
});

link==>