（一）Cesium的概念定义

　　Cesium是国外一个基于JavaScript编写的使用WebGL的地图引擎。Cesium支持3D,2D,2.5D形式的地图展示，可以自行绘制图形，高亮区域，并提供良好的触摸支持，且支持绝大多数的浏览器和mobile，CesiumJS是一个开放源代码JavaScript库，用于创建具有最佳性能，精度，视觉质量和易用性的世界一流的3D地球和地图。从航空航天到智慧城市再到无人机，各行各业的开发人员都使用CesiumJS创建用于共享动态地理空间数据的交互式Web应用程序。CesiumJS建立在开放格式上，旨在实现强大的互操作性。从Cesium ion或其他来源获取数据，使用CesiumJS进行可视化，并与台式机或移动设备上的用户共享。CesiumJS的下载量超过1,000,000，为数百万用户提供了强大的应用程序，整个定义来自官方网站。

（二）Cesium的安装与配置环境

　　前面已经了解了什么是Cesium，现在就是开始使用了，说到安装其实Cesium会有一个资源包，目前已经到了1.72版本了，下载下来在代码进行引用即可。如果你网速够给力，且可翻，也可不用下载资源包，在代码中通过src将js与css格式在线引用，不过该方法会出现加载慢的特点，建议还是将资源包下载下来，本地引用。另外说到配置环境，对于前端来说，nodejs的环境必须要有的，看到很多博主用Python、tomcat以及IIS进行http环境搭建，本人使用的为git命令行输入http-server的方式进行http服务的环境搭建的，不过原理大致一样，配置完相关的环境，就可以写出Cesium的第一例子了。

（三）Cesium的第一个实例

很多博主中第一个实例出现的第一段代码基本都是var viewer = new Cesium.Viewer('cesiumContainer')，然后把h5的其他部分补齐，出现了一个大大的地球，于是小伙伴们感觉去尝试了一下，发现事情并不简单，大部分用该代码出现的就是一个大大的黑框除了cesium自带的一些东西外，并没有出现地球，那是为什么那？好了不买关子了，这里不出现地球最主要的原因是版本变了，因为我们在加载上面的代码的时候，默认使用的是必应的底图，但在1.5版本以后，加载底图不能说随便加载了，你必须有必应的token才行，那就要去先去注册一个token了，（必应地图地址https://www.bingmapsportal.com/），如图注册完成以后的截图：

token创建完成，就好操作了，代码如下：

<!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!111</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 id="cesiumxin" style="position:fixed;left:0;z-index:99"><a href="http://cesium.xin" style="color:aliceblue;text-decoration:none">http://cesium.xin <label for="">cesium中文网 http://cesium.xin </label></a></div>

    </div>

  <script>

        Cesium.BingMapsApi.defaultKey = "你的key";

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

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

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

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

        shouldAnimate: true,

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

        imageryProvider: new Cesium.BingMapsImageryProvider({

        url: "https://dev.virtualearth.net",

        mapStyle : Cesium.BingMapsStyle.AERIAL }),

});

  </script>

</body>

</html>

　　这时候你再去运行会发现，那个久违的地球出来了，如图：

很多小伙伴也发现了，这个代码中有几行为 imageryProvider: new Cesium.BingMapsImageryProvider({ url: "https://dev.virtualearth.net",mapStyle : Cesium.BingMapsStyle.AERIAL }),这标记的红色的代码就有意思了，这个mapstyle就是地图的格式啊，也就是说我们可以通过修改代码中的这个值，这个地球也会变成不同的球体了，不行我们可以试试，

mapStyle : Cesium.BingMapsStyle.ROAD时出现的球体：同时还包括AERIAL、AERIAL_WITH_LABELS、ROAD、ORDNANCE_SURVEY、COLLINS_BART等必应带的风格，可以自己去尝试加载一下。
好了，学习Cesium第一部分的内容就结束了，后面将持续更新，有什么问题加QQ779059300一起学习交流。

Cesium系统学习整理（一）的更多相关文章

  1. Java设计模式（学习整理）---命令模式

    设计模式之Command(学习整理) 1.Command定义 不少Command模式的代码都是针对图形界面的,它实际就是菜单命令,我们在一个下拉菜单选择一个命令时,然后会执行一些动作. 将这些命令封装 ...

  2. Wix学习整理（3）——关于Windows Installer和MSI

    原文:Wix学习整理(3)--关于Windows Installer和MSI 关于Windows Installer Windows Installer是微软Windows操作系统自带的一个软件安装和 ...

  3. Wix学习整理（1）——快速入门HelloWorld

    原文:Wix学习整理(1)--快速入门HelloWorld 1 Wix简介 Wix是Windows Installer XML的简称,其通过类XML文件格式来指定了用于创建Windows Instal ...

  4. 如何系统学习知识图谱-15年+IT老兵的经验分享

    一.前言 就IT而言,胖子哥算是老兵,可以去猝死的年纪,按照IT江湖猿龄的规矩,也算是到了耳顺之年:而就人工智能而言,胖子哥还是新人,很老的新人,深度学习.语音识别.人脸识别,知识图谱,逐个的学习了一 ...

  5. Spring IOC设计原理解析:本文乃学习整理参考而来

    Spring IOC设计原理解析:本文乃学习整理参考而来 一. 什么是Ioc/DI? 二. Spring IOC体系结构 (1) BeanFactory (2) BeanDefinition 三. I ...

  6. 【系统学习ES6】新专题发布

    我要发免费专题了,向下看 公众号和博客都有一阵没更新了,丢了一些粉儿,但是也很庆幸,时时还会有人关注.我并不是什么专业讲师,文章都是利用业余时间手工原创.在这里非常感谢各位的支持和厚爱. 这个月开始, ...

  7. 【系统学习ES6】第一节：新的声明方式

    [系统学习ES6] 本专题旨在对ES6的常用技术点进行系统性梳理,帮助大家对其有更好的掌握.计划每周更新1-2篇,希望大家有所收获. 以前用ES5时,声明变量只能用var.ES6的出现,为我们带来了两 ...

  8. js数组学习整理

    原文地址:js数组学习整理 常用的js数组操作方法及原理 1.声明数组的方式 var colors = new Array();//空的数组 var colors = new Array(3); // ...

  9. TweenMax学习整理--特有属性

    TweenMax学习整理--特有属性   构造函数:TweenMax(target:Object, duration:Number, vars:Object) target:Object -- 需要缓 ...

随机推荐

  1. Lua语言15分钟快速入门

    转载自: https://blog.csdn.net/qq_15437667/article/details/75042526 -- 单行注释 --[[ [多行注释] --]] ---------- ...

  2. SpringSecurity权限管理系统实战—九、数据权限的配置

    目录 SpringSecurity权限管理系统实战-一.项目简介和开发环境准备 SpringSecurity权限管理系统实战-二.日志.接口文档等实现 SpringSecurity权限管理系统实战-三 ...

  3. 调试 Ingress Nginx

    由于 Ingress Nginx 是最受欢迎的 Ingress 控制器,因此接下来我们将介绍一些有关调试 ingress-nginx 的技巧. 调试 Ingress Nginx Ingress-ngi ...

  4. 面试官：谈一下你对DDD的理解？我：马什么梅？

    领域模型(domain model)是对领域内的概念类或现实世界中对象的可视化表示.领域模型也称为概念模型.领域对象模型和分析对象模型. ——<UML和模式应用> 我们在日常开发中,经常针 ...

  5. Java面试题（Spring Boot/Spring Cloud篇）

    Spring Boot/Spring Cloud 104.什么是 spring boot? SpringBoot是一个框架,一种全新的编程规范,他的产生简化了框架的使用,所谓简化是指简化了Spring ...

  6. oracle再回首

    第一章 Oracle 数据库的使用   一. 数据库相关概念   1 什么是数据库 所谓的数据库其实就是数据的集合.用户可以对集合中的数据进行新增.查询.更新. 删除等操作.数据库是以一定方式储存在一 ...

  7. UTF-8、GB2312、GBK编码格式详解和编码示例

    UTF-8.GB2312.GBK编码格式详解 参考文章 UTF-8 使用1~4个字节对每个字符进行编码 128个ASCII字符字需要一个字节编码 带有附加符号的拉丁文.希腊文.西里尔字母.亚美尼亚语. ...

  8. 手写Promise看着一篇就足够了

    目录 概要 博客思路 API的特性与手写源码 构造函数 then catch Promise.resolved Promise.rejected Promise.all Promise.race 概要 ...

  9. PJSIP开发指南

    一.通用设计 1.1   架构 1.1.1        通信图 下面的图展示了SIP消息在PJSIP组件间从后端到前端如何传递的. 1.1.2        类图 下面的图显示类视图 1.2   E ...

  10. 如何用python制作贪吃蛇以及AI版贪吃蛇

    用python制作普通贪吃蛇 哈喽,大家不知道是上午好还是中午好还是下午好还是晚上好! 很多人学习python,不知道从何学起.很多人学习python,掌握了基本语法过后,不知道在哪里寻找案例上手.很 ...