第一个 Api Viewer
跟着官方文档捣鼓出个 3D 地球? easy!但接下来就卡在原地一脸懵圈?别慌!小墨这有祖传秘籍 —— 想用啥 API 就嚼透啥配置,直接走捷径不香吗?毕竟咱学技术就得有 "拿来吧你" 的霸气,百度那都是给新手练手的~
搞定上面这张图只是开胃菜,瞅着满屏花里胡哨的元素犯迷糊?分不清谁是李逵谁是李鬼?格局打开!Cesium 里看得见的都是 "Api 的娃",每个按钮每个框框都有后台大佬撑腰。而撑起整个场子的幕后大哥,就是咱今天要翻牌子的 ——Viewer!学会它,你就是地球的总导演~
Viewer 文档全是英文?瞅着就脑壳疼?莫慌莫慌!小墨早就给你们把骨头嚼碎了喂到嘴边,以后想用啥直接来我这儿抄作业,英文不好照样能当 Cesium 老司机,就这么豪横!
这构造函数可精明了,左手一个 DOM 元素当舞台,右手一个配置项当剧本,想让地球咋表现全看你心情。上面那些花里胡哨的玩意儿,全在配置项里藏着呢,调好了直接封神!
1. 基础容器与场景设置 —— 给地球安个家
| 配置项 | 类型 | 说明 |
|---|---|---|
container | string/HTMLElement | 必选项!地球的专属豪宅,没它连门都进不来(比如 "cesiumContainer" 就是个好地址)。 |
scene3DOnly | boolean | 强制 3D 模式耍酷,禁用 2D 和 Columbus 视图这些 "花架子",默认还在摇摆不定(false)。 |
sceneMode | SceneMode | 开局姿势选哪个?3D 霸气侧漏、2D 平铺直叙、Columbus 视图半遮半掩,默认必须 3D 主场! |
orderIndependentTranslucency | boolean | 半透明效果开不开?开了颜值飙升但可能费点力气,默认直接拉满(true)。 |
2. 控件显示控制 —— 给地球装开关
Cesium 自带一堆 "小弟"(交互控件),想让谁出镜全看你心情:
| 配置项 | 类型 | 说明 |
|---|---|---|
animation | boolean | 动画控件要不要?控制时间轴跟玩似的,默认必须安排上(true)。 |
baseLayerPicker | boolean | 图层切换器必须有!影像地形随便换,默认敞开供应(true)。 |
fullscreenButton | boolean | 全屏装逼按钮,一点直接霸占整个屏幕,默认必须给(true)。 |
geocoder | boolean | 地理编码搜索框,输个地址直接飞过去,默认自带导航(true)。 |
homeButton | boolean | "回家" 按钮,浪够了一键归位,默认贴心备着(true)。 |
infoBox | boolean | 点一下就弹窗说悄悄话(实体详情),默认啥都敢说(true)。 |
navigationHelpButton | boolean | 导航小助手,不会操作点它就完事儿,默认随叫随到(true)。 |
sceneModePicker | boolean | 场景模式切换器,3D/2D / 哥伦布视图秒切,默认给足选择(true)。 |
selectionIndicator | boolean | 点中实体就亮个框框,生怕你不知道选了啥,默认眼神超好(true)。 |
timeline | boolean | 时间轴拉一拉,地球历史随便看,默认给你掌控时间(true)。 |
3. 图层配置 —— 给地球穿衣服
| 配置项 | 类型 | 说明 |
|---|---|---|
imageryProvider | ImageryProvider | 地球的 "皮肤",高德、天地图、Bing 地图随便换,默认自带款也很能打。 |
terrainProvider | TerrainProvider | 地球的 "肌肉",想要 hills 还是 mountains?默认先给个平坦的练练手。 |
skyBox | SkyBox | 地球的 "背景墙",星空银河随便换,默认自带浪漫星空滤镜。 |
skyAtmosphere | SkyAtmosphere | 地球的 "腮红",蓝色光晕一吹仙气飘飘,默认直接拉满氛围感。 |
useDefaultRenderLoop | boolean | 自动刷新画面要不要?默认帮你盯梢(true),想手动操作也能关。 |
4. 相机与视角设置 —— 给地球调镜头
| 配置项 | 类型 | 说明 |
|---|---|---|
camera | Camera | 初始视角导演椅,想从哪个角度拍地球全看你安排。 |
homeCameraView | CameraView | "回家" 按钮的隐藏坐标,想飞哪就飞哪,自定义才够个性。 |
resizeSensor | boolean | 自动适应容器大小,地球也懂 "见机行事",默认超懂事(true)。 |
5. 性能与渲染设置 —— 给地球开美颜
| 配置项 | 类型 | 说明 |
|---|---|---|
contextOptions | Object | WebGL 的 "化妆间",抗锯齿、深度缓冲区随便调,比如 { antialias: true } 直接开磨皮。 |
maximumScreenSpaceError | number | 地形模型的 "细节开关",数值越小越精致(但费显卡),默认给个平衡值(2)。 |
showRenderLoopErrors | boolean | 渲染出错了敢不敢吭声?默认直接报给你看(true),藏着掖着可不行。 |
这么一顿操作猛如虎,多余的控件全干掉,整个地球清爽到起飞!想咋折腾咋折腾,这波配置直接把逼格拉满,谁看了不说一句 "绝了"~