本人刚接触cesium不久,在学习加载3Dtiles的时候遇到了问题。
似乎在我写的代码没有问题的情况下,3Dtiles并没有加载,同时也没有任何报错
代码如下:
<template>
<div id="cesiumContainer"></div>
</template>
<script setup>
import * as Cesium from 'cesium';
import { onMounted } from 'vue';
onMounted(()=>{
debugger
var custom = new Cesium.ArcGisMapServerImageryProvider({
url:'//services.arcgisonline.com/ArcGis/rest/services/World_Street_Map/MapServer'
})
Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI4OGY5Yzk2Zi1hNmI0LTQ0M2YtYjRmMC04OTNkYTc4NmRjY2IiLCJpZCI6MTEyOTIwLCJpYXQiOjE2NjcyNzExMTZ9.rNwRRCR7YJCyRb80s71HllYaFQqkr0qXYxUowTL0BD8';
var viewer = new Cesium.Viewer('cesiumContainer', {
//默认属性配置
homeButton: false, //是否显示Home按钮
sceneModePicker: true ,//是否显示3D/2D选择器
navigationHelpButton: false, //是否显示帮助信息按钮
timeline:false,//隐藏时间轴
infoBox:false,
baseLayerPicker:true,
imageryProvider:custom,
requesWaterMask:true,
requestVertexNormals:true,
})
viewer._cesiumWidget._creditContainer.style.display = "none";
viewer.camera.setView({
destination:new Cesium.Cartesian3(1332761,-4662399,4137888),
orientation:{
heading:0.60,
pitch:-0.66}
})
//加载3Dtiles模型
var city = viewer.scene.primitives.add(
new Cesium.Cesium3DTileset({
url: Cesium.IonResource.fromAssetId(75343),
})
)
})
</script>
<style>
#app{
font-family: Avenir,Helvetica,Arial,sans-serif;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
text-align:center;
color:#2c3e50;
}
html,body,#cesiumContainer{
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
}
</style>
然后在该代码下,运行的效果如图
恳请各位能帮我解答一下,感谢
代码示例
viewer = new Cesium.Viewer("cesiumContainer", {
terrainProvider: Cesium.createWorldTerrain(),
});
// 加载3Dtiles文件
tileSet = new Cesium.Cesium3DTileset({
// 这里的地址可以是本地地址或者是网络地址。如果是网络地址,可能会出现跨域问题,建议使用nginx服务做跨域处理
url: "3DTiles/tileset/tileset.json",
//maximumScreenSpaceError: 2, //最大的屏幕空间误差
//maximumNumberOfLoadedTiles: 1000, //最大加载瓦片个数
});
tileSet.readyPromise.then((tileset) => {
viewer.scene.primitives.add(tileset);
boundingSphereCenter = tileset.boundingSphere.center // 后续的变换需要这个变量
// 定位到该模型
viewer.zoomTo(
tileset,
// cesium方位角,可以试着调节参数掌握api的使用
new Cesium.HeadingPitchRange(
0.0,
-0.5,
tileset.boundingSphere.radius * 4.0
)
);
})