当我们通过Sketch Up或者3Ds max建模生成三维模型，如何将模型展示到我们的三维地图上，这个过程虽然很基础，但是也非常重要，是各项业务功能研发的基础。
1.对于glb/gltf格式的数据，数据转换过程详见obj2gltf格式转换详细过程。
2.对于成规模的大量的三维模型或者是倾斜摄影模型，Cesium加载gltf格式的数据将会变得困难，通常使用CesiumLab等工具进行处理，生成3D Tiles格式的数据。
3.Cesium加载glb/gltf格式数据。
//1.使用entities方法加载gltf格式数据到cesium
var entity = viewer.entities.add({
position: Cesium.Cartesian3.fromDegrees(经度,纬度),
model: {
uri: '数据路径',
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
color: Cesium.Color.GAINSBORO,
colorBlendAmount: 0.4
}
});
//2.使用Primitives方法加载gltf格式数据到cesium
var modelMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(
Cesium.Cartesian3.fromDegrees(经度,纬度));
var model = scene.primitives.add(Cesium.Model.fromGltf({
url : '数据路径',
modelMatrix : modelMatrix,
}));
4.Cesium加载3D Tiles格式数据
var tileset= new Cesium.Cesium3DTileset({
url: '', //数据路径
skipLevelOfDetail: true,
maximumScreenSpaceError: 2, //最大的屏幕空间误差
maximumNumberOfLoadedTiles: 10000000, //最大加载瓦片个数
});
viewer.scene.primitives.add(tileset);
5.Cesium加载倾斜摄影数据
var tileset = new Cesium.Cesium3DTileset({
url:'路径'
});
viewer.scene.primitives.add(tileset);
viewer.zoomTo(tileset);
6.源代码
加载gltf格式数据
html,
body,
#cesiumContainer {
width: 100%;
height: 100%;
margin: 0;3
padding: 0;
overflow: hidden;
background-color: #000000;
}
//天地图 影像
var TDT_IMG_C="http://{s}.tianditu.gov.cn/img_c/wmts?service=wmts&request=GetTile&version=1.0.0" +
"&LAYER=img&tileMatrixSet=c&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}" +
"&style=default&format=tiles&tk=自己的Key";
//标注
var TDT_CIA_C="http://{s}.tianditu.gov.cn/cia_c/wmts?service=wmts&request=GetTile&version=1.0.0" +
"&LAYER=cia&tileMatrixSet=c&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}" +
"&style=default&format=tiles&tk=自己的Key";
Cesium.Ion.defaultAccessToken = "自己的CesiumION";
var viewer = new Cesium.Viewer('cesiumContainer', {
terrainProvider: Cesium.createWorldTerrain(),
animation: false, //动画控制不显示
timeline: false, //时间线不显示
fullscreenButton: false, //全屏按钮不显示
infoBox: false,
geocoder:false, //右上角 搜索
homeButton:false, //右上角 Home
sceneModePicker:false, //右上角 2D/3D切换
baseLayerPicker:false, //右上角 地形
navigationHelpButton:false, //右上角 Help
imageryProvider:new Cesium.WebMapTileServiceImageryProvider({
url: TDT_IMG_C,
layer: "tdtImg_c",
style: "default",
format: "tiles",
tileMatrixSetID: "c",
subdomains:["t0","t1","t2","t3","t4","t5","t6","t7"],
tilingScheme:new Cesium.GeographicTilingScheme(),
tileMatrixLabels:["1","2","3","4","5","6","7","8","9","10","11","12","13","14","15","16","17","18","19"],
maximumLevel:50,
show: false
})
});
viewer.imageryLayers.addImageryProvider(new Cesium.WebMapTileServiceImageryProvider({ //调用影响中文注记服务
url: TDT_CIA_C,
layer: "tdtImg_c",
style: "default",
format: "tiles",
tileMatrixSetID: "c",
subdomains:["t0","t1","t2","t3","t4","t5","t6","t7"],
tilingScheme:new Cesium.GeographicTilingScheme(),
tileMatrixLabels:["1","2","3","4","5","6","7","8","9","10","11","12","13","14","15","16","17","18","19"],
maximumLevel:50,
show: false
}));
viewer._cesiumWidget._creditContainer.style.display = "none";
var scene=viewer.scene;
//1.使用entities方法加载gltf格式数据到cesium
var entity = viewer.entities.add({
position: Cesium.Cartesian3.fromDegrees(经纬度),
model: {
uri: 'data/JK11132.gltf',
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
color: Cesium.Color.GAINSBORO,
colorBlendAmount: 0.4
}
});
//2.使用Primitives方法加载gltf格式数据到cesium
var modelMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(
Cesium.Cartesian3.fromDegrees(经纬度));
var model = scene.primitives.add(Cesium.Model.fromGltf({
url : 'data/JK11132.gltf',
modelMatrix : modelMatrix,
}));
//3.加载3D Tiles格式数据到Cesium
var tileset= new Cesium.Cesium3DTileset({
url: '', //数据路径
skipLevelOfDetail: true,
maximumScreenSpaceError: 2, //最大的屏幕空间误差
maximumNumberOfLoadedTiles: 10000000, //最大加载瓦片个数
});
viewer.scene.primitives.add(tileset);
//4.加载倾斜摄影数据到Cesium
var tileset3 = new Cesium.Cesium3DTileset({
url:'' //数据路径
});
viewer.scene.primitives.add(tileset3);
viewer.zoomTo(tileset3);
// viewer.scene.globe.depthTestAgainstTerrain = false; //关闭深度测试