Cesium的扩展工具包-EarthSDK使用指南2

前言

这一节来说下如果通过EarthSDK创建三维场景。EarthSDK的场景配置非常灵活：可以直接赋值一个JSON对象，也可以通过直接对JSON对象进行属性赋值，甚至可以直接通过数组的push()、pop()方法来增删三维场景对象。

通过JSON配置来创建三维场景

1. EarthSDK创建没有任何配置的地球大概是这个样子：

var earth = new XE.Earth('earthContainer');

其中earthContainer是一个div的id。XE.Earth是一个类，通过它可以构建一个三维窗口。

初始创建

2. 此时通过earth.sceneTree.root配置一个离线影像，则效果如下：

var 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"
                }
            }
        },
    ]
};

sceneTree是场景树的意思，sceneTree.root指场景树的根节点。通过直接赋值一个JSON对象，就可以完成三维场景中的配置。这里配置了一个离线影像，即在地球的表面增加一层皮肤。

czmObject表示的是一个三维场景中的对象，xbsjType表示这个对象的类型是imagery，即影像。xbsjImageryProvider属性用来配置影像资源的来源。这里的url表示影像资源所在的路径。这个离线影像实际上Cesium自带的，所以可以通过XE.HTML.cesiumDir来获取Cesium的目录，然后再获取Cesium目录下的影像。

离线影像

3 可以再增加一个大雁塔的倾斜摄影模型。

var 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"
                }
            }
        },
        {
            "czmObject": {
                "xbsjType": "Tileset",
                "name": "三维瓦片1",
                "url": "../assets/dayanta/tileset.json",
            },
            "ref": 'tileset1'
        }                 
    ]
};

earth.sceneTree.$refs.tileset1.czmObject.flyTo();

配置中又增加了一个大雁塔的倾斜摄影数据对象。该czmObject的类型是Tileset，即瓦片数据集。

最后一句话，earth.sceneTree.$refs.tileset1.czmObject.flyTo();，则是用来实现飞到大雁塔附近的功能。

如果您仔细看会发现这里面的$refs和vue的很类似，可以通过它很方便的场景树(sceneTree)中找到需要的对象，当然相应的场景节点，也需要通过ref来进行标记。

配置完以后的三维窗口效果如下：

大雁塔数据

对JSON配置的修改

我们完成了上述三维场景配置以后，还可以动态地修改场景配置。比如，如果像删除刚才创建的大雁塔倾斜模型数据，可以直接调用数据的pop()来实现。

为了测试方便，我们可以直接在控制台进行操作。

打开控制台

在控制台输入 earth.sceneTree.root.children.pop() 操作之后，会发现大雁塔消失了！因为在之前的配置中earth.sceneTree.root.children中有两个对象，第二个对象就是大雁塔。如果执行pop操作，系统会自动清理掉大雁塔数据。

pop操作以后

如果还想把之前的大雁塔加进来，怎么办？可以直接用push操作加上之前的配置信息即可。

earth.sceneTree.root.children.push({
    "czmObject": {
        "xbsjType": "Tileset",
        "name": "三维瓦片1",
        "url": "../assets/dayanta/tileset.json",
    },
    "ref": 'tileset1'
});

push操作以后

对象的JSON配置可以直接打印到控制台

为了方便获取对象的配置信息，EarthSDK中提供了toJSON()，toJSONStr(), toAllJSON(), toAllJSONStr()这几个方便获取JSON配置的函数。

例如，可以通过以下方法，来打印大雁塔的JSON配置信息。

var t = earth.sceneTree.$refs.tileset1;
t.toJSONStr();

JSON对象打印

其实不止可以打印某一个场景对象的JSON配置，甚至可以直接打印整个场景的配置信息，当然这个配置信息会比较长。

整个场景的配置信息

此时，只需要把这个JSON配置信息拷贝出来。这样，下一次还需要配置场景时，再直接调用
earth.scene=<配置信息>即可完成场景的重新配置。

image.png

XbsjEarthUI中的JSON配置打印功能

如果使用XbsjEarthUI的话，会发现发有一个功能。如果在场景树上某节点的右键菜单中有一个控制台打印JSON配置的命令，可以通过它轻松打印相应节点的配置信息。

XbsjEarthUI中的JSON配置打印

---

欢迎关注 Cesium实验室 ，QQ群号：830157717。

QQ群