cesium教程2-加载显示地形地图

2022-08-15 21:32:13 阅读：188 来源： 互联网

标签：教程 false viewer 是否显示 Cesium cesium true 加载

上面地形数据，是调用cesium官方的地图服务，需要先注册cesium账户，配置cesium的账户token才行

1、在线地形服务的示例代码如下

<!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 = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI5NjE1MDIwOC1jOGYxLTQzZWItYjNhOC1iNjZlMWM1OGYxMDIiLCJpZCI6MTAyODY5LCJpYXQiOjE2NTkwMDA3ODN9.Vy4hW4jpjbZs6ee4BcRl3-cCl-oRGn42e2_Hjbo5nas";
  
  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"
        }));
         
         
         //加载Cesium的在线Asset地形数据--有点慢
         // var terrainProvider = new Cesium.CesiumTerrainProvider({
         //       url : Cesium.IonResource.fromAssetId(1),
         //       requestWaterMask: true, // 请求水体效果所需要的海岸线数据
         //       requestVertexNormals: true, // 请求地形照明数据
         //     });
         //   viewer.terrainProvider = terrainProvider;
         
         //加载Cesium默认的地形数据。Bing在线地形影像--很慢，可以指定mapStyle，详见BingMapsStyle类
         var terrainProvider = Cesium.createWorldTerrain({
           requestWaterMask: true, // 请求水体效果所需要的海岸线数据
           requestVertexNormals: true, // 请求地形照明数据
         });
         viewer.terrainProvider = terrainProvider;
         viewer.scene.globe.depthTestAgainstTerrain = true;//地形遮挡效果开关，打开后地形会遮挡看不到的区域
         viewer.scene.globe.enableLighting = true; //对大气和雾启用动态照明效果
       
       
          //将三维球定位到指定位置，camera是相机，是当前视野范围相机
          //destination是相机的目标位置，参数是经度、纬度、高度
          //orientation是相机朝向
          //    heading-代表镜头左右方向,正值为右,负值为左
          //    pitch-代表镜头上下方向,正值为上,负值为下.
          //    roll-代表镜头左右倾斜,正值,向右倾斜,负值向左倾斜
          viewer.camera.flyTo({
              destination: Cesium.Cartesian3.fromDegrees(114.47004, 37.0904, 20000000),
              orientation: {
                  heading :  Cesium.Math.toRadians(348.4202942851978),
                  pitch : Cesium.Math.toRadians(-89.74026687972041),
                  roll : Cesium.Math.toRadians(0)
              },
              complete:function callback() {
                  // 定位完成之后的回调函数
              }
          });
   }
</script>
</body>
</html>

2、自己下载高精地形数据，并发布服务

下载地址：地理空间数据云 (gscloud.cn)

（1）下载数据

（2）数据处理

下载之后的数据为压缩包，解压之后，在ArcGIS中拼接、裁剪（也可以选择其他软件）

（3）用cesiumlab进行切片

（4）用tomcat或者nginx发布地图服务

把切片结果（文件夹YiChangShi）拷贝至tomcat的webapps文件下，启动服务，记录访问地址http://localhost:7080/YiChangShi/

window.viewer = new Cesium.Viewer('mapContainer', {
        sceneMode: Cesium.SceneMode.SCENE3D,
        infoBox: false, //信息框
        selectionIndicator: false, //绿色框
 
        geocoder: false,//是否显示geocoder小器件，右上角查询按钮
        homeButton: false,//是否显示Home按钮
        sceneModePicker: false,//是否显示3D/2D选择器
        baseLayerPicker: false,//是否显示图层选择器
 
        navigationHelpButton: false,//是否显示右上角的帮助按钮
        animation: false,//是否创建动画小器件，左下角仪表
        timeline: false,//是否显示时间轴
        fullscreenButton: false,//是否显示全屏按钮
 
        // imageryProvider: tdtImageryProvider, // 天地图
        terrainProvider: new Cesium.CesiumTerrainProvider({  
            url:"http://localhost:7080/YiChangShi/",  
            minimumLevel: 0,  
            maximumLevel: 15,  
        }), 
    });

标签：教程,false,viewer,是否,显示,Cesium,cesium,true,加载
来源： https://www.cnblogs.com/tiandi/p/16589679.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

cesium教程2-加载显示地形地图