倾斜摄影模型在本地用nginx开一个虚拟主机进行测试,具体方法会单独讲解,切斜摄影的模型你们就自己在网上下载吧
<template>
<!-- 导入倾斜摄影数据 -->
<div class="cesium">
<div id="cesiumContainer"></div>
</div>
</template>
<script>
export default {
data() {
return {};
},
mounted() {
this.mapInit();
},
methods: {
mapInit() {
Cesium.Ion.defaultAccessToken = "你的token";//具体申请方法在https://blog.csdn.net/weixin_45660011/article/details/127244399中有讲解
var viewer = new Cesium.Viewer("cesiumContainer", {
animation: false, // 是否显示动画控件
baseLayerPicker: false, // 是否显示图层选择控件
vrButton: false, // 是否显示VR控件
geocoder: false, // 是否显示地名查找控件
timeline: false, // 是否显示时间线控件
sceneModePicker: false, // 是否显示投影方式控件
navigationHelpButton: false, // 是否显示帮助信息控件
navigationInstructionsInitiallyVisible: false, // 帮助按钮,初始化的时候是否展开
infoBox: false, // 是否显示点击要素之后显示的信息
fullscreenButton: false, // 是否显示全屏按钮
selectionIndicator: false, // 是否显示选中指示框
homeButton: false, // 是否显示返回主视角控件
scene3DOnly: false, // 如果设置为true,则所有几何图形以3D模式绘制以节约GPU资源
});
viewer._cesiumWidget._creditContainer.style.display = "none"; // 隐藏版权
// 倾斜摄影模型
// viewer.scene.globe.depthTestAgainstTerrain = true; //重要 固定物体在位置上
viewer.scene.screenSpaceCameraController.minimumZoomDistance = 100; //限制地图浏览范围的观看最低高度
var palaceTileset = new Cesium.Cesium3DTileset({
url: "http://127.0.0.1/tileset.json", //nginx开服务,加载倾斜摄影的模型
});
palaceTileset.readyPromise.then(function (tileset) {
var cartographic = Cesium.Cartographic.fromCartesian(
tileset.boundingSphere.center
);
var surface = Cesium.Cartesian3.fromRadians(
cartographic.longitude,
cartographic.latitude,
0
);
var offset = Cesium.Cartesian3.fromRadians(
cartographic.longitude + 0.000065,//调整位置
cartographic.latitude - 0.000002,//调整位置
-70.0 //填高度差值
);
var translation = Cesium.Cartesian3.subtract(
offset,
surface,
new Cesium.Cartesian3()
);
tileset.modelMatrix = Cesium.Matrix4.fromTranslation(translation);
viewer.scene.primitives.add(tileset);
viewer.flyTo(tileset);
});
viewer.scene.primitives.add(palaceTileset);
},
},
};
</script>
<style lang='scss' scoped>
.cesium {
position: absolute;
width: 100%;
height: 100%;
#cesiumContainer {
width: 100%;
height: 100%;
}
}
</style>