基於Cesium實現繪制圓形,正方形,多邊形,橢圓圖形標註

Posted on by

這個是啥子嘞，就是向cesium上面添加圓形、正方形啥的。

官方案例

https://sandcastle.cesium.com/?src=Geometry%20and%20Appearances.html

官網寫的很好瞭，但是有一些沒有註釋，所以說剛入門的小可愛們不知道那些代碼分別是繪制啥的，所以說嘞，我稍微整理瞭一下。

繪制矩形

	const stripeMaterial = new Cesium.StripeMaterialProperty({
      evenColor: Cesium.Color.WHITE.withAlpha(0.5),
      oddColor: Cesium.Color.BLUE.withAlpha(0.5),
      repeat: 5.0,
    });

    // 繪制矩形
    let graphical = viewer.entities.add({
      rectangle: {
        coordinates: Cesium.Rectangle.fromDegrees(116.8, 36.1, 116.9, 36.2), // 最西、最南、最東、最北
        outline: true,
        outlineColor: Cesium.Color.WHITE,
        outlineWidth: 4,
        stRotation: Cesium.Math.toRadians(45),
        // material: stripeMaterial,
      },
    })

繪制多邊形

	let graphical = viewer.entities.add({
      polygon: {
        hierarchy: new Cesium.PolygonHierarchy(
          Cesium.Cartesian3.fromDegreesArray([   // 繪制多邊形，經度和緯度值列表。值交替顯示[經度，緯度，經度，緯度...]。
            -107.0,
            27.0,
            -107.0,
            22.0,
            -102.0,
            23.0,
            -97.0,
            21.0,
            -97.0,
            25.0,
          ])
        ),
        outline: true,
        outlineColor: Cesium.Color.WHITE,
        outlineWidth: 4,
        // material: stripeMaterial,
      },
    })

繪制橢圓

	let graphical = viewer.entities.add({
      position: Cesium.Cartesian3.fromDegrees(116.8, 36.1),
      ellipse: {
        semiMinorAxis: 300000.0,  // 指定半短軸的數字屬性。
        semiMajorAxis: 500000.0,  // 指定半長軸的數值屬性。
        rotation: Cesium.Math.toRadians(-40.0),  // 一個數字屬性，指定橢圓從北方逆時針旋轉。
        outline: true,   // 一個佈爾屬性，指定是否勾勒出橢圓。
        outlineColor: Cesium.Color.WHITE,  // 一個屬性，指定輪廓的 顏色 
        outlineWidth: 4,    // 一個數字屬性，指定輪廓的寬度。
        stRotation: Cesium.Math.toRadians(22), //  一個數字屬性，指定橢圓紋理從北方逆時針旋轉。
        // material: stripeMaterial,
      },
    });

繪制圓形

	let graphical = viewer.entities.add({
      position: Cesium.Cartesian3.fromDegrees(-72.0, 25.0),
      ellipse: {
        semiMinorAxis: 250000.0,
        semiMajorAxis: 250000.0,
        rotation: Cesium.Math.toRadians(-40.0),
        outline: true,
        outlineColor: Cesium.Color.WHITE,
        outlineWidth: 4,
        stRotation: Cesium.Math.toRadians(90),
        // material: stripeMaterial,
      },
    });

繪制立方體

	// 繪制立方體
    let graphical = viewer.entities.add({
      rectangle: {
        coordinates: Cesium.Rectangle.fromDegrees(
          -118.0,
          38.0,
          -116.0,
          40.0
        ),
        extrudedHeight: 500000.0,
        outline: true,
        outlineColor: Cesium.Color.WHITE,
        outlineWidth: 4,
        stRotation: Cesium.Math.toRadians(45),
        material: Cesium.Color.fromRandom({ alpha: 1.0 }),
      },
    });

繪制橢圓柱體

	// 繪制橢圓柱體
    let graphical = viewer.entities.add({
      position: Cesium.Cartesian3.fromDegrees(-117.0, 35.0),
      ellipse: {
        semiMinorAxis: 100000.0,
        semiMajorAxis: 200000.0,
        height: 100000.0,
        extrudedHeight: 200000.0,
        rotation: Cesium.Math.toRadians(90.0),
        outline: true,
        outlineColor: Cesium.Color.WHITE,
        outlineWidth: 4,
        material: Cesium.Color.fromRandom({ alpha: 1.0 }),
      },
    });

繪制多邊柱體

	// 繪制多邊柱體
    let graphical = viewer.entities.add({
      polygon: {
        hierarchy: new Cesium.PolygonHierarchy(
          Cesium.Cartesian3.fromDegreesArray([
            -118.0,
            30.0,
            -115.0,
            30.0,
            -117.1,
            31.1,
            -118.0,
            33.0,
          ])
        ),
        height: 300000.0,
        extrudedHeight: 700000.0,
        outline: true,
        outlineColor: Cesium.Color.WHITE,
        outlineWidth: 4,
        material: Cesium.Color.fromRandom({ alpha: 1.0 }),
      },
    });

繪制圓柱體

    // 繪制圓柱體
    let graphical = viewer.entities.add({
      position: Cesium.Cartesian3.fromDegrees(-70.0, 45.0, 100000.0),
      cylinder: {
        hierarchy: new Cesium.PolygonHierarchy(
          Cesium.Cartesian3.fromDegreesArray([
            -118.0,
            30.0,
            -115.0,
            30.0,
            -117.1,
            31.1,
            -118.0,
            33.0,
          ])
        ),
        length: 200000.0,
        topRadius: 150000.0,   // 一個數字屬性，指定圓柱頂部的半徑。
        bottomRadius: 150000.0,  // 一個數字屬性，指定圓柱體底部的半徑。
        outline: true,
        outlineColor: Cesium.Color.WHITE,
        outlineWidth: 4,
        material: Cesium.Color.fromRandom({ alpha: 1.0 }),
      },
    });

立體串串

	for (i = 0; i < 5; ++i) {
      let = height = 100000.0 + 200000.0 * i;
      viewer.entities.add({
        position: Cesium.Cartesian3.fromDegrees(-106.0, 45.0, height),
        box: {
          dimensions: new Cesium.Cartesian3(90000.0, 90000.0, 90000.0),
          outline: true,
          outlineColor: Cesium.Color.WHITE,
          outlineWidth: 2,
          material: Cesium.Color.fromRandom({ alpha: 0.5 }),
        },
      });

      viewer.entities.add({
        position: Cesium.Cartesian3.fromDegrees(-102.0, 45.0, height),
        ellipsoid: {
          radii: new Cesium.Cartesian3(45000.0, 45000.0, 90000.0),
          outline: true,
          outlineColor: Cesium.Color.WHITE,
          outlineWidth: 2,
          material: Cesium.Color.fromRandom({ alpha: 0.5 }),
        },
      });

      viewer.entities.add({
        position: Cesium.Cartesian3.fromDegrees(-98.0, 45.0, height),
        ellipsoid: {
          radii: new Cesium.Cartesian3(67500.0, 67500.0, 67500.0),
          outline: true,
          outlineColor: Cesium.Color.WHITE,
          outlineWidth: 2,
          material: Cesium.Color.fromRandom({ alpha: 0.5 }),
        },
      });
    }

好難形容 又平面又立體的板板

    // 繪制啥這是，又平面又立體的板板
    viewer.entities.add({
      wall: {
        positions: Cesium.Cartesian3.fromDegreesArray([
          -95.0,
          50.0,
          -85.0,
          50.0,
          -75.0,
          50.0,
        ]),
        maximumHeights: [500000, 1000000, 500000],
        minimumHeights: [0, 500000, 0],
        outline: true,
        outlineColor: Cesium.Color.LIGHTGRAY,
        outlineWidth: 4,
        material: Cesium.Color.fromRandom({ alpha: 0.7 }),
      },
    });

“回”字

	// 我滴媽呀，越來越難形容，一個“回”字
    viewer.entities.add({
      polygon: {
        hierarchy: {
          positions: Cesium.Cartesian3.fromDegreesArray([
            -109.0,
            30.0,
            -95.0,
            30.0,
            -95.0,
            40.0,
            -109.0,
            40.0,
          ]),
          holes: [
            {
              positions: Cesium.Cartesian3.fromDegreesArray([
                -107.0,
                31.0,
                -107.0,
                39.0,
                -97.0,
                39.0,
                -97.0,
                31.0,
              ]),
              holes: [
                {
                  positions: Cesium.Cartesian3.fromDegreesArray([
                    -105.0,
                    33.0,
                    -99.0,
                    33.0,
                    -99.0,
                    37.0,
                    -105.0,
                    37.0,
                  ]),
                  holes: [
                    {
                      positions: Cesium.Cartesian3.fromDegreesArray([
                        -103.0,
                        34.0,
                        -101.0,
                        34.0,
                        -101.0,
                        36.0,
                        -103.0,
                        36.0,
                      ]),
                    },
                  ],
                },
              ],
            },
          ],
        },
        // material: stripeMaterial,
      },
    });

繪制立方體，扭轉一定角度的

    // 繪制立方體，帶旋轉的
    viewer.entities.add({
      rectangle: {
        coordinates: Cesium.Rectangle.fromDegrees(
          -110.0,
          38.0,
          -107.0,
          40.0
        ),
        height: 700000.0,   // 一個數字屬性，用於指定多邊形相對於橢球表面的高度
        extrudedHeight: 100000.0,   // 一個數字屬性，用於指定多邊形的凸出面相對於橢球面的高度。
        rotation: Cesium.Math.toRadians(45),
        material: Cesium.Color.fromRandom({ alpha: 1.0 }),
      },
    });

在天上飄著的橢圓柱體

    // 在天上飄著的橢圓柱體
    viewer.entities.add({
      position: Cesium.Cartesian3.fromDegrees(-110.0, 35.0),
      ellipse: {
        semiMinorAxis: 100000.0,
        semiMajorAxis: 200000.0,
        height: 300000.0,
        extrudedHeight: 700000.0,
        rotation: Cesium.Math.toRadians(-40.0),
        material: Cesium.Color.fromRandom({ alpha: 1.0 }),
      },
    });

繪制椎體

	viewer.entities.add({
      position: Cesium.Cartesian3.fromDegrees(-70.0, 40.0, 200000.0),
      cylinder: {
        hierarchy: new Cesium.PolygonHierarchy(
          Cesium.Cartesian3.fromDegreesArray([
            -118.0,
            30.0,
            -115.0,
            30.0,
            -117.1,
            31.1,
            -118.0,
            33.0,
          ])
        ),
        length: 400000.0,
        topRadius: 0.0,
        bottomRadius: 200000.0,
        material: Cesium.Color.fromRandom({ alpha: 1.0 }),
      },
    });

平面圖形的串串

    // 平面圖形的串串
    for (i = 0; i < 5; ++i) {
      let height = 200000.0 * i;
      viewer.entities.add({
        position: Cesium.Cartesian3.fromDegrees(-65.0, 35.0),
        ellipse: {
          semiMinorAxis: 200000.0,
          semiMajorAxis: 200000.0,
          height: height,
          material: Cesium.Color.fromRandom({ alpha: 0.5 }),
        },
      });

      viewer.entities.add({
        rectangle: {
          coordinates: Cesium.Rectangle.fromDegrees(
            -67.0,
            27.0,
            -63.0,
            32.0
          ),
          height: height,
          material: Cesium.Color.fromRandom({ alpha: 0.5 }),
        },
      });
    }

以上就是基於Cesium實現繪制圓形,正方形,多邊形,橢圓圖形標註的詳細內容，更多關於Cesium繪制圖形標註的資料請關註WalkonNet其它相關文章！

推薦閱讀：