1. 斜め写真データをインポートする
まず、斜め写真を osgb ファイルとしてエクスポートし、次に 3dtiles ツールを使用して、GitHub で別のメジャーが提供する、セシウムで使用できる 3dtiles ファイルに変換します。は: 3dtiles 変換ツール セシウム読み込みコードは
:
var tileset = new Cesium.Cesium3DTileset({
url: "../out/tileset.json",
show:true
});
ロード後、経度と緯度の座標は正しいですが、高さは一般に正しくないため、調整する必要があります。公式 Web サイトの例にあるモデルの高さ調整コードを参照して、適切な高さに調整できます: 公式 Web サイトの例の後リンクを調整し、使用する高さを記録し、わずかに変更します。高さ調整ボックスを削除して変更
します。高さはデフォルト値のままにしておきます。
2. Cesium ではエンティティの作成は
非常に重要であり、その属性には ID (一意の識別子)、名前、可用性、表示 (表示するかどうか)、説明 (説明、同様の詳細)、位置、向き、viewFrom、親などの基本情報が含まれます属性とオブジェクト属性のラベル (テキスト)、ビルボード (画像)、ポイント、ボックス、モード (モデル)、およびその他のグラフィックス (多く、詳細についてはドキュメントを参照)。オブジェクトのプロパティには、色、サイズ、オフセットなどの独自のプロパティがあり、一部のオブジェクトには独自の特定のプロパティがあります。
エンティティを作成する関数は、次のように作成して呼び出します。エンティティには必要な基本属性が含まれ、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);
オブジェクトのプロパティは多数ありますが、使用する際はドキュメントを参照してください。楕円のプロパティは以下に書かれています。
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
}
});
エンティティを追加するときに、テキストや画像などのさまざまなオブジェクト属性を追加できます。
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
}
} );
}
おおよその表示効果は、
viewer.entities プロパティが実際にはエンティティのコレクションである EntityCollecton オブジェクトであり、シーン内のエンティティを管理するための add、remove、removeAll などのインターフェイスを提供します。
上記のように、管理可能なエンティティ オブジェクトの追加、削除などが可能です。詳細はドキュメントを参照してください。
3. エンティティ クリックの実装
何かをするためにオブジェクトをクリックする必要があることがよくありますが、Cesium は scene.pick インターフェイスを使用してこれを実現します。次のコードはエンティティを作成し、エンティティをクリックすると、ポップアップ ボックスに name 属性が表示されます。
//创建一个实体
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);
このコードを実行した後、それをクリックすると、ポップアップ ボックスに name 属性値 (「名前」) が表示されます。
4. デフォルトのマップレイヤーを変更するには、
まず公式 Web サイトでアカウントを作成し、レイヤーデータを取得する必要があります (デフォルトでは Bing Maps が使用されます)。
// Remove default base layer
viewer.imageryLayers.remove(viewer.imageryLayers.get(0));
// Add Sentinel-2 imagery
viewer.imageryLayers.addImageryProvider(new Cesium.IonImageryProvider({
assetId : 3954 }));
5. 地形データを追加して
地図上に起伏のある山々を表示
// 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. ソーラーイルミネーションを有効にする
と、地球にリアルタイムの夜と昼の表示が表示されます。
// Enable lighting based on sun/moon positions
viewer.scene.globe.enableLighting = true;