上面地形数据，是调用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. Python flask框架 request.json和request.form的区别

    一.fetch请求时,request.json能获取到数据,request.form获取不到数据 1 var data = {'name':'test'}; 2 3 fetch('http://loc ...

  2. Docker 解决 `denied: requested access to the resource is denied`

    背景 由于不可描述的原因,相对于以前,最近在更加频繁的迁移服务器,简单的 Shell 脚本已经不能满足需求了,于是将所有的项目 Docker 化. 部分不含敏感配置的项目准备放到 DockerHub ...

  3. OpenHarmony社区运营报告（2023年7月）

     本月快讯 • 2023年7月28日-29日,全球软件质量&效能大会(简称"QECon")圆满举行,OpenAtom OpenHarmony(简称"OpenHar ...

  4. 构筑立体世界，AR Engine助力B站会员购打造沉浸式营销

    随着购物场景的逐渐多元化,越来越多电商平台把线下购物体验搬到线上,运用AR技术,跨越空间距离,帮助用户在购买前"体验"商品,增强购买意愿. 哔哩哔哩会员购(后称会员购)是B站于20 ...

  5. MogDB/openGauss 开机自启动

    MogDB/openGauss 开机自启动 在 centos7.6 操作系统上设置 MogDB/openGauss 开机自启动,我们先来了解一下自定义服务的配置文件组成部分,共分为[Unit].[Se ...

  6. Python语言Numpy包之Meshgrid 函数

    Meshgrid 函数的基本用法 在 Numpy 的官方文章里, meshgrid 函数的英文描述也显得文绉绉的,理解起来有些难度.可以这么理解, meshgrid 函数用两个坐标轴上的点在平面上画网 ...

  7. HDC2021技术分论坛：广发证券携手HarmonyOS打造智慧金融服务

    以下文章来源于广发证券科技金融 ,作者GFS 本期我们给大家带来的是广发证券前端开发工程师黄钦佳的分享,希望能给你的HarmonyOS开发之旅带来启发~ 10月22日,华为开发者大会2021(Toge ...

  8. ContOS7搭建RAID-0磁盘阵列

    RAID-0条带数据: 优点:2块硬盘同时在写数据,而且各写各的不影响,速度较快:性能提升2倍(理论): 缺点:服务器硬盘特别容易损坏,一点损坏一个,其余不能用:没有容错性:服务器用的不多,都是配合使 ...

  9. centos7.2 利用yum安装配置apache2.4多虚拟主机

    centos7.2 利用yum安装配置apache2.4多虚拟主机 标签: centosapacheyum 2017-01-10 21:01  3175人阅读  评论(0)  收藏  举报   分类: ...

  10. 力扣141(Java)-环形链表（简单）

    题目: 给你一个链表的头节点 head ,判断链表中是否有环. 如果链表中有某个节点,可以通过连续跟踪 next 指针再次到达,则链表中存在环. 为了表示给定链表中的环,评测系统内部使用整数 pos ...