Cesium 加载3DTile

最新推荐文章于 2024-05-14 16:13:59 发布
As_Xx_Ls
最新推荐文章于 2024-05-14 16:13:59 发布
阅读量788
点赞数 1
文章标签： 3d
原文链接：https://www.cnblogs.com/tiandi/p/16589892.html
版权
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>cesium示例</title>
  <!-- 引用cesium的js和css，天地图的扩展js -->
  <script src="https://cesium.com/downloads/cesiumjs/releases/1.92/Build/Cesium/Cesium.js"></script>
  <link rel="stylesheet" href="https://cesium.com/downloads/cesiumjs/releases/1.92/Build/Cesium/Widgets/widgets.css"/>
  <script src="http://api.tianditu.gov.cn/cdn/plugins/cesium/cesiumTdt.js" ></script>
  <style type="text/css">
    html, body, #tiandituContainer {
      width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden;
    }
  </style>
 
</head>
<body onload="loadData()">
<div id="tiandituContainer">
</div>
<script>
    
  //Cesium官网注册后的授权token，没有token不能使用cesium在线的地形服务，这里需要改成自己的token
  Cesium.Ion.defaultAccessToken = "";
  
  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的logo
        viewer._cesiumWidget._creditContainer.style.display = "none"; 
        //默认的Cesium会加载一个bingMap底图，这个地图网络不太好，一般要先去掉这个默认的
        viewer.imageryLayers.remove(viewer.imageryLayers.get(0));
        
        //arcgis在线影像地图
        viewer.imageryLayers.addImageryProvider(new Cesium.ArcGisMapServerImageryProvider({
            name:"img_arcgis",
            url:"https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer"
        }));
         
         viewer.scene.globe.depthTestAgainstTerrain = true;//地形遮挡效果开关，打开后地形会遮挡看不到的区域
         viewer.scene.globe.enableLighting = true; //对大气和雾启用动态照明效果
       
       add3DTiles("https://data.mars3d.cn/3dtiles/max-fsdzm/tileset.json",121.479394, 29.791416,8);
   }
   
           function add3DTiles(url,longitude, latitude, height) {
                var tileset = viewer.scene.primitives.add(
                            new Cesium.Cesium3DTileset({
                                url:url,
                                maximumScreenSpaceError: 2,//默认16,最大屏幕空间错误
                                //maximumNumberOfLoadedTiles: 1000,
                                maximumMemoryUsage:512//默认512,内存MB的最大数量
                            }));
                tileset.readyPromise.then((tileset) => {
                        
                            //模型加载后可能会有便宜和高度不对，需要对模型进行调整
                            tileSet(tileset,longitude, latitude, height)
                            //tileSetAll(tileset,longitude, latitude, height,0,0,0,1);
                                
                    viewer.zoomTo(tileset);
                });
            }
            //利用translation对模型的经度、纬度、高度进行修改
               function tileSet(tileset,longitude, latitude, height)
               {
                   //3dtile模型的边界球体
                   var boundingSphere = tileset.boundingSphere;
                   //迪卡尔空间直角坐标=>地理坐标（弧度制）
                   var cartographic_original = Cesium.Cartographic.fromCartesian(boundingSphere.center);
                   //设置新的经度、纬度、高度
                   var cartographic_offset  = Cesium.Cartographic.fromDegrees(longitude, latitude, height)
                   //地理坐标（弧度制）=>迪卡尔空间直角坐标
                   var Cartesian3_original = Cesium.Cartesian3.fromRadians(cartographic_original.longitude, cartographic_original.latitude, cartographic_original.height);
                   var Cartesian3_offset  = Cesium.Cartesian3.fromRadians(cartographic_offset.longitude, cartographic_offset.latitude, cartographic_offset.height);
                   //获得地面和offset的转换
                   var translation = Cesium.Cartesian3.subtract(Cartesian3_offset, Cartesian3_original, new Cesium.Cartesian3());
                   //修改模型矩阵
                   tileset.modelMatrix = Cesium.Matrix4.fromTranslation(translation);
               }
            //利用transform对模型的所有参数进行修改
               function tileSetAll(tileset,longitude,latitude,height,rotateX,rotateY,rotateZ,scale)
               {
                     //旋转角度设置
                     var mx = Cesium.Matrix3.fromRotationX(Cesium.Math.toRadians(rotateX));
                     var my = Cesium.Matrix3.fromRotationY(Cesium.Math.toRadians(rotateY));
                     var mz = Cesium.Matrix3.fromRotationZ(Cesium.Math.toRadians(rotateZ));
                     var rotationX = Cesium.Matrix4.fromRotationTranslation(mx);
                     var rotationY = Cesium.Matrix4.fromRotationTranslation(my);
                     var rotationZ = Cesium.Matrix4.fromRotationTranslation(mz);
                     //平移 修改经纬度
                     var position = Cesium.Cartesian3.fromDegrees(longitude,latitude,height);
                     var transform = Cesium.Transforms.eastNorthUpToFixedFrame(position);
                     //旋转、平移矩阵相乘
                     Cesium.Matrix4.multiply(transform, rotationX, transform);
                     Cesium.Matrix4.multiply(transform, rotationY, transform);
                     Cesium.Matrix4.multiply(transform, rotationZ, transform);
                     //缩放 修改缩放比例
                     var scale1 = Cesium.Matrix4.fromUniformScale(scale);
                     Cesium.Matrix4.multiply(transform, scale1, transform);
                     //赋值给tileset
                     tileset._root.transform = transform;
   
               }
</script>
</body>
</html>