上面地形数据，是调用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. AndroidStudio配置 | 菜鸟教程

    https://www.runoob.com/android/android-studio-install.html

  2. Go 实战｜使用 Wails 构建轻量级的桌面应用：仿微信登录界面 Demo

    概述 本文探讨 Wails 框架的使用,从搭建环境到开发,再到最终的构建打包,本项目源码 GitHub 地址:https://github.com/mazeyqian/go-run-wechat-de ...

  3. 稀疏镜像在OpenHarmony上的应用

    一.稀疏镜像升级背景 常用系统镜像格式为原始镜像,即RAW格式.镜像体积比较大,在烧录固件或者升级固件时比较耗时,而且在移动设备升级过程时比较耗费流量.为此,将原始镜像用稀疏描述,可以大大地缩减镜像体 ...

  4. C++判断操作系统位数

    //判断当前系统是否为64位 BOOL Is64BitSystem() { #ifdef _WIN64 return true; #elif _WIN32 HMODULE hModule = Load ...

  5. HarmonyOS极客松“上分秘籍”! 高手们顶峰相见！

      HarmonyOS 极客马拉松2023 火热进行中,我们期待与各位开发者相聚一起,践行极客精神,创造无限可能! 我们鼓励各位极客们自由组队,挥洒创意,用HarmonyOS 探索移动应用和服务的更多 ...

  6. centos7或者centos8下安装google-chrome谷歌浏览器 亲测成功 20220302

    第一步: wget https://dl.google.com/linux/direct/google-chrome-stable_current_x86_64.rpm 第二步: 安装 Google ...

  7. 一个简单的开源消息中间件 FolkMQ v1.4.2 发布

    功能简表 角色 功能 生产者(客户端) 发布消息.定时消息(或叫延时).顺序消息.可过期消息.事务消息.支持 Qos0.Qos1 消费者(客户端) 订阅.取消订阅.消费-ACK(自动.手动) 服务端 ...

  8. 使用 Docker 部署 Draw.io 在线流程图系统

    1)介绍 Draw.io GitHub:https://github.com/jgraph/drawio Draw.io 是一款开源的绘制流程图的工具,拥有大量免费素材和模板.程序本身支持中文在内的多 ...

  9. vue 弹出框挂载富文本，富文本（）无法实例化问题

    因为elementUI的dialog组件,他是v-if渲染,再页面刚加载时,这个弹出框还未进行挂载,我们就让他v-show显示. ,富文本实例再mounted里面挂载即可

  10. idea引用lombok一直不成功

    idea引用lombok一直不成功 比如想使用lombok的@data注解一直报错,尽管已经声明了import lombok.Data,且在pom里面也增加了lombok依赖,但是就是不成功的时候 建 ...