一、Viewer概述

Viewer对象是我们使用Cesium必须构建的一个基础对象，我们后续所有的操作、定义都要依托于它。同时，Viewer对象在初始化的时候给我们提供了很多可传递的参数属性，让我们可以方便的去定义想要的基础地理信息场景，此外Viewer还提供了很多实用方法和二级属性，这些方法和属性会贯穿在我们修炼Cesium的整个过程中。

二、Viewer常用的配置参数

我们使用如下的代码就可以构建好Viewer对象。如代码所示，在构建Viewer对象时可以传递两个参数，第一个是一个字符串，这个字符串是html页面内某个div标签的id，Cesium会根据这个id将其指向的div作为视图构建的容器，也就是这个div多大，最后看到的整个三维场景就是多大。第二个参数是一个对象，可以传递很多的设置参数，通过赋予参数不同的值来设定基础的视图布置。代码内对常用的参数做了注释说明，此处不再赘述。

var viewer = new Cesium.Viewer('cesiumContainer', {animation: false,//是否显示左下角仪表  timeline: false, //是否显示时间轴     baseLayerPicker: false,//是否显示图层选择器    fullscreenButton: false,//是否显示全屏按钮    geocoder: false,//是否显示右上角查询按钮    homeButton: false,//是否显示Home按钮    infoBox: false,//是否显示信息框    vrButton:true,  //是否显示右下角VR模式切换按钮sceneModePicker: false,//是否显示地图模式选择器(2D/2.5D/3D切换)    selectionIndicator: false,//是否显示选取指示器组件    navigationHelpButton: false,//是否显示帮助按钮    scene3DOnly: true,//如果设置为true，那么所有几何图形以3D模式绘制以节约GPU资源    sceneMode: Cesium.SceneMode.SCENE3D, //初始化时的场景模式,此处为3D  mapProjection: new Cesium.WebMercatorProjection(),//设置地图投影,此处为Web墨卡托//加载卫星影像imageryProvider: new Cesium.UrlTemplateImageryProvider({url: "https://webst02.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}"}),//加载三维地形terrainProvider: Cesium.createWorldTerrain({requestWaterMask: true,requestVertexNormals: true})});

三、Viewer常用的方法和属性

Viewer对象还提供了很多的方法和属性，写文章的目的主要是梳理一条主线，不想面面俱到，如果自有兴趣，可去仔细研究Cesium开发文档。此处只介绍常用的一些方法和属性。
此行代码可以实现把场景默认显示的Cesium版权信息去掉。

viewer._cesiumWidget._creditContainer.style.display = "none";

camera为Viewer比较重要的属性之一，与相机相关的操作、变换、设置都要依托此属性完成。同时常用的方法有flyTo、setView、lookAt、zoomIn、zoomOut等。
flyTo、setView、lookAt这三个方法都可以改变相机的视角，但改变形式和动画效果各有不同，可以分别运行代码进行体会，也都会涉及到Heading、Pitch、Roll三个参数的设定问题，在Cesium中，常常使用HeadingPitchRoll三个角度来定义相机坐标系相对某基准坐标系的方位。关于这三个参数的具体介绍推荐查看Cesium中的相机—HeadingPitchRoll这篇文章，此处不再展开描述。
camera.flyTo()方法是在调用后会使相机飞到某个位置，有两个核心参数，第一个参数destination是输入一个待飞到的目的地点坐标，也可以是一个矩形。以Cesium.Cartesian3.fromDegrees(lon, lat, alti)形式传入，其中lon是目的地经度，lat是纬度，alti是高度。第二个参数orientation定义了HeadingPitchRoll三个角度，以弧度的形式传入，如果是度，可以用Cesium.Math.toRadians(degree)方法进行转换。

camera.flyTo({destination: Cesium.Cartesian3.fromDegrees(112.441447, 34.797049, 5500.0),orientation: {heading: Cesium.Math.toRadians(175.0),pitch: Cesium.Math.toRadians(-20),roll: 0.0}
});

camera.setView()方法是在调用后会直接设定相机视角，没有飞行过程，核心参数设置和flyTo一致。

camera.setView({destination: Cesium.Cartesian3.fromDegrees(112.441447, 34.797049, 120000.0),orientation: {heading: Cesium.Math.toRadians(175.0),pitch: Cesium.Math.toRadians(-20),roll: 0.0}
});

camera.lookAt()方法是设定让相机看向某个位置，设定后，相机视角会被锁定，只能以该位置为中心做视角转换，而不能再任意切换视角。需要传入一个center参数，是位置坐标，还有一个角度设定参数以Cesium.HeadingPitchRange(heading, pitch, range)的形式传入，heading、pitch不再解释，range可以理解为相对于位置的高度。但lookAt方法在调用后会锁定视角，而且会出现cesium内置的鼠标控制相机功能发生改变以及后续调用flyTo方法相机位置异常问题。虽然可以通过camera.lookAtTransform(Matrix4.IDENTITY);解决，但视角仍为锁定状态，所以看具体情况使用该方法。

var center = Cesium.Cartesian3.fromDegrees(112.441447, 34.797049);
var heading = Cesium.Math.toRadians(50.0);
var pitch = Cesium.Math.toRadians(-20.0);
var range = 5500.0;
camera.lookAt(center, new Cesium.HeadingPitchRange(heading, pitch, range));

camera.lookAtTransform(Matrix4.IDENTITY);

camera.zoomIn(amount)和camera.zoomOut(amount)方法分别为放大和缩小，amount是一个数字，代表每次缩放的量级。注意：在使用camera.lookAtTransform(Matrix4.IDENTITY);之后放大缩小方法将没有反应。

//放大
camera.zoomIn(10000);
//缩小
camera.zoomOut(10000);

除了camera以外，viewer还有几个我们经常要用到的属性，比如entities、dataSource、scene、imageryLayers等。
entities属性是我们使用Entity API的关键，后续相关章节会详细介绍其使用方法。dataSource属性允许我们使用它快速读取一个规范格式的数据源，然后通过简单的参数设置便可实现结果的展示，简单易用，其底层其实是自动将数据源以Entity的形式进行加载，比较典型的应用就是dataSource读取geojson数据实现多级填色功能，后续也会单独介绍。
scene应该是Cesium使用过程中除了viewer之外最重要的属性，我们无论是使用Primitive API还是自定义Geometry,异或是自定义Primitive、自定义Shader，都离不开和scene的关联。还有Ceisum各种常用的鼠标事件的监听使用，也都离不开scene。
imageryLayers属性是装载、管理Cesium图片图层的属性，我们给Cesium添加删除图片类型的图层时就要用到它，其实在初始化viewer时我们已经用到了，后续都会单独做介绍。

var entities = viewer.entities;
var dataSouce = viewer.dataSouce;
var scene = viewer.scene;
var imageryLayers = viewer.imageryLayers;

四、完整代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="utf-8"><script src="https://cesium.com/downloads/cesiumjs/releases/1.85/Build/Cesium/Cesium.js"></script><link href="https://cesium.com/downloads/cesiumjs/releases/1.85/Build/Cesium/Widgets/widgets.css" rel="stylesheet"><style>*{margin: 0;padding: 0;}#cesiumContainer{position: absolute;width: 100%;height: 100%;z-index: 3000;overflow: hidden;}.tool{position: absolute;z-index: 5000;float: left;left: 10px;top:30px;}</style>
</head>
<body><div id="cesiumContainer"></div><div class="tool"><button id="zoomIn">放大</button><button id="zoomOut">缩小</button></div><script>var viewer = new Cesium.Viewer('cesiumContainer', {animation: false,//是否显示左下角仪表  timeline: false, //是否显示时间轴     baseLayerPicker: false,//是否显示图层选择器    fullscreenButton: false,//是否显示全屏按钮    geocoder: false,//是否显示右上角查询按钮    homeButton: false,//是否显示Home按钮    infoBox: false,//是否显示信息框    vrButton: true,  //是否显示右下角VR模式切换按钮sceneModePicker: false,//是否显示地图模式选择器(2D/2.5D/3D切换)    selectionIndicator: false,//是否显示选取指示器组件    navigationHelpButton: false,//是否显示帮助按钮    scene3DOnly: true,//如果设置为true，那么所有几何图形以3D模式绘制以节约GPU资源    sceneMode: Cesium.SceneMode.SCENE3D, //初始化时的场景模式,此处为3D  mapProjection: new Cesium.WebMercatorProjection(),//设置地图投影,此处为Web墨卡托//加载卫星影像imageryProvider: new Cesium.UrlTemplateImageryProvider({url: "https://webst02.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}"}),//加载三维地形terrainProvider: Cesium.createWorldTerrain({requestWaterMask: true,requestVertexNormals: true})});//去版权信息viewer._cesiumWidget._creditContainer.style.display = "none";//camera属性var camera = viewer.camera;//飞入camera.flyTo({destination: Cesium.Cartesian3.fromDegrees(112.441447, 34.797049, 5500.0),orientation: {heading: Cesium.Math.toRadians(175.0),pitch: Cesium.Math.toRadians(-20),roll: 0.0}});//设定视角camera.setView({destination: Cesium.Cartesian3.fromDegrees(112.441447, 34.797049, 120000.0),orientation: {heading: Cesium.Math.toRadians(175.0),pitch: Cesium.Math.toRadians(-20),roll: 0.0}});//视角锁定var center = Cesium.Cartesian3.fromDegrees(112.441447, 34.797049);var heading = Cesium.Math.toRadians(50.0);var pitch = Cesium.Math.toRadians(-20.0);var range = 5500.0;camera.lookAt(center, new Cesium.HeadingPitchRange(heading, pitch, range));// camera.lookAtTransform(Matrix4.IDENTITY);document.getElementById("zoomIn").onclick=function(){//放大camera.zoomIn(10000);}document.getElementById("zoomOut").onclick=function(){//缩小camera.zoomOut(10000);}//其他常用属性var entities = viewer.entities;var dataSouce = viewer.dataSouce;var scene = viewer.scene;var imageryLayers = viewer.imageryLayers;</script></div>
</body>
</html>

WebGIS全栈修炼之路3——内视丹田Viewer相关推荐

WebGIS全栈修炼之路1——开篇一起梳理一下修炼之路
修炼内容梳理一.WebGIS全栈开发领域涉及到的内容二.本门主要的修炼内容三.写在最后一.WebGIS全栈开发领域涉及到的内容顾名思义,WebGIS全栈开发主要可以分成三个部分来理解,Web ...
WebGIS全栈修炼之路2——筑基，修出你的第一缕Cesium之气
Hello Cesium 一.辅助筑基的神器二. 什么也别问,先运行起来再说三.筑基完成,看看修炼境界的划分一.辅助筑基的神器工欲善其事,必先利其器.想敲起代码美滋滋,音乐和一个好用的开发工具 ...
全栈修炼之路，很漫长…
虽然目前并没有对全栈工程师有一个具体的定义,不知道自己是否合格. 大势所趋的全栈开发.首先你能够配置全站开发的环境和工作流程,操作数据库,建立后端服务API,独立开发前端,从而开发一个包含前后端的完整 ...
我的编程之路：网编到全栈的漫长路
为什么写这篇文章把自己的经历分享出来,为正在迈上码农界的新人们加油打气把自己这两年的积累的略微经验分享出来简介我呢?非科班出生,至今工作两年,打杂一年,真正做码农一年. 毕业前四年这段时间你 ...
全栈工程师之路-Node.js
2019独角兽企业重金招聘Python工程师标准>>> 全栈工程师之路-Node.js 高可用架构专用原文[高可用架构] https://mp.weixin.qq.com/s?__ ...
python 全栈开发之路 day1
python 全栈开发之路 day1 本节内容计算机发展介绍计算机硬件组成计算机基本原理计算机计算机(computer)俗称电脑,是一种用于高速计算的电子计算机器,可以进行数值计算,又可以进 ...
CMS全栈开发之路总结
CMS全栈开发之路总结企业级CMS全栈开发之路总结技术架构 1.CMS后台管理系统创建 2.node服务端搭建 3.CMS前台实现流程图 SSR的优点页面 4.服务器选配.Linux与Ngin ...
战争热诚的python全栈开发之路
战争热诚的python全栈开发之路从学习python开始,一直是自己摸索,但是时间不等人啊,所以自己为了节省时间,决定报个班系统学习,下面整理的文章都是自己学习后,认为重要的需要弄懂的知识点,做出链 ...
❤️程序员国企太安逸想辞职，又嫌私企大厂压力大996我该如何选择？（高级全栈自动化之路）
我们的人生人就是贱! 进了体制,国企嫌太安逸,没激情,一眼能看到二十年后的人生. 进了私企嫌压力大,996太累,没休闲时间.辞职了想做点小生意发现自己根本不是那料,去做一些底层工作嫌不体面,工资低, ...

WebGIS全栈修炼之路3——内视丹田Viewer

Hello Viewer

一、Viewer概述

二、Viewer常用的配置参数

三、Viewer常用的方法和属性

四、完整代码

WebGIS全栈修炼之路3——内视丹田Viewer相关推荐

最新文章

热门文章