Cesium快速上手4-Polylines图元使用讲解

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])
        }),
         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，如有侵权，请联系删除。