1. Import oblique photography data.
First, export oblique photography as an osgb file, and then use the 3dtiles tool to convert it to a 3dtiles file that can be used by cesium. The conversion tool is provided by another major on GitHub. The link is: 3dtiles conversion tool cesium loading code is
:
var tileset = new Cesium.Cesium3DTileset({
url: "../out/tileset.json",
show:true
});
After loading, the longitude and latitude coordinates are correct, but the height is generally incorrect and needs to be adjusted. You can refer to the model height adjustment code in the official website example to adjust it to the appropriate height: After the official website example link is adjusted, record the height to be used, slightly modify it, remove the height adjustment box, and
modify Just leave the height as the default value.
2. Creating entities
is a very important thing in cesium. Its attributes include id (unique identifier), name, availability, show (whether to display), description (description, similar details), position, orientation, viewFrom, parent and other basics Attributes and object attributes label (text), billboard (picture), point, box, mode (model) and other graphics (many, see the documentation for details). Object properties have their own properties, including color, size, offset, etc., and some objects have their own specific properties.
A function to create an entity is written and called as follows. The entity contains necessary basic attributes and loads a glb format model.
function sCreateModel(modelUrl,height){
//移除全部实体，可根据情况移除特定实体
viewer.entities.removeAll();
//模型位置
var position=Cesium.Cartesian3.fromDegrees(
120.80020,
32.067639,
height
);
//模型旋转角度
var heading=Cesium.Math.toRadians(45);
var pitch=0;
var roll=0;
var hpr=new Cesium.HeadingPitchRoll(heading,pitch,roll);
//模型朝向：位置+旋转
var orientation=Cesium.Transforms.headingPitchRollQuaternion(
position,
hpr
);
//添加模型实体
var entity=viewer.entities.add({
name:"模型名字",
id:"id",
position:position,
orientation:orientation,
model:{
uri:sPath,
minimumPixelSize:128,
maximumScale:20000
}
});
//场景默认相机跟踪实体
viewer.trackedEntity=entity;
}
//调用创建模型
//常用模型格式都支持，如.fbx,.obj等
sCreateModel( "../Apps/SampleData/models/CesiumAir/Cesium_Air.glb",
5000.0);
There are many properties of the object. You can read the documentation when using it. The properties of an ellipse are written below.
viewer.entities.add({
position:Cesium.Cartesian3.fromDegrees(103.0, 40.0),
name:'Red ellipse on surface with outline',
ellipse:{
semiMinorAxis:300000.0,
semiMajorAxis:300000.0,
height:200000.0,
fill:true,
//半透明颜色
//material:Cesium.Color.RED.withAlpha(0.5),
//用图片填充
material:"./sampledata/images/globe.jpg",
outline:true, //必须设置height，否则ouline无法显示
outlineColor:Cesium.Color.BLUE.withAlpha(0.5),
outlineWidth:10.0//不能设置，固定为1
}
});
When adding an entity, you can add various object attributes, such as text and pictures.
var imgData={
"code":"007",
"text":"1号灯",
"position":{
"long":120.800206,"lat":32.067639,"height":10},
}
function addImgLabel(imgData){
viewer.entities.add( {
name : "图标显示",
id:imgData.id,
position : Cesium.Cartesian3.fromDegrees( imgData.position.long,
imgData.position.lat,
imgData.position.height ),
label : {
//文字标签
showBackground:true,
backgroundColor :new Cesium.Color(1.0, 1.0, 1.0, 1),//Cesium.Color.WHITE,
text : imgData.text,
font : '13pt monospace',
fillColor:Cesium.Color.GREEN,
style : Cesium.LabelStyle.FILL,
outlineWidth : 2,
verticalOrigin : Cesium.VerticalOrigin.CENTER, //垂直方向以底部来计算标签的位置
pixelOffset : new Cesium.Cartesian2( 0, -30 ) //偏移量
},
billboard : {
//图标
image : '../sglImgs/'+tType+'.png',
width : 30,
height : 30
}
} );
}
The approximate display effect is 
that the viewer.entities property is actually an EntityCollecton object, which is a collection of entities. It provides interfaces such as add, remove, removeAll, etc. to manage entities in the scene.
As used above, you can add, delete, etc. manageable entity objects. Please refer to the documentation for details.
3. Entity click implementation
We often need to click on an object to do something. Cesium uses the scene.pick interface to achieve this for us. The following code creates an entity, and when the entity is clicked, the name attribute is displayed in the pop-up box.
//创建一个实体
var entity= viewer.entities.add({
position:Cesium.Cartesian3.fromDegrees(103.0, 40.0),
name:'名字',
ellipse:{
semiMinorAxis:300000.0,
semiMajorAxis:300000.0,
height:200000.0,
fill:true,
//半透明颜色
//material:Cesium.Color.RED.withAlpha(0.5),
//用图片填充
material:"./sampledata/images/globe.jpg",
outline:true, //必须设置height，否则ouline无法显示
outlineColor:Cesium.Color.BLUE.withAlpha(0.5),
outlineWidth:10.0//不能设置，固定为1
}
});
//视角切换到观察实体位置
viewer.zoomTo(entity);
//鼠标左击事件
varhandler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
handler.setInputAction(function(movement) {
var pick = viewer.scene.pick(movement.position);
//if(Cesium.defined(pick)){
if(pick)) {
//弹框显示name属性值
alert(pick.id.name');
}
},Cesium.ScreenSpaceEventType.LEFT_CLICK);
After running this code, click it, and the pop-up box will display the name attribute value, which is the "name";
4. Modify the default map layer.
You need to create an account on the official website and obtain the layer data first (Bing Maps is used by default)
// Remove default base layer
viewer.imageryLayers.remove(viewer.imageryLayers.get(0));
// Add Sentinel-2 imagery
viewer.imageryLayers.addImageryProvider(new Cesium.IonImageryProvider({
assetId : 3954 }));
5. Add terrain data
to display undulating mountains on the map
// Load Cesium World Terrain
viewer.terrainProvider = Cesium.createWorldTerrain({
requestWaterMask : true, // required for water effects
requestVertexNormals : true // required for terrain lighting
});
// Enable depth testing so things behind the terrain disappear.
viewer.scene.globe.depthTestAgainstTerrain = true;
6. Activate solar illumination
and the earth will display real-time night and day display.
// Enable lighting based on sun/moon positions
viewer.scene.globe.enableLighting = true;