Cesium贴地设置
1.primitive贴地线
Cesium对primitive线有专门的GroundPolylinePrimitive贴地线primitive和GroundPolylineGeometry贴地线几何
viewer.scene.primitives.add(
new Cesium.GroundPolylinePrimitive({//贴地primitive线
geometryInstances: new Cesium.GeometryInstance({
geometry: new Cesium.GroundPolylineGeometry({//贴地线几何
positions:Cesium.Cartesian3.fromDegreesArray([90, 28, 100, 28])
})
}),
appearance: new Cesium.PolylineMaterialAppearance({
material: Cesium.Material.fromType('Color', {
color: Cesium.Color.RED
})
})
})
)
2.CircleGeometry,CorridorGeometry,EllipseGeometry,PolygonGeometry,和RectangleGeometry设置贴地,Cesium提供GroundPrimitive类,实现对以上几何图形设置贴地,对于立体几何图形不支持贴地
var primitive = new Cesium.GroundPrimitive({//贴地的primitive
geometryInstances: new Cesium.GeometryInstance({
geometry: new Cesium.PolygonGeometry({//支持CircleGeometry,CorridorGeometry,EllipseGeometry,RectangleGeometry
polygonHierarchy: new Cesium.PolygonHierarchy([
Cesium.Cartesian3.fromDegreesArray(100,25,100,30,110,30)
])
}),
attributes: {
color: Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.RED)
}
}),
appearance: new Cesium.PerInstanceColorAppearance()
})
viewer.scene.primitives.add(primitive)
3.PointPrimitive设置贴地
在没有地形的情况下设置笛卡尔的高度为0就是贴地,有地形就需要使用到Cesium提供的sampleTerrainMostDetailed方法实现点位置添加高程实现贴地,
var cartesian=Cesium.Cartesian3.fromDegrees(100,20)//这里没设置点的高度,也可以设置高度,但不知道该位置的高程,所以需要使用sampleTerrainMostDetailed方法在地形加载出来后,将该点位置赋予高程
var points = window.viewer.scene.primitives.add(new Cesium.PointPrimitiveCollection())
var ellipsoid = window.viewer.scene.globe.ellipsoid
let p = ellipsoid.cartesianToCartographic(cartesian)
let promise = Cesium.sampleTerrainMostDetailed(window.viewer.terrainProvider, [p])
Cesium.when(promise, function() {
points.add({
position: Cesium.Cartographic.toCartesian(p),
color: Cesium.Color.WHITE,
pixelSize: 10
})
})
4.Entity实体设置贴地
大部分entity有HeightReference高度参考属性,设置为CLAMP_TO_GROUND贴地类型可设置贴地
window.viewer.entities.add({
polygon: {//box,ellipse,cylinder.......
hierarchy: Cesium.Cartesian3.fromDegreesArray(100,25,100,30,110,30),
material: Cesium.Color.GREEN,
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND//设置HeightReference高度参考类型为CLAMP_TO_GROUND贴地类型
}
})
5.model模型设置贴地
用Entity的加载方式添加模型同上只要叫上高度参考就好,如果用primitive的方式加载模型,则同点原语一样要将模型中心点贴合地面,或者通过模型矩阵改变位置
//entity方式
viewer.entities.add({
position: Cesium.Cartesian3.fromDegrees(117, 25),
model: {
uri: 'Models/my_city_0.glb',
minimumPixelSize: 48,
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND
}
})
//primitive方式
var position = Cesium.Cartesian3.fromDegrees(109.02, 34.02, 0)
let p = ellipsoid.cartesianToCartographic(position )
let promise = Cesium.sampleTerrainMostDetailed(window.viewer.terrainProvider, [p])
Cesium.when(promise, function() {
var hpRoll = new Cesium.HeadingPitchRoll(Cesium.Math.toRadians(45), 0, 0)
var fixedFrame = Cesium.Transforms.localFrameToFixedFrameGenerator('north', 'west')
var scene = viewer.scene
scene.primitives.add(
Cesium.Model.fromGltf({
url: 'Models/Cesium_Air.gltf',
modelMatrix: Cesium.Transforms.headingPitchRollToFixedFrame(Cesium.Cartographic.toCartesian(p), hpRoll, Cesium.Ellipsoid.WGS84, fixedFrame, position),
minimumPixelSize: 128,
maximumScale: 200,
})
)
})
6.3dTiles设置贴地
3dtiles初始的位置在加载了地形后可能位于地形下方,通过调整模型高度让tiles位于地表上,这里高度设定的固定值,也可以通过上边的sampleTerrainMostDetailed获取到实际的高程再调整
var tileset = window.viewer.scene.primitives.add(
new Cesium.Cesium3DTileset({
url: 'Tileset/tileset.json'
})
)
tileset.readyPromise
.then(function(tileset) {
//调整高度
var translation = Cesium.Cartesian3.fromArray([0, 0, 200])
var m = Cesium.Matrix4.fromTranslation(translation) //fromTranslation()方法
tileset.modelMatrix = m
})
.otherwise(function(error) {
console.log(error)
})
7.CZML,GEOJSON,KML设置贴地
czml和GEOJSON都是json格式,kml则接近与html标签的形式,这三种文件中都有clampToGround字段属性,加载时设置为true便可实现贴地
var dataSourcePromise = Cesium.CzmlDataSource.load('../Czml/MultipartVehicle_part1.czml',{clampToGround: true}) //CZML加载实体方式
viewer.dataSources.add(dataSourcePromise)
viewer.zoomTo(dataSourcePromise)
var dataSourcePromise = Cesium.GeoJsonDataSource.load('../JSON/1.json',{clampToGround: true})
dataSourcePromise.then(function(dataSource) {
viewer.dataSources.add(dataSource)
viewer.flyTo(dataSource)
})
var dataSourcePromise = Cesium.KmlDataSource.load('../Kml/facilities/facilities.kml', {clampToGround: true})
dataSourcePromise.then(function(dataSource) {
viewer.dataSources.add(dataSource)
//viewer.flyTo(dataSource)
})
本文转自 https://blog.csdn.net/sinat_41537539/article/details/106942427?spm=1001.2014.3001.5502,如有侵权,请联系删除。