Skip to content

如何替换EarthSDK中的Cesium.js

Jump to bottom
Tang Xiaofei edited this page Oct 18, 2019 · 1 revision

如何替换EarthSDK中的Cesium.js

前言

EarthSDK v1.2.0版以后，实现了Cesium的拆分。即EarthSDK所依赖的Cesium.js是可以替换的。开发者可以使用Cesium官网的Cesium.js，也可以使用自身已做修改的Cesium版本来替换EarthSDK中默认的Cesium.js。

操作方法

  1. 下载EarthSDK的js文件，准备好自己的cesium.js文件。如图所示：

文件准备

image.png

  1. 创建一个html文件，命名为earthsdk-myCesium.html。代码如下：
<!DOCTYPE html>
<html lang="zh-CN">

<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>
    <!-- 1 引入js文件 -->
    <script src="./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;
        var bgImagery;

        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>
  1. 在加载XbsjEarth.js文件之前引入自定义的Cesium.js和相关的css文件。
    <link rel="stylesheet" href="./MyCesium/CesiumUnminified/Widgets/widgets.css">
    <script src="./MyCesium/CesiumUnminified/Cesium.js"></script>

引入自己的Cesium.js

  1. 刷新浏览器，此时就只会加载自定义的Cesium.js，而不会加载EarthSDK中默认的Cesium.js文件了。

加载后效果

最终代码

<!DOCTYPE html>
<html lang="zh-CN">

<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 引入自己的Cesium.js和css文件 -->
    <link rel="stylesheet" href="./MyCesium/CesiumUnminified/Widgets/widgets.css">
    <script src="./MyCesium/CesiumUnminified/Cesium.js"></script>
    <!-- 1 引入js文件 -->
    <script src="./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;
        var bgImagery;

        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>

内部原理

Cesium.js文件加载以后，就会有window.Cesium这个变量。XbsjEarth.js会检测window.Cesium这个变量是否存在。如果存在的话，就不会加载其默认的Cesium.js文件了。从而实现Cesium.js文件的替换。

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

QQ群

Clone this wiki locally