Cesium 环境配置笔记（使用node.js 或者WampServer服务器）

冷不防 2022-01-05 08:21 143阅读 0赞

# 1. 下载Cesium: #

[https://cesiumjs.org/downloads/][https_cesiumjs.org_downloads]

# 2. Server端配置: #

参考链接： [https://www.jianshu.com/p/bcb53bb9d675][https_www.jianshu.com_p_bcb53bb9d675]

## 2.1 使用node.js: ##

1) 从官网中下载安装Node.js([https://nodejs.org/en/download/current/][https_nodejs.org_en_download_current])

参考链接：[https://blog.csdn.net/qq\_42543312/article/details/82191357][https_blog.csdn.net_qq_42543312_article_details_82191357]

简述：

a.下载exe

b.点击exe, next到底，即安装完成。

c. 验证安装是否成功:

cmd中输入“**node -v**” 显示node版本号，如“**v10.16.0**” 说明node安装成功

cmd中输入“**npm -v**” 显示npm 版本号， 如“**6.9.0**”说明npm安装成功

2) 在**Cesium所在的安装文件夹**目录（如：D:\\Program Files\\Cesium-1.58\\），打开cmd或者bash敲入命令

npm install

"npm install "下载依赖的npm模块，比如express等。如果成功，会在Cesium文件夹中床架 ‘node\_modules’文件夹。

3) 最后在cmd或者bash中执行

node server.js

控制台会输出：...Cesium development server running locally. Connect to http://localhost:8080

4）保持控制台一直运行状态(即服务器开启状态)。打开浏览器，输入 [http://localhost:8080][http_localhost_8080] 即可访问Cesium.

## 2.2 使用WampServer ##

1) 下载安装 Wampserver

安装文件： [https://nchc.dl.sourceforge.net/project/wampserver/WampServer%203/WampServer%203.0.0/wampserver3.1.9\_x64.exe][https_nchc.dl.sourceforge.net_project_wampserver_WampServer_203_WampServer_203.0.0_wampserver3.1.9_x64.exe]

配置说明：[https://blog.csdn.net/wuguandi/article/details/53561253][https_blog.csdn.net_wuguandi_article_details_53561253]

配置说明：[https://www.cnblogs.com/clnchanpin/p/6985610.html][https_www.cnblogs.com_clnchanpin_p_6985610.html]

2) 在默认的安装路径下，www根目录中建立自己的项目目录文件夹如：D:\\ProgramFiles\\wamp64\\www\\cesiumProject（以下称为“项目目录”）

a. 使用cesium源代码中的样式和默认配置：如复制 D:\\Program Files\\Cesium-1.58\\Build\\CesiumUnminified文件夹到项目目录

b. 在此目录下新建一个helloworld.html:

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Hello 3D Earth</title>
        <script src="CesiumUnminified/Cesium.js"></script>
        <style>
            @import url(CesiumUnminified/Widgets/widgets.css);
            html, body, #cesiumContainer {
                width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden;
            }
        </style>
    </head>
    <body>
        <div id="cesiumContainer"></div>
        <script src="app.js"></script>
    </body>
    </html>

c. 在此目录下新建一个**app.js**

viewer = new Cesium.Viewer('cesiumContainer');

其中cesiumContainer为html中的地图显示div的id。就是这么简单，浏览器打开上述html页面，便可看到一个三维地球。底图为微软影像只是加载到了三维地球上，包含放大、缩小、平移等基本在线地图功能，同时还包含了时间轴等与时间有关的控件，这是Cesium的一个特色，其地图、对象以及场景等能与时间相关联。

3) 启动 WampServer，浏览器中输入"localhost/**cesiumProject/helloworld.html**"便可看到一个三维地球。

4) 开始尽情的修改app.js 去实现想要的功能吧。

[https_cesiumjs.org_downloads]: https://cesiumjs.org/downloads/
[https_www.jianshu.com_p_bcb53bb9d675]: https://www.jianshu.com/p/bcb53bb9d675
[https_nodejs.org_en_download_current]: https://nodejs.org/en/download/current/
[https_blog.csdn.net_qq_42543312_article_details_82191357]: https://blog.csdn.net/qq_42543312/article/details/82191357
[http_localhost_8080]: http://localhost:8080
[https_nchc.dl.sourceforge.net_project_wampserver_WampServer_203_WampServer_203.0.0_wampserver3.1.9_x64.exe]: https://nchc.dl.sourceforge.net/project/wampserver/WampServer%203/WampServer%203.0.0/wampserver3.1.9_x64.exe
[https_blog.csdn.net_wuguandi_article_details_53561253]: https://blog.csdn.net/wuguandi/article/details/53561253
[https_www.cnblogs.com_clnchanpin_p_6985610.html]: https://www.cnblogs.com/clnchanpin/p/6985610.html