Cesium系统学习整理（一）

时间 2020-11-10

标签 css html 前端 node git 浏览器 tomcat app ide 性能栏目 CSS 繁體版

原文原文链接

（一）Cesium的概念定义

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

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

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

（三）Cesium的第一个实例

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

token建立完成，就好操做了，代码以下：node

<!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>

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

不少小伙伴也发现了，这个代码中有几行为 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一块儿学习交流。