cesium开发&加载倾斜模型

这次我们测试使用倾斜模型数据，主要是使用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>

最后实现的功能效果如下图所示。

cesium开发&加载倾斜模型

猜你喜欢