<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>CmWorld3 Sample</title>
<style>
html, body {
overflow: hidden;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#cmworld3Canvas {
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 src="./lib/dat.gui.min.js"></script>
<script>
var cmworld;
var gui;
var userLayer;
var flycenter = null;
var flyCubeLayer;
onupdateobject = function (userObject, deltatime) {
var pt = userObject.getPosition();
$("#txtLabel").text("좌표: (" + pt.x.toFixed(6) + ", " + pt.y.toFixed(6) + ", " + pt.z.toFixed(1) + ")");
}
createCube3DLayer2 = function () {
flyCubeLayer = cmworld.addCube3DLayer("fly", "http://demo.cmworld.net/cube3d/cbr_spatial2/{z}/{y}/{x}/{y}_{x}_{f}.cbr", 0, 13, -10, 10000, 4194304, "spatial", "cbr");
flyCubeLayer.renderFrame = true;
flyCubeLayer.renderOnlyFrame = false;
//flyCubeLayer.tileLikeDisplay = true;
// 사용자 객체를 만들자
var geo = new THREE.SphereGeometry(1);
var material = new THREE.MeshBasicMaterial({ color: 0xff0000 });
var mesh = new THREE.Mesh(geo, material);
flycenter = new CMWORLD.UserObject("fly", mesh, new THREE.Vector3(127.16884215733801, 36.72057514717884, 50), onupdateobject);
userLayer.add(flycenter);
//flyCubeLayer.addTargetCamera("camera", 16, 200);
flyCubeLayer.addTargetObject("fly", flycenter, 13, 50);
}
window.onload = function () {
var canvas = document.querySelector("#cmworld3Canvas");
var vworld_mode = true;
if (vworld_mode) {
cmworld = new CMWORLD.CmWorld3(canvas, 127, 38, CMWORLD.cm_const.EarthRadius, { toptilespan: 36 });
// 여기에 transparancy 추가...
// 투명 값은 여기서 설정
cmworld.option.terrainTransparency = false;
cmworld.option.terrainOpacity = 1;
cmworld.addTileImageLayer("base", "http://xdworld.vworld.kr:8080/XDServer3d/requestLayerNode?APIKey=B470EFE5-A211-35EE-A38A-0D5AD519F236&Layer=tile&Level={z}&IDX={x}&IDY={y}", 0, 15, 90, -90, -180, 180, "jpg", false);
cmworld.addTerrainLayer("terrain", "http://xdworld.vworld.kr:8080/XDServer3d/requestLayerNode?APIKey=B470EFE5-A211-35EE-A38A-0D5AD519F236&Layer=dem&Level={z}&IDX={x}&IDY={y}", 0, 15, 90, -90, -180, 180, "");
cmworld.addReal3DLayer("facility_build", "http://xdworld.vworld.kr:8080/XDServer3d/requestLayerNode?Layer=facility_build&Level={z}&IDX={x}&IDY={y}&APIKey=B470EFE5-A211-35EE-A38A-0D5AD519F236",
"http://xdworld.vworld.kr:8080/XDServer3d/requestLayerObject?APIKey=B470EFE5-A211-35EE-A38A-0D5AD519F236&Layer=facility_build&Level={z}&IDX={x}&IDY={y}&DataFile={f}", "facility_build", 0, 15, 90, -90, -180, 180, "dat");
}
else {
cmworld = new CMWORLD.CmWorld3(canvas, 127, 38, CMWORLD.cm_const.EarthRadius);
// 영상레이어
cmworld.addBaseImageLayer("http://cmworld.net:5050/CmWorld/CmWorldServlet?T=world_raster&L={z}&X={x}&Y={y}", 0, 14, 90, -90, -180, 180);
// 지형레이어
cmworld.addTerrainLayer("terrain", "http://cmworld.net:5050/CmWorld/CmWorldServlet?T=dem30m&L={z}&X={x}&Y={y}", 0, 14, 90, -90, -180, 180, "CBT");
}
cmworld.option.worldTimer.setStartDateTime(2015, 7, 12, 14, 0, 0, 0);
// 여기에 transparancy 추가...
// 투명 값은 여기서 설정
cmworld.option.terrainTransparency = false;
cmworld.option.terrainOpacity = 1;
//canvas.onclick = mouseClick;
cmworld.option.showFPS(true);
var params =
{
terrain: true,
building: true,
opacity: 1.0,
baseHeight : 0
};
gui = new dat.GUI();
var folder = gui.addFolder("Layer Setting");
folder.add(params, 'terrain').onChange(
function (v)
{
terrainEnabled = v;
});
folder.add(params, 'building').onChange(
function (v)
{
buildingEnabled = v;
var layer = cmworld.getLayer("facility_build");
if (layer != null)
{
layer.visible = v;
}
});
folder.add(params, 'opacity', 0, 1).name("terrain opacity").onChange
(
function ()
{
if (cmworld)
{
cmworld.setTerrainTransparancy(params.opacity);
}
});
folder.add(params, 'baseHeight', 0, 100).name("base height").onChange
(
function ()
{
if (flyCubeLayer)
{
flyCubeLayer.SpatialbaseHeight = params.baseHeight;
}
});
gui.open();
userLayer = new CMWORLD.UserObjectLayer("lines");
cmworld.addLayer(userLayer);
createCube3DLayer2();
var eye_x = 127.16884215733801;
var eye_y = 36.72057514717884;
var eye_h = 700;
var look_x = 127.16884215733801;
var look_y = 36.72057514717884;
var look_h = 100;
cmworld.gotoLookAt(eye_x, eye_y, eye_h, look_x, look_y, look_h);
};
</script>
</head>
<body>
<canvas id="cmworld3Canvas"></canvas>
<!--<a id="txtLabel" href="#" style="font-size:32px;left: 10px; top: 10px; position: absolute; z-index: 10000;color: rgb(182, 255, 0)">현재고도: 10,000,000 m</a>-->
<a href="#" style="font-size:14px;left: 10px;bottom: 20px;position: absolute;z-index: 10000;color: black;background-color: white;text-decoration: none;padding: 10px;">3차원 입체 격자 가시화 시스템 Version 1.1</a>
</body>
</html>