无人机航拍的倾斜摄影，用照片和视频处理生成三维模型，一般照片都带有坐标信息，所以一般都能定位的比较准确，但是经常会出现高度偏差，这个时候就需要特殊处理了。
今天航拍建模的效果如下：
这个建模没有裁剪，一般周边其他东西都要裁剪和删除。
然后直接上完整代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>天地图</title>
<!-- 引用cesium的js和css，天地图的扩展js -->
<script src="js/cesium1.97/Cesium.js"></script>
<script src="js/cesiumTdt.js" ></script>
<link rel="stylesheet" href="js/cesium1.97//Widgets/widgets.css"/>
<style type="text/css">
html, body, #tiandituContainer {
width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden;
}
</style>
</head>
<body onl oad="loadData()">
<div id="tiandituContainer">
</div>
<script>
var cesiumAsset='eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI5NjE1MDIwOC1jOGYxLTQzZWItYjNhOC1iNjZlMWM1OGYxMDIiLCJpZCI6MTAyODY5LCJpYXQiOjE2NTkwMDA3ODN9.Vy4hW4jpjbZs6ee4BcRl3-cCl-oRGn42e2_Hjbo5nas';
var tiandituTk='4357fe5b6eab1e1bb57f99e68ae528f8';
// 服务负载子域
var subdomains=['0','1','2','3','4','5','6','7'];
Cesium.Ion.defaultAccessToken = cesiumAsset;
var viewer;
function loadData()
{
//默认会调用微软virtualearth地图
viewer = new Cesium.Viewer('tiandituContainer',{
animation:false, //是否显示动画控件
homeButton:true, //是否显示home键
geocoder:true, //是否显示地名查找控件，如果设置为true，则无法查询
baseLayerPicker:true, //是否显示图层选择控件
timeline:false, //是否显示时间线控件
fullscreenButton:true, //是否全屏显示
infoBox:true, //是否显示点击要素之后显示的信息
sceneModePicker:true, //是否显示投影方式控件 三维/二维
navigationInstructionsInitiallyVisible:false, //导航指令
navigationHelpButton:false, //是否显示帮助信息控件
selectionIndicator:false, //是否显示指示器组件
});
//默认的Cesium会加载一个bingMap底图，网络不太好，一般要先去掉这个默认的
//viewer.imageryLayers.remove(viewer.imageryLayers.get(0));
// 隐藏cesium ion
viewer._cesiumWidget._creditContainer.style.display = "none";
//http://211.143.122.110:18062/3dtile/home_draco/tileset.json
addSlope("http://211.143.122.110:18062/3dtile/home_draco/tileset.json",0);
//getMousePosition();
}
// cesium获取鼠标点击的位置坐标
function getMousePosition()
{
// 首先需要注册cesium鼠标事件，通过cesium的ScreenSpaceEventHandler函数处理用户输入事件
let handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas)
// 设置要在输入事件上执行的功能，官方文档查询ScreenSpaceEventType可以看到所有的cesium鼠标事件
handler.setInputAction((event) => {
//屏幕坐标=》迪卡尔空间直角坐标
let cartesian3 = viewer.scene.camera.pickEllipsoid(event.position, viewer.scene.globe.ellipsoid)
// 防止点击到地球之外报错，加个判断
if (cartesian3 && Cesium.defined(cartesian3)) {
//cartographic是地理坐标（弧度）
let cartographic = Cesium.Cartographic.fromCartesian(cartesian3)
//再转换成经纬度
let lng = Cesium.Math.toDegrees(cartographic.longitude)
let lat = Cesium.Math.toDegrees(cartographic.latitude)
let height = cartographic.height;
console.log(lng, lat, height);
}
}, Cesium.ScreenSpaceEventType.LEFT_CLICK)
}
function addSlope(url,height) {
var tileset = viewer.scene.primitives.add(
new Cesium.Cesium3DTileset({
url:url,
maximumScreenSpaceError: 2,//默认16,最大屏幕空间错误
maximumNumberOfLoadedTiles: 1000,
maximumMemoryUsage:1024//默认512,内存MB的最大数量
}));
tileset.readyPromise.then((tileset) => {
tileSet(tileset,height)
viewer.zoomTo(tileset);//视野定位到模型处
});
}
function tileSet(tileset, height)
{
//3dtile模型的边界球体
var boundingSphere = tileset.boundingSphere;
//迪卡尔空间直角坐标=>地理坐标（弧度制）
var cartographic_original = Cesium.Cartographic.fromCartesian(boundingSphere.center);
//地理坐标（弧度制）=>迪卡尔空间直角坐标
var Cartesian3_original = Cesium.Cartesian3.fromRadians(cartographic_original.longitude, cartographic_original.latitude, cartographic_original.height);
var Cartesian3_offset = Cesium.Cartesian3.fromRadians(cartographic_original.longitude, cartographic_original.latitude, height);
//获得地面和offset的转换
var translation = Cesium.Cartesian3.subtract(Cartesian3_offset, Cartesian3_original, new Cesium.Cartesian3());
//修改模型矩阵
tileset.modelMatrix = Cesium.Matrix4.fromTranslation(translation);
}
</script>
</body>
</html>
本案例中对模型高度调整，是参考教程3种的方法进行设置，具体全参数设置，可以参考教程3.
标签：教程,tileset,cartographic,viewer,var,Cesium,cesium,height,加载 From： https://www.cnblogs.com/tiandi/p/16785916.html