cesium地图

1. 开源基于js的3D地图框架。（可视化框架。）

2. 支持2D、3D、5D形式的地理数据，可以绘制几何图形、高亮区域、支持导入图片。

3. 使用webGL来进行硬件加速图形，使用是不需要任何插件来支持，但是浏览器必须支持webGl.

1)、配置视窗组件（添加和移除相关组件）

const viewer = new Cesium.Viewer('cesiumContainer', {
skyAtmosphere: false, //光圈
fullscreenButton: false, //全屏
navigationHelpButton: false, //帮助提示，如何操作数字地球
timeline: false, //展示当前时间和允许用户在进度条上拖动到任意时间
baseLayerPicker: false,//选择三位数字地球的底图
infoBox: false,
animation: false, //控制视窗动画的播放速度
homeButton: false, //首页位置
sceneModePicker: false //切换2D/3D,以及Cv（columbs View）模式。
});

2)、Cesium Ion

cesium Ion提供瓦片图和3D地理空间数据的平台，支持将数据添加到自己的应用中。

1. 首先去注册一个免费的cesium ION账户。

2. 打开「链接」然后注册一个新的账户。

3. 打开“Access Token”,跳转到Access Token Page页面。

4. 选择default默认的asscessToke拷贝到contents中。

注： 在创建Cesium Viewer的时候，将access Token填为自己的access token即可。

Cesium.Ion.defaultAccessToken = window.CesiumAccessToken; //window.CesiumAccessToken:自己的access token.

3）、添加图层imagery

const imageryLayers = viewer.imageryLayers;
imageryLayers.remove(imageryLayers.get(0));
const xyzImageryProvider = new Cesium.UrlTemplateImageryProvider({
url: process.env.VUE_APP_MAP_URL,
subdomains: ['a', 'b', 'c']
});
const xyzImageryLayer = new Cesium.ImageryLayer(xyzImageryProvider);
imageryLayers.add(xyzImageryLayer);

4)、Camera相机

使用camera.setView()初始化view,使用Cartesian3和HeadingPitchRoll指定相机的位置和方向。

viewer.camera.setView({
destination: Cesium.Cartesian3.fromDegrees(122.597723,37.197929, 500.0), // Home视角
orientation: {
heading: Cesium.Math.toRadians(20.0), // 方向
pitch: Cesium.Math.toRadians(-90.0),// 倾斜角度
roll: 0
}
});

5）、交互性（interactivity）

ScreenSpaceEventHandler 在用户输入操作中出发执行函数的一组处理程序

备注：第一个参数是监听的属性方法， 用户行为类型：ScreenSpaceEventType 监听方法+用户行为类型

let handler = new Cesium.ScreenSpaceEventHandler(window.cesiumViewer.scene.canvas)
handler.setInputAction(this.mouseRightClick, Cesium.ScreenSpaceEventType.RIGHT_CLICK)
handler.setInputAction(this.mouseMove, Cesium.ScreenSpaceEventType.MOUSE_MOVE)