cesium 設定時間_cesium之自定義氣泡視窗infoWindow篇

阿新 • • 發佈：2021-01-07

技術標籤：cesium 設定時間

前言

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 氣泡視窗，裡面並沒有內容資訊的，內容是呼叫氣泡視窗時候動態構造的，所以自己封裝了一個呼叫氣泡視窗的函式

/** 
     * 彈出氣泡視窗 
     * @method infoWindow 
     * @param  obj{position(必填):螢幕座標,destination(必填):跳轉目的點,content(必填):氣泡視窗內容,css(可填):設定css的width,height} 
     * @return 返回選中的模型Entity 
     */ 
    infoWindow: function (obj) { 
 var picked = this.cesiumViewer.scene.pick(obj.position); 
 if (Cesium.defined(picked)) { 
 var id = Cesium.defaultValue(picked.id, picked.primitive.id); 
 if (id instanceof Cesium.Entity) { 
 if(obj.destination){ 
 this.cesiumViewer.camera.flyTo({//初始化跳轉某個地方 
                        destination : obj.destination 
                    });     
                } 
 //填充內容 
                $(".cesium-selection-wrapper").show(); 
                $("#infowin3DContent").empty(); 
                $("#infowin3DContent").append(obj.content); 
 //css存在情況下,設定css 
 if(obj.css && obj.css.width) 
                   $(".infowin3D").css("width",obj.css.width); 
 if(obj.css && obj.css.height) 
                    $(".infowin3D").css("height",obj.css.height); 
                  $(".infowin3D").css("margin-top",-($(".infowin3D").height()-30)); 
                  $(".arrow").css("left",($(".infowin3D").width()/2-20)); 
                  $(".infowin3D").css("margin-left",-($(".infowin3D").width()/2-76)); 
                $(".infowin3D").show(); 
                $("#infoClose3D").click(function () { 
                    $(".cesium-selection-wrapper").hide(); 
                    $(".infowin3D").hide(); 
                });                 
 return id; 
            } 
        }     
    }