一:基本概念
1:实体贴地?
绘制的实体(通常是指平面图形而不是立体几何图形)贴合在地形表面或者倾斜摄影模型表面。
2:如何控制贴地
polyline:设置clampToGround:true;
其余对象:heightReference或classificationType属性
Cesium.HeightReference.NONE | 该位置是绝对的 |
Cesium.HeightReference.CLAMP_TO_GROUND | 该位置固定在地形上 |
Cesium.HeightReference.RELATIVE_TO_GROUND | 该位置的高度是指地形上方的高度 |
Cesium.ClasssificationType.CESIUM_3D_TILE | 仅3DTiles被分类 |
Cesium.ClasssificationType.TERRAIN | 仅地形被分类 |
Cesium.ClasssificationType.BOTH | 地形和3D Tiles均被分类 |
3:创建地形
(Cesium文档示例代码)
try {
const viewer1 = new Cesium.Viewer("cesiumContainer", {
terrainProvider: await Cesium.createWorldTerrainAsync({
requestWaterMask: true,
requestVertexNormals: true
});
});
} catch (error) {
console.log(error);
}
二:实操绘制
1:贴地点
/* 绘制贴地点 */
//1、创建addPoint对象
var addPoint = {
id: 'point',
name: '点',
show: true,
position: Cesium.Cartesian3.fromDegrees(118, 32, 0),
point: {
color: Cesium.Color.BLUE,
pixelSize: 50,
disableDepthTestDistance: Number.POSITIVE_INFINITY,
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND //贴地
}
}
viewer.entities.add(addPoint)
2:贴地线
/* 绘制贴地线 */
//1、创建addLine对象
var addLine = {
id: 'line',
name: '线',
show: true,
polyline: {
positions: Cesium.Cartesian3.fromDegreesArray([118, 30, 119, 32, 116, 35]),
width: 2, //线条宽度
material: Cesium.Color.RED, //线条材质
clampToGround: true //贴地
}
}
viewer.entities.add(addLine)
3:贴地面
/* 绘制贴地面 */
//1、创建addPolygon对象
var addPolygon = {
id: 'polygon',
name: '面',
show: true,
polygon: {
hierarchy: Cesium.Cartesian3.fromDegreesArray([118, 30, 119, 32, 116, 32, 116, 30]),
material: Cesium.Color.RED.withAlpha(0.4),
classificationType: Cesium.ClassificationType.BOTH,//贴地(绘制的面既可以贴合地形也可以贴合3D Tiles)
}
}
viewer.entities.add(addPolygon)
4:贴地矩形
/* 绘制贴地矩形 */
//1、创建addRectangle对象
var addRectangle = {
id: 'rectangle',
name: '矩形',
show: true,
rectangle: {
coordinates: Cesium.Rectangle.fromDegrees(80, 30, 100, 35),
material: Cesium.Color.RED.withAlpha(0.4),
classificationType: Cesium.ClassificationType.BOTH,//贴地(绘制的面既可以贴合地形也可以贴合3D Tiles)
}
}
viewer.entities.add(addRectangle)
5:贴地椭圆
/* 绘制贴地椭圆 */
//1、创建addEllipse对象
var addEllipse = {
id: 'ellipse',
name: '椭圆',
show: true,
position: Cesium.Cartesian3.fromDegrees(103.0, 40.0),
ellipse: {
semiMinorAxis: 250000,
semiMajorAxis: 400000,
classificationType: Cesium.ClassificationType.BOTH,//贴地(绘制的面既可以贴合地形也可以贴合3D Tiles)
}
}
viewer.entities.add(addEllipse)
6:贴地走廊
/* 贴地走廊 */
//1、创建addCorridor对象
var addCorridor = {
id: 'corridor',
name: '走廊',
show: true,
corridor: {
positions: Cesium.Cartesian3.fromDegreesArray([
100.0, 40.0,
105.0, 40.0,
105.0, 35.0
]),
width: 20000,
material: Cesium.Color.YELLOW.withAlpha(0.5),
classificationType: Cesium.ClassificationType.BOTH,//贴地(绘制的面既可以贴合地形也可以贴合3D Tiles)
}
}
viewer.entities.add(addCorridor)
7:贴地模型
/* 贴地模型 */
//1、创建addEllipsoid对象
var degree = 60;
var heading = Cesium.Math.toRadians(degree)
var pitch = 0
var roll = 0
var hpr = new Cesium.HeadingPitchRoll(heading, pitch, roll)
var addModel = {
id: 'model',
name: '小车模型',
show: true,
position: Cesium.Cartesian3.fromDegrees(118, 30, 5000),
orientation: Cesium.Transforms.headingPitchRollQuaternion(Cesium.Cartesian3.fromDegrees(118, 30, 5000), hpr),
model: {
uri: '../Assets/Cesium_Air.glb',
minimumPixelSize: 300,
maximumScale: 50000,
scale: 30000,
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND
}
}
viewer.entities.add(addModel)