라이브러리를다운로드하고, 소스코드에 포함하셨다면 웹브라우져에 지도를 띄울 수 있는 준비가 완료되었습니다. 3D 지도를 어떻게 사용하는지에 대하여 설명드리겠습니다.
CmWorld3 는 하나의 단일 파일로 구성되어 있지 않고, 여러 개의 파일로 구성되어 있습니다. CmWorld3.zip 파일을 압축 해제하면, 아래와 같은 형태의 파일들로 구성되어 있습니다. 해당 폴더를 사용하고자 하는 참조 가능한 경로에 복사한 후 사용합니다.
1. Html page의 <head> 에 아래와 같이 설정합니다.
<script src="./cmworld3/lib/jquery-2.0min.js"></script>
<script src="./cmworld3/cm_compile.js"></script>
<script>
CMWORLD.CmCompile.includeCmWorld3library("./cmworld3/");
</script>Cmworld3는 하나의 js 파일로 구성되어 있지 않기 때문에, 여러파일들을 포함하여야 사용할 수 있습니다. 필요한 모든 파일들을 포함하여 사용할 수 도 있지만, 사용상의 편의를 위해서 includeCmWorld3Library() function을 제공합니다. 해당 funtion의 파라미터로 cmworld3폴더의 상태경로나 절대 경로를 전달하면 내부적으로 필요한 모든 파일들을 포함하도록 되어 있습니다.
만일, cmworld3에서 사용하는 외부 library와 기존에 사용하는 library와 버전이 맞지 않거나 충돌이 발생할 경우, cm_compile.js 안의 라이브러리 경로를 변경하거나, 충돌되는 파일을 삭제하여야 할 수도 있습니다.
2. Html page의 <body> 에 아래와 같이 설정합니다.
<body>
<canvas id="cmworldCanvas"></canvas>
</body>Cmworld3의 출력이 표현될 canvas 객체를 선언하여야 합니다. 아래와 같이 설정하시면, 초기화면이 동작하게 됩니다.
3. 초기화 Example
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<style>
html, body {
overflow: hidden;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#cmworldCanvas {
width: 100%;
height: 100%;
}
</style>
<script src="./cmworld3/lib/jquery-2.2.0.min.js"></script>
<script src="./cmworld3/cm_compile.js"></script>
<script>
CMWORLD.CmCompile.includeCmWorld3Library( "./cmworld3/" );
</script>
<script>
var cmworld;
window.onload = function () {
var canvas = document.querySelector("#cmworldCanvas");
cmworld = new CMWORLD.CmWorld3(canvas, 127, 38, CMWORLD.cm_const.EarthRadius );
window.addEventListener('resize', function () {
cmworld.updateCanvasSize(window.innerWidth, window.innerHeight);
});
render();
function render() {
requestAnimationFrame(render);
cmworld.update();
}
};
</script>
</head>
<body>
<canvas id="cmworldCanvas"></canvas>
</body>
</html>
3D POI(Point of interest)소스보기
Line, Surface, 3D Mesh소스보기
CmWorld Server를 통하지 않고 V-World 서비스를 이용하여 데이터를 추가할 수도 있습니다.
API 키는Vworld 오픈 API링크를 열고 회원가입을 한 후 인증키를 발급 받으세요.
1. V-World 이미지 데이터 서비스
cmworld.addTileImageLayer("base", "http://xdworld.vworld.kr:8080/XDServer/requestLayerNode?
APIKey=받은 API 키&Layer=tile_mo_HD&Level={z}&IDX={x}&IDY={y}", 0, 15, 90, -90, -180, 180, "jpg", false);2. V-World 지형 데이터 서비스
cmworld.addTerrainLayer("terrain", "http://xdworld.vworld.kr:8080/XDServer/requestLayerNode?APIKey= 받은 API키 &Layer=dem&Level={z}&IDX={x}&IDY={y}"
, 0, 15, 90, -90, -180, 180, "");3. V-World Vector 데이터 서비스 (건물 )
cmworld.addReal3DLayer("facility_build", "http://xdworld.vworld.kr:8080/XDServer/requestLayerNode?Layer=facility_build&Level={z}&IDX={x}&IDY={y}&APIKey=받은 API 키",
"http://xdworld.vworld.kr:8080/XDServer/requestLayerObject?APIKey= 받은 API키&Layer=facility_build&Level={z}&IDX={x}&IDY={y}&DataFile={f}",
"facility_build", 0, 15, 90, -90, -180, 180, "dat");4. V-World Vector POI 데이터 서비스
cmworld.addVWPOILayer("poi_base", "http://xdworld.vworld.kr:8080/XDServer/requestLayerNode?Layer=poi_base&Level={z}&IDX={x}&IDY={y}&APIKey=받은 API 키",
"http://xdworld.vworld.kr:8080/XDServer/requestLayerObject?APIKey=받은 API 키&Layer=poi_base&Level={z}&IDX={x}&IDY={y}&DataFile={f}",
"poi_base", 0, 15, 90, -90, -180, 180, "poi");자세한 내용은Vworld 3D API링크에서 확인 하세요.
적성토량 계산소스보기
적성토량 계산침수분석소스보기
CmWorld는 사용자가 직접 제작한 지도를 서비스 할 수 있도록 합니다. 3차원 지형고도, 영상, 3D 모델 및 벡터 지도 등을 웹 서비스하기 위해 CmWorld는 변환도구(World Studio)를 유료로 제공합니다. 변환도구와 관련된 상세한 설명은 관리자에게 문의하세요.
위성, 항공
(Geo-Tiff, ECW 등)고도 데이터
(DEM, BIL 등)벡터 데이터
(SHP)