<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>시설물 통합관리시스템(광진교)</title>
<style>
html, body {
overflow: hidden;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.lnb {
width: 300px;
height: 100%;
background: #edf0f5;
float: left;
}
.content {
width: calc(100% - 300px);
height: 100%;
display: block;
float: left;
}
#cmworld3Canvas {
width: 100%;
height: 100%;
}
.tree_menu {
margin: 20px 0;
overflow-y: auto;
height: 100%;
}
</style>
<script src="./Cm3WebGL/lib/jquery-2.2.0.min.js"></script>
<script src="./Cm3WebGL/cm_compile.js"></script>
<script> CMWORLD.Compile.includeCm3Library("./Cm3WebGL/") </script>
<script src="./lib/dat.gui.min.js"></script>
<link rel="stylesheet" href="http://demo.cmworld.net/dongilbim/resources/framework/jstree/themes/default/style.css">
<script type="text/javascript" src="http://demo.cmworld.net/dongilbim/resources/framework/jstree/jstree.js"></script>
<script>
var cmworld;
var gui;
var userLayer;
var m_selectedBox;
var m_selectedInfo;
var terrainEnabled = true;
var buildingEnabled = true;
var m_BridgePosition = { x: 127.114, y: 37.5432, z: 0 };
mouseClick = function (event) {
if (event) {
if (cmworld) {
var mousePos = cmworld.convertPagePosToCanvasPos(event.pageX, event.pageY);
if (cmworld.mouse.isClick(mousePos) == false)
return;
var pos = cmworld.getHitObjectFromScreenCoordinate(mousePos.x, mousePos.y);
if (!pos) return;
selectedBox(pos.object);
var fname = './demofiles_01/bridgedwg.gif';
if (pos.object.name.indexOf('교각') >= 0)
fname = './demofiles_01/bridge.jpg';
else if (pos.object.name.indexOf('_L') > 0 || pos.object.name.indexOf('_S') > 0)
fname = './demofiles_01/bridge0.gif';
if (m_selectedInfo) {
setImage(fname);
m_selectedInfo.setPosition(pos.pos.x, pos.pos.y, 70);
}
else {
m_selectedInfo = CMWORLD.UserObject.createBillboard("selectedinfo", pos.pos.x, pos.pos.y, 70, 100, 60, fname, onupdateobject);
userLayer.add(m_selectedInfo);
}
}
}
}
loadGJ = function () {
var siteRootFolder = CMWORLD.Compile.getSiteRootUrl();
//파일 열기
var loader = new THREE.FileLoader();
loader.load(siteRootFolder + "/model/gj.json", function (text) {
var txt = JSON.parse(text);
var loader = new THREE.ObjectLoader();
var obj = loader.parse(txt);
var obj1;
for (var i = 0; i < obj.children.length; i++) {
obj1 = new CMWORLD.UserObject(obj.children[i].name, obj.children[i], new THREE.Vector3(m_BridgePosition.x, m_BridgePosition.y, m_BridgePosition.z), null);
obj1.rotate4GlobeEarth();
userLayer.add(obj1);
}
//레이어 목록 표시
getLayerInfoList(obj.children);
});
}
window.onload = function ()
{
var canvas = document.querySelector("#cmworld3Canvas");
var vworld_mode = false;
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_mo_HD&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;
// Opacity를 위한 User Interface 용
var params =
{
terrain: true,
building: true,
opacity: 1.0
};
gui = new dat.GUI();
var folder = gui.addFolder("Layers");
folder.add(params, 'terrain').onChange(
function (v)
{
terrainEnabled = v;
if (terrainEnabled == true)
cmworld.addTerrainScene();
else
cmworld.removeTerrainScene();
});
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);
}
});
gui.open();
userLayer = new CMWORLD.UserObjectLayer("lines");
cmworld.addLayer(userLayer);
loadGJ();
//광진교 {x: 126.79364658948705, y: 37.6133796618065, z: 4.998598556034267
//{x: 127.1133126378576, y: 37.544755354307036, z: 6.346427389420569}
var eye_x = 127.1133126378576;
var eye_y = 37.544755354307036;
var eye_h = 1000;
var look_x = 127.1133126378576;
var look_y = 37.544755354307036;
var look_h = 10;
cmworld.gotoLookAt(eye_x, eye_y, eye_h, look_x, look_y, look_h);
};
var m_GeometryList = {};
/* 레이어목록 */
function getLayerInfoList(superitemList) {
//var superitemList = editor.scene.children;
var jsRoot = [];
var nodeL1, nodeL2, nodeL3;
var childList, tailList, tailList4;
var part1, part2, part3, part4;
for (var item in superitemList) {
part1 = 'L' + item;
m_GeometryList[part1] = superitemList[item];
//subitem
childList = superitemList[item].children;
if (!childList) continue;
nodeL1 = [];
for (var child in childList) {
part2 = part1 + '_' + child;
m_GeometryList[part2] = childList[child];
//subitem
tailList = childList[child].children;
if (!tailList) continue;
nodeL2 = [];
for (var tail in tailList) {
part3 = part2 + '_' + tail;
m_GeometryList[part3] = tailList[tail];
//subitem2
tailList4 = tailList[tail].children;
if (!tailList4) continue;
nodeL3 = [];
if (childList[child].name != '스틸박스') {
for (var tail4 in tailList4) {
part4 = part3 + '_' + tail4;
m_GeometryList[part4] = tailList4[tail4];
nodeL3.push({ "id": part4, "text": tailList4[tail4].name });
}
}
nodeL2.push({ "id": part3, "text": tailList[tail].name, "children": nodeL3 });
}
nodeL1.push({ "id": part2, "text": childList[child].name, "children": nodeL2 }); //
}
jsRoot.push({ "id": part1, "text": superitemList[item].name, "children": nodeL1, "state": { "selected": true } }); //, "selected" : true
}
$('#layer_area').jstree({
'plugins': ["wholerow", "checkbox"],
'core': { 'data': jsRoot } //, 'check_callback': true}
//expand_selected_onload : true
});
$("#layer_area").bind("ready.jstree", function (e, data) {
$("#layer_area").jstree('close_all');
$("#layer_area").jstree('open_node', 'L0');
$("#layer_area").jstree('open_node', 'L1');
});
$("#layer_area").bind("changed.jstree", function (e, data) { //open_node.jstree close_node.jstree
if (!(data.action == 'select_node' || data.action == 'deselect_node')) return;
var bChecked = false;
if (data.action == 'select_node') bChecked = true;
var objid;
for (var id in data.node.children_d) {
objid = data.node.children_d[id];
if (data.instance.get_node(objid).children.length == 0) //제일 하단 노드
{
m_GeometryList[objid].visible = bChecked;
}
}
if (data.node.children.length == 0) //제일 하단 노드
{
m_GeometryList[data.node.id].visible = bChecked;
selectedBox(m_GeometryList[data.node.id]);
}
});
}
function setImage(textureurl)
{
var loader = new THREE.TextureLoader();
var tex = loader.load(textureurl);
if (tex) {
m_selectedInfo.object.material.map = tex;
m_selectedInfo.updateMaterial();
}
}
onupdateobject = function (userObject, deltatime) {
}
function selectedBox(selectedBuilding) {
var edges = new THREE.EdgesGeometry(selectedBuilding.geometry);
var helper = new THREE.LineSegments(edges, new THREE.LineBasicMaterial({ color: 0xffff00 }));
if (m_selectedBox)
{
m_selectedBox.object = helper;
}
else {
m_selectedBox = new CMWORLD.UserObject("selectedobj", helper, new THREE.Vector3(m_BridgePosition.x, m_BridgePosition.y, m_BridgePosition.z), null);
userLayer.add(m_selectedBox);
}
m_selectedBox.rotate4GlobeEarth();
}
function openresult()
{
window.open('http://demo.cmworld.net/dongilbim/results', '_blank');
}
</script>
</head>
<body>
<div class="lnb">
<div class="tree_menu" id="layer_area"></div>
</div>
<div class="content">
<canvas id="cmworld3Canvas"></canvas>
<!-- a href="#" onclick="openresult();" style="font-size:12px;left: 310px; top: 10px; position: absolute; z-index: 10000;color: rgb(182, 255, 0)">진단/점검</a-->
<a href="#" onclick="setImage()" style="font-size:12px;left: 310px; top: 30px; position: absolute; z-index: 10000;color: rgb(182, 255, 0)">정보창 숨기기</a>
</div>
</body>
</html>