Cesium简介_3d地图cisum-程序员宅基地

技术标签: Cesium  

Cesium简介

一、Cesium介绍

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

二、Cesium特点

1、一个API - 三种视图

OneApiThreeViews

Cesium支持三维地球(3D),二维地图(2D)以及2.5D哥伦布视图(2.5D)。

3D  2D  2.5D

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。如果你知道你正用的是什么类型的显卡,你可以检查进行更新。三个最流行的显卡提供商是:NvidiaAMD以及 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这个编码的应用,您不仅可以查看几十个实例,也可以查看和编辑自己的源代码,从应用程序中运行查看你的改变。最后,无论你如何学习,参考文献对每个人来说都是一个非常宝贵的资源。

分类: Cesium, GIS 3D
标签: Cesium, 3D
2
0
currentDiggType = 0;
« 上一篇: CSS选择器详解
» 下一篇: Cesium开发实践汇总
posted @ 2015-11-21 18:56 laixiangran 阅读( 18737) 评论( 2) 编辑 收藏

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/u011575168/article/details/80030937

智能推荐

华为手机如何设置鸿蒙系统,华为手机怎样安装鸿蒙系统 安装步骤如下-程序员宅基地

文章浏览阅读665次。描述鸿蒙系统是一款全新的面向全场景的分布式操作系统,基于微内核打造了一个超级虚拟终端互联的世界,将人、设备、场景有机地联系在一起,一站式解决智能家居、智慧办公、智慧出行、运动健康、影音娱乐五大生活场景。并支持PC、手机、平板、手表等多设备多硬件。同时,鸿蒙系统解决了以往安卓系统卡顿及老化问题,更流畅、续航更持久,极大的提升了用户体验。鸿蒙系统的安装步骤:1、6月2日起,首批启动公测升级 Harmo..._鸿蒙系统怎样和华为手机

“华为云杯”2020深圳开放数据应用创新大赛·生活垃圾图片分类(目标检测)_华为公司垃圾分类大赛开放数据集-程序员宅基地

文章浏览阅读741次。代码和思路分享来自Github:https://github.com/selous123/yolov3-pytorch-custom调ultralytics/yolov3这个炉子,目前b榜在0.74左右,一阶段准确率很高的网络了。前排大佬可能大部分都是基于MMdet的二阶段网络,Faster-RCNN,Cascade-RCNN等。比赛数据集下载地址:链接: https://pan.baidu.com/s/1lh1D1wvXUV3rjJOUpWsBlA 提取码: znk3MMdetection安._华为公司垃圾分类大赛开放数据集

matlab实现PS算法之色调分离_ps去色和matlab-程序员宅基地

文章浏览阅读2.3k次。%{色调分离的原理就是将R, G, B每个通道 0-255 的色调区间进行强制划分到给定的区间里去,所以色调会合并,最终的图像看起来颜色就是一块一块的。%}clear,clc;[filename,pathname] = uigetfile('*.jpg;*.bmp','选择图片','E:\pictures\For_Project\Matlab');imgaepath = strcat_ps去色和matlab

快来新媒体:通过社交媒体建立个人IP的 5 种行之有效的策略_新媒体营销设计ip-程序员宅基地

文章浏览阅读141次。成为有影响力的社交媒体达人为个人IP营销和小型商业机会打开了大门,因此请从他们的主页内容中找出一些如何帮助您利用的个人IP的信息。在您不发帖的日子里,专注于生成您的关注者希望看到的内容类型,例如可共享的信息图、播客链接或有关您参加的有价值的网络研讨会的帖子。您可以谈论您的成就并添加有关您个人生活的有趣信息,但请记住,注入过多的个人观点可能会孤立您的目标受众。由于社交媒体的成功并不是建立个人IP的万能方法,因此您必须做一些工作并做出一些明智的决定,以确保您通过社交媒体投射出正确的个人IP形象。..._新媒体营销设计ip

PyCharm中导入第三方包_pycharm导入sentinelsat包-程序员宅基地

文章浏览阅读422次。PyCharm中导入第三方包转载自https://blog.csdn.net/u014028063/article/details/80423009背景:除了基本的python操作,当我们需要导入第三方包的时候,如何导入进PyCharm在Windows中的PyCharm中导入模块的方法1,在file–>setting–>project interpreter中2,点击右上角加..._pycharm导入sentinelsat包

android截屏快捷键 截屏工具 音量下键+电源键-程序员宅基地

文章浏览阅读995次。一般来说android手机或者平板,只要用两个手指同时按下:音量下键+电源键,一秒钟即可截屏,截屏图片保存到了/sdcard/Pictures/Screenshots文件夹下面。这个方法在nexus s、小米1原生android 4.0和nexus 7里面都是确切可用的,其他的手机也应该是类似的。根本不需要过得root权限。如果这个方法不行,可以试试ascreenshot软件,当然这个软件是需要r..._电源键加音量下键截图shell

随便推点

制作抖音卡点视频?Python来帮你~-程序员宅基地

文章浏览阅读1k次。点击上方“AirPython”,选择“置顶公众号”第一时间获取Python技术干货!阅读文本大概需要10 分钟。1目 标 场 景玩抖音的朋友都应该知道,最近「卡点视..._python将多个视频根据音乐自动卡点混剪成一个视频?

PHP ApiDoc接口文档工具,提供php api文档模板-程序员宅基地

文章浏览阅读500次。ApiDoc参考前言ApiDoc 用来比较规范的管理 API 文档。ApiDoc 这个 API 文档管理器,可以根据你代码的注释来进行自动生成 API 文档。同时支持 C#、Java、JavaScript、PHP、Python等语言。目录目录结构12345678910111213project 项目目录├─src 源代码目录│ ├─commo..._php apidoc

ubuntu中docker的安装和使用--学习笔记_compose1.1.1-程序员宅基地

文章浏览阅读260次。1. Docker & Docker Compose1.1. Docker1.1.1. Docker安装sudo apt install docker.io1.1.2. Docker修改国内镜像加速器您可以通过修改daemon配置文件/etc/docker/daemon.json来使用加速器sudo mkdir -p /etc/dockersudo tee /etc/docker/daemon.json <<-'EOF'{ "registry-mirrors":_compose1.1.1

SQL中的substr和JSON_extract的使用_sql中jsonextra过滤-程序员宅基地

文章浏览阅读2k次。SQL中的substr和JSON_extract的使用语句使用substrJSON_extract举例语句使用SQL 功能很强大,小细节也很多,最近学了俩新的小tips,总结如下substr用法:substr(string string,num start,num length);JSON_extract用法:JSON_extract(json,’$.json具体字段id’)举例SQL表格中字段如下: { "applCde": "202012142000018647754", _sql中jsonextra过滤

js replaceAll函数-程序员宅基地

文章浏览阅读3.4k次。js中没有java中的replaceAll()函数,为了达到与java的replaceAll()一样的效果,我们可以用如下代码实现: String.prototype.replaceAll = function(s1,s2) { return this.replace(new RegExp(s1,"gm"),s2); }调用方式:如想替换字符串”aa bb cc”中的所有空..._js replaceall

[算法Rust,Go,Python,JS实现)]LeetCode之26.-删除排序数组中的重复项_rust去重算法-程序员宅基地

文章浏览阅读4.4k次。题目给定一个排序数组,你需要在原地删除重复出现的元素,使得每个元素只出现一次,返回移除后数组的新长度。不要使用额外的数组空间,你必须在原地修改输入数组并在使用 O(1) 额外空间的条件下完成。示例 1:给定数组 nums = [1,1,2], 函数应该返回新的长度 2, 并且原数组 nums 的前两个元素被修改为 1, 2。 你不需要考虑数组中超出新长度后面的元素。思路..._rust去重算法