Getting Started

This document introduces the process from receiving the engine file to getting it up and running.

You can download the latest engine file from the GitHub link below.

GitHub - EgisCorp/XDWorld: WebGL 기반 3D GIS 엔진GitHub

Engine File Structure

GitHub distributes the engine file, execution script, and a basic HTML page together.

The engine file consists of three files, which can be found in the folder XDWorld-main/Release/(version name)/js of the downloaded file.

When operating the engine, the following four files must be loaded in order:

XDWorldEM.js
XDWorldEM.wasm
XDWorldWorker.js
XDWorldWorker.wasm

Typically, when the 'XDWorldEM.js' file is requested, the 'XDWorldEM.wasm' file located in the same path is automatically requested. For map creation options, when creating a 'worker', requesting the 'XDWorldWorker.js' file will automatically request and load the 'XDWorldWorker.wasm' file located in the same path.

The next step will introduce the loading process for each file.

Loading the Engine Files

Before going into detail, the code for the basic index.html page and the init.js file for loading the engine files is as follows:

The index.html file and init.js file are included by default in the engine download package, so you can use them as they are.

<!doctype html>
<html>
<head>
   <title>[EGIS] Init
   <style>
      #map {
         position: absolute;
         width: calc(100%);
         height: calc(100%);
         left: 0px;
         top: 0px;
      }
   </style>
</head>
<body>
   <div id="map"></div>
      <script>
         var initScript = document.createElement('script');
         initScript.src = "./js/init.js";
         document.body.appendChild(initScript);
      </script>
</body>
</html>

// Initialization function to run after the engine is loaded (Module.postRun)
function init() {
    // Call to initialize the engine API (mandatory)
    Module.initialize({
        container: document.getElementById("map"),
        terrain: {
            dem: {
                url: "URL for terrain DEM data request",
                name: "Name of the terrain DEM layer",
                servername: "Name of the request server",
            },
            image: {
                url: "URL for terrain imagery data request",
                name: "Name of the terrain imagery layer",
                servername: "Name of the request server",
            },
        },
        worker: {
            use: "Whether to use web worker",
            path: "URL for web worker file request",
            count: "Number of web workers to use",
        },
        defaultKey: "Issued API KEY",
    });
}

var Module = {
    locateFile: function (s) {
        return "https://cdn.xdworld.kr/beta/" + s;
    },
    postRun: [init],
};

// Loading the engine files
var script = document.createElement("script");
script.src = "https://cdn.xdworld.kr/beta/XDWorldEM.js";
document.body.appendChild(script);

index.html

The index.html file calls init.js to load the engine.

<script>
    var initScript = document.createElement("script");
    initScript.src = "./js/init.js";
    document.body.appendChild(initScript);
</script>
<div id="map"></div>

The "map" element is a container that dynamically adds a canvas or HTMLObject.

Interfaces can be added as needed in the index.html file.

When overlaying interfaces on the map, ensure the canvas is positioned below the interfaces by appropriately adjusting the z-index value.

In the above index.html code, calling init.js creates a canvas for rendering the map, but you can also create a canvas in the HTML page beforehand and then link the created canvas with the engine module.

For linking the engine module and canvas, please refer to the Map Module Object Declaration section.

init.js

The code in init.js consists of:

Declaration of the engine initialization function
Declaration of the map module object
Engine file loading section

Map Module Object Declaration

Declare the module object for calling the engine API.

var Module = {
    locateFile: function (s) {
        return "https://cdn.xdworld.kr/beta/" + s;
    },
    postRun: [init],
};

The object name must be declared as Module, and the postRun attribute is mandatory.

postRun: Specifies the function to be called when the engine module is ready.

Declaration of Engine Initialization Function

Declare the function that is called first after all engine files have been loaded.

The declared function is specified as a property of the Module object's postRun attribute.

The "container" property, which composes initialize, dynamically creates a canvas inside the specified element.

function init() {
    Module.initialize({
        container: document.getElementById("map"),
        terrain: {
            dem: {
                url: "URL for terrain DEM data request",
                name: "Name of the terrain DEM layer",
                servername: "Name of the request server",
            },
            image: {
                url: "URL for terrain imagery data request",
                name: "Name of the terrain imagery layer",
                servername: "Name of the request server",
            },
        },
        worker: {
            use: "Whether to use web worker",
            path: "URL for web worker file request",
            count: "Number of web workers to use",
        },
        defaultKey: "Issued API KEY",
    });
}

Loading the Engine Files

Load the engine files by requesting and loading the XDWorldEM.js file. XDWorldEM.wasm is internally requested and loaded when XDWorldEM.js is loaded.

var script = document.createElement("script");
script.src = "https://cdn.xdworld.kr/beta/XDWorldEM.js";
document.body.appendChild(script);

Running the Engine

When the init function, specified as Module's postRun function, executes the Module.Start API, engine rendering begins.

Depending on whether workers are used, the XDWorldWorker.js file is requested and loaded. XDWorldWorker.wasm is internally requested and loaded when XDWorldWorker.js is loaded.

XDWorldWorker.js and XDWorldWorker.wasm files are WebAssembly-based Web Workers. Distributing computationally intensive tasks to Workers can improve speed. Workers are not mandatory and can be defined in the Module.initialize() settings.

Once the engine rendering starts, the initial screen displays a globe.

If you're interested in exploring various sample codes using XDWorld, please click here.

If you have any questions about XDWorld, please click here.

If you want to explore the next-generation Digital Twin Cloud service using XDWorld, please click here.

PreviousXDWorld API NextAbout EGIS

Last updated 1 year ago

hashtagEngine File Structure

hashtagLoading the Engine Files

hashtagindex.html

hashtaginit.js

hashtagMap Module Object Declaration

hashtagDeclaration of Engine Initialization Function

hashtagLoading the Engine Files

hashtagRunning the Engine

Engine File Structure

Loading the Engine Files

index.html

init.js

Map Module Object Declaration

Declaration of Engine Initialization Function

Loading the Engine Files

Running the Engine