技术分享
cesium超速入门总结
00 分钟
2019-12-16
2024-5-19
type
status
date
slug
summary
tags
category
icon
password
由于工作原因,做了一些有关 cesium 的三维地图开发。基于我所用到的功能,于此做一个入门总结,并记录下曾踩下的坑。初学者可依照以下整个完整流程,复现功能内容。做此记录时,cesium 版本为 ^1.64.0
注:这里虽然利用了 npmyarn 来快速安装 cesium ,但实际的demo只需直接引用文件,不需要打包

测试用demo路径结构描述

准备工作

开发环境

建议使用 VSCode 进行开发,并安装插件 Live Server,用于启动此 index.html 文件

安装cesium

index.html文件初始化

初始界面预览

notion image

常用初始化配置

以下内容不会给出完整代码,但会给出完整核心代码片段,读者对照初始化 index.html 自行增添或者更改即可运行,若出现误差,可尝试把 cesium 版本调整到 ^1.64.0。以下 js 代码均直接在 script 标签全局命名空间中出现。

隐藏界面小控件

通过初试配置,将界面上默认显示的控件隐藏,以便进行自定义
仅仅是如此设置,底部还剩一段图片加文字信息,这里可以通过 css 手动隐藏。在 style 中添加如下代码。
如此,一个干净完整的地球便出现了
notion image

去掉光圈

如果有人觉得地球外层的光圈太扎眼,可以通过以下方式去除
效果如下
notion image

聚焦框和信息框的隐藏

默认情况下,如果左键双击 cesium 地图上的实体内容,camera 视角会自动聚焦过去,并显示自带的聚焦框以及实体的信息框
 
默认不显示聚焦框和信息框
取消默认的左键双击实体效果,便于自定义其他交互

地形加载

初始化时默认加载地形
后期手动添加地形
:此方法加载地形时,加载的是 cesium 自己发布的地形服务。一旦 cesium 官方版本更新,则会导致地形加载失败(默认加载的底图也是如此)。浏览器控制台会报Token过期的错,但是实际上就算你更改了 Cesium.Ion.defaultAccessToken 的值仍然不能解决此问题。正确操作是,升级项目的 cesium 版本即可。最好的方法是,发布自己的地形以及底图服务,并加载。这样就不会受到 cesium 版本更新的影响。

底图服务加载

imageryProvider 除了下面示例的 ArcGisMapServerImageryProvider 以外,还有分别用于加载其他不同框架底图服务的构造函数,具体内容,可在官方文档中搜索 imageryProvider 查询。
初始化默认加载其他底图
后期手动添加底图
:此坑与地形等同

视角转换

camera 相关的所有操作在此处查看

较为常用功能

以下内容,涉及到具体私人发布使用的服务部分,只给出最为核心的代码片段,如何实现。需要读者自行发布或寻找服务进行测试

geojson的加载使用

针对高精度倾斜摄影加载及显示效果优化

倾斜摄影数据以 3dtile 的形式加载出来,通常情况下,只需要有 url 就足够了。以下参数是由于倾斜摄影数据总数据太大,清晰度过高,从而调节参数进行性能优化。这不是一个通用的解决方案,但可以以此为参考。

限制camera高度的上下限

事件绑定

通过Cartesian2获得经纬度的方式

地图二三维转化

 

评论
Loading...