Cesium 初始化Viewer
<pre name="code" class="javascript"><script>
var viewer = new Cesium.Viewer('cesiumContainer');
viewer._cesiumWidget._creditContainer.style.display="none";
</script></pre>
<pre></pre>
<p><br>
</p>
<pre></pre>
仅仅一句代码我们就可以加载进来一个地球和各种地图,但是有很多功能可能是需要关闭或者开启的~
<p></p>
<p> 详细的设置可以参考如下,这部分内容我没有再去查API,而是直接引用了GISEarth的博客中的这部分说明,供大家参考。由于我不需要多余的按钮,所以我就把Cesium本来带的组件全部隐藏啦~</p>
<p></p>
<pre name="code" class="javascript">var viewer = new Cesium.Viewer( 'cesiumContainer', {
animation : false,//是否创建动画小器件,左下角仪表
baseLayerPicker : false,//是否显示图层选择器
fullscreenButton : false,//是否显示全屏按钮
geocoder : false,//是否显示geocoder小器件,右上角查询按钮
homeButton : false,//是否显示Home按钮
infoBox : false,//是否显示信息框
sceneModePicker : false,//是否显示3D/2D选择器
selectionIndicator : false,//是否显示选取指示器组件
timeline : false,//是否显示时间轴
navigationHelpButton : false,//是否显示右上角的帮助按钮
scene3DOnly : true,//如果设置为true,则所有几何图形以3D模式绘制以节约GPU资源
clock : new Cesium.Clock(),//用于控制当前时间的时钟对象
selectedImageryProviderViewModel : undefined,//当前图像图层的显示模型,仅baseLayerPicker设为true有意义
imageryProviderViewModels : Cesium.createDefaultImageryProviderViewModels(),//可供BaseLayerPicker选择的图像图层ProviderViewModel数组
selectedTerrainProviderViewModel : undefined,//当前地形图层的显示模型,仅baseLayerPicker设为true有意义
terrainProviderViewModels : Cesium.createDefaultTerrainProviderViewModels(),//可供BaseLayerPicker选择的地形图层ProviderViewModel数组
imageryProvider : new Cesium.OpenStreetMapImageryProvider( {
credit :'',
url : '//192.168.0.89:5539/planet-satellite/'
} ),//图像图层提供者,仅baseLayerPicker设为false有意义
terrainProvider : new Cesium.EllipsoidTerrainProvider(),//地形图层提供者,仅baseLayerPicker设为false有意义
skyBox : new Cesium.SkyBox({
sources : {
positiveX : 'Cesium-1.7.1/Skybox/px.jpg',
negativeX : 'Cesium-1.7.1/Skybox/mx.jpg',
positiveY : 'Cesium-1.7.1/Skybox/py.jpg',
negativeY : 'Cesium-1.7.1/Skybox/my.jpg',
positiveZ : 'Cesium-1.7.1/Skybox/pz.jpg',
negativeZ : 'Cesium-1.7.1/Skybox/mz.jpg'
}
}),//用于渲染星空的SkyBox对象
fullscreenElement : document.body,//全屏时渲染的HTML元素,
useDefaultRenderLoop : true,//如果需要控制渲染循环,则设为true
targetFrameRate : undefined,//使用默认render loop时的帧率
showRenderLoopErrors : false,//如果设为true,将在一个HTML面板中显示错误信息
automaticallyTrackDataSourceClocks : true,//自动追踪最近添加的数据源的时钟设置
contextOptions : undefined,//传递给Scene对象的上下文参数(scene.options)
sceneMode : Cesium.SceneMode.SCENE3D,//初始场景模式
mapProjection : new Cesium.WebMercatorProjection(),//地图投影体系
dataSources : new Cesium.DataSourceCollection()
//需要进行可视化的数据源的集合
} );
</pre><br>
<p></p>
<p> 对camera进行设置,我们就可以定义初始化时的镜头、视角~下面这段代码就是将镜头定位在经纬度为(111.07,39.05)的地方,高度为1万公里,下面的heading、pitch和roll就是镜头相对于xyz轴的角度,比如pitch为-90°而另外两个为0时,就是90°向下俯视地球。</p>
<p></p>
<pre name="code" class="javascript"> viewer.camera.setView({
destination: Cesium.Cartesian3.fromDegrees(111.07, 39.05, 10000),
orientation: {
heading : Cesium.Math.toRadians(0),
pitch : Cesium.Math.toRadians(-90),
roll : Cesium.Math.toRadians(0)
}
}); </pre>
<p></p>
<p> 最后得到的就是下图所示的效果,很多按钮都被隐藏了,打开时也不再是整个地球,而是只有我需要的这一小部分,这样子就更方便后面的操作啦~</p>
<p> ps:如果是没有学过web的初学者,上面那一大串代码都放在<script></script>标签里就可以啦~当年我是纯小白的时候,看到一段一段的代码也是云里雾里,因为总是不知道放在哪里>///<<br>
<img src="http://img.blog.csdn.net/20171018161516803?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvemx4MzEy/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt=""><br>
</p>
<p>这一节就到这里啦,地图有了,下一步就是希望在gis地图上搞事情啦啦啦~~</p>
<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的更多相关文章
- 一步步建立 Vue + Cesium 初始化项目
一步步建立 Vue + Cesium 初始化项目 初始化 Vue 项目 升级 npm npm install -g npm 安装 @vue/cli 和 @vue/cli-service-global ...
- cesium初始化参数
var viewer = new Cesium.Viewer('cesiumContainer',{ animation:false, //动画控制不显示 //baseLayerPicker:fals ...
- Cesium中Clock控件及时间序列瓦片动态加载
前言 前面已经写了两篇博客介绍Cesium,一篇整体上简单介绍了Cesium如何上手,还有一篇介绍了如何将Cesium与分布式地理信息处理框架Geotrellis相结合.Cesium的强大之处也在于其 ...
- cesium编程入门(四)界面介绍及小控件隐藏
感性认识 界面介绍,viewer Geocoder : 查找位置工具,查找到之后会将镜头对准找到的地址,默认使用bing地图 Home Button :视角返回初始位置. Scene Mode Pic ...
- Cesium加载影像和地形数据+开启高程遮挡效果+视点定位+定时更新
// 初始化Cesium var viewer = new Cesium.Viewer('cesiumContainer', { /*imageryProvider : new Cesium.ArcG ...
- cesium编程入门(四)界面介绍及小控件隐藏
感性认识 界面介绍,viewer Geocoder : 查找位置工具,查找到之后会将镜头对准找到的地址,默认使用bing地图 Home Button :视角返回初始位置. Scene Mode Pic ...
- 转:Cesium 和 Webpack
原文地址:https://www.jianshu.com/p/85917bcc023f 注意:webpack 和 webpack-cli 的安装参考 https://www.cnblogs.com/m ...
- Cesium入门-3-官方完整实例
实例核心代码 //资源访问令牌 Cesium token Cesium.Ion.defaultAccessToken='eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ ...
- Cesium截图功能
首先安装 canvas2image npm intsall canvas2image --save 因为项目基于vue,所以需要在canvas2image的最后面 加上 export default ...
随机推荐
- HDU4811_Ball
又是数学题. 每次放入一个球所得到的的分数为x1+x2(x1表示左边的球中颜色的种数,x2表示右边) 其实如果一个球的数量超过了2,那么剩下的就是一个乘法了. 这个理解很简单,因为超过了2的话,说明最 ...
- HDU4043_FXTZ II
题目描述的意思就不说了,自己考虑的时候就是在所有的排列中,碰到大于前面最大的出现数字的时候就乘以一个二分之一,然后求和. 打表后就会发现,答案分子为1*3*5*……*(2*n-1):分母为2*4*6* ...
- 题解 P1567 【统计天数】
天哪!竟然没人用优先队列! 小金羊又来水题了... 优先队列中的大根堆帮助我们把时间复杂度降到O(n+logn) 首先我们先了解一下大根堆... 大根堆的性质:根节点比子节点大, 这意味着最上面的节点 ...
- 51nod 1526 分配笔名(字典树+贪心)
题意: 班里有n个同学.老师为他们选了n个笔名.现在要把这些笔名分配给每一个同学,每一个同学分配到一个笔名,每一个笔名必须分配给某个同学.现在定义笔名和真名之间的相关度是他们之间的最长公共前缀.设笔名 ...
- 2017-2018-2 20165218 实验四《Android开发基础》实验报告
实验三 Android开发基础 课程:java程序设计 姓名:赵冰雨 学号:20165218 指导教师:娄嘉鹏 实验日期:2018.4.14 实验内容: 1.基于Android Studio开发简单的 ...
- HDU3400 三分套三分
题意 就是给你两条线段AB , CD ,一个人在AB以速度p跑,在CD上以q跑, 在其他地方跑速度是r.问你从A到D最少的时间. 三分AB ,然后再三分CD ,模板题目,这题卡精度 eps不能少 #i ...
- valgrind检查C/C++内存泄漏
valgrind --tool=memcheck --leak-check=full ./httptest valgrind --tool=memcheck --leak-check=full -- ...
- ajax 中操作this,需要先在ajax的外面给this重新定义为_this!!
//设置为默认收货地址 $(document).on('tap','.right_none',function(){ var _this = $(this); //只有这样定义,在ajax的内部才可以 ...
- Android开发大纲
知识模块 Java Android 计算机网络 算法 书本知识 深入理解Java虚拟机 Java并发编程实战 疯狂Android讲义 Android开发艺术探索 网络知识 面试经验 面试心得与总结-- ...
- 前端PHP入门-010-内部函数
内部函数,是指在函数内部又声明了一个函数. 注意事项: 内部函数名,不能是已存在的函数名 假设在函数a里面定义了一个内部函数,不能调用两次函数a. <?php function foo() { ...