这次我们测试使用倾斜模型数据,主要是使用cesiumlab实验室工具将osgb数据转为json格式的倾斜模型,然后加载,但是在加载的时候需要特别注意的是这次模型的位置矩阵。否则可能会出现当数据已经处理好了,但是由于模型数据数据并不在视角内。以为没有加载成功。下面是使用cesium控件可以动态调整模型的高度一个demo。
<!DOCTYPE html>
<html lang="en">
<html>
<head>
<meta charset="utf-8">
<!-- Tell IE to use the latest, best version. -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- Make the application on mobile take up the full browser screen and disable user scaling. -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<title>Cesium</title>
<script src="CesiumAPI/Cesium/Cesium.js"></script>
<script src="js/jquery-1.8.0.min.js"></script>
<style>
@import url(CesiumAPI/Cesium/Widgets/widgets.css);
@import url(css/bucket.css);
#toolbar {
background: rgba(42, 42, 42, 0.8);
padding: 4px;
border-radius: 4px;
}
#toolbar input {
vertical-align: middle;
padding-top: 2px;
padding-bottom: 2px;
}
</style>
</head>
<body>
<div id="cesiumContainer" class="fullSize"></div>
<div id="toolbar">
<div>Height</div>
<input type="range" min="-500.0" max="400.0" step="1" data-bind="value: height, valueUpdate: 'input'">
<input type="text" size="5" data-bind="value: height">
</div>
<script>
var viewer = new Cesium.Viewer('cesiumContainer',{
animation:false,//是否创建动画小器件,左下角仪表
timeline: false,//是否显示时间轴
sceneModePicker: false,//是否显示3D/2D选择器
baseLayerPicker: true,//是否显示图层选择器
geocoder: false,//是否显示geocoder小器件,右上角查询按钮
scene3DOnly: true,//如果设置为true,则所有几何图形以3D模式绘制以节约GPU资源
navigationHelpButton: false,//是否显示右上角的帮助按钮
homeButton: false,//是否显示Home按钮
infoBox: true,//是否显示信息框
showRenderLoopErrors: false//如果设为true,将在一个HTML面板中显示错误信息
});
var lng=106.81381210950138;
var lat=26.302732522910524;
var height=0;
var modelMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(
Cesium.Cartesian3.fromDegrees(lng, lat, height));
viewer.scene.globe.depthTestAgainstTerrain = true;
var viewModel = {
height: 0
};
Cesium.knockout.track(viewModel);
var toolbar = document.getElementById('toolbar');
Cesium.knockout.applyBindings(viewModel, toolbar);
var m = Cesium.Transforms.eastNorthUpToFixedFrame(
Cesium.Cartesian3.fromDegrees(108.9594, 34.2195, 0));
var tileset = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({
url: 'http://localhost:8080/Cesium/helloword/data/osgbresult/tileset.json',
//url: 'http://localhost:8080/Cesium/helloword/data/Batched/BatchedColors/tileset.json',
maximumScreenSpaceError: 2,
maximumNumberOfLoadedTiles: 1000,
modelMatrix: m
}));
viewer.scene.primitives.add(tileset);
tileset.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, cartographic.latitude, -470);
var translation = Cesium.Cartesian3.subtract(offset, surface, new Cesium.Cartesian3());
tileset.modelMatrix = Cesium.Matrix4.fromTranslation(translation);
viewer.scene.primitives.add(tileset);
viewer.zoomTo(tileset, new Cesium.HeadingPitchRange(0.0, -0.5, tileset.boundingSphere.radius * 2.0));
}).otherwise(function(error) {
console.log(error);
});
Cesium.knockout.getObservable(viewModel, 'height').subscribe(function(height) {
height = Number(height);
if (isNaN(height)) {
return;
}
var cartographic = Cesium.Cartographic.fromCartesian(tileset.boundingSphere.center);
var surface = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, 0.0);
var offset = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, height);
var translation = Cesium.Cartesian3.subtract(offset, surface, new Cesium.Cartesian3());
tileset.modelMatrix = Cesium.Matrix4.fromTranslation(translation);
});
</script>
</body>
</html>
最后实现的功能效果如下图所示。
更多内容,请关注公众号