Cesium环境搭建成功和初步看一下它的示例

雨点打透心脏的1/2处 2022-12-20 14:55 167阅读 0赞

Cesium是一款开源的基于JavaScript的3D地图框架。

官网描述：

CesiumJS is a geospatial 3D mapping platform for creating virtual globes. Our mission is to create the leading web-based globe and map for visualizing dynamic data. We strive for the best possible performance, precision, visual quality, ease of use, platform support, and content.  
CesiumJS 是一款用于创建虚拟场景的3D地理信息平台。目标是用于创建以基于Web的地图动态数据可视化。目前尽力提升平台的性能、准确率、虚拟化能力、易用性以及平台的各种支持。

数据格式与功能特性  
Cesium支持3D Tiles、Terrain and Imagery Layers、3D Models（glTF）、Vectors and Geometry（Load KML, GeoJSON, TopoJSON, and CZML）、Time-Dynamic Visualization、3D, 2D, and 2.5D Columbus View

环境搭建；node.js首先要安装；可参阅；

[https://blog.csdn.net/bcbobo21cn/article/details/106110480][https_blog.csdn.net_bcbobo21cn_article_details_106110480]

![20201112221809521.png][]

下载 Cesium 源码；解压以后如下；在此目录执行 npm install 命令；

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JjYm9ibzIxY24_size_16_color_FFFFFF_t_70][]

网络不好有时会出现一些状况；如下；

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JjYm9ibzIxY24_size_16_color_FFFFFF_t_70 1][]

deprecated  
v.    对…表示极不赞成; 强烈反对;

再运行一次；好了；npm执行完；

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JjYm9ibzIxY24_size_16_color_FFFFFF_t_70 2][]

在Cesium目录下多出 node\_modules目录；如果没出现此目录就不能往下；

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JjYm9ibzIxY24_size_16_color_FFFFFF_t_70 3][]

参照教程，要运行此目录下的server.js；但是我下的源码解压后只有一个server.cjs；把此文件保存一下，然后重命名为server.js，试一下；

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JjYm9ibzIxY24_size_16_color_FFFFFF_t_70 4][]

执行node server.js；成功如下；提示 Cesium开发服务器正在运行；连接到本地8080端口；

![20201112221903386.png][]

网页进入localhost:8080；出现了Cesium的首页；到这环境就搭建成功；

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JjYm9ibzIxY24_size_16_color_FFFFFF_t_70 5][]

看一下它的 示例，helloworld是地球；

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JjYm9ibzIxY24_size_16_color_FFFFFF_t_70 6][]

[http://localhost:8080/Apps/Sandcastle/index.html?src=3D%20Models.html][http_localhost_8080_Apps_Sandcastle_index.html_src_3D_20Models.html]

这个是场景和3D模型；

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JjYm9ibzIxY24_size_16_color_FFFFFF_t_70 7][]

http://localhost:8080/Apps/Sandcastle/index.html?src=3D%20Tiles%20Photogrammetry.html  
这是一个场景；

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JjYm9ibzIxY24_size_16_color_FFFFFF_t_70 8][]

示例都有源码；应该可以参照来开发自己的3D地图应用了；

[https_blog.csdn.net_bcbobo21cn_article_details_106110480]: https://blog.csdn.net/bcbobo21cn/article/details/106110480
[20201112221809521.png]: /images/20221120/e32c8aabcc574a308ff0e0367217003a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JjYm9ibzIxY24_size_16_color_FFFFFF_t_70]: /images/20221120/c819ec5d6f0748d0877b4fe863a625e3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JjYm9ibzIxY24_size_16_color_FFFFFF_t_70 1]: /images/20221120/5380e7e27a9444fe8dcc55c989d0b106.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JjYm9ibzIxY24_size_16_color_FFFFFF_t_70 2]: /images/20221120/79d81d2f975549d587c3c359843d4b19.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JjYm9ibzIxY24_size_16_color_FFFFFF_t_70 3]: /images/20221120/dd766cb5504a4f0ea25dc505cc41802f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JjYm9ibzIxY24_size_16_color_FFFFFF_t_70 4]: /images/20221120/215ec5c4b4a24314b21db96e50675502.png
[20201112221903386.png]: /images/20221120/8109c6d016584cf2b325d0d6051d4455.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JjYm9ibzIxY24_size_16_color_FFFFFF_t_70 5]: /images/20221120/6537517ba9f34d6783d624f686538cc7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JjYm9ibzIxY24_size_16_color_FFFFFF_t_70 6]: /images/20221120/a105918ec3e24c0ab23c6512544ced4f.png
[http_localhost_8080_Apps_Sandcastle_index.html_src_3D_20Models.html]: http://localhost:8080/Apps/Sandcastle/index.html?src=3D%20Models.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JjYm9ibzIxY24_size_16_color_FFFFFF_t_70 7]: https://img-blog.csdnimg.cn/20201112221927495.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JjYm9ibzIxY24=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JjYm9ibzIxY24_size_16_color_FFFFFF_t_70 8]: https://img-blog.csdnimg.cn/20201112221935412.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JjYm9ibzIxY24=,size_16,color_FFFFFF,t_70