一、Cesium 简介
- Cesium 是 AGI 公司计算机图形开发小组与 2011 年研发的三维地球和地图可视化开源 JavaScript 库，Cesium 一词来源于化学元素铯，铯是制造原子钟的关键元素，研发小组通过命名强调 Cesium 产品精益求精，专注时间数据可视化。Cesium 为三维 GIS 提供了一个高效的数据可视化平台。
- 其可跨平台、跨浏览器展示三维地球和地图，使用 WebGL 来进行硬件加速图形，使用时不需要任何插件支持，其基于 Apache2.0 许可的开源程序，可以免费用于商业和非商业用途。
- 作为前端工程师，就是要把晦涩难懂的代码以可视化的方式呈现在用户面前，2D 也好，3D 也罢，都是调用 api 去完成，因此，对前端来说，Cesium 与“高德地图api”、“echarts”、“leaflet”等等都没有本质的区别，只不过呈现效果不同而已，因此不必抱有太大的心理负担。
二、准备工作
（一）注册账号
（二）拿到 token
（三）添加资产
- 这里会有很多资产
- 选择自己要用的添加到个人资产里面
三、初始化地球
（一）绑定key
Cesium.Ion.defaultAccessToken = “刚刚拿到的key”
（二）初始化一个干干净净的球
const viewer = new Cesium.Viewer('cesiumContainer', {
geocoder: false, //关闭地理编码搜索展示
homeButton: false, //关闭主页按钮展示
fullscreenButton: false, //关闭全屏按钮展示
sceneModePicker: false, //关闭场景选择器展示
baseLayerPicker: false, //关闭基础图层选择器展示
navigationHelpButton: false, //关闭导航帮助按钮展示
navigationInstructionsInitiallyVisible: false, //关闭导航说明展示
animation: false, //关闭设置动画小组件展示
timeline: false, //关闭时间轴展示
shouldAnimate: true, //打开自动播放
orderIndependentTranslucency: false, //关闭与阶段无关的半透明
contextOptions: {
webgl: {
alpha: true, //使用alpha通道实现背景透明
},
},
infoBox: false, //关闭点击右侧弹出的信息框
selectionIndicator: false, //关闭点击绿色选中框效果
sceneMode: 3, //开启场景模式为3D
scene3DOnly: false, //是否指定仅为三维模式，全部使用三维模式可节约GPU资源
imageryProvider: new Cesium.ArcGisMapServerImageryProvider({
url: 'https://services.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer',
}), //图像图层源，这个只能设置一个
terrainProvider: new Cesium.CesiumTerrainProvider({
url: Cesium.IonResource.fromAssetId(1),
requestVertexNormals: true,
requestWatermark: true,
}), //地形图层源，这个代码从个人资产那里复制
});
// 去cesium水印
viewer._cesiumWidget._creditContainer.style.display = 'none';
viewer.scene.globe.depthTestAgainstTerrain = false;
viewer.scene.globe.showGroundAtmosphere = false;
（三）性能优化（这个根据个人电脑承受度来）
// 开启抗锯齿 fxaa
viewer.scene.fxaa = true;
viewer.scene.postProcessStages.fxaa.enabled = true;
viewer.camera.flyTo({
destination: Cesium.Cartesian3.fromDegrees(104.07, 30.57, 40000000),
});
handler.setInputAction(event => {
let cartesian = viewer.camera.pickEllipsoid(event.position);
const lnglat = radiansToCoordinate(cartesian);
console.log('event', lnglat);
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
};
// 抗锯齿处理
antiAliasing();
const antiAliasing = () => {
if (Cesium.FeatureDetection.supportsImageRenderingPixelated()) {
viewer.resolutionScale = window.devicePixelRatio;
}
const supportsImageRenderingPixelated = viewer.cesiumWidget._supportsImageRenderingPixelated;
if (supportsImageRenderingPixelated) {
let vtxf_dpr = window.devicePixelRatio;
while (vtxf_dpr >= 2.0) {
vtxf_dpr /= 2.0;
}
viewer.resolutionScale = vtxf_dpr;
}
};
