<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>VWorld NextGen Building Sample</title>
<style>
html, body {
overflow: hidden;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#cmworldCanvas {
width: 100%;
height: 100%;
}
</style>
<script src="./Cm3WebGL/lib/jquery-2.2.0.min.js"></script>
<script src="./Cm3WebGL/lib/msgpack.min.js"></script>
<script src="./Cm3WebGL/cm_compile.js"></script>
<script>
CMWORLD.Compile.includeCm3Library("./Cm3WebGL/");
</script>
<script>
var cmworldViewer;
let apiKey = "767B7ADF-10BA-3D86-AB7E-02816B5B92E9";
window.onload = function () {
var canvas = document.querySelector("#cmworldCanvas");
var siteRoot = CMWORLD.Compile.getSiteRootUrl();
cmworldViewer = new CMWORLD.CmWorld3(canvas, 127, 38, CMWORLD.cm_const.EarthRadius, { toptilespan: 36 });
cmworldViewer.option.worldTimer.setStartDateTime(2018, 9, 12, 14, 0, 0, 0);
//gliEmbedDebug = true;
var serverUri = "http://xdworld.vworld.kr:8080/XDServer";
cmworldViewer.addBaseImageLayer(serverUri + "/requestLayerNode?APIKey=767B7ADF-10BA-3D86-AB7E-02816B5B92E9&Layer=tile_mo_HD&Level={z}&IDX={x}&IDY={y}", 0, 15, 90, -90, -180, 180 );
cmworldViewer.addTerrainLayer("terrain", serverUri + "/requestLayerNode?APIKey=767B7ADF-10BA-3D86-AB7E-02816B5B92E9&Layer=dem&Level={z}&IDX={x}&IDY={y}", 0, 15, 90, -90, -180, 180, "");
};
/*사용자 레이어를 얻자.*/
function getUserLayer()
{
var layerName = "testUserObjectLayer";
var layer = cmworldViewer.getLayer(layerName);
if (layer)
{
return layer;
}
// 없으면 만들어서 추가한다.
var userLayer = new CMWORLD.UserObjectLayer(layerName);
cmworldViewer.addLayer(userLayer);
return userLayer;
}
function gotobuilding()
{
cmworldViewer.gotoGeo(126.93447231111348, 37.52361283931836, 500);
}
function clearLayer()
{
let userLayer = getUserLayer();
userLayer.clear();
}
// 브이월드 서비스를 이용한 테스트
function demoVWorldBuilding()
{
clearLayer();
let layerName = "facility_build";
for (var rowTile = 116070; rowTile < 116076; rowTile++)
{
for (var colTile = 279374; colTile < 279381; colTile++)
{
requestVWorldBuilding(layerName, rowTile, colTile);
}
}
}
function requestVWorldBuilding(layerName, tileRow, tileCol)
{
let serverBaseURI = "http://xdworld.vworld.kr:8080/XDServer";
let idx = tileCol;
let idy = tileRow;
let lev = 15;
let userLayer = getUserLayer();
// 테스트 Index 파일을 다운로드 한다.
let testIndexUrl = CMWORLD.Util.stringFormat("{0}/requestLayerNode?APIKey={1}&Layer={2}&Level={3}&IDY={4}&IDX={5}", serverBaseURI, apiKey, layerName, lev, idy, idx);
CMWORLD.NetWork.requestFile(testIndexUrl, function (params)
{
let buildingObjects = [];
if (CMWORLD.vw_Real3DTile.parseDataFromStream(params.response, CMWORLD.FileFormat._dat, buildingObjects) == false)
return;
console.log(buildingObjects);
// 모델 데이터의 url을 확인하고 다운로드 한다.
let fileBaseUrl = CMWORLD.Util.stringFormat("{0}/requestLayerObject?APIKey={1}&Layer={2}&Level={3}&IDY={4}&IDX={5}", serverBaseURI, apiKey, layerName, lev, idy, idx);
for (key in buildingObjects)
{
let modelInfo = buildingObjects[key].objInfo;
console.log(modelInfo);
let modelFileUrl = fileBaseUrl + "&DataFile=" + modelInfo.fileName;
console.log(modelFileUrl);
CMWORLD.NetWork.requestFile(modelFileUrl, function (params)
{
let xdo = new CMWORLD.XDOLoader();
let success = xdo.parseBinary(params.response, modelInfo.version);
if (success)
{
let mesh = xdo.makeMesh();
// texture 생성
if (mesh.material.imageName)
{
let imageFileUrl = fileBaseUrl + "&DataFile=" + mesh.material.imageName;
var loader = new THREE.TextureLoader();
loader.setCrossOrigin("Anonymous");
var tex = loader.load(imageFileUrl);
tex.minFilter = THREE.LinearFilter;
tex.needUpdate = true;
tex.imageName = mesh.material.imageName;
mesh.material.map = tex;
}
// debug 검사
if (modelInfo.fileName == 'bldg401.xdo')
console.log(mesh);
// xdo 모델의 높이.
let buildingHeight = Math.abs(modelInfo.bbox.max.z - modelInfo.bbox.min.z);
let buildingAltitude = modelInfo.altitude + (buildingHeight * 0.5);
let obj = new CMWORLD.UserObject("test", mesh, new THREE.Vector3(modelInfo.CenterPos.x, modelInfo.CenterPos.y, buildingAltitude ), null, null, false);
userLayer.add(obj);
}
});
}
});
}
// 차세대 브이월드 모델 데이터 테스트.
function demoNextVWorldBuilding( option )
{
// 레이어 클리어.
clearLayer();
let layerName = "yeouido_building_next";
if (option == 'spiforxdo')
layerName = "yeouido_building_next_xdo";
for (var rowTile = 116070; rowTile < 116076; rowTile++)
{
for (var colTile = 279374; colTile < 279381; colTile++)
{
requestNextVWorldBuilding(layerName, rowTile, colTile);
}
}
}
function requestNextVWorldBuilding(layerName, tileRow, tileCol)
{
let serverBaseURI = "http://www.cmworld.net:5055";
let idx = tileCol;
let idy = tileRow;
let lev = 15;
let userLayer = getUserLayer();
// 테스트 Index 파일을 다운로드 한다.
let testIndexUrl = CMWORLD.Util.stringFormat("{0}/requestLayerNode?APIKey={1}&Layer={2}&Level={3}&IDY={4}&IDX={5}", serverBaseURI, apiKey, layerName, lev, idy, idx);
CMWORLD.NetWork.requestFile(testIndexUrl, function (params)
{
var spiData = CMWORLD.SPILoader.parseBinary(params.response);
console.log(spiData);
if (spiData == null)
return;
// 모델 데이터의 url을 확인하고 다운로드 한다.
let fileBaseUrl = CMWORLD.Util.stringFormat("{0}/requestLayerObject?APIKey={1}&Layer={2}&Level={3}&IDY={4}&IDX={5}", serverBaseURI, apiKey, layerName, lev, idy, idx);
for (key in spiData.objects)
{
let modelInfo = spiData.objects[key];
let modelFileUrl = fileBaseUrl + "&DataFile=" + modelInfo.fileName;
console.log(modelFileUrl);
CMWORLD.NetWork.requestFile(modelFileUrl, function (params)
{
let spoData = CMWORLD.SPOLoader.parseBinary(params.response);
if (spoData)
{
let isXdoModelStyle = false;
if (modelInfo.bboxType == CMWORLD.BBoxType.legacyVWorldXdoModel)
isXdoModelStyle = true;
let meshs = CMWORLD.SPOLoader.makeMeshFromData(spoData, isXdoModelStyle);
for (let i = 0; i < meshs.length; i++)
{
let mesh = meshs[i];
// create texture
if (mesh.material.imageName)
{
let imageFileUrl = fileBaseUrl + "&DataFile=" + mesh.material.imageName;
var loader = new THREE.TextureLoader();
loader.setCrossOrigin("Anonymous");
var tex = loader.load(imageFileUrl);
tex.minFilter = THREE.LinearFilter;
tex.needUpdate = true;
tex.imageName = mesh.material.imageName;
mesh.material.map = tex;
}
// 기본 차세대 포맷과, 회전옵션이 있는 모델을 구분해야 한다.
let autoRotateForGlobeEarth = true;
if (isXdoModelStyle)
autoRotateForGlobeEarth = false;
// debug.검사
if (modelInfo.fileName == 'bldg401.spo')
console.log(mesh);
let obj = new CMWORLD.UserObject("test", mesh, new THREE.Vector3(modelInfo.x, modelInfo.y, modelInfo.h), null, null, autoRotateForGlobeEarth);
userLayer.add(obj);
}
}
});
}
});
}
</script>
</head>
<body>
<canvas id="cmworldCanvas"></canvas>
<a href="#" onclick="gotobuilding()" style="right: 10px; top: 20px; position: absolute; z-index: 10000;color: rgb(182, 255, 0)">go to building</a>
<a href="#" onclick="clearLayer()" style="right: 10px; top: 40px; position: absolute; z-index: 10000;color: rgb(182, 255, 0)">clear layer</a>
<a href="#" onclick="demoNextVWorldBuilding()" style="right: 10px; top: 100px; position: absolute; z-index: 10000;color: rgb(255, 216, 0)">Next VWorld Building</a>
<a href="#" onclick="demoNextVWorldBuilding('spiforxdo')" style="right: 10px; top: 120px; position: absolute; z-index: 10000;color: rgb(255, 216, 0)">Next VWorld Building(forXdo)</a>
<a href="#" onclick="demoVWorldBuilding()" style="right: 10px; top: 140px; position: absolute; z-index: 10000;color: rgb(0, 255, 33)">VWorld Building</a>
</body>
</html>