1. 地圖添加廣告牌

官方示例 https://cesium.com/docs/analytics-sdk-reference/EntityCollection.html?classFilter=entity
官方文檔 https://cesium.com/docs/analytics-sdk-reference/Billboard.html?classFilter=billboard
中文網(wǎng)文檔 http://cesium.xin/cesium/cn/Documentation1.62/EntityCollection.html?classFilter=entity

廣告牌示例.jpg

viewer.entities.add({
          id: 'billboard', // feature的id
          name: '廣告牌', // feature 的名字
          position: Cesium.Cartesian3.fromDegrees(120, 30, 100), // 廣告牌在地圖上的位置,@params(經(jīng)度{Number},維度{Number},高度{Number})
          billboard: {
            image: 'img.url', // 圖片的url,可以使canvas
            verticalOrigin: Cesium.VerticalOrigin.BOTTOM, // 廣告牌的對(duì)齊方式
          },
        });
viewer.entities.removeById('billboard'); 從地圖上中移除對(duì)應(yīng)id的實(shí)體 @params{id}

2.經(jīng)緯度轉(zhuǎn)化為3D笛卡爾坐標(biāo)

官網(wǎng) https://cesium.com/docs/analytics-sdk-reference/Cartesian3.html?classFilter=Cartesian3
中文網(wǎng) http://cesium.xin/cesium/cn/Documentation1.62/Cartesian3.html?classFilter=Cartesian3

Cesium.Cartesian3.fromDegrees(longitude, latitude, height)
// @params(經(jīng)度{Number},維度{Number},高度{Number})

3.地圖添加鼠標(biāo)左鍵點(diǎn)擊事件

官網(wǎng) https://cesium.com/docs/analytics-sdk-reference/ScreenSpaceEventHandler.html?classFilter=ScreenSpaceEventHandler
中文網(wǎng) http://cesium.xin/cesium/cn/Documentation1.62/ScreenSpaceEventHandler.html?classFilter=ScreenSpaceEventHandler

const handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
handler.setInputAction((e) => {
  console.log(e); // 鼠標(biāo)左鍵點(diǎn)擊位置在瀏覽器視圖上的像素位置
  const pick = viewer.scene.pick(e.position); // 獲取地圖左鍵點(diǎn)擊位置的信息
  // pick.id: 如果地圖上添加billboard等,點(diǎn)擊后,pick.id是添加的元素,pick.id.id就是feature的id,可以以此區(qū)分多個(gè)billboard被點(diǎn)擊
  const  scenePosition = viewer.scene.pickPosition(e.position); // 拾取瀏覽器視圖的像素位置,轉(zhuǎn)化為3D笛卡爾坐標(biāo)
}, Cesium.ScreenSpaceEventType.LEFT_CLICK); // 左鍵點(diǎn)擊事件(必傳項(xiàng))

4. 監(jiān)聽地圖渲染變化(包括拖拽,縮放等操作)

官網(wǎng) https://cesium.com/docs/analytics-sdk-reference/Scene.html?classFilter=scene
中文網(wǎng) http://cesium.xin/cesium/cn/Documentation1.62/Scene.html?classFilter=scene

viewer.scene.postRender.addEventListener(() => { // 每一幀都去計(jì)算氣泡的正確位置
      const  scenePosition = viewer.scene.pickPosition(position); // 拾取瀏覽器視圖的像素位置,轉(zhuǎn)化為3D笛卡爾坐標(biāo),[見第3條]
      const windowPosition = new Cesium.Cartesian2(); // new一個(gè)2D笛卡爾點(diǎn)實(shí)例
      Cesium.SceneTransforms.wgs84ToWindowCoordinates(viewer.scene, scenePosition, windowPosition); // 將WGS84坐標(biāo)中的位置轉(zhuǎn)換瀏覽器視圖的像素位置,@params(地圖場景{scene}, 3D笛卡爾坐標(biāo){position}, 2D笛卡爾點(diǎn)實(shí)例{Cartesian2})
      const cood = {
          x: windowPosition.x, //  地圖移動(dòng)后,元素在瀏覽器視圖的新像素位置
          y: windowPosition.y, 
      };
});

5.將地圖場景移動(dòng)到一個(gè)或多個(gè)實(shí)體,或者地圖某個(gè)點(diǎn)位

viewer.scene.camera.flyTo({
        duration: 1, // 飛的過渡動(dòng)畫時(shí)間
        destination: Cesium.Cartesian3.fromDegrees(
          120.083767, // 地圖經(jīng)度
          30.235533, // 地圖維度
          7000, // 地圖高度
        ),
        orientation: {
          // heading: Cesium.Math.toRadians(1000),
          pitch: Cesium.Math.toRadians(-45), // 視角
        },
      });