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


     上面地形数据,是调用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 onload="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,  
            }), 
        });

  • 相关阅读:
    Jquery 复习01
    工具和资源
    常用 npm 和 yarn 命令
    Jenkins 安装 ruby-runtime 出错
    shiro+jwt 实现权限控制
    Sql Server 2008 R2 查询一个实例中存在某个表的数据库
    使用sqlcmd执行连接的时候一直报有语法错误
    Linux信号
    记一次内存爆涨分析 , JVM命令使用
    Java,List操作技巧
  • 原文地址:https://www.cnblogs.com/tiandi/p/16589679.html
Copyright © 2020-2023  润新知