viewer.entities.add

在 Cesium 地圖上添加一個「實體」（entity），position指定了實體的位置，這裡使用了三維笛卡爾座標系中的位置，是以地心為原點的三維座標。

• Cesium.Cartesian3.fromDegrees(121, 23, 0) 表示將經度 121 度、緯度 23 度、高度 0 公尺
• point：這是一個物件，包含了用於設置點外觀的多個屬性。
  • pixelSize： 定義了點的大小，單位是像素。10 表示這個點的直徑為 10 個像素。這個大小在畫面中不會隨著鏡頭的遠近而改變，始終保持 10 像素的大小。
  • color：定義了點的顏色。
  • outlineColor：設定了點的外邊框顏色。
  • outlineWidth：定義了點的邊框寬度，單位也是像素。

JS

// 創建Cesium Viewer實例
      var viewer = new Cesium.Viewer("cesiumContainer",{
        animation: false,
        timeline: false,
        infoBox: false, // 隱藏信息框
        selectionIndicator: false, // 隱藏選擇指示器
        navigationHelpButton: false, // 隱藏導航幫助按鈕
        geocoder: false, // 隱藏地理編碼搜尋框
        homeButton: false, // 隱藏首頁按鈕
        sceneModePicker: false, // 隱藏2D/3D切換按鈕
        baseLayerPicker: false, // 隱藏圖層選擇器
        fullscreenButton: false, // 隱藏全螢幕按鈕
        vrButton: false, // 隱藏VR模式按鈕
        creditsDisplay: false, // 隱藏版權信息
      });

      // 添加WMTS圖層
      viewer.imageryLayers.addImageryProvider(
        new Cesium.UrlTemplateImageryProvider({
          // 這邊是用內政部的通用電子地圖，可以去內政部國土測繪參考，如果你有放其他的底圖的話。
          url: "https://wmts.nlsc.gov.tw/wmts/EMAP5/default/EPSG:3857/{z}/{y}/{x}.png",
          tilingScheme: new Cesium.WebMercatorTilingScheme(),
          maximumLevel: 18,
        })
      );

      // 設定視角到台灣
      // 在 CesiumJS 中，攝像機的高度並不像 OpenLayers 那樣直接使用縮放級別（zoom level）的概念，但可以通過計算來模擬這種效果。這涉及將縮放級別轉換為對應的高度。
      viewer.camera.setView({
        destination: Cesium.Cartesian3.fromDegrees(121, 23.5, 800000.0), // 設置初始視角，經度、緯度、高度(km)，所以如果要像openlayers有zoom的感覺需要自己設定in out的公里數
      });

      // 新增一個點
      const point = viewer.entities.add({
            position: Cesium.Cartesian3.fromDegrees(121, 23, 0),
            point: {
                pixelSize: 10,
                color: Cesium.Color.RED,
                outlineColor: Cesium.Color.WHITE,
                outlineWidth: 2
            },
        });

參考連結

Github