cesium地图
- 开源基于js的3D地图框架。（可视化框架。）
- 支持2D、3D、5D形式的地理数据，可以绘制几何图形、高亮区域、支持导入图片。
- 使用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地理空间数据的平台，支持将数据添加到自己的应用中。
- 首先去注册一个免费的cesium ION账户。
- 打开https://cesium.com/ion/然后注册一个新的账户。
- 打开“Access Token”,跳转到Access Token Page页面。
- 选择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)
