Cesium的扩展工具包-EarthSDK使用指南2
2020-03-20 10:18:31
1367次阅读
0个评论
最后修改时间:2020-04-15 08:59:33

前言


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

EarthSDK下载地址:http://earthsdk.com/


引入JS


EarthSDK可以不依赖其他框架,只需要引入XbsjEarth.js即可,如下:

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


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


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


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


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



此时通过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目录下的影像。


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


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操作,系统会自动清理掉大雁塔数据。


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


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







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


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


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


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







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



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



XbsjEarthUI中的JSON配置打印功能


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




收藏 0 0

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

西部世界

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