Cesium简介以及离线部署运行

àì夳堔傛蜴生んèń 2022-05-25 20:45 461阅读 0赞

https://blog.csdn.net/liguoweioo/article/details/53993977

Cesium简介

--------------------

cesium是国外一个基于JavaScript编写的使用WebGL的地图引擎，一款开源3DGIS的js库。cesium支持3D,2D,2.5D形式的地图展示，可以自行绘制图形，高亮区域，并提供良好的触摸支持，且支持绝大多数的浏览器和mobile，但是由于cesium基于WebGL来渲染3D的，所以对浏览器有要求，必须支持WebGL才行。参照cesium官网的说明文档，浏览器支持版本：IE11或者以上、谷歌、火狐版本比较高级等等，其实测试浏览器支不支持，运行demo就可以测试，会提示的，不支持的话。

由于个人刚研究cesium，简单的谈谈个人对cesium的浅见：

优点：

1.  开源，开源，开源，可以研究源代码以及针对性对源代码进行一些修改工作，cesium源代码github地址：[https://github.com/AnalyticalGraphicsInc/cesium/tree/1.29][https_github.com_AnalyticalGraphicsInc_cesium_tree_1.29]；
2.  cesiumAPI版本更新频率高，几乎每个月一个版本，说明cesium人气高；

<table style="border-spacing:0px;width:851.818px;margin:0px;padding:0px;border:1px solid rgb(192,192,192);"> 
 <tbody style="margin:0px;padding:0px;"> 
 <tr style="margin:0px;padding:0px;"> 
 <td style="padding:3px;margin:0px;border-color:rgb(192,192,192);border-collapse:collapse;">Version</td> 
 <td style="padding:3px;margin:0px;border-color:rgb(192,192,192);border-collapse:collapse;">Download</td> 
 <td style="padding:3px;margin:0px;border-color:rgb(192,192,192);border-collapse:collapse;">Date</td> 
 <td style="padding:3px;margin:0px;border-color:rgb(192,192,192);border-collapse:collapse;">Notes</td> 
 </tr> 
 <tr style="margin:0px;padding:0px;"> 
 <td style="padding:3px;margin:0px;border-color:rgb(192,192,192);border-collapse:collapse;">1.29</td> 
 <td style="padding:3px;margin:0px;border-color:rgb(192,192,192);border-collapse:collapse;"><a href="http://cesiumjs.org/releases/Cesium-1.29.zip" style="color:rgb(0,0,0);margin:0px;padding:0px;" rel="nofollow">Cesium-1.29.zip&nbsp;</a>(42.51 MB)</td> 
 <td style="padding:3px;margin:0px;border-color:rgb(192,192,192);border-collapse:collapse;">2017-01-02</td> 
 <td style="padding:3px;margin:0px;border-color:rgb(192,192,192);border-collapse:collapse;"> 
 <ul style="margin-bottom:0px;margin-left:30px;list-style:none;"> 
 <li style="padding:0px;margin-top:0px;margin-bottom:1em;margin-left:0px;"><a href="http://cesiumjs.org/2017/01/02/Cesium-version-1.29-released/" style="color:rgb(0,0,0);margin:0px;padding:0px;" rel="nofollow">Blog post</a></li> 
 <li style="padding:0px;margin-top:0px;margin-bottom:1em;margin-left:0px;"><a href="https://github.com/AnalyticalGraphicsInc/cesium/tree/1.29" style="color:rgb(0,0,0);margin:0px;padding:0px;" rel="nofollow">Source</a></li> 
 <li style="padding:0px;margin-top:0px;margin-bottom:1em;margin-left:0px;"><a href="http://cesiumjs.org/releases/1.29/index.html" style="color:rgb(0,0,0);margin:0px;padding:0px;" rel="nofollow">Documentation, Code Examples, Tests, etc.</a></li> 
 </ul></td> 
 </tr> 
 <tr style="margin:0px;padding:0px;"> 
 <td style="padding:3px;margin:0px;border-color:rgb(192,192,192);border-collapse:collapse;">1.28</td> 
 <td style="padding:3px;margin:0px;border-color:rgb(192,192,192);border-collapse:collapse;"><a href="http://cesiumjs.org/releases/Cesium-1.28.zip" style="color:rgb(0,0,0);margin:0px;padding:0px;" rel="nofollow">Cesium-1.28.zip&nbsp;</a>(42.40 MB)</td> 
 <td style="padding:3px;margin:0px;border-color:rgb(192,192,192);border-collapse:collapse;">2016-12-01</td> 
 <td style="padding:3px;margin:0px;border-color:rgb(192,192,192);border-collapse:collapse;"> 
 <ul style="margin-bottom:0px;margin-left:30px;list-style:none;"> 
 <li style="padding:0px;margin-top:0px;margin-bottom:1em;margin-left:0px;"><a href="http://cesiumjs.org/2016/12/01/Cesium-version-1.28-released/" style="color:rgb(0,0,0);margin:0px;padding:0px;" rel="nofollow">Blog post</a></li> 
 <li style="padding:0px;margin-top:0px;margin-bottom:1em;margin-left:0px;"><a href="https://github.com/AnalyticalGraphicsInc/cesium/tree/1.28" style="color:rgb(0,0,0);margin:0px;padding:0px;" rel="nofollow">Source</a></li> 
 <li style="padding:0px;margin-top:0px;margin-bottom:1em;margin-left:0px;"><a href="http://cesiumjs.org/releases/1.28/index.html" style="color:rgb(0,0,0);margin:0px;padding:0px;" rel="nofollow">Documentation, Code Examples, Tests, etc.</a></li> 
 </ul></td> 
 </tr> 
 <tr style="margin:0px;padding:0px;"> 
 <td style="padding:3px;margin:0px;border-color:rgb(192,192,192);border-collapse:collapse;">1.27</td> 
 <td style="padding:3px;margin:0px;border-color:rgb(192,192,192);border-collapse:collapse;"><a href="http://cesiumjs.org/releases/Cesium-1.27.zip" style="color:rgb(0,0,0);margin:0px;padding:0px;" rel="nofollow">Cesium-1.27.zip&nbsp;</a>(42.65 MB)</td> 
 <td style="padding:3px;margin:0px;border-color:rgb(192,192,192);border-collapse:collapse;">2016-11-01</td> 
 <td style="padding:3px;margin:0px;border-color:rgb(192,192,192);border-collapse:collapse;"> 
 <ul style="margin-bottom:0px;margin-left:30px;list-style:none;"> 
 <li style="padding:0px;margin-top:0px;margin-bottom:1em;margin-left:0px;"><a href="http://cesiumjs.org/2016/11/01/Cesium-version-1.27-released/" style="color:rgb(0,0,0);margin:0px;padding:0px;" rel="nofollow">Blog post</a></li> 
 <li style="padding:0px;margin-top:0px;margin-bottom:1em;margin-left:0px;"><a href="https://github.com/AnalyticalGraphicsInc/cesium/tree/1.27" style="color:rgb(0,0,0);margin:0px;padding:0px;" rel="nofollow">Source</a></li> 
 <li style="padding:0px;margin-top:0px;margin-bottom:1em;margin-left:0px;"><a href="http://cesiumjs.org/releases/1.27/index.html" style="color:rgb(0,0,0);margin:0px;padding:0px;" rel="nofollow">Documentation, Code Examples, Tests, etc.</a></li> 
 </ul></td> 
 </tr> 
 <tr style="margin:0px;padding:0px;"> 
 <td style="padding:3px;margin:0px;border-color:rgb(192,192,192);border-collapse:collapse;">……</td> 
 <td style="padding:3px;margin:0px;border-color:rgb(192,192,192);border-collapse:collapse;">&nbsp;</td> 
 <td style="padding:3px;margin:0px;border-color:rgb(192,192,192);border-collapse:collapse;">&nbsp;</td> 
 <td style="padding:3px;margin:0px;border-color:rgb(192,192,192);border-collapse:collapse;">&nbsp;</td> 
 </tr> 
 <tr style="margin:0px;padding:0px;"> 
 <td style="padding:3px;margin:0px;border-color:rgb(192,192,192);border-collapse:collapse;">b5</td> 
 <td style="padding:3px;margin:0px;border-color:rgb(192,192,192);border-collapse:collapse;"><a href="http://cesiumjs.org/releases/Cesium-b5.zip" style="color:rgb(0,0,0);margin:0px;padding:0px;" rel="nofollow">Cesium-b5.zip&nbsp;</a>(18.68 MB)</td> 
 <td style="padding:3px;margin:0px;border-color:rgb(192,192,192);border-collapse:collapse;">2012-05-15</td> 
 <td style="padding:3px;margin:0px;border-color:rgb(192,192,192);border-collapse:collapse;"> 
 <ul style="margin-bottom:0px;margin-left:30px;list-style:none;"> 
 <li style="padding:0px;margin-top:0px;margin-bottom:1em;margin-left:0px;"><a href="https://github.com/AnalyticalGraphicsInc/cesium/tree/b5" style="color:rgb(0,0,0);margin:0px;padding:0px;" rel="nofollow">Source</a></li> 
 </ul></td> 
 </tr> 
 </tbody> 
</table>

1.  cesium展示地图数据效果比较好，解析2D地图各种不同服务类型的数据源，比如百度地图、天地图、arcgis地图、BingMap、openStreetMap、MapBox等等；解析地形图加载；解析3D模型，包括动态加载以及3Dtitles切片形式加载展示，尤其是3Dtitles，大大的加快了展示3D模型的展示效率；
2.  Cesium封装部分地图控件，直接调用即可，不用自己写；
3.  ……

缺点：

1.  跟商业3DGIS软件对比，比如skyline，cesium三维分析功能太弱了，不排除我自己对cesium了解不够深的可能性；据我所知， cesium官网关于三维分析的例子几乎没，都是以展示数据以及渲染数据为主的例子，希望官网后续的API版本对三维分析重视。
2.  没有提供标绘工具Draw，2DGIS一般都是提供Draw工具的，比如arcgis api以及openlayer api；cesium想要绘制点、线、面，只能通过代码来绘制，貌似不能在线手动画；
3.  没有地图量算工具、地图比例尺、拉框缩放等，这些地图基本工具，在cesium都需要自己来写实现；
4.  ……

CesiumAPI离线部署运行

--------------------

1.cesium官网下载cesiumAPI解压包，解压之后的目录如下：

![462357-20170103120105034-368629621.png][]

里面包括编译后的Build文件夹以及cesium api源代码Source文件夹

2.cesium离线部署运行，这里我的运行demo项目开发环境为：myeclipse+tomcat

![462357-20170103120156972-517732686.png][]

拷贝cesiumAPI解压的编译后整个文件夹进来我的demo项目，文件夹命名为cesiumAPI

3.3dmap.jsp页面加载cesiumAPI运行测试

1）地图页面引用cesium需要的css以及js文件即可生效

![复制代码][copycode.gif]

<script src="${pageContext.request.contextPath}/js/map/cesiumjs/cesiumAPI/Cesium.js">
 
 </script>
 
 <link href="${pageContext.request.contextPath}/js/map/cesiumjs/cesiumAPI/Widgets/widgets.css" rel="stylesheet" type="text/css" />

![复制代码][copycode.gif]

2）创建地图以及展示代码：

Var  viewer = new Cesium.Viewer(“cesiumContainer”);

4.运行效果：

![462357-20170103120523316-1947038980.png][]

GIS之家论坛（推荐）： [GIS之家论坛][GIS]  
GitHub: [GIS之家GitHub][GIS_GitHub]   
GIS作品： [GIS之家][GIS 1]  
QQ兴趣部落： [GIS之家部落][GIS 2]  
GIS项目交流群：238339408  
GIS之家交流群一：432512093(已满)  
GIS之家交流群二：296438295

[https_github.com_AnalyticalGraphicsInc_cesium_tree_1.29]: https://github.com/AnalyticalGraphicsInc/cesium/tree/1.29
[462357-20170103120105034-368629621.png]: /images/20220526/27010fa592e24f788062de8591832ecb.png
[462357-20170103120156972-517732686.png]: /images/20220526/5503d508645a474e9d1b5aada42433f9.png
[copycode.gif]: /images/20220526/e4db1979663640f9a4fc73369b910636.png
[462357-20170103120523316-1947038980.png]: /images/20220526/f5bbe11c15664412b309ebb1deef9794.png
[GIS]: http://www.gishome.online/
[GIS_GitHub]: https://github.com/gishome/arcgis-for-js
[GIS 1]: https://shop116521643.taobao.com/shop/view_shop.htm
[GIS 2]: http://buluo.qq.com/p/barindex.html?bid=327395