Cesium笔记(1) 环境搭建及第一个示例

浏览器

浏览器需要支持WebGL，可通过访问官网示例检查是否支持。建议使用火狐/谷歌浏览器。
https://cesiumjs.org/Cesium/Apps/HelloWorld.html

编辑器/IDE

Eclipse、Notepad++、Sublime text 3、webStrom或者VSCode。使用任何一个编辑器/IDE都可以进行开发，所以，使用你认为最舒适的编辑器即可。

使用NodeJS运行Cesium项目

1. 下载并解压Cesium
网址：https://cesiumjs.org/downloads/

2. 下载并安装NodeJS
网址：http://nodejs.cn/download/

3. 下载和安装需要的模块
打开cmd命令窗口，进入Cesium工程的根目录。执行npm install命令，即可下载依赖的npm模块。

执行npm install

4. 启动web服务器

打开cmd命令窗口，进入Cesium工程的根目录。
执行node server.js命令，即可启动。
如果需要在其它机器上访问该服务，执行node server.js --public命令。

5. Hello World ヽ(￣▽￣)ﾉ

打开浏览器，访问http://localhost:8080/Apps/HelloWorld.html，就能看到和官方一模一样的hello wolrd 三维数字地球。

HelloWorld
默认端口号是8080，如需更改，可打开server.js文件，将port中的8080修改为对应的值即可。

server.js 修改端口号

使用其他IDE运行Cesium项目

由于cesium的调试和运行必须在网络环境下，我们需要一个本地的web服务器进行发布。除了NodeJS，还有Visual Studio、WebStorm、Eclipse等IDE都提供了本地服务器的功能。使用其他IDE运行Cesium项目，只需把cesium的相关文件，放入项目中，并在html或jsp中添加引用即可。此处以MyEclipse10为例。
1. 打开MyEclipse，新建Web项目

新建Web项目

2. 获取Cesium的js、css等文件
下载并解压Cesium，将Build\CesiumUnminified文件夹拷贝至Web项目中的WebRoot文件夹下

拷贝至WebRoot文件夹

3. 添加引用
打开index.jsp，添加cesium.js、widgets.css的引用

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <base href="<%=basePath%>">
        <title>Hello World ヽ(￣▽￣)ﾉ</title>

        <script src="CesiumUnminified/Cesium.js"></script>
        <style>
            @import url(CesiumUnminified/Widgets/widgets.css);

            html, body, #cesiumContainer {
                width: 100%; 
                height: 100%; 
                margin: 0px; 
                padding: 0px; 
                overflow: hidden;
            }
        </style>
    </head>

    <body>
        <div id="cesiumContainer"></div>
        <script>
            var viewer = new Cesium.Viewer('cesiumContainer');
        </script>
    </body>
</html>

4. 部署并启动服务

部署Web项目

启动Tomcat服务器

Hello World ヽ(￣▽￣)ﾉ

参考文章：
使用Node.js运行Cesium项目
https://blog.csdn.net/liu844133828/article/details/80732118
[CesiumJS]Cesium入门2 – Cesium环境搭建及第一个示例程序
http://blog.coinidea.com/cesiumjs-1309.html
cesium 学习笔记（1）安装及环境配置
https://blog.csdn.net/whu_kevin_lin/article/details/82949940

最后编辑于：2019.07.11 14:59:08