上面地形数据，是调用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. 鸿蒙HarmonyOS实战-ArkUI组件（Radio）

    一.Radio Radio单选框是一种表单元素,允许用户从一组选项中选择一个选项.它由一个圆圈和一个标签组成,用户只能选择其中一个选项.Radio单选框通常用于表单中,用于收集用户选择的信息,例如用户 ...

  2. #对顶堆#nssl 1477 赛

    分析 首先按小到大排序,考虑枚举两个都喜欢的个数\(i\) 那么只喜欢一个的个数各需要\(k-i\),剩下要补充到\(m-k*2+i\)个, 考虑用对顶堆维护大根堆大小仅有\(m-k*2+i\)即可 ...

  3. #Tarjan，拓扑排序#洛谷 3436 [POI2006]PRO-Professor Szu

    题目 分析 考虑有向图缩点然后拓扑排序, 最恶心的地方是这题有自环, 一旦存在自环就意味着答案一定超过阈值 其实更难过的是Tarjan大小写写错没有发现qwq 代码 #include <cstd ...

  4. 战“码”先锋直播预告丨如何成为一名优秀的OpenHamrony贡献者？

    OpenAtom OpenHarmony(以下简称"OpenHarmony")工作委员会首度发起「OpenHarmony开源贡献者计划」,旨在鼓励开发者参与OpenHarmony开 ...

  5. RabbitMQ 03 直连模式-可视化界面

    这里先演示最简单的模型:直连模式.其结构图为: 一个生产者 -> 消息队列 -> 一个消费者 生产者只需要将数据丢进消息队列,而消费者只需要将数据从消息队列中取出,这样就实现了生产者和消费 ...

  6. HarmonyOS卡片刷新服务，信息实时更新一目了然

    如今衣食住行娱乐影音等App占据了大多数人的手机,一部手机可以满足日常大多需求,但对需要经常查看或进行简单操作的场景来说,总需要用户点开App操作未免过于繁琐. 针对该问题, HarmonyOS SD ...

  7. iOS系统崩溃的捕获

    iOS系统崩溃的捕获 相信大家在开发iOS程序的时候肯定写过各种Bug,而其中最为严重的Bug就是会导致崩溃的Bug(一般来说妥妥的P1级).在应用软件大大小小的各种异常中,崩溃确实是最让人难以接受的 ...

  8. WAF网站访问限制

    请参考:https://www.cnblogs.com/yangyangblog/p/14930159.html 文件下载的地方可以网络搜索,这里提供IIS7 WINDOWS64位版本:https:/ ...

  9. 【Oracle】lpad与rpad函数，从左边对字符串使用指定的字符进行填充将1变成000001

    [Oracle]lpad&rpad函数,从左边对字符串使用指定的字符进行填充将1变成000001 lpad与rpad函数 顾名思义,lpad是从左边开始进行填充,rpad是从右边开始进行填充 ...

  10. 什么是好的错误消息? 讨论一下Java系统中的错误码设计

    简介:一个好的Error Message主要包含三个部分:Context: 什么导致了错误?发生错误的时候代码想做什么?The error itself: 到底是什么导致了失败?具体的原因和当时的数据 ...