1. <pre name="code" class="javascript"><script>
  2. var viewer = new Cesium.Viewer('cesiumContainer');
  3. viewer._cesiumWidget._creditContainer.style.display="none";
  4. </script></pre>
  5. <pre></pre>
  6. <p><br>
  7. </p>
  8. <pre></pre>
  9. 仅仅一句代码我们就可以加载进来一个地球和各种地图,但是有很多功能可能是需要关闭或者开启的~
  10. <p></p>
  11. <p> 详细的设置可以参考如下,这部分内容我没有再去查API,而是直接引用了GISEarth的博客中的这部分说明,供大家参考。由于我不需要多余的按钮,所以我就把Cesium本来带的组件全部隐藏啦~</p>
  12. <p></p>
  13. <pre name="code" class="javascript">var viewer = new Cesium.Viewer( 'cesiumContainer', {
  14. animation : false,//是否创建动画小器件,左下角仪表
  15. baseLayerPicker : false,//是否显示图层选择器
  16. fullscreenButton : false,//是否显示全屏按钮
  17. geocoder : false,//是否显示geocoder小器件,右上角查询按钮
  18. homeButton : false,//是否显示Home按钮
  19. infoBox : false,//是否显示信息框
  20. sceneModePicker : false,//是否显示3D/2D选择器
  21. selectionIndicator : false,//是否显示选取指示器组件
  22. timeline : false,//是否显示时间轴
  23. navigationHelpButton : false,//是否显示右上角的帮助按钮
  24. scene3DOnly : true,//如果设置为true,则所有几何图形以3D模式绘制以节约GPU资源
  25. clock : new Cesium.Clock(),//用于控制当前时间的时钟对象
  26. selectedImageryProviderViewModel : undefined,//当前图像图层的显示模型,仅baseLayerPicker设为true有意义
  27. imageryProviderViewModels : Cesium.createDefaultImageryProviderViewModels(),//可供BaseLayerPicker选择的图像图层ProviderViewModel数组
  28. selectedTerrainProviderViewModel : undefined,//当前地形图层的显示模型,仅baseLayerPicker设为true有意义
  29. terrainProviderViewModels : Cesium.createDefaultTerrainProviderViewModels(),//可供BaseLayerPicker选择的地形图层ProviderViewModel数组
  30. imageryProvider : new Cesium.OpenStreetMapImageryProvider( {
  31. credit :'',
  32. url : '//192.168.0.89:5539/planet-satellite/'
  33. } ),//图像图层提供者,仅baseLayerPicker设为false有意义
  34. terrainProvider : new Cesium.EllipsoidTerrainProvider(),//地形图层提供者,仅baseLayerPicker设为false有意义
  35. skyBox : new Cesium.SkyBox({
  36. sources : {
  37. positiveX : 'Cesium-1.7.1/Skybox/px.jpg',
  38. negativeX : 'Cesium-1.7.1/Skybox/mx.jpg',
  39. positiveY : 'Cesium-1.7.1/Skybox/py.jpg',
  40. negativeY : 'Cesium-1.7.1/Skybox/my.jpg',
  41. positiveZ : 'Cesium-1.7.1/Skybox/pz.jpg',
  42. negativeZ : 'Cesium-1.7.1/Skybox/mz.jpg'
  43. }
  44. }),//用于渲染星空的SkyBox对象
  45. fullscreenElement : document.body,//全屏时渲染的HTML元素,
  46. useDefaultRenderLoop : true,//如果需要控制渲染循环,则设为true
  47. targetFrameRate : undefined,//使用默认render loop时的帧率
  48. showRenderLoopErrors : false,//如果设为true,将在一个HTML面板中显示错误信息
  49. automaticallyTrackDataSourceClocks : true,//自动追踪最近添加的数据源的时钟设置
  50. contextOptions : undefined,//传递给Scene对象的上下文参数(scene.options)
  51. sceneMode : Cesium.SceneMode.SCENE3D,//初始场景模式
  52. mapProjection : new Cesium.WebMercatorProjection(),//地图投影体系
  53. dataSources : new Cesium.DataSourceCollection()
  54. //需要进行可视化的数据源的集合
  55. } );
  56. </pre><br>
  57. <p></p>
  58. <p> 对camera进行设置,我们就可以定义初始化时的镜头、视角~下面这段代码就是将镜头定位在经纬度为(111.07,39.05)的地方,高度为1万公里,下面的heading、pitch和roll就是镜头相对于xyz轴的角度,比如pitch为-90°而另外两个为0时,就是90°向下俯视地球。</p>
  59. <p></p>
  60. <pre name="code" class="javascript"> viewer.camera.setView({
  61. destination: Cesium.Cartesian3.fromDegrees(111.07, 39.05, 10000),
  62. orientation: {
  63. heading : Cesium.Math.toRadians(0),
  64. pitch : Cesium.Math.toRadians(-90),
  65. roll : Cesium.Math.toRadians(0)
  66. }
  67. }); </pre>
  68. <p></p>
  69. <p> 最后得到的就是下图所示的效果,很多按钮都被隐藏了,打开时也不再是整个地球,而是只有我需要的这一小部分,这样子就更方便后面的操作啦~</p>
  70. <p> ps:如果是没有学过web的初学者,上面那一大串代码都放在<script></script>标签里就可以啦~当年我是纯小白的时候,看到一段一段的代码也是云里雾里,因为总是不知道放在哪里>///<<br>
  71. <img src="http://img.blog.csdn.net/20171018161516803?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvemx4MzEy/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt=""><br>
  72. </p>
  73. <p>这一节就到这里啦,地图有了,下一步就是希望在gis地图上搞事情啦啦啦~~</p>
  74. <link rel="stylesheet" href="http://static.blog.csdn.net/public/res-min/markdown_views.css?v=2.0">

原文:http://blog.csdn.net/zlx312/article/details/78273537

Cesium 初始化Viewer的更多相关文章

  1. 一步步建立 Vue + Cesium 初始化项目

    一步步建立 Vue + Cesium 初始化项目 初始化 Vue 项目 升级 npm npm install -g npm 安装 @vue/cli 和 @vue/cli-service-global ...

  2. cesium初始化参数

    var viewer = new Cesium.Viewer('cesiumContainer',{ animation:false, //动画控制不显示 //baseLayerPicker:fals ...

  3. Cesium中Clock控件及时间序列瓦片动态加载

    前言 前面已经写了两篇博客介绍Cesium,一篇整体上简单介绍了Cesium如何上手,还有一篇介绍了如何将Cesium与分布式地理信息处理框架Geotrellis相结合.Cesium的强大之处也在于其 ...

  4. cesium编程入门(四)界面介绍及小控件隐藏

    感性认识 界面介绍,viewer Geocoder : 查找位置工具,查找到之后会将镜头对准找到的地址,默认使用bing地图 Home Button :视角返回初始位置. Scene Mode Pic ...

  5. Cesium加载影像和地形数据+开启高程遮挡效果+视点定位+定时更新

    // 初始化Cesium var viewer = new Cesium.Viewer('cesiumContainer', { /*imageryProvider : new Cesium.ArcG ...

  6. cesium编程入门(四)界面介绍及小控件隐藏

    感性认识 界面介绍,viewer Geocoder : 查找位置工具,查找到之后会将镜头对准找到的地址,默认使用bing地图 Home Button :视角返回初始位置. Scene Mode Pic ...

  7. 转:Cesium 和 Webpack

    原文地址:https://www.jianshu.com/p/85917bcc023f 注意:webpack 和 webpack-cli 的安装参考 https://www.cnblogs.com/m ...

  8. Cesium入门-3-官方完整实例

    实例核心代码 //资源访问令牌 Cesium token Cesium.Ion.defaultAccessToken='eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ ...

  9. Cesium截图功能

    首先安装  canvas2image npm intsall canvas2image --save 因为项目基于vue,所以需要在canvas2image的最后面 加上 export default ...

随机推荐

  1. react-自定义事件

    没有嵌套关系的组件(如兄弟组件)之间的通信,只能通过自定义事件的方式来进行. var EventEmitter = require('events').EventEmitter; import Rea ...

  2. Delphi ADOQuery多个参数重复 改编技巧

    今天看了多年前的一个帖子,发现回答不合理,有些还将其归为delphi的bug.其实主要是没有灵活应用参数. ADOQUERY查询时,这样不行,结果不正确. WITH ADOQUERY1 DO BEGI ...

  3. Fiddler绕过前端直接和后台进行交互

    测试需求:有一个功能,允许用钻石兑换金币,假设1钻石=1金币,前端控制一次至少兑换10个,最多100个,后台不做验证. 测试方案:输入10,也就是告诉前端我要兑换10个金币,等前端验证通过之后,截取要 ...

  4. 在mvc4中上传、导入和导出excel表方法总结

    通过excel的导入导出练习,使用NPOI组件还是方便一点,所有下面就以NPOI下的导入导出给出实例,通过网页导入excel表,首先上传,再导入数据到库,这里为了方便就不导入到库中了,直接拿到数据.导 ...

  5. 【ASP.NET Core 】ASP.NET Core 源码学习之 Logging[1]:Introduction

    在ASP.NET 4.X中,我们通常使用 log4net, NLog 等来记录日志,但是当我们引用的一些第三方类库使用不同的日志框架时,就比较混乱了.而在 ASP.Net Core 中内置了日志系统, ...

  6. Selenium操作滚动条

    //移动到元素element对象的“顶端”与当前窗口的“顶部”对齐 ((JavascriptExecutor) driver).executeScript("arguments[0].scr ...

  7. python函数:字符串函数示例

    优先掌握的操作 #作用:名字,性别,国籍,地址等描述信息 #定义:在单引号\双引号\三引号内,由一串字符组成 name='egon' #优先掌握的操作: #1.按索引取值(正向取+反向取) :只能取 ...

  8. The 14th Zhejiang Provincial Collegiate Programming Contest Sponsored by TuSimple - F 贪心+二分

    Heap Partition Time Limit: 2 Seconds      Memory Limit: 65536 KB      Special Judge A sequence S = { ...

  9. shell函数使用

    函数定义格式: 和js有点类似,不过在 shell 中 function 关键字是可选的. 如: sum { // shell 语句 } function sum() { // shell 语句 } ...

  10. python基础--文件操作实现全文或单行替换

    python修改文件时,使用w模式会将原本的文件清空/覆盖.可以先用读(r)的方式打开,写到内存中,然后再用写(w)的方式打开. 替换文本中的taste 为 tasting Yesterday whe ...