首页 > 文章

Cesium简介

文章 06-01 0 简介 Cesium

cesium

一、Cesium介绍

Cesium是国外一个基于JavaScript编写的使用WebGL的地图引擎。Cesium支持3D,2D,2.5D形式的地图展示,可以自行绘制图形,高亮区域,并提供良好的触摸支持,且支持绝大多数的浏览器和mobile。

二、Cesium特点

1、一个API - 三种视图

2、动态地理空间数据的可视化

通过CZML创建数据驱动的时间动态场景。

高分辨率的世界地形可视化。

使用WMS,TMS,openstreetmaps,Bind以及ESRI的标准绘制影像图层。

使用KML,GeoJSON和TopoJSON绘制矢量数据。

使用COLLADA和glTF绘制3D模型。

使用插件扩展核心Cesium。

3、内置的高性能和高精度

优化的WebGL,充分利用硬件渲染图形,使用低级别的几何和渲染程序。 绘制大范围的折线,多边形,广告牌,标签,挤压以及走廊。 控制摄像头和创造飞行路径。 使用动画控件控制动画时间。

三、Cesium示例

以下将示例如何运行一个Cesium应用程序:

1、确保浏览器支持Cesium

验证Cesium在Web浏览器中工作的最简单方法是运行HelloWorld例子,点击这里。如果你看到一些像下面的图片,恭喜你,你运行的该Web浏览器支持运行Cesium,那么你可以跳到下一部分阅读;否则,继续阅读。

Cesium是建立在几个新的HTML5技术之上的,其中最重要的是WebGL。虽然这些新的标准正在迅速成为广泛采用,但一些浏览器和系统需要升级从而支持他们。如果示例应用程序允许失败,你可以尝试以下的建议:

(1)更新您的Web浏览器。大多数的Cesium团队使用Google Chrome,但Firefox,IE 11以及Opera也能运行。如果你正在用这些浏览器,请确保更新它到最新版本。

(2)更新您的显卡驱动从而更好地支持3D。如果你知道你正用的是什么类型的显卡,你可以检查进行更新。三个最流行的显卡提供商是:Nvidia,AMD以及Intel。

(3)如果你仍然有问题,尝试访问http://get.webgl.org/,它提供了额外的问题解决建议。你也可以在Cesium论坛寻求帮助。

2、选择编辑器或IDE

如果你已经是一个经验丰富的开发者,你很可能会有一个最喜爱的编辑器和开发环境;例如,大多数的Cesium的团队使用日蚀。如果你刚刚开始,一个伟大的自由和开放源码编辑器,记事本++,你可以从网上下载他们的网站。最终,任何文本编辑器会做的,所以去一个你最舒服。

3、下载Cesium

如果你还没有这样做,点击这个按钮来获取最新的Cesium:下载Cesium。
下载完成之后将zip文件解压到你选择的新目录,解压之后文件目录类似于下图。

不能直接双击运行index.html,在实际工作中,它需要运行在Web服务器上。

4、设置Web服务器

为了运行Cesium的应用,我们需要一个本地Web服务器的主机文件。我们所有的例子将使用Node.js。当然你也可以使用自己的服务器,只要把上一节的目录放在服务器根目录下。

设置一个Web服务器通过Node.js是很容易的,只需要3个步骤:

(1)从安装Node.js网站,你可以使用默认安装设置。

(2)打开命令行,然后进入Cesium的根目录,通过npm install下载安装所需要的模块。
最后,在根目录执行node server.js启动Web服务器。

(3)此时您将看到下图:

5、运行Hello world!

现在我们的Cesium已经运行在Web服务器上,我们可以启动Web浏览器并输入网址http://localhost:8080/HelloWorld.html。这与我们刚开始测试WebGL时看到的Hello World应用程序是一样的,但现在是运行在你自己的系统中,而不是在Cesium网站上。如果我们在编辑器中打开helloworld.html,我们会看到以下代码:

<!DOCTYPE html> <html lang="en"> <head> <!-- Use correct character set. --> <meta charset="utf-8"> <!-- Tell IE to use the latest, best version. --> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- Make the application on mobile take up the full browser screen and disable user scaling. --> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"> <title>Hello World!</title> <script src="../Build/Cesium/Cesium.js"></script> <style> @import url(../Build/Cesium/Widgets/widgets.css); html, body, #cesiumContainer { width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden; } </style> </head> <body> <div id="cesiumContainer"></div> <script> var viewer = new Cesium.Viewer('cesiumContainer'); </script> </body> </html>

以下四行将添加到你的应用程序中:

(1)引入cesium.js。该文件定义了Cesium对象,它包含了我们需要的一切。

<script src="../Build/Cesium/Cesium.js"></script>

(2)为了能使用Cesium各个可视化控件,我们需要引入widgets.css。

@import url(../Build/Cesium/Widgets/widgets.css);

(3)在HTML的body中我们创建一个DIV,用来作为三维地球的容器。

<div id="cesiumContainer"></div>

(4)最后,在js中初始化CesiumViewer实例。

var viewer = new Cesium.CesiumViewer('cesiumContainer');

6、接下来干嘛

通过以上的学习,恭喜你,你已经开始写你自己的Cesium应用和网页了。那么根据自己的情况,你可能对其他Cesium教程感兴趣。如果你是一个新手,通过Cesium Sandcastle这个编码的应用,您不仅可以查看几十个实例,也可以查看和编辑自己的源代码,从应用程序中运行查看你的改变。最后,无论你如何学习,参考文献对每个人来说都是一个非常宝贵的资源。

  • 权健公司董事长简介
  • 庄则栋简介 庄则栋的资料
  • 李云迪个人资料简介国籍 李云迪的国籍以及个人资料简介
  • 心在跳情在烧原唱歌词 心在跳情在烧歌曲简介
  • 环境设计专业学什么 环境设计专业简介
  • 小七摄政王的小说叫什么名字 小七摄政王的小说内容简介
  • DNF金钱兔属性是什么 DNF金钱兔属性简介
  • 自动化就业方向及前景 自动化简介
  • 陈佩斯个人资料 关于陈佩斯的简介
  • 水玻璃密度 水玻璃简介
  • 本文地址:https://www.ytsfc.com/show-1-19971-0.html

    • 大结局为什么萧炎杀药老

      大结局为什么萧炎杀药老

      原著大结局为什么萧炎杀药老​1、原因就是萧炎自身的原因了。萧炎是远古八族之萧族的后人,萧炎手中的古玉是打开古帝遗迹的关键。收集古玉是药老他们一直的使命。所以,药老追...

    • 车标志识别图片大全  【图片】

      车标志识别图片大全 【图片】

      每一辆汽车都有自己的品牌标志,用于告诉大家它们的生产厂家。下面我们来认识一下一些比较常见的汽车标志,有不认识的小伙伴赶快记下来!中国汽车最著名的要属:奇瑞、吉利、长城、...

    • 达咩啥意思:达咩为什么不能随便说

      达咩啥意思:达咩为什么不能随便说

      哒咩什么意思达咩的意思是不行,不许,不可以的意思。达咩是日语的中文读音译字,是一句比较生活化的日常用语。日语常用语还有,晚安对长辈:お休みなさい(哦呀斯米那赛),再见:さようなら...

    • 水浒传人物介绍:水浒传15个人物介绍

      水浒传人物介绍:水浒传15个人物介绍

      水浒传15个人物介绍1, 及时雨,呼保义,宋江:及时雨:总在别人需要的时候出现 2,玉麒麟,卢俊义 ,麒麟是神兽,是百兽之长 富甲天下,仗义疏财3,智多星,吴用 智多星,聪明,智慧多多的上界星辰...

    评论底部pc
    评论底部 m

    豆豆的家

    http://www.ytsfc.com/

    '); })(); | 京ICP1234567-2号

    Powered By 电视大师网 XXX公司

    使用手机软件扫描微信二维码

    关注我们可获取更多热点资讯

    感谢小豆豆技术支持