cesium 之自定義氣泡視窗 infoWindow 後續優化篇（附源碼下載下傳）

核心的實作思路部分：如何動态重新整理氣泡視窗的位置

（1）cesium的點選事件Cesium.ScreenSpaceEventType.LEFT_CLICK監聽滑鼠的目前位置坐标，然後根據目前坐标去動态更新氣泡視窗div的顯示位置；

（2）監聽cesium的postRender變化事件，這裡特别關鍵，因為你拖拽球體移動，氣泡視窗div也要對應移動的，氣泡視窗的位置變化跟cesium球體是要動态重新整理的；

前言

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之家小專欄

文章尾部提供源代碼下載下傳，對本專欄感興趣的話，可以關注一波

GIS之家作品店鋪：GIS之家作品店鋪

GIS之家源碼咨詢：GIS之家webgis入門開發系列demo源代碼咨詢