cesium（一）使用require.js

为了更好的理解cesium实现的底层原理，最近看完了《WebGL编程指南》，很好的一本书，讲了WebGL的底层原理，包括3D图形的基础知识，着色器的使用，加载数据的整个流程，物体的动画效果等，但是发现看完了之后再去查看cesium的Shaders部分，对GLSL的实现还是有些不太懂，貌似是这里的Shaders有一部分是专门为cesium设计的。于是我参考网上几位大佬的教程，开始了解cesium的实现原理以及更好的理解GLSL，毕竟个人觉得学习cesium只有把它底层的WebGL实现搞懂了，才算是真的学会，融会贯通。学会WebGL底层后，基于WebGL的一些扩展，如Three.js，也能很容易的理解，举一反三。

在这里插入图片描述

Apps
cesium的详细范例程序
Build
release包，即编译好的cesium.js文件及widgets.css组件，包括用到的图片，纹理，第三方库，css和workers
Documentation
API文档
Source
源码，有cesium.js文件和widgets.css组件，Build文件夹中也有响应文件，不过那个是编译好的，专门用来调用运行的，而Source文件夹里面的是专门为了开发人员阅读理解的。
Specs
Cesium的自动化单元测试，采用Jasmine框架
ThirdParty
第三方库

Hello World

对于开发人员来说，或多或少都需要以源码的形式加载，这是为了便于调试和发现问题位置，如果直接加载Build下的Release脚本，则不方便进行调试。

为了加载Source的源码，Cesium采用Require.js的框架，下载好require.js或require.min.js脚本，保存在examples/js/require.min.js。
在这里插入图片描述

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>-->
  <!--<link rel="stylesheet" href="../Build/Cesium/Widgets/widgets.css">-->
  <style>
    @import url(../Build/Cesium/Widgets/widgets.css);
    html, body, #cesiumContainer {
      width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden;
    }
  </style>
  <script type="text/javascript" src="js/require.min.js" data-main="./js/main"></script>

</head>
<body>
  <div id="cesiumContainer"></div>
  <script>
    function onload(Cesium) {
      var viewer = new Cesium.Viewer('cesiumContainer');
    }
  </script>
</body>
</html>

引用require.min.js而非Build下的Cesium.js

<script type="text/javascript" src="js/require.min.js" data-main="./js/main"></script>

data-main属性的作用是在require.min.js脚本加载完成后，指定加载的文件，这里是main.js（后缀.js省略）

main.js代码：

var developMode = true;

if(developMode){
    require.config({
        baseUrl:'../Source'
    });
}else{
    require.config({
        paths:{
            'Cesium':'../../Build/Cesium/Cesium'
        },
        shim:{
            Cesium:{
                exports:'Cesium'
            }
        }
    });
}

if(typeof Cesium !== 'undefined'){
    onload(Cesium);
}else if(typeof require === 'function'){
    require(['Cesium'],onload);
}

变量developMode来记录是否以Release或源码方式来加载脚本，并根据该变量值来设置对应的文件路径。最后，调用onload函数，结束main.js脚本的使命。

onload函数在HelloWorld.html文件中，该函数的作用是封装了三维地球的加载命令。

对比调用Build和Source文件下Cesium.js，来实现三维地球加载的不同之处：
Build：首先加载的路径是“…/Build/Cesium/Cesium.js”，然后调用编译后的Cesium.js文件中的相应API接口（Viewer），来加载地球。
Source：通过require.min.js来加载源码Cesium.js，然后调用封装好的函数onload。

HiGIS-DBRG

发布了59 篇原创文章 · 获赞 22 · 访问量 4万+

私信关注

cesium（一）使用require.js

猜你喜欢