上一节学习了Primitive加载BoxGeometry、BoxOutlineGeometry和RectangleGeometry。这一节学习Primitive加载CircleGeometry、CircleOutlineGeometry、CylinderGeometry、CylinderOutlineGeometry、EllipseGeometry、EllipseOutlineGeometry、PolygonGeometry和PolygonOutnlineGeometry。
一、CircleGeometry(圆形)与CircleOutlineGeometry(圆框)
CircleGeometry绘制圆的代码如下:
function addCircleGeometry () {
viewer.scene.primitives.add(
new Cesium.Primitive({
geometryInstances: new Cesium.GeometryInstance({
geometry: new Cesium.CircleGeometry({
center: center,
radius: 2000000,
// height: 120000, //矩形离椭球体的高度
numberOfVerticalLines: 16 // 圆的边线条数,越多圆的形状越光滑
}),
id: "CircleGeometry"
}),
appearance: new Cesium.EllipsoidSurfaceAppearance({
aboveGround: false,
material: material
})
})
);
}
如果没有设置 height属性,绘制结果如下图:
绘制CircleOutlineGeometry只需要把
geometry: new Cesium.CircleGeometry //改成
geometry: new Cesium.CircleOutlineGeometry
绘制效果如下图:
二、CylinderGeometry(柱体)与CylinderOutlineGeometry(柱体框)
CylinderGeometry可以绘制柱体也可以绘制锥体,跟前面用entity一样,只是这里用modelMatrix来设置柱体(锥体)的位置与姿态。代码如下:
function addCylinderGeometry () {
var modelMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(center);
var hprRotation = Cesium.Matrix3.fromHeadingPitchRoll(
new Cesium.HeadingPitchRoll(0.0, Cesium.Math.toRadians(30), 0.0)// 中心点水平旋转90度
);
var hpr = Cesium.Matrix4.fromRotationTranslation(
hprRotation,
new Cesium.Cartesian3(0.0, 0.0, 20000.0)// 不平移
);
Cesium.Matrix4.multiply(modelMatrix, hpr, modelMatrix);
viewer.scene.primitives.add(
new Cesium.Primitive({
geometryInstances: new Cesium.GeometryInstance({
geometry: new Cesium.CylinderGeometry({
length: 20000,
topRadius: 5000,
bottomRadius: 10000
}),
id: "CircleGeometry"
}),
modelMatrix: modelMatrix,提供位置与姿态参数
appearance: new Cesium.EllipsoidSurfaceAppearance({
aboveGround: false,
material: material
})
})
);
}
绘制结果如下:
下面不再说OutlineGeometry。因为它只是把构造函数改成对应的OutlineGeometry的构造函数即可。
三、EllipseGeometry(椭圆)与EllipseOutlineGeometry(椭圆框)
绘制代码如下:
function addEllipseGeometry () {
var center = Cesium.Cartesian3.fromDegrees(108.941991, 26.917029)
viewer.scene.primitives.add(
new Cesium.Primitive({
geometryInstances: new Cesium.GeometryInstance({
geometry: new Cesium.EllipseGeometry({
center: center,//心中位置
semiMajorAxis: 10000,//椭圆长半轴
semiMinorAxis: 5000,//椭圆短半轴
height: 13000,// 离椭球体的高度
extrudedHeight: 0,// 拉伸高度.
rotation: Cesium.Math.toRadians(30),//顺时针偏北角度
stRotation: 0,纹理偏角
}),
id: "EllipseGeometry"
}),
appearance: new Cesium.EllipsoidSurfaceAppearance({
aboveGround: false,
material: material
})
})
);
}
设置拉伸高度后,绘制成椭圆柱体,结果如图:
注意图中还添加了线框,线 框的代码不在上面,实现 线框只需要把EllipseGeometry改成EllipseOutlineGeometry即可,图中EllipseOutlineGeometry线框没有旋转角度,EllipseGeometry旋转了30度。还有一个问题是:为什么代码中的 extrudedHeight设置为0,但是却有一个拉伸的高度,答案在:https://blog.csdn.net/luoyun620/article/details/107366589。
四、PolygonGeometry(多边形)与PolygonOutnlineGeometry(多边形框)
虽然说polygon(多边形)是GIS图形要素点线面(多边形)的其中之一,但也是其中最复杂的要素。点,一个坐标,无论怎么绘制都不会有变化;线,只要顺序不变,也不会有变化。但是面不一样。它可能有洞,洞里面可能还有洞……。
如下图有洞的多边形:
没错,这就是一个多边形,一个有洞的多边形。所以在cesium中,多边形的构造函数就相对复杂点,它包不是一系列点,坐标,而是polygonHierarchy参数,其API如下图:
其中就有一个holes参数。它就是洞,里面还可再有洞。代码如下:
function addPolygonGeometry (withOutline = true) {
let height = 12000
let polygonHierarchy = new Cesium.PolygonHierarchy(
Cesium.Cartesian3.fromDegreesArray([
104.041991, 22.117029,
104.441991, 21.817029,
105.041991, 22.817029,
104.541991, 23.817029,
104.081991, 22.417029
]))
let polygonGeometry = new Cesium.PolygonGeometry({
polygonHierarchy: polygonHierarchy,
height: height,
id: "PolygonGeometry"
})
viewer.scene.primitives.add(
new Cesium.Primitive({
geometryInstances: new Cesium.GeometryInstance({
geometry: polygonGeometry,
}),
appearance: new Cesium.EllipsoidSurfaceAppearance({
aboveGround: false,
material: material
})
})
);
if (withOutline) {
let polygonOutlineGeometry = new Cesium.PolygonOutlineGeometry({
polygonHierarchy: polygonHierarchy,
height: height,
id: "PolygonOutlineGeometry"
})
viewer.scene.primitives.add(
new Cesium.Primitive({
geometryInstances: new Cesium.GeometryInstance({
geometry: polygonOutlineGeometry,
}),
appearance: new Cesium.EllipsoidSurfaceAppearance({
aboveGround: false,
material: outlineMaterial
})
})
);
}
}
多边形绘制结果如下图: