Cesium的扩展工具包 EarthSDK使用指南4
2020-03-20 10:22:38
1797次阅读
0个评论
最后修改时间:2020-04-03 16:54:30

前言


本文讲述如何用EarthSDK构建一个简单的三维App。


构建步骤


1. 下载EarthSDK 地址:https://earthsdk.com/v/v1.1.0.zip


2. 在本地创建一个文件夹,将EarthSDK放入文件夹内,并新建一个index.html文件。


建立自己的三维App


3. index.html文件写入以下代码:

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="xbsj-labels" content="Earth起步"></meta>
    <title>创建地球</title>
    <!-- 0 引入js文件 -->
    <script src="./v1.1.0/XbsjEarth/XbsjEarth.js"></script>
    <style>
        html,
        body {
            width: 100%;
            height: 100%;
            margin: 0px;
            padding: 0px;
        }
    </style>
</head>

<body>
    <div id="earthContainer" style="width: 100%; height: 100%; background: grey">
    </div>
    <script>
        var earth;

        function startup() {
            earth = new XE.Earth('earthContainer');

            earth.sceneTree.root = {
                "children": [
                    {
                        "czmObject": {
                            "name": "默认离线影像",
                            "xbsjType": "Imagery",
                            "xbsjImageryProvider": {
                                "createTileMapServiceImageryProvider": {
                                    "url": XE.HTML.cesiumDir + 'Assets/Textures/NaturalEarthII',
                                    "fileExtension": 'jpg',
                                },
                                "type": "createTileMapServiceImageryProvider"
                            }
                        }
                    },
                ]
            };
        }

        // 1 XE.ready()会加载Cesium.js等其他资源,注意ready()返回一个Promise对象。
        XE.ready().then(startup);            
    </script>
</body>

</html>



4. 在myApp目录下执行命令hs -p 81,从而建议一个本地的http服务。


启动hs


5. 打开chrome浏览器,输入http://127.0.0.1:81,即可访问刚才创建的三维App。


浏览器访问

 

index.html文件代码讲解


1. head节点下需要引入XbsjEarth.js文件。

<script src="./v1.1.0/XbsjEarth/XbsjEarth.js"></script>

XbsjEarth.js内部会自动调用Cesium相关的js和css文件,因此不需要再引入其他Cesium相关的js和css文件。


2. body节点下需要增加一个div

<div id="earthContainer" style="width: 100%; height: 100%; background: grey">

这个div用来承载三维App。


3. 创建App
earth = new XE.Earth('earthContainer'); XE.Earth是EarthSDK提供的用来创建三维App的基础类,其参数'earthContainer'实际上是上一个步骤创建的div的id。这样就相当于基于这个div创建了一个三维App。


4.  三维场景的基本配置

earth.sceneTree.root = {
    "children": [
        {
            "czmObject": {
                "name": "默认离线影像",
                "xbsjType": "Imagery",
                "xbsjImageryProvider": {
                    "createTileMapServiceImageryProvider": {
                        "url": XE.HTML.cesiumDir + 'Assets/Textures/NaturalEarthII',
                        "fileExtension": 'jpg',
                    },
                    "type": "createTileMapServiceImageryProvider"
                }
            }
        },
    ]
};



通过配置earth.sceneTree.root,来给地球表面贴上一层离线影像。


earth.sceneTree代表整个三维App的场景树,这里可以通过简单的JSON配置来达成。这里面只增加了一个CzmObject类型的对象,它的类型xbsjType是Imagery,即影像。


5. 前两不创建App和三维场景配置的代码是写在startup这个函数里面的。我们可以通过: XE.ready().then(startup); 来调用startup执行相应地创建操作。


那么为何需要通过XE.ready()来操作呢。因为XE.ready()函数会自动加载Cesium.js和相关的css文件,当加载完成以后才能进行Cesium的相关操作。


XE.ready()的返回值是一个Promise,我们可以通过then回调,等到Promise执行完成以后再执行startup操作。


收藏 0 0

登录 后评论。没有帐号? 注册 一个。

西部世界

VIP会员 工作人员
  • 0 回答
  • 0 粉丝
  • 0 关注