上面地形数据，是调用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,

        }),

    });

cesium教程2-加载显示地形地图的更多相关文章

  1. leaflet-webpack 入门开发系列二加载不同在线地图切换显示（附源码下载）

    前言 leaflet-webpack 入门开发系列环境知识点了解: node 安装包下载webpack 打包管理工具需要依赖 node 环境,所以 node 安装包必须安装,上面链接是官网下载地址 w ...

  2. 1.BMap(百度地图)第二次加载显示不全

    问题: bmap第一次加载显示没问题: 第二次 再次加载这个页面时,地图的显示出现了问题: . 分析问题出现原因:你要确保dom创建后且处于显示状态(即display不能为none)才能再次初始化地图 ...

  3. Ogre 编辑器二(用Ogre的地形组件加载天龙八部地形)

    主界面如上文设计完成后,场景刚开始添加了是Ogre例子里的,发现场景里实物太少,于是想到直接把天龙的场景拿下来,天龙网上有源码,参考了下,把天龙的地形用Ogre的地形组件完成了下,如下是效果图: 因为 ...

  4. OpenLayers学习笔记（一）—在线加载谷歌影像地图&离线加载本地瓦片地图

    实现根据在线离线判断加载地图, 在线加载谷歌影响地图, 离线加载本地瓦片地图 作者: 狐狸家的鱼 Github: 八至 html代码 <div id="map" tabind ...

  5. cesium初探之加载三维模型

    项目需要用到二三维地图切换,本来准备研究ArcGIS js for Web 3d,但考虑到版权的问题,决定试着用cesium来做,于是花了2天时间抱着试试看的心态把cesium从环境配置到加载三维模型 ...

  6. Cesium for Unreal加载倾斜摄影

    本文介绍UE4中通过Cesium插架加载本地倾斜摄影模型.Cesium for Unreal插件运行在UE环境何总运行Cesium,这样方便做一个GIS应用. 安装Cesium for Unreal插 ...

  7. bootstrap模态框modal使用remote第二次加载显示相同内容解决办法

    bootstrap模态框modal使用remote动态加载内容,第二次加载显示相同内容解决办法 bootstrap的modal中,使用remote可以动态加载页面到modal-body中,并弹窗显示 ...

  8. [ActionScript 3.0] AS3.0 动态加载显示内容

    可以将下列任何外部显示资源加载到 ActionScript 3.0 应用程序中: 在 ActionScript 3.0 中创作的 SWF 文件 — 此文件可以是 Sprite.MovieClip 或扩 ...

  9. SDWebImage 加载显示 GIF 与性能问题

    SDWebImage 加载显示 GIF 与性能问题 SDWebImage 4.0 之前,可以用 UIImageView 显示 GIF 图.如果 SDWebImage 4.0 还这么做,只会显示静态图. ...

  10. SDWebImage 加载显示 WebP 与性能问题

    SDWebImage 加载显示 WebP 与性能问题 本文包含自定义下载操作 SDWebImageDownloaderOperation 与编码器 SDWebImageCoder.SDWebImage ...

随机推荐

  1. Csharp线程

    CSharpe线程 目录 CSharpe线程 C#如何操作线程 Thread 1. Thread如何开启一个线程呢? 2. Thread中常见的API 3. thread的扩展封装 threadpoo ...

  2. #高精度，排列组合、dp#JZOJ 2755 树的计数

    题目 求\(n\)个点直径为\(d\)的标号树个数(多组数据) (\(0\leq d\leq n\leq 50,n>0\)) 分析 首先特判一下\(n==d\)无解,\(d=0\)除非只有一个点 ...

  3. #李超线段树 or 斜率优化+CDQ分治#洛谷 4655 [CEOI2017]Building Bridges

    题目 分析 列出方程即为\(dp[i]=\min\{dp[j]+(h[i]-h[j])^2+s[i-1]-s[j]\}\) \(dp[j]+h[j]^2-s[j]=2*h[i]*h[j]+dp[i]- ...

  4. PhotoView——支持图片缩放、平移、旋转的一个优雅的三方组件

    简介 PhotoView是OpenAtom OpenHarmony(简称"OpenHarmony")系统的一款图片缩放及浏览的三方组件,用于声明式应用开发,支持图片缩放.平移.旋转 ...

  5. 基于OpenHarmony的智能金属探测器

    一.简介 智能金属探测器是基于 OpenAtom  OpenHarmony(以下简称"OpenHarmony")操作系统,利用电磁感应原理来探测周围的金属物体.该样例采用多设备协同 ...

  6. CentOS-6.4启动盘制作过程

    目标机器:ThinkPad X230 (i5-3210, 4G DDR3, 500G 7200转),预装win 8 目标系统:CentOS-6.4-x86_64-bin-DVD1.iso 主要参考文章 ...

  7. Flink 自定义 ClickHouse Table Connector 的简单实现

    本次实现基于 Flink 1.18 版本,具体的对象之间的关系可以先参考官网的图: 先拿官网上的 Socket 示例来说一下实现过程: 首先编写 SocketDynamicTableFactory 实 ...

  8. ASP.NET Core Web API下基于Keycloak的多租户用户授权的实现

    在上文<Keycloak中授权的实现>中,以一个实际案例介绍了Keycloak中用户授权的设置方法.现在回顾一下这个案例: 服务供应商(Service Provider)发布/Weathe ...

  9. WebRTC获取IP地址问题，Uncaught TypeError: Cannot read property '1' of null

    WebRTC获取IP地址问题,Uncaught TypeError: Cannot read property '1' of null 临时接了个任务,客户要求某个账号只能在某个ip或者mac上登录, ...

  10. 阿里云2020上云采购季，你的ECS买好了吗？

    阿里云2020上云采购季,超级品类日,天天有爆款. 今日爆款推荐:云服务器. 重磅推荐两款,限时抢购. 新品共享型s6: 企业级共享型n4: 想看更多云产品,来阿里云采购季: https://www. ...