首页 > 其他分享 >cesium教程3-加载3dtile模型,并调整位置

cesium教程3-加载3dtile模型,并调整位置

时间:2022-08-15 22:33:26浏览次数:54  
标签:tileset 3dtile viewer transform var Cesium cesium height 加载

 

 直接上示例代码:

<!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 onl oad="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>

 

标签:tileset,3dtile,viewer,transform,var,Cesium,cesium,height,加载
From: https://www.cnblogs.com/tiandi/p/16589892.html

相关文章

  • cesium教程2-加载显示地形地图
      上面地形数据,是调用cesium官方的地图服务,需要先注册cesium账户,配置cesium的账户token才行1、在线地形服务的示例代码如下<!DOCTYPEhtml><htmllang="en"><head......
  • cesium教程1-加载显示地图
    1、完整示例代码<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>cesium示例</title><!--引用cesium的js和css,天地图的扩展js--><......
  • Bert bert-base-uncased 模型加载
    1、下载模型相关文件到本地路径https://huggingface.co/bert-base-uncased/tree/main2、修改模型加载,注释为修改前......
  • Element cascader动态加载
    一开始也是网上查找:https://blog.csdn.net/lgh1206/article/details/113932595 看的这位博主的,他是自己创建的数据我这边是与后端联调: <el-cascader......
  • 加载远程vue文件 vue3-sfc-loader
    需求项目在写一些需求的时候,现场可能会有些变动,但是不想从新打包,这种情况可以考虑单独不打包的vue文件注意vue2import{loadModule}from'vue3-sfc-loader/dist/vue2......
  • 微信小程序获取数据时显示加载中
    微信小程序在获取数据时页面显示数据需要加载时间,这时可以使用wx.showLoading(),如果小程序内多次使用 wx.request时,可以对其进行封装在utils文件夹下新建文件network.js......
  • cesium教程-无人机航拍倾斜摄影素材用ContextCapture转换成OSGB格式
    首先软件的下载和安装参考下面链接http://www.xue51.com/soft/53013.html 0、首先打开软件,要打开2个哦。打数据处理开后台ContextCaptureEngine打开处理工具Contex......
  • 华测RTK采集的GPX数据,如何带属性转出GIS常用格式并分类加载管理?
    0.序部分自然资源和规划局经常性的基于华测中绘RTK设备采集点位、轨迹等相关数据。比如需要保护的古树、古建、古道路信息等。后续一旦需要对这些古物进行改造或者方案设......
  • vuecli3+cesium开发环境搭建
    一、vue-cli3+cesium搭建步骤1、vuecreate'yourproject-name'新建你的项目2、安装cesium依赖npminstallcesium--save3、新建cesiumContainer.vue文件,src/views/......
  • cesium常见问题和解决
           ......