cesium教程5-用primitive加载glb和gltf格式的小模型

primitive加载方法更底层，用起来更麻烦，但是效率更高。

 

 完整示例代码：

<!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; //对大气和雾启用动态照明效果
       
          //加载小模型
          addModel("https://data.mars3d.cn/gltf/mars/feiji.glb",120.131292,30.471157,0);
            
          // 将三维球定位到模型
          viewer.camera.flyTo({
              destination: Cesium.Cartesian3.fromDegrees(120.132072,30.471217, 2000),
              orientation: {
                  heading :  Cesium.Math.toRadians(348.4202942851978),
                  pitch : Cesium.Math.toRadians(-89.74026687972041),
                  roll : Cesium.Math.toRadians(0)
              },
              complete:function callback() {
                  // 定位完成之后的回调函数
              }
          });
   }
   function addModel(url,longitude,latitude,height) {
       var modelMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(
           Cesium.Cartesian3.fromDegrees(longitude, latitude, height)
       );
       viewer.scene.primitives.add(Cesium.Model.fromGltf({//Gltf和glb模型都用fromGltf
           url: url,
           modelMatrix: modelMatrix,
            minimumPixelSize : 512,
            maximumScale : 200000,
            scale : 1,
       })
       );
       }
   
        
            
</script>
</body>
</html>

 

posted @ 2022-08-23 21:49  JackGIS  阅读(3499)  评论(0)  编辑  收藏  举报