cesium(一)使用require.js

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

cesium(一)使用require.js_第1张图片

  • 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。
cesium(一)使用require.js_第2张图片

helloworld.html:


<html lang="en">
<head>
  
  <meta charset="utf-8">
  
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
  <title>Hello World!title>
  
  
  <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


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。

你可能感兴趣的:(cesium)