cesium 繫結dom彈窗(跟隨模型)

2021-10-10 11:51:56 字數 1219 閱讀 6201

思路:

1.在頁面中建立乙個div標籤;

2.確定標籤在三維場景中的三維位置;並計算三維位置的螢幕座標;

3.在每一幀的渲染中都計算一下這個三維座標的螢幕位置,並把螢幕位置賦給標籤。

4.當轉到地球背面時,如果不想顯示彈窗,則隱藏。

具體實現:

1.建立div標籤

標籤樣式:

.tag
建立div時,最好是id和它要跟隨的物件一致,方便場景中查詢位置:

//txt1 txt2 txt3 為div中要顯示的文字,具體樣式可修改 innerhtml那一行

function adddom(id,txt1, txt2, txt3,)

2.確定標籤在三維場景中的位置並轉為螢幕座標

//三維笛卡爾座標轉螢幕座標

function transposition(position)

(1).指定位置(經緯度)

function fixdomposition(domid,position)else

}

(2).跟隨相同id的模型

function modelfixdom(domid) else

}

3.在每一幀的渲染中都計算一下這個三維座標的螢幕位置,並把螢幕位置賦給標籤。

viewer.scene.prerender.addeventlistener(function () )
4.如果不想地球轉到背面仍顯示標籤,則加個判斷距離判斷

function modelfixdom(domid) else

}else

}

function enableshow(cartesian)

return res

}

實現效果:

完整**:

>

>

>

修改預設的地圖選擇器內容title

>

cesium 相機跟隨

一場大的颱風,路徑通常很長,可能從靠近赤道的太平洋一直往北吹到東三省。跨度這麼大,在三維gis中,往往不容易看全。如果能夠實現相機隨動效果,即相機跟隨颱風步進 移動,就生動許多了。感覺在cesium中,座標和視角 相機 view是乙個難點,我到現在都搞不清楚。方向 orientation 可以總結一...

移動端彈窗顯示後,禁止body內容跟隨彈窗滾動

對於一般大小的彈窗可以使用如下方案 1.阻止預設事件 缺點 該方案存在一定的相容性,不是所有瀏覽器都有效。對於彈窗存在滾動的情況,也不適用。優點 彈窗顯示時,頁面仍然固定在原來位置,不會回滾到頂部 阻止彈窗滾動 function stopscroll function recoverscroll f...

DOM事件繫結

element.addeventlistener type,handler,boolean 第乙個值代表事件型別,不加on。第二個是執行的方法。事件處理函式 第三個值是乙個布林值,預設為false,只在冒泡階段執行。true為在捕獲階段執行 element.removeeventlistener t...