Cesium应用篇:快速搭建

       范例中所有范例可以在Github中搜索:ExamplesforCesium

       Cesium ['siːzɪəm]是一款开源的JavaScript开源库,开发者通过Cesium,实现无插件的创建三维球和二维地图。Cesium通过WebGL技术实现图形的硬件加速,并且跨平台,跨浏览器,并提供动态数据的可视化展现。

       Cesium本意是化学元素铯,其是定义秒的最精确标准,普遍地用于制作精细的原子钟,而Cesium项目专注于动态可视化方面,这也是其取名为Cesium的内在涵义。 

准备工作
  • 浏览器
    确保你的浏览器支持WebGL,推荐Chrome
    如果无法确定你的浏览器是否支持,可以访问webglreport网站获取详情
  • Tomcat
    在本系列中,使用tomcat,且默认读者了解如何通过tomcat发布服务
  • 开发环境
    如果没有特殊喜好,如果自己的开发机器不是特别差,推荐使用WebStorm。该IDE是收费的,不过,你懂的
  • Cesium产品包
    本文中,使用的是Cesium-1.25。通过官网可以方便获取
 
产品包清单

clip_image001

  • Apps
    Cesium详细的范例程序,建议都自己仿照着敲一遍,会有不少收获
  • Build
    Release包,打包后的脚本以及CSS,Workers等,以及文档
  • Source
    源码
  • Specs
    Cesium的自动化单元测试,采用Jasmine框架 ,这个也是非常好用的,可以实现自动化测试框架以及接口覆盖率等统计效果,会面会有一个具体章节来介绍
  • 其他
    gulpfile.js:打包脚本,后续会有专门介绍
 
Hello,World

       看到index.html,相信你已经忍不住的双击了。很遗憾,WebGL出于安全性的考虑,不允许以本地file的方式打开,因此,你需要将Cesium文件夹放到tomcat中webapps下发布,以localhost的方式发布。(如果你不了解如何在tomcat中发布网站,不用担心,这个过程非常简单,Google一下,相信会有很多相关博文可供参考。)

       下面,我们试着完成一个页面,创建一个Cesium三维球。

       首先,新建examples文件夹,并在examples文件夹中新建文件hello.html,实现我们第一个范例。

clip_image002

      

       接着,在hello.html中粘贴如下代码:

 

clip_image004

 

       该代码内容如下:1引入Cesium.js脚本和对应的css文件,我们就完成了相关脚本的加载工作;2同时创建id= cesiumContainer的div,并且创建Cesium.Viewer窗口,且该窗口对应刚才创建的div。运行该html文件,我们很轻松的创建了第一个WebGL Globe,效果如下:

 

clip_image006

 
Hello World2

       如上,我们轻松愉快的体验了一把Cesium,但这只是万里长征的一小步。万事开头难,所以这个头一定要做好。

       上面的hello.html本身没有什么问题,但对于开发人员,或多或少都需要以源码方式加载,便于调试和问题的定位,但如上的范例直接加载Build下的Release脚本,对开发人员来说略显不足,下面我们就升级一下这个范例。

       Cesium采用Require.js的框架,用兴趣的同学可以在网上了解一下Require.js的基本概念。我们下载require.min.js脚本,保存在Cesium/examples/js/文件夹中,统一管理脚本。并在examples文件夹中,新建hello2.html.

 

clip_image007

 

       在hello2.html中,代码如下:

 

clip_image009

 

       和hello.html的代码相似,但我们并没有直接引用Build下的Cesium.js脚本,而是引用了require.js脚本:

<script src="./js/require.min.js" data-main="./js/main"></script>

       data-main属性可以在require脚本加载结束后,指定加载的第一个文件,这里是main.js(保存在Cesium/examples/js/下)。

       main.js中代码如下:

 

clip_image010

 

       在该脚本中,变量developMode来记录是否以Release或源码方式来加载脚本,并根据该变量值来设置对应的文件路径。最后,调用onload函数,结束main.js脚本的使命。

       Onload函数?这个函数在哪里定义的?细心的用户不难发现,该函数的实现是在hello2.html中,在该函数中,用户创建div,并创建Cesium.Viewer窗口绑定该div,实现三维球的加载,其逻辑和hello.html完全一样,只是封装在了onload函数内。

       这样,我们基本上完成了一个完整的范例,可以设置developMode的值,选择是否需要加载源码进行调试。

CESIUM EPSG::900913 是指Cesium中常用的投影坐标系,也被称为Web墨卡托投影(Web Mercator)。该投影使用了EPSG:3857的代码。它是一种等距投影,用于在Web地图中显示经纬度坐标。Web墨卡托投影将地球表面投影到一个平面上,使得在地图上的距离与实际距离近似相等,从而方便进行地理数据的可视化和分析。 要在Cesium中使用EPSG::900913投影,您可以在代码中使用相应的坐标系转换库(例如proj4)来将其他坐标系转换为EPSG::900913。您还可以查找提供的地理数据文件(如geojson或json文件)中的"crs"字段,查找与EPSG::900913或EPSG::3857相关的字段名称。 请注意,虽然EPSG::900913常用于Web地图应用程序中,但它实际上是一个非正式的投影代码,因此更推荐使用EPSG::3857来表示Web墨卡托投影。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* [Cesium出现Unknown crs name: urn:ogc:def:crs:EPSG:xxxx](https://blog.csdn.net/weixin_43972992/article/details/127066824)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *3* [ol-cesium:OpenLayers-Cesium集成](https://download.csdn.net/download/weixin_42121086/14949890)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值