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

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