（一）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. pytest「conftest、pytest参数化、重运行、出测试报告」

    文章总览图 一.conftest问题整理: 1.这个conftest.py分路径吗?如果在TestCases下建这个包可以直接用吗? TestCases这里有ModeA和ModeB,想在ModeA或M ...

  2. Leetcode 24. Swap Nodes in Pairs(详细图解一看就会）

    题目内容 Given a linked list, swap every two adjacent nodes and return its head. You may not modify the ...

  3. MPI聚合函数

    MPI聚合通信 MPI_Barrier int MPI_Barrier( MPI_Comm comm ); 所有在该通道的函数都执行完后,才开始其他步骤. 0进程在状态T1调用MPI_Barrier函 ...

  4. android，在java代码中，如何给textview设置不同的颜色，以及引用color中资源设置颜色

    textV.setTextColor(Color.parseColor("#FF0000")); <pre name="code" class=" ...

  5. android studio生成aar包

    android studio生成aar包并在其他工程引用aar包 http://blog.csdn.net/getchance/article/details/47257389 用Android st ...

  6. POJ-1273Drainage Ditches(网络流入门题，最大流)

    Every time it rains on Farmer John's fields, a pond forms over Bessie's favorite clover patch. This ...

  7. P1164 小A点菜（动态规划背包问题）

    题目背景 uim神犇拿到了uoi的ra(镭牌)后,立刻拉着基友小A到了一家--餐馆,很低端的那种. uim指着墙上的价目表(太低级了没有菜单),说:"随便点". 题目描述 不过ui ...

  8. WordCount(Java实现)

    Github项目地址:https://github.com/linzworld/word-count 项目相关要求 题目描述 Word Count 实现一个简单而完整的软件工具(源程序特征统计程序). ...

  9. 分布式文件存储：FastDFS简单使用与原理分析

    引言 FastDFS 属于分布式存储范畴,分布式文件系统 FastDFS 非常适合中小型项目,在我接手维护公司图片服务的时候开始接触到它,本篇文章目的是总结一下 FastDFS 的知识点. 用了 2 ...

  10. P2414 [NOI2011]阿狸的打字机 AC自动机

    题意 给定n个模式串,有m个询问,每次询问第X个模式串在第Y个模中出现了多少次 解题思路 以fail树相反的方向建一棵树T,问题转化为X的子树中有多少个y的终止节点.跑出T的dfs序,X的子树就可以表 ...