1. Importez des données de photographie oblique.
Tout d'abord, exportez la photographie oblique sous forme de fichier osgb, puis utilisez l'outil 3dtiles pour la convertir en un fichier 3dtiles pouvant être utilisé par le césium. L'outil de conversion est fourni par une autre major sur GitHub. Le lien est : le code de chargement du césium de l'outil de conversion 3dtiles est
:
var tileset = new Cesium.Cesium3DTileset({
url: "../out/tileset.json",
show:true
});
Après le chargement, les coordonnées de longitude et de latitude sont correctes, mais la hauteur est généralement incorrecte et doit être ajustée. Vous pouvez vous référer au code de réglage de la hauteur du modèle dans l'exemple du site officiel pour l'ajuster à la hauteur appropriée : Après l'exemple du site officiel Le lien est ajusté, enregistrez la hauteur à utiliser, modifiez-la légèrement, supprimez la boîte de réglage de la hauteur et
modifiez. Laissez simplement la hauteur comme valeur par défaut.
2. Création d'entités
Les entités sont une chose très importante dans le césium. Ses attributs incluent l'identifiant (identifiant unique), le nom, la disponibilité, l'affichage (si afficher), la description (description, détails similaires), la position, l'orientation, viewFrom, parent et autres. bases Attributs et attributs d'objet étiquette (texte), panneau d'affichage (image), point, boîte, mode (modèle) et autres graphiques (nombreux, voir la documentation pour plus de détails). Les propriétés des objets ont leurs propres propriétés, notamment la couleur, la taille, le décalage, etc., et certains objets ont leurs propres propriétés spécifiques.
Une fonction pour créer une entité est écrite et appelée comme suit. L'entité contient les attributs de base nécessaires et charge un modèle au format glb.
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);
Il existe de nombreuses propriétés de l'objet. Vous pouvez lire la documentation lors de son utilisation. Les propriétés d'une ellipse sont écrites ci-dessous.
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
}
});
Lors de l'ajout d'une entité, vous pouvez ajouter divers attributs d'objet, tels que du texte et des images.
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
}
} );
}
L'effet d'affichage approximatif est 
que la propriété viewer.entities est en fait un objet EntityCollection, qui est une collection d'entités. Il fournit des interfaces telles que l'ajout, la suppression, la suppression de tous, etc. pour gérer les entités de la scène.
Comme utilisé ci-dessus, vous pouvez ajouter, supprimer, etc. des objets d'entité gérables. Veuillez vous référer à la documentation pour plus de détails.
3. Implémentation du clic sur l'entité
Nous avons souvent besoin de cliquer sur un objet pour faire quelque chose. Cesium utilise l'interface scene.pick pour y parvenir pour nous. Le code suivant crée une entité et lorsque l'on clique sur l'entité, l'attribut de nom s'affiche dans la boîte contextuelle.
//创建一个实体
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);
Après avoir exécuté ce code, cliquez dessus et la boîte de dialogue affichera la valeur de l'attribut name, qui est le « nom » ;
4. Modifiez la couche cartographique par défaut.
Vous devez d'abord créer un compte sur le site officiel et obtenir les données de la couche (Bing Maps est utilisé par défaut)
// Remove default base layer
viewer.imageryLayers.remove(viewer.imageryLayers.get(0));
// Add Sentinel-2 imagery
viewer.imageryLayers.addImageryProvider(new Cesium.IonImageryProvider({
assetId : 3954 }));
5. Ajoutez des données de terrain
pour afficher les montagnes vallonnées sur la carte
// 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. Activez l'éclairage solaire
et la terre affichera l'affichage nuit et jour en temps réel.
// Enable lighting based on sun/moon positions
viewer.scene.globe.enableLighting = true;