提醒

在 CesiumJS 中，除了 polyline 之外，還有其他多種用於繪製不同幾何圖形的屬性，比如 polygon、ellipse、rectangle 等。每一種類型都有自己專屬的屬性，允許你創建並定制各種不同的空間對象。

這邊用一個簡單的範例來讓大家了解，我們提供對應的座標，透過cesiumJS的API就可以將實際的line繪製在地圖上面，不過要注意自己的座標是否正確，如果是不同的座標系統的座標，記得要轉換正確。

我會盡量已前面課程的學西基礎來延伸東西，目的是幫助大家可以一起學習，同時不會有跳太多的狀況......
再次提醒大家，注意結構，API設定的結構，這部分與之前學習openlayers一樣的概念喔~~~

JS

// 創建Cesium Viewer實例
      let viewer = new Cesium.Viewer("cesiumContainer", {
        // terrainProvider: Cesium.createWorldTerrain(), // 加入全球地形
        imageryProvider: false, // 關閉默認的影像圖層
        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,
        })
      );

      // 設定視角到台灣
      viewer.camera.setView({
        destination: Cesium.Cartesian3.fromDegrees(120.9, 23.7, 800000.0),
      });

      // 繪製線段的函數
      function drawLine(point1, point2) {
        viewer.entities.add({
          polyline: {
            positions: Cesium.Cartesian3.fromDegreesArray([ // Cartesian3 用於表示三維空間中的點或向量。這個類的名稱源於笛卡爾坐標系（Cartesian Coordinate System），其中每個點由三個數值來定義：x、y 和 z。這些數值通常對應於三維空間中的位置或方向。
              point1.longitude,
              point1.latitude,
              point2.longitude,
              point2.latitude,
            ]),
            width: 5, // 線段的寬度
            material: Cesium.Color.RED, // 線段的顏色
          },
        });
      }

      // 假設使用者提供的兩個點
      let point1 = { longitude: 120.9, latitude: 23.7 };
      let point2 = { longitude: 121.0, latitude: 23.8 };

      // 呼叫函數來繪製線段
      drawLine(point1, point2);

參考

Github