엔진 파일은 세 가지 파일로 구성되어 있으며 다운로드 한 파일의 폴더 XDWorld-main/Release/(버전명)/js에서 찾을 수 있습니다.
엔진을 구동할 때 세 파일이 순차적으로 로드되어야 하며,
XDWorldEM.js
XDWorldEM.wasm
XDWorldWorker.js
XDWorldWorker.wasm
일반적인 엔진은 'XDWorldEM.js' 파일을 요청할 때 'XDWorldEM.js'와 동일한 경로에 있는 'XDWorldEM.wasm' 파일을 자동으로 요청합니다. 지도 생성 시 사용되는 옵션으로, 'worker'를 생성할 때 'XDWorldWorker.js' 파일을 요청하면 'XDWorldWorker.js'와 같은 경로에 있는 'XDWorldWorker.wasm' 파일을 자동으로 요청하고 로드합니다.
다음 단계에서 각 파일의 로드 과정에 대해 소개합니다.
엔진 파일 로드
자세한 설명에 앞서, 기본 index.html 페이지와 엔진 파일 로드를 위한 init.js 파일의 코드는 다음과 같습니다.
index.html 파일과 init.js 파일은 다운로드 엔진 다운로드 구성에 기본으로 첨부되어 있으므로 그대로 활용하실 수 있습니다.
// 엔진 로드 후 실행할 초기화 함수(Module.postRun)
function init() {
// 엔진 초기화 API 호출(필수)
Module.initialize({
container: document.getElementById("map"),
terrain: {
dem: {
url: "지형 DEM 데이터 요청 URL,
name: "지형 DEM 레이어 명칭",
servername: "요청 Server 명칭"
},
image: {
url: "지형 영상 이미지 데이터 요청 URL",
name: "지형 용상 이미지 레이어 명칭",
servername: "요청 Server 명칭"
},
},
worker : {
use : "web worker 사용유무",
path : "web worker 파일 요청 URL",
count : "web worker 사용 개수 설정"
},
defaultKey : "발급 API KEY"
});
}
var Module = {
locateFile : function(s) {
return "https://cdn.xdworld.kr/beta/"+ s;
},
postRun: [init],
};
// 엔진 파일 로드
var script = document.createElement('script');
script.src = "https://cdn.xdworld.kr/beta/XDWorldEM.js";
document.body.appendChild(script);
var Module = {
locateFile: function (s) {
return "https://cdn.xdworld.kr/beta/" + s;
},
postRun: [init],
};
반드시 객체 이름은 Module 로 선언해주어야 하며 postRun 속성은 필수로 입력되어야 합니다.
postRun : 엔진 모듈이 준비 된 시점에서 호출되는 함수를 지정합니다.
엔진 초기화 함수 선언
엔진 파일이 모두 완료 된 시점에 처음으로 호출되는 함수를 선언합니다.
선언 된 함수는 Module 객체의 postRun 속성으로 지정합니다.
initialize를 구성하는 "container" property로 지정된 element 내부에 canvas를 동적으로 생성합니다.
function init() {
Module.initialize({
container: document.getElementById("map"),
terrain: {
dem: {
url: "지형 DEM 데이터 요청 URL,
name: "지형 DEM 레이어 명칭",
servername: "요청 Server 명칭"
},
image: {
url: "지형 영상 이미지 데이터 요청 URL",
name: "지형 용상 이미지 레이어 명칭",
servername: "요청 Server 명칭"
},
},
worker : {
use : "web worker 사용유무",
path : "web worker 파일 요청 URL",
count : "web worker 사용 개수 설정"
},
defaultKey : "발급 API KEY"
});
}
엔진 파일 로드
엔진 파일을 XDWorldEM.js 파일을 요청 및 로드 합니다. XDWorldEM.wasm은 XDWorldEM.js 로드 시 내부적으로 파일 요청 및 로드 합니다.
var script = document.createElement("script");
script.src = "https://cdn.xdworld.kr/beta/XDWorldEM.js";
document.body.appendChild(script);
엔진 실행
Module의 postRun 함수로 지정한 init 함수에서 Module.Start API를 실행하면 엔진 렌더링이 시작됩니다
worker 사용 유무에 따라 XDWorldWorker.js 파일을 요청 및 로드 합니다. XDWorldWorker.wasm은 XDWorldWorker.js 로드 시 내부적으로 파일 요청 및 로드 합니다.
XDWorldWorker.js와 XDWorldWorker.wasm 파일은 WebAssembly로 구성된 Web Worker입니다. 엔진에서 연산량이 많은 작업을 Worker를 통해 분산 처리하면 속도 향상이 가능합니다. Worker는 필수 사항이 아니며, Module.initialize() 설정에 따라 사용 여부를 정의할 수 있습니다.