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
image.png
特点：SimplePolylineGeometry没有width属性，速度更快一点
GroundPolylineGeometry 贴地线
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可以同时渲染多条折线，性能较高；其他类型都是单独渲染某个折线的，会导致多了的话，渲染性能受影响。
