Cesium快速上手4-Polylines圖元使用講解

Polyline & Cesium.PolylineCollection

http://localhost:8080/Apps/Sandcastle/index.html?src=development%2FPolylines.html&label=Development

image.png

// Sandcastle.declare(polyline); //但凡帶這個的，都是一筆繪制的，不是一個一個繪制的
//positions 最后有個s，是個集合，里面可以添加很多個點坐標
Cesium.Cartesian3.fromDegreesArray([經度1,緯度1,經度2,緯度2,]) / Cesium.Cartesian3.fromDegreesArrayHeights([經度1,緯度1,高度1,經度2,緯度2,高度2,])
// 給出了兩個點，繪制出來時漂在地圖表面的曲線，而不是直線（如果是直線的話，就在地球里面了，不在表面了）
// 要把這個直線變成很多個折線

image.png

// 關鍵線條的樣式

 loop : true 這個屬性 讓線條閉合，變成一個多邊形

 material : Cesium.Material.fromType(Cesium.Material.PolylineGlowType, {
            outlineWidth : 1.0 //外圍線寬度
            glowPower : 0.2, //熒光效果，線周邊發亮
            taperPower : 0.2, //控制一頭線粗 一頭線細，為1時線的兩頭粗細一樣
            color : new Cesium.Color(1.0, 0.5, 0.0, 1.0) // 顏色
        }),

 material : Cesium.Material.fromType(Cesium.Material.FadeType, {
            repeat: false,
            fadeInColor: Cesium.Color.CYAN,
            fadeOutColor: Cesium.Color.CYAN.withAlpha(0),
            time: new Cesium.Cartesian2(0.0, 0.0),
            fadeDirection: {
                x: true,
                y: false
            }
        })

//線的末尾有箭頭效果
 material : Cesium.Material.fromType(Cesium.Material.PolylineArrowType)

//設置參考位置，以這個參考位置繪制線
 localPolylines.modelMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(center);
  positions : [
            new Cesium.Cartesian3(0.0, 0.0, 0.0),
            new Cesium.Cartesian3(1000000.0, 0.0, 0.0)
        ],

//Rhumb同向線，弧線切線方向都是一致的；若拿着羅盤針的話，航線都是一致的
 positions : Cesium.PolylinePipeline.generateCartesianRhumbArc({
            positions : Cesium.Cartesian3.fromDegreesArray([-130.0, 30.0,
                                                            -75.0, 30.0])
        }),

function createPrimitives(scene) {
    var polylines = scene.primitives.add(new Cesium.PolylineCollection());

    // A simple polyline with two points.
    var polyline = polylines.add({
        positions : Cesium.PolylinePipeline.generateCartesianArc({
            positions : Cesium.Cartesian3.fromDegreesArray([-120.0, 40.0,
                                                                                           -110.0, 30.0])
        }),
        material : Cesium.Material.fromType('Color', {
            color : new Cesium.Color(1.0, 1.0, 1.0, 1.0)
        })
    });
    Sandcastle.declare(polyline); // For highlighting on mouseover in Sandcastle.

    // Apply a polyline outline material
    var widePolyline = polylines.add({
        positions : Cesium.PolylinePipeline.generateCartesianArc({
            positions : Cesium.Cartesian3.fromDegreesArray([-105.0, 40.0,
                                                            -100.0, 38.0,
                                                            -105.0, 35.0,
                                                            -100.0, 32.0])
        }),
        material : Cesium.Material.fromType(Cesium.Material.PolylineOutlineType, {
            outlineWidth : 5.0
        }),
        width : 10.0
    });
    Sandcastle.declare(widePolyline); // For highlighting on mouseover in Sandcastle.

    // Apply a polyline glow material
    var coloredPolyline = polylines.add({
        positions : Cesium.PolylinePipeline.generateCartesianArc({
            positions : Cesium.Cartesian3.fromDegreesArray([-95.0, 30.0,
                                                            -85.0, 40.0])
        }),
        material : Cesium.Material.fromType(Cesium.Material.PolylineGlowType, {
            glowPower : 0.2,
            taperPower : 0.2,
            color : new Cesium.Color(1.0, 0.5, 0.0, 1.0)
        }),
        width : 10.0
    });
    Sandcastle.declare(coloredPolyline); // For highlighting on mouseover in Sandcastle.

    // A polyline loop
    var loopPolyline = polylines.add({
        positions : Cesium.PolylinePipeline.generateCartesianArc({
            positions : Cesium.Cartesian3.fromDegreesArray([-105.0, 30.0,
                                                            -105.0, 25.0,
                                                            -100.0, 22.0,
                                                            -100.0, 28.0])
        }),
        width : 3.0,
        loop : true
    });
    Sandcastle.declare(loopPolyline); // For highlighting on mouseover in Sandcastle.

    // Draw a line in a local reference frame
    // The arrow points to the east, i.e. along the local x-axis.
    var localPolylines = scene.primitives.add(new Cesium.PolylineCollection());
    var center = Cesium.Cartesian3.fromDegrees(-80.0, 35.0);
    localPolylines.modelMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(center);

    var localPolyline = localPolylines.add({
        positions : [
            new Cesium.Cartesian3(0.0, 0.0, 0.0),
            new Cesium.Cartesian3(1000000.0, 0.0, 0.0)
        ],
        width : 10.0,
        material : Cesium.Material.fromType(Cesium.Material.PolylineArrowType)
    });
    Sandcastle.declare(localPolyline); // For highlighting on mouseover in Sandcastle.

    //Polyline using the fade material
    var fadingPolyline = polylines.add({
        positions : Cesium.PolylinePipeline.generateCartesianArc({
            positions : Cesium.Cartesian3.fromDegreesArrayHeights([-75, 43, 500000,
                                                                   -125, 43, 500000])
        }),
        width : 5,
        material : Cesium.Material.fromType(Cesium.Material.FadeType, {
            repeat: false,
            fadeInColor: Cesium.Color.CYAN,
            fadeOutColor: Cesium.Color.CYAN.withAlpha(0),
            time: new Cesium.Cartesian2(0.0, 0.0),
            fadeDirection: {
                x: true,
                y: false
            }
        })
    });
    Sandcastle.declare(fadingPolyline); // For highlighting on mouseover in Sandcastle.

    // A rhumb line with two points.
    var rhumbLine = polylines.add({
        positions : Cesium.PolylinePipeline.generateCartesianRhumbArc({
            positions : Cesium.Cartesian3.fromDegreesArray([-130.0, 30.0,
                                                            -75.0, 30.0])
        }),
        width: 5,
        material : Cesium.Material.fromType('Color', {
            color : new Cesium.Color(0.0, 1.0, 0.0, 1.0)
        })
    });
    Sandcastle.declare(rhumbLine); // For highlighting on mouseover in Sandcastle.

}

PolylineGeometry

http://localhost:8080/Apps/Sandcastle/gallery/development%2FPolyline.html
http://localhost:8080/Apps/Sandcastle/index.html?src=development%2FPolyline.html&label=Development

image.png

Cesium.PolylineCollection 與Cesium.Primitive 都可以創建線性的線，實際上Cesium.PolylineCollection性能更高一些，能定制的屬性也更多；若Cesium.PolylineCollection能滿足應用，優先選擇這個；

// Example 1: Draw a red polyline on the globe surface

scene.primitives.add(new Cesium.Primitive({
    geometryInstances : new Cesium.GeometryInstance({
        geometry : new Cesium.PolylineGeometry({
            positions : Cesium.Cartesian3.fromDegreesArray([
                -124.0, 40.0,
                -80.0, 40.0
            ]),
            width : 5.0,
            vertexFormat : Cesium.PolylineColorAppearance.VERTEX_FORMAT
        }),
        attributes: {
            color: Cesium.ColorGeometryInstanceAttribute.fromColor(new Cesium.Color(1.0, 0.0, 0.0, 0.8))
        }
    }),
    appearance : new Cesium.PolylineColorAppearance()
}));

// Example 2: Draw a straight blue polyline

// Setting the arcType option to ArcType.NONE will allow
// you to draw a straight polyline.  Otherwise, it will
// curve to the globe surface.
scene.primitives.add(new Cesium.Primitive({
    geometryInstances : new Cesium.GeometryInstance({
        geometry : new Cesium.PolylineGeometry({
            positions : Cesium.Cartesian3.fromDegreesArrayHeights([
                -84.0, 50.0, 0.0,
                -100.0, 30.0, 1000000.0
            ]),
            width : 5.0,
            vertexFormat : Cesium.PolylineColorAppearance.VERTEX_FORMAT,
            arcType: Cesium.ArcType.NONE //這里控制着畫出來的是直線，而不是貼地的弧線
        }),
        attributes: {
            color: Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.BLUE)
        }
    }),
    appearance : new Cesium.PolylineColorAppearance()
}));
//Sandcastle_End
    Sandcastle.finishedLoading();

Cesium.ArcType有三個選項：
Cesium.ArcType.GEODESIC 最短的弧線
Cesium.ArcType.NONE 直線
Cesium.ArcType.RHUMB 橫向線，在這條線上的切線角度方向一致

SimplePolylineGeometry

http://localhost:8080/Apps/Sandcastle/index.html?src=development%2FSimple%20Polyline.html&label=Development

image.png

特點：SimplePolylineGeometry沒有width屬性，速度更快一點

GroundPolylineGeometry 貼地線

http://localhost:8080/Apps/Sandcastle/index.html?src=development%2FGround%20Polyline%20Material.html&label=Development

http://localhost:8080/Apps/Sandcastle/gallery/development%2FGround%20Polyline%20Material.html

image.png

http://localhost:8080/Apps/Sandcastle/gallery/development%2FPolylines%20On%20Terrain.html

image.png

注意：必須用GroundPolylinePrimitive來創建，而不能用GroundPrimitive創建

綜合比較

PolylineCollection可以同時渲染多條折線，性能較高；其他類型都是單獨渲染某個折線的，會導致多了的話，渲染性能受影響。

本文轉自 https://www.jianshu.com/p/a983160234ad，如有侵權，請聯系刪除。