Cesium安装以及环境配置

Cesium安装以及环境配置

浏览器支持

首先，检查一下你的浏览器是否支持WebGL。 目前，大多数平台和浏览器都支持WebGL，在这些环境下运行Cesium并没有太大的问题，但效果和性能是否能够满足不同的需求，就需要考虑很多细节和额外因素。

大多数平台和浏览器都支持WebGL1.0标准，也就是OpenGL ES2.0规范。2017年年初，Chrome新版本低调的支持WebGL2.0，随着各硬件厂商GPU性能的提升和WebGL2.0规范的成熟，WebGL技术会有更大的提升潜力。 首先，无论是PC还是移动端，Chrome是WebGL开发和应用的最佳平台，所以，如果没有特殊的硬性要求，建议大家使用Chrome学习和开发Cesium。

通过浏览器访问WebGL Report网站，获取浏览器对WebGL的支持清单。如上图，红线是最关心的几个属性：

是否支持WebGL标准

是否支持ANGLE 扩展： Chrome通过该扩展，在Windows平台下将OpenGL接口转为D3D，不仅提升了性能，而且还可以支持实例化这一重要特性

是否支持深度纹理： 拾取等功能依赖于深度技术

顶点着色器的最大属性数： 一个功能自从诞生之初，就开始趋于复杂，所以我们还要清楚它的极限，合理控制产品的复杂度。

目前IE11对WebGL支持的还可以，但不支持深度纹理，需要升级到Edge；在移动平台，Cesium的地球调度比较消耗资源，目前的硬件能力并不太适合，比如内存崩溃，机器发烫。思路是在移动端仅支持平面场景，只是一个局部坐标，节约地球调度的性能消耗。

浏览器选择

Cesium是建立在几种新的HTML5技术上的，其中最重要的是WebGL。尽管这些新标准很快被广泛采用，但一些浏览器和系统需要更新以支持它们。如果示例应用程序不适合您，这里有一些需要尝试的东西。

1. 更新您的web浏览器。大多数Cesium团队使用谷歌Chrome，但火狐、Internet Explorer 11和Opera也将工作。如果您已经使用了上述浏览器中的一个，请确保它已更新到最新版本。
2. 更新你的显卡驱动，以更好地支持3D。如果你知道你有什么类型的视频卡，你可以检查供应商网站进行更新。最受欢迎的三个是:Nvidia, AMD, 和 Intel。
3. 如果您仍然有问题，请尝试访问http://get.webgl.org/，它提供了额外的解决问题的建议。你也可以在Cesium forum（论坛）上寻求帮助。

选择编辑器或IDE

1. 如果您已经是一个经验丰富的开发人员，那么您很可能拥有一个最喜欢的编辑器或开发环境;例如，大多数铯团队都使用Eclipse、Idea。如果你刚刚开始，一个很棒的免费和开源的编辑器是Notepad++，你可以从their website下载。最终，所有的文本编辑器都会这样做，所以你可以选择你最喜欢的那个。

设置web服务器以及安装

Cesium的Node js安装方法

为了运行Cesium程序, 我们需要一个本地web服务器来承载我们的文件。我们将使用node.js和其它的教程。 如果您已经有了您想要使用的web服务器，那也可以，只要确保我们在上一节中创建的根目录就可以了。Cesium没有服务器要求;它完全是客户端。这意味着任何能够承载静态内容的web服务器也可以承载Cesium。

下载CesiumJS安装文件。

设置一个node.js的服务很简单，只要下面三步：

1.初始化Node.js，使用其默认的初始化配置。

2.在Cesium根目录中打开一个命令shell，并通过执行 npm install来安装来下载/安装所需的模块。这将在根目录中创建一个“node_modules”目录。 也可以通过npm install cesium来一步安装。

4.最后，通过执行 在根目录下的node server.js启动web服务器。

你应该看到如下的结果。

现在,我们已经创建了一个web服务器启动并运行,我们可以启动一个浏览器,并打开http://localhost:8080/Apps/HelloWorld.html。这是我们在本教程开始时用来测试WebGL的Hello World应用程序。

Python方式

1.假设已经安装好Python，如使用的是Anaconda 5.1，Python版本是3.6的。

2.通过开始菜单打开Anaconda Prompt控制台程序，并进入到Cesium的安装目录,然后输入：python -m http.server 9090，即可打开Web服务，见下图（其中9090为端口号，可自行设置，只要不与其他端口冲突就行了）

在浏览器地址栏中输入：http://localhost:9090/ ，即可访问Cesium的主文件 

使用Tomcat架设Cesium本地服务器

我们将Cesium部署在本地服务器上主要有以下方面的考虑：

1.局域网内，创建Web服务，通过对Cesium服务端文件的修改，展示我们自己想要提供的功能，从而可以在局域网内任何一台机器上通过浏览器即可访问。

2.将测试修改后的Cesium文件部署到云主机中自己的网站上，实现个人网站的发布。

下载

去Tomcat官网下载，下载的apache-tomcat-9.0.7。注意，下载.zip文件为免安装版本。放在合适位置，直接解压缩即可，放在 D:\apache-tomcat-9.0.7。

环境变量配置

配置系统的环境变量（右键计算机-属性-高级系统设置-环境变量-新建系统变量）

变量名：CATALINA_HOME，变量值为安装目录” D:\apache-tomcat-9.0.7”，根据你自己安装的目录进行对应修改。

由于tomcat依赖于JAVA的运行环境，因此应确保JRE的安装，我安装的JDK版本是1.8，同样查看JRE的环境变量是否配置正确，确保JRE_HOME指向正确的位置。

有关Java运行环境JDK的安装，请参考：

https://blog.csdn.net/u011575168/article/details/79920107。

启动服务

进入到Tomcat安装目录的bin目录下，找到startup.bat文件，双击运行，即可看到以下界面，注意，在tomcat提供web服务期间，不要关闭此窗口。 
然后打开浏览器，在里面输入http://localhost:8080/ 就可以看到如下界面

到此Tomcat就搭建好了,web服务即开启。

关闭服务

直接关闭命令行窗口时，Tomcat就停止了。

修改端口号

tomcat提供web服务默认的端口号是8080，如果想要修改端口号，则进入Tomcat安装目录下的conf目录，打开server.xml，修改以下代码中的port值，然后重启tomcat即可。

               connectionTimeout="20000" 

               redirectPort="8443" />

注意，如果是建立个人网站，则端口号设置为80。

tomcat报warinig Unable to add the resource at [..] to the cache..

信息大致的意思就是不能给资源加cache了，因为没有足够的可用空间了。

原来 tomcat8中增加了静态资源缓存的配置

以下是两个相关参数说明：

cacheMaxSize：静态资源缓存最大值，以KB为单位，默认值为10240KB

cachingAllowed：是否允许静态资源缓存，默认为true

解决方法：

增大缓存 在 conf/context.xml中加入：

修改tomcat默认主页

前面介绍开启tomcat服务时，默认登录的页面是tomcat的，那么如何修改TOMCAT的默认主页为你自己项目的主页呢？

最简单的办法是删除Tomcat目录下的\webapps\ROOT文件夹下所有文件，然后将自己主页的文件全部放在Root文件夹下面。

同时删除文件夹\work\Catalina内的所有文件即可。

Cesium的配置

下载Cesium(2018年4月的版本是1.44)，将其解压缩在Tomcat目录下的Webapps文件夹内，Cesium文件夹结构如下(为了方便可以将文件夹名称Cesium-1. .44改为Cesium)：

其中，文件夹lyf是我自己创建的。

注意，下载的压缩包文件是放在服务器端的，index.html就是通过浏览器访问tomcat服务器上的Cesium的主页面，不能直接双击打开，必须通过浏览器访问才能打开。

浏览器访问Cesium及调试

确保你的浏览器支持WebGl，现在最新的浏览器如Chrome/Edge都支持的。

确保tomcat的服务打开，在浏览器地址栏输入http://localhost:8080/Cesium-1.44/即可打开:

注意，上图中，Lyf.HelloWord是我通过修改index.html内容增加的，见下代码处：

建议在本地机器利用Cesium开发的简单流程如下：

    1.在Cesium-1.44文件夹内创建自己的个人文件夹（我的是lyf），以后自己所有开发的所有网页(html,img,css)都放在这个文件夹中。

    2.拷贝Cesium-1.44/Apps/HelloWorld.html文件到个人文件下，并修改名称（如LyfHelloWorld.html），以便区别。

    3.在Cesium主文件index.html中，创建连接指向个人文件夹中的html文件，如LyfHelloWorld.html。

    4.利用各种网页编辑器(Eclipse,Visual Studio Code,PyCharm等）直接修改LyfHelloWorld.html，或者创建其他的网页。

5.然后浏览器刷新主页http://localhost:8080/Cesium-1.44/，点击指向所要测试的连接即可查看修改后的效果。

一个例子

例如，我想将下面的图片加载到3D地球上

则将图片WhiteOnBlue.bmp放在lyf文件夹下的imag文件夹内，然后修改lyfHelloworld.html中代码如下：

保存后，重新加载http://localhost:8080/Cesium-1.44/，点击lyf.HelloWord，即可打开我自己修改后的页面(后面修改html代码后，可直接更新此页面)：

准备你的页面

在开始写代码之前，你需要完成以下几个步骤来准备你的页面,在官方网站下载Cesium包 ，拷贝里面的/Build/Cesium目录到自己的网站中(例如下面示例的lib/Cesium)：

• 在页面的head标签中添加以下代码来引入CSS和JavaScript文件：

• 将id为cesiumContainer的div标签放到地图显示的地方，如body中：

• 【可选】确保地图容器有定义好的高度，例如在css文件中添加如下代码：

 html, body, #cesiumContainer {height: 100%;width: 100%;margin: 0;padding: 0;overflow: hidden;}

设置三维地球

窗体顶端

窗体底端

让我们创建一个使用本地瓦片地图的三维地图。首先，我们初始化地图，并添加底图图层：

   var url = "http://www.google.cn/maps/vt?lyrs=s&x={x}&y={y}&z={z}";

viewer = new Cesium.Viewer("cesiumContainer", {

    animation: false,        //是否创建动画小器件，左下角仪表  

    timeline: false,         //是否显示时间线控件  

    fullscreenButton: false, //右下角全屏按钮 

    geocoder: false,         //是否显示地名查找控件   

    baseLayerPicker: false,  //是否显示图层选择控件  

    imageryProvider: new Cesium.UrlTemplateImageryProvider({url:url})});

//去cesium logo水印

viewer.cesiumWidget.creditContainer.style.display = "none";

现在你已经学会使用Cesium创建一个三维地图应用。如果想要继续开发更多功能，请查看详细的API文档和示例。