mago3D.JS V1.0.5

3D 멀티 블록 시각화를위한 오픈 소스 자바 스크립트 라이브러리

AEC (Architecture, Engineering, Construction) 영역과 전통적인 3D 공간 정보 (3D GIS)를 통합하고 시각화하는 차세대 3D GIS 플랫폼입니다. 실내 및 실외에서 구별 할 수없는 웹 브라우저에 AEC 및 3D GIS를 통합하십시오. 웹 브라우저에 프로그램을 설치하지 않고도 대규모 BIM (Building Information Modeling), JT (Jupiter Tessellation) 및 3D GIS 파일을 찾아보고 공동 작업 할 수 있습니다.

개발 환경

java8, eclipse neon, node, apache, Jasmine, Jsdoc, Gulp, eslint, JQuery

Getting Started

  • 소스 설치
    • github It accepts mago3DJS from.
    • Installation path C:/git/repository/mago3djs
  • Node 설치
    • npm install
    • npm install -g gulp
  • Node Server 실행
    • Running a local server: C:\git\repository\mago3djs> node server.js
    • Running a public server: C:\git\repository\mago3djs> node server.js --public true
  • Symbolic Link 생성
    • Create Data Folder: mklink /d "C:\git\repository\mago3djs\data" "C:\data"
    • Delete data folder: C:\git\repository\mago3djs>rmdir data

changeMagoStateAPI

mago3D 활성화 상태 값을 변경함으로서 화면에 mago3D Object가 표시, 비표시 됩니다.

Parameters:

Name Description
managerFactoryInstance mago3D 시작 부분
isShow true: 활성화, false: 비활성화

Examples:

html
<div>
	<h3>MagoState</h3>
	<input type="radio" id="magoEnable" name="magoState" value="0" checked="checked" onclick="changeMagoState(true);" />
	<label for="magoEnable"> 활성화 </label>
	<input type="radio" id="magoDisable" name="magoState" value="1"  onclick="changeMagoState(false);" />
	<label for="magoDisable"> 비활성화 </label>
</div>

				

JavaScript
function changeMagoState(isShow) {
	$("input:radio[name='magoState']:radio[value='" + isShow + "']").prop("checked", true);
	changeMagoState(managerFactory, isShow);
}

				

changeLabelAPI

changeLabelAPI 활성화 상태 값을 변경함으로서 Label이 표시, 비표시 됩니다.

Parameters:

Name Description
managerFactoryInstance mago3D 시작 부분
isShow true: 활성화, false: 비활성화

Examples:

html
<div>
	<h3>라벨</h3>
	<input type="radio" id="showLabel" name="labelInfo" value="true" onclick="changeLabel(true);" />
	<label for="showLabel"> 표시 </label>
	<input type="radio" id="hideLabel" name="labelInfo" value="false"  onclick="changeLabel(false);" />
	<label for="hideLabel"> 비표시 </label>
</div>

				

JavaScript
function changeLabel(isShow) {
		$("input:radio[name='labelInfo']:radio[value='" + isShow + "']").prop("checked", true);
		changeLabelAPI(managerFactory, isShow);
	}

				

changeOriginAPI

changeOriginAPI 활성화 상태 값을 변경함으로서 Origin이 표시, 비표시 됩니다.

Parameters:

Name Description
managerFactoryInstance mago3D 시작 부분
isShow true: 활성화, false: 비활성화

Examples:

html
<div>
	<h3>Origin</h3>
	<input type="radio" id="showOrigin" name="origin" value="true" onclick="changeOrigin(true);" />
	<label for="showOrigin"> 표시 </label>
	<input type="radio" id="hideOrigin" name="origin" value="false"  onclick="changeOrigin(false);" />
	<label for="hideOrigin"> 비표시 </label>
</div>

				

JavaScript
function changeOrigin(isShow) {
        $("input:radio[name='origin']:radio[value='" + isShow + "']").prop("checked", true);
        changeOriginAPI(managerFactory, isShow);
	}

				

changeBoundingBoxAPI

changeBoundingBoxAPI 활성화 상태 값을 변경함으로서 BoundingBox가 표시, 비표시 됩니다.

Parameters:

Name Description
managerFactoryInstance mago3D 시작 부분
isShow true: 활성화, false: 비활성화

Examples:

html
<div>
	<h3>BoundingBox</h3>
	<input type="radio" id="showBoundingBox" name="boundingBox" value="true" onclick="changeBoundingBox(true);" />
	<label for="showBoundingBox"> 표시 </label>
	<input type="radio" id="hideBoundingBox" name="boundingBox" value="false"  onclick="changeBoundingBox(false);" />
	<label for="hideBoundingBox"> 비표시 </label>
</div>

				

JavaScript
function changeBoundingBox(isShow) {
	$("input:radio[name='boundingBox']:radio[value='" + isShow + "']").prop("checked", true);
	changeBoundingBoxAPI(managerFactory, isShow);
}

				

changePropertyRenderingAPI

속성값에 의한 가시화 유무설정하는 API입니다.

Parameters:

Name Description
managerFactoryInstance mago3D 시작 부분
isShow true = 표시, false = 비표시
projectId 프로젝트 아이디
property 속성

Examples:

html
<div>
	<h3>속성 가시화</h3>
	<ul class="apiLocal">
		<li>
			<input type="radio" id="showPropertyRendering" name="propertyRendering" value="true" />
			<label for="showLabel"> 표시 </label>
			<input type="radio" id="hidePropertyRendering" name="propertyRendering" value="false" />
			<label for="hideLabel"> 비표시 </label>
		</li>
		<li>
			<label for="propertyRenderingProjectId">프로젝트 </label>
			<select id="propertyRenderingProjectId" name="propertyRenderingProjectId" class="select">
				<option value="data.json">...</option>
			</select>
		</li>
		<li>
			<label for="propertyRenderingWord">속성</label>
			<input type="text" id="propertyRenderingWord" name="propertyRenderingWord" size="23" placeholder="isMain=true" />
			<button type="button" id="changePropertyRendering" class="btn">변경</button> 
		</li>
	</ul>
</div>

				

JavaScript
$("#changePropertyRendering").click(function(e) {
	var isShow = $(':radio[name="propertyRendering"]:checked').val();
	if(isShow === undefined){
		alert("표시/비표시 를 선택하여 주십시오.");
		return false;
	}
	if ($.trim($("#propertyRenderingWord").val()) === ""){
		alert("속성값을 입력해 주세요.");
		$("#propertyRenderingWord").focus();
		return false;
	}
	changePropertyRenderingAPI(managerFactory, isShow, $("#propertyRenderingProjectId").val(), $("#propertyRenderingWord").val());
});

				

changeShadowAPI

그림자 표시 유무를 설정

Parameters:

Name Description
managerFactoryInstance mago3D 시작 부분
isShow true: 활성화, false: 비활성화

Examples:

html
<div>
	<h3>그림자 설정</h3>
	<input type="radio" id="showShadow" name="shadow" value="true" onclick="changeShadow(true);" />
	<label for="showShadow"> 표시 </label>
	<input type="radio" id="hideShadow" name="shadow" value="false"  onclick="changeShadow(false);" />
	<label for="hideShadow"> 비표시 </label>
</div>

				

JavaScript

function changeShadow(isShow) {
	$("input:radio[name='shadow']:radio[value='" + isShow + "']").prop("checked", true);
	changeShadowAPI(managerFactory, isShow);
}

				

changeColorAPI

프로젝트 단위로 원하는 데이터나 데이터의 객체에 색상을 변경해주는 API입니다.

Parameters:

Name Description
managerFactoryInstance mago3D 시작 부분
projectId 프로젝트 아이디
dataKey 데이터 고유키
objectIds object id. 복수개의 경우 , 로 입력
property 속성값 예)isMain=true
color R, G, B 색깔을 ',' 로 연결한 string 값을 받음.

Examples:

html
<div>
	<h3>색깔 변경</h3>
	<ul class="apiLoca">
		<li>
			<label for="colorProjectId">프로젝트 </label>
			<select id="colorProjectId" name="colorProjectId" class="select">
				<option value="data.json">...</option>
			</select>
		</li>
		<li>
			<label for="colorDataKey">Data Key</label>
			<input type="text" id="colorDataKey" name="colorDataKey" size="30" />
		</li>
		<li>
			<label for="colorObjectIds">Object Id</label>
			<input type="text" id="colorObjectIds" name="colorObjectIds" placeholder="   , 구분" size="30" />
		</li>
		<li>
			<label for="colorProperty">속성</label>
			<input type="text" id="colorProperty" name="colorProperty" size="30" placeholder="isMain=true" />
		</li>
		<li>
			<label for="updateColor">색깔</label>
			<select id="updateColor" name="updateColor" class="select">
				<option value="255,0,0"> 빨강 </option>
				<option value="255,255,0"> 노랑 </option>
				<option value="0,255,0"> 녹색 </option>
				<option value="0,0,255"> 파랑 </option>
				<option value="255,0,255"> 분홍 </option>
				<option value="0,0,0"> 검정 </option>
			</select>
			<button type="button" id="changeColor" class="btn">변경</button> 
		</li>
	</ul>
</div>

				

JavaScript
$("#changeColor").click(function(e) {
	if ($.trim($("#colorDataKey").val()) === ""){
		alert("Data Key를 입력해 주세요.");
		$("#colorDataKey").focus();
		return false;
	}
		
	var objectIds = null;
	var colorObjectIds = $("#colorObjectIds").val();
	if(colorObjectIds !== null && colorObjectIds !=="") objectIds = colorObjectIds.split(",");
	changeColorAPI(managerFactory, $("#colorProjectId").val(), $("#colorDataKey").val(), objectIds, $("#colorProperty").val(), $("#updateColor").val());
});

				

changeLocationAndRotationAPI

입력 받은 위치정보와 회전 정보로 블록을 변환 시킵니다.

Parameters:

Name Description
managerFactoryInstance mago3D 시작 부분
projectId 프로젝트 아이디
dataKey 데이터 고유키
latitude 위도
longitude 경도
height 높이
heading 좌, 우
pitch 위, 아래
roll 좌, 우 기울기

Examples:

html
<div>
	<h3>Location and Rotation</h3>
	<ul class="apiLoca">
		<li>
			<label for="moveProjectId">프로젝트 </label>
			<select id="moveProjectId" name="moveProjectId" class="select">
				<option value="data.json">...</option>
			</select>
		</li>
		<li>
			<label for="moveDataKey">Data Key</label>
			<input type="text" id="moveDataKey" name="moveDataKey" size="25" />
		</li>
		<li>
			<label for="moveLatitude">위도 </label>
			<input type="text" id="moveLatitude" name="moveLatitude" size="25"/>
		</li>
		<li>
			<label for="moveLongitude">경도 </label>
			<input type="text" id="moveLongitude" name="moveLongitude" size="25"/>
		</li>
		<li>
			<label for="moveHeight">높이 </label>
			<input type="text" id="moveHeight" name="moveHeight" size="25" />
		</li>
		<li>
			<label for="moveHeading">HEADING </label>
			<input type="text" id="moveHeading" name="moveHeading" size="25" />
		</li>
		<li>
			<label for="movePitch">PITCH </label>
			<input type="text" id="movePitch" name="movePitch" size="25" />
		</li>
		<li>
			<label for="moveRoll">ROLL </label>
			<input type="text" id="moveRoll" name="moveRoll" size="18" />
			<button type="button" id="changeLocationAndRotation" class="btn">변환</button> 
		</li>
	</ul>
</div>

				

JavaScript
$("#changeLocationAndRotation").click(function() {
	if(!changeLocationAndRotationCheck()) return false;
	changeLocationAndRotationAPI(managerFactory, $("#moveProjectId").val(), $("#moveDataKey").val(), $("#moveLatitude").val(), 
					       	     $("#moveLongitude").val(), $("#moveHeight").val(), $("#moveHeading").val(), 
					    	     $("#movePitch").val(), $("#moveRoll").val());
});

				

changeObjectMoveAPI

마우스 클릭 객체 이동 대상 변경

Parameters:

Name Description
managerFactoryInstance mago3D 시작 부분
objectMoveMode 0 = All, 1 = object, 2 = None

Examples:

html
<div>
	<h3>Selecting And Moving</h3>
	<input type="radio" id="objectNoneMove" name="objectMoveMode" value="2" onclick="changeObjectMove('2');"/>
	<label for="objectNoneMove"> None </label>
	<input type="radio" id="mouseAllMove" name="objectMoveMode" value="0" onclick="changeObjectMove('0');"/>
	<label for="objectAllMove"> ALL </label>
	<input type="radio" id="objectMove" name="objectMoveMode" value="1" onclick="changeObjectMove('1');"/>
	<label for="objectMove"> Object </label>
</div>	

				

JavaScript
function changeObjectMove(objectMoveMode) {
	$("input:radio[name='objectMoveMode']:radio[value='" + objectMoveMode + "']").prop("checked", true);
	changeObjectMoveAPI(managerFactory, objectMoveMode);
}

				

saveObjectMoveAPI

모든 객체 마우스 이동 이력을 Cache로 저장합니다.

Parameters:

Name Description
managerFactoryInstance mago3D 시작 부분
objectMoveMode 0 = All, 1 = object, 2 = None

Examples:

html
<button type="button" id="saveObjectMoveButton" class="btn">저장</button>	

				

JavaScript
$("#saveObjectMoveButton").click(function () {
	alert("준비중 입니다.");
	var objectMoveMode = $(':radio[name="objectMoveMode"]:checked').val();
	if(objectMoveMode === "2") {
		alert("None 모드일 경우 저장할 수 없습니다.");
		return;
	}
	saveObjectMoveAPI(managerFactory, objectMoveMode);
});

				

deleteAllObjectMoveAPI

모든 객체 마우스 이동 이력을 Cache로 삭세합니다.

Parameters:

Name Description
managerFactoryInstance mago3D 시작 부분
objectMoveMode 0 = All, 1 = object, 2 = None

Examples:

html
<button type="button" id="deleteAllObjectMoveButton" class="btn">전체 삭제</button>

				

JavaScript
$("#deleteAllObjectMoveButton").click(function () {
	var objectMoveMode = $(':radio[name="objectMoveMode"]:checked').val();
	if(confirm("삭제 하시겠습니까?")) {
		deleteAllObjectMoveAPI(managerFactory, objectMoveMode);
	}
});

				

deleteAllChangeColorAPI

변경한 색상 이력을 전체 삭제합니다.

Parameters:

Name Description
managerFactoryInstance mago3D 시작 부분

Examples:

html
<button type="button" id="deleteAllChangeColor" class="btn">전체 삭제</button>

				

JavaScript
$("#deleteAllChangeColor").click(function () {
	if(confirm("삭제 하시겠습니까?")) {
		deleteAllChangeColorAPI(managerFactory);
	}
});

				

changeInsertIssueModeAPI

changeInsertIssueModeAPI란 이슈 기능을 활성화하는 API입니다. 이 API에 파라미터인 flag는 Boolean 타입이고 true이면 이슈 모드가 활성화되고 false이면 비활성화되는 방식입니다. 활성화되어있는 상태에서 이슈를 등록하고 싶은 Object를 클릭하면 callback함수를 관리해주는 데이터베이스 운영정책에 따라서 이슈등록 callback함수가 호출이되어 이슈등록 창이 나옵니다. 이슈등록 창에 내용을 적고 저장하면 데이터베이스에 등록이됩니다. 또한, 이슈등록 callback함수는 사용자가 Customizing이 가능합니다.

Parameters:

Name Description
managerFactoryInstance mago3D 시작 부분
flag true = 활성화, false = 비활성화

Examples:

html
<button type="button" id="insertIssueEnableButton" class="btn">클릭 후 객체를 선택해 주세요.</button> 

				

JavaScript
$("#insertIssueEnableButton").click(function() {
	if(insertIssueEnable) {
		$("#insertIssueEnableButton").removeClass("on");
		$("#insertIssueEnableButton").text("클릭 후 객체를 선택해 주세요.");
		insertIssueEnable = false;
	} else {
		$("#insertIssueEnableButton").addClass("on");
		$("#insertIssueEnableButton").text("Issue 등록 활성화 상태");
		insertIssueEnable = true;
	}
	changeInsertIssueModeAPI(managerFactory, insertIssueEnable);
});

				

mago3DJS로 부터 호출 되는 callback 함수
	function showInsertIssueLayer(projectId, dataKey, objectKey, latitude, longitude, height) {
		if(insertIssueEnable) {
		    $("#issueProjectId").val(projectId);
			$("#data_key").val(dataKey);
			$("#object_key").val(objectKey);
			$("#latitude").val(latitude);
			$("#longitude").val(longitude);
			$("#height").val(height);
			
			// 현재 좌표를 저장
			saveCurrentLocation(latitude, longitude);
	}
}

			

changeObjectInfoViewModeAPI

changeObjectInfoViewModeAPI는 Object정보표시 기능을 활성화하는 API입니다. 이 API에 파라미터인 flag는 Boolean 타입이고 true이면 정보 표시 모드가 활성화되고 false이면 비활성화되는 방식입니다. 활성화되어있는 상태에서 정보를 알고 싶은 Object를 클릭하면 callback함수를 관리해주는 데이터베이스 운영정책에 따라서 정보표시 callback함수가 호출되고 Jquery Plugin Toast통하여 Object정보가 나옵니다. 또한, 정보표시 callback함수는 사용자가 Customizing이 가능합니다.

Parameters:

Name Description
managerFactoryInstance mago3D 시작 부분
flag true = 활성화, false = 비활성화

Examples:


html
<div>
	<h3>객체 정보</h3>
	<input type="radio" id="showObjectInfo" name="objectInfo" value="true" onclick="changeObjectInfoViewMode(true);" />
	<label for="showObjectInfo"> 표시 </label>
	<input type="radio" id="hideObjectInfo" name="objectInfo" value="false" onclick="changeObjectInfoViewMode(false);"/>
	<label for="hideObjectInfo"> 비표시 </label>
</div>
			
				

JavaScript
function changeObjectInfoViewMode(isShow) {
	$("input:radio[name='objectInfo']:radio[value='" + isShow + "']").prop("checked", true);
	changeObjectInfoViewModeAPI(managerFactory, isShow);
}

				

mago3DJS로 부터 호출 되는 callback 함수
function showSelectedObject(projectId, dataKey, objectId, latitude, longitude, height, heading, pitch, roll) {
		var objectInfoViewFlag = $(':radio[name="objectInfo"]:checked').val();
		if(objectInfoViewFlag) {
		    $("#moveProjectId").val(projectId);
			$("#moveDataKey").val(dataKey);
			$("#moveLatitude").val(latitude);
			$("#moveLongitude").val(longitude);
			$("#moveHeight").val(height);
			$("#moveHeading").val(heading);
			$("#movePitch").val(pitch);
			$("#moveRoll").val(roll);
			
			$.toast({
			    heading: 'Click Object Info',
			    text: [
					'ProjectId : ' + projectId,
			        'dataKey : ' + dataKey,
			        'objectId : ' + objectId,
			        'latitude : ' + latitude,
			        'longitude : ' + longitude,
			        'height : ' + height,
			        'heading : ' + heading,
			        'pitch : ' + pitch,
			        'roll : ' + roll
			    ],
				bgColor : '#393946',
				hideAfter: 5000,
				icon: 'info',
				position : 'bottom-right'
			});
			
			// occlusion culling
			$("#occlusion_culling_data_key").val(dataKey);
			// 현재 좌표를 저장
			saveCurrentLocation(latitude, longitude);
	}
}

				

changeOcclusionCullingAPI

Object Occlusion culling

Parameters:

Name Description
managerFactoryInstance mago3D 시작 부분
flag true = 활성화, false = 비활성화
dataKey 데이터 고유키

Examples:

html
<div>
	<h3>Object Occlusion Culling</h3>
	<div>
		<div>사용유무</div>
		<input type="radio" id="useOcclusionCulling" name="occlusionCulling" value="true" />
		<label for="useOccusionCulling"> 사용 </label>
		<input type="radio" id="unusedOcclusionCulling" name="occlusionCulling" value="false" />
		<label for="unusedOcclusionCulling"> 미사용 </label>
	</div>
	<div>
		<div>Data Key</div>
		<input type="text" id="occlusion_culling_data_key" name="occlusion_culling_data_key"/>
		<button type="button" id="changeOcclusionCullingButton" class="btn">변경</button>
	</div>
</div>

			

JavaScript
$("#changeOcclusionCullingButton").click(function () {
	changeOcclusionCullingAPI(managerFactory, ($(':radio[name="occlusionCulling"]:checked').val() === "true"), $("#occlusion_culling_data_key").val());		
});

				

changeFPVModeAPI

카메라를 1인칭, 3인칭 모드로 변경해주는 API입니다.

Parameters:

Name Description
managerFactoryInstance mago3D 시작 부분
flag true = 활성화, false = 비활성화

Examples:

html
<div>
	<h3>View Mode</h3>
	<input type="radio" id="mode3PV" name="viewMode" value ="false" onclick="changeViewMode(false);"/>
	<label for="mode3PV"> 3인칭 모드 </label>
	<input type="radio" id="mode1PV" name="viewMode" value ="true" onclick="changeViewMode(true);"/>
	<label for="mode1PV"> 1인칭 모드 </label>
</div>

				

JavaScript
function changeViewMode(isFPVMode) {
	$("input:radio[name='viewMode']:radio[value='" + isFPVMode + "']").prop("checked", true);
	changeFPVModeAPI(managerFactory, isFPVMode);
}

				

changeNearGeoIssueListViewModeAPI

활성화시 현재 위치 근처 issue를 보여주는 API입니다.

Parameters:

Name Description
managerFactoryInstance mago3D 시작 부분
flag true = 활성화, false = 비활성화

Examples:

html
<div>
	<h3>현재 위치 근처 Issue List(100개)</h3>
	<input type="radio" id="showNearGeoIssueList" name="nearGeoIssueList" value="true" onclick="changeNearGeoIssueList(true);" />
	<label for="showNearGeoIssueList"> 표시 </label>
	<input type="radio" id="hideNearGeoIssueList" name="nearGeoIssueList" value="false" onclick="changeNearGeoIssueList(false);"/>
	<label for="hideNearGeoIssueList"> 비표시 </label>
</div>

				

JavaScript
changeNearGeoIssueListViewModeAPI(managerFactory, isShow);

				

changeInsertIssueStateAPI

mago3DJS 엔진이 이슈 등록을 위해서 좌표를 기억하고 있었는데 changeInsertIssueStateAPI에 파라미터에 0을 넘겨 주면 좌표를 초기화합니다.

Parameters:

Name Description
managerFactoryInstance mago3D 시작 부분
insertIssueState 이슈 등록 좌표 상태

Examples:


JavaScript
changeInsertIssueStateAPI(managerFactory, 0);

				

changeLodAPI

LOD(Level Of Detail)설정을 변경해주는 API입니다.

Parameters:

Name Description
managerFactoryInstance mago3D 시작 부분
lod0DistInMeters lod0DistInMeters
lod1DistInMeters lod1DistInMeters
lod2DistInMeters lod2DistInMeters
lod3DistInMeters lod3DistInMeters
lod4DistInMeters lod4DistInMeters
lod5DistInMeters lod5DistInMeters

Examples:

html
<div>
	<h3>LOD</h3>
	<div>LOD0</div>
	<input type="text" id="geo_lod0" name="geo_lod0" value="" size="15" /> M
	<div>LOD1</div>
	<input type="text" id="geo_lod1" name="geo_lod1" value="" size="15" /> M
	<div>LOD2</div>
	<input type="text" id="geo_lod2" name="geo_lod2" value="" size="15" /> M
	<div>LOD3</div>
	<input type="text" id="geo_lod2" name="geo_lod2" value="" size="15" /> M
	<div>LOD4</div>
	<input type="text" id="geo_lod2" name="geo_lod2" value="" size="15" /> M
	<div>LOD5</div>
	<input type="text" id="geo_lod2" name="geo_lod2" value="" size="15" /> M  
	<button type="button" id="changeLodButton" class="btn">변경</button>
</div>

				

JavaScript
$("#changeLodButton").click(function() {
		changeLodAPI(managerFactory, $("#geo_lod0").val(), $("#geo_lod1").val(), $("#geo_lod2").val(), $("#geo_lod3").val(), $("#geo_lod4").val(), $("#geo_lod5").val());
	});

				

changeLightingAPI

선택한 Object에 밝기를 조절하는 API입니다.

Parameters:

Name Description
managerFactoryInstance mago3D 시작 부분
ambientReflectionCoef ambientReflectionCoef
diffuseReflectionCoef diffuseReflectionCoef
specularReflectionCoef specularReflectionCoef
ambientColor ambientColor
specularColor specularColor

Examples:

html
<div>
	<h3>Lighting</h3>
	<div>AmbientReflectionCoeficient</div>
	<div id="ambient_reflection_coef">
		<div id="geo_ambient_reflection_coef_view" class="ui-slider-handle"></div>
		<input type="hidden" id="geo_ambient_reflection_coef" name="geo_ambient_reflection_coef" value="0.5" />
	</div>
	<div>DiffuseReflectionCoeficient</div>
	<div id="diffuse_reflection_coef">
		<div id="geo_diffuse_reflection_coef_view" class="ui-slider-handle"></div>
		<input type="hidden" id="geo_diffuse_reflection_coef" name="geo_diffuse_reflection_coef" value="1" />
	</div>
	<div>SpecularReflectionCoeficient</div>
	<div>
		<div id="specular_reflection_coef">
			<div id="geo_specular_reflection_coef_view" class="ui-slider-handle"></div>
			<input type="hidden" id="geo_specular_reflection_coef" name="geo_specular_reflection_coef" value="1" />
		</div>
		<div>
			<button type="button" id="changeLightingButton" class="btn">변경</button>
		</div>
	</div>
</div>

				

JavaScript
$("#changeLightingButton").click(function() {
		changeLightingAPI(managerFactory, $("#geo_ambient_reflection_coef").val(), $("#geo_diffuse_reflection_coef").val(), $("#geo_specular_reflection_coef").val(), null, null);
	});

				

changeSsaoRadiusAPI

선택한 Object에 SSAO Radius를 설정해주는 API입니다.

Parameters:

Name Description
managerFactoryInstance mago3D 시작 부분
ssaoRadius ssaoRadius

Examples:

html
<div>
	<h3><label for="geo_ssao_radius">SSAO Radius</label></h3>
	<input type="text" id="geo_ssao_radius" name="geo_ssao_radius" />
	<button type="button" id="changeSsaoRadiusButton" class="btn">변경</button>
</div>

				

JavaScript
$("#changeSsaoRadiusButton").click(function() {
	changeSsaoRadiusAPI(managerFactory, $("#geo_ssao_radius").val());
});

				

clearAllDataAPI

화면에 있는 모든 데이터를 삭제, 비표시하는 API입니다.

Parameters:

Name Description
managerFactoryInstance mago3D 시작 부분

Examples:


JavaScript
function clearAllData() {
	clearAllDataAPI(managerFactory);
}

				

drawInsertIssueImageAPI

Pin Image를 그려주는 API입니다.

Parameters:

Name Description
managerFactoryInstance mago3D 시작 부분
drawType 이미지 유형
issue_id 이슈 고유키
issue_type 이슈 타입
data_key 데이터 고유키
latitude 위도
longitude 경도
height 높이

Examples:


JavaScript
drawInsertIssueImageAPI(managerFactory, 1, msg.issue.issue_id, msg.issue.issue_type, 
		$("#data_key").val(), $("#latitude").val(), $("#longitude").val(), $("#height").val());

				

gotoProjectAPI

해당 프로젝트를 로딩하고 그 프로젝트로 이동하는 API입니다.

Parameters:

Name Description
managerFactoryInstance mago3D 시작 부분
projectId 프로젝트 아이디
projectData 프로젝트 데이터
projectDataFolder 프로젝트 데이터 폴더
latitude 위도
longitude 경도
height 높이
duration 이동하는 시간

Examples:

html
<ul class="shortcut">
	<li onclick="gotoProject('data.json', '126.5252421', '35.425', '550', '3')">data</li>
	<li onclick="gotoProject('data.json', '126.5252421', '35.425', '550', '3')">data</li>
	<li onclick="gotoProject('data.json', '126.5252421', '35.425', '550', '3')">data</li>
</ul>

				

JavaScript
function gotoProject(projectId, longitude, latitude, height, duration) {
		var projectData = getDataAPI(CODE.PROJECT_ID_PREFIX + projectId);
		if (projectData === null || projectData === undefined) {
			$.ajax({
				url: dataInformationUrl + projectId,
				type: "GET",
				dataType: "json",
				success: function(serverData) {
					gotoProjectAPI(managerFactory, projectId, serverData, serverData.data_key, longitude, latitude, height, duration);		
				},
				error : function(request, status, error) {
					console.log("code : " + request.status + "\n" + "message : " + request.responseText + "\n" + "error : " + error);
				}
			});
		} else {
			gotoProjectAPI(managerFactory, projectId, projectData, projectData.data_key, longitude, latitude, height, duration);	
		}
		
		// 현재 좌표를 저장
		saveCurrentLocation(latitude, longitude);
	}

				

gotoIssueAPI

해당 프로젝트를 로딩하고 그 이슈로 이동하는 API입니다.

Parameters:

Name Description
managerFactoryInstance mago3D 시작 부분
projectId 프로젝트 아이디
projectData 프로젝트 데이터
projectDataFolder 프로젝트 데이터 폴더
issueId 이슈 아이디
issueType 이슈 타입
latitude 위도
longitude 경도
height 높이
duration 이동하는 시간

Examples:

html
<li>
	<button type="button" title="Shortcuts" onclick="gotoIssue('ifc_mep.json', '128', 'ISSUE_TYPE_BUGGER', '126.6086040', '37.583', '40', '2')">Shortcuts</button>
	<div class="info">
		<p class="title"gt;<span>IFC(MEP)</span> TEST</p>
		<ul class="tag">
			<li><span class="i1"></span>Bugger</li>
			<li><span class="t1"></span>Very Important</li>
			<li class="date">2017-08-25 14:27:42</li>
		</ul>	
	</div>
</li>

				

JavaScript
function gotoIssue(projectId, issueId, issueType, longitude, latitude, height, duration) {
		var projectData = getDataAPI(CODE.PROJECT_ID_PREFIX + projectId);
		if (projectData === null || projectData === undefined) {
			$.ajax({
				url: dataInformationUrl + projectId,
				type: "GET",
				dataType: "json",
				success: function(serverData) {
					gotoIssueAPI(managerFactory, projectId, serverData, serverData.data_key, issueId, issueType, longitude, latitude, height, duration);		
				},
				error : function(request, status, error) {
					console.log("code : " + request.status + "\n" + "message : " + request.responseText + "\n" + "error : " + error);
				}
			});
		} else {
			gotoIssueAPI(managerFactory, projectId, projectData, projectData.data_key, issueId, issueType, longitude, latitude, height, duration);	
		}
		
		// 현재 좌표를 저장
		saveCurrentLocation(latitude, longitude);
	}

				

mouseMoveAPI

마우스를 사용할 수 없는 환경에서 버튼 이벤트로 대체하는 API입니다.(개발중)

Parameters:

Name Description
managerFactoryInstance mago3D 시작 부분
eventType 어떤 마우스 동작을 원하는지를 구분

Examples:


searchDataAPI

데이터를 검색해주는 API입니다.

Parameters:

Name Description
managerFactoryInstance mago3D 시작 부분
projectId 프로젝트 아이디
dataKey 데이터 고유키

Examples:

html
<div>
	<h3>로컬(Browser) 검색</h3>
	<ul class="apiLoca">
		<li>
			<label for="localSearchProjectId">프로젝트 </label>
			<select id="localSearchProjectId" name="localSearchProjectId" class="select">
				ProjectId
			</select>
		</li>
		<li>
			<label for="localSearchDataKey">Data Key</label>
			<input type="text" id="localSearchDataKey" name="localSearchDataKey" size="23" />
			<button type="button" id="localSearch" class="btn">검색</button> 
		</li>
	</ul>
</div>

				

JavaScript
$("#localSearch").click(function() {
	if ($.trim($("#localSearchDataKey").val()) === ""){
		alert("Data Key를 입력해 주세요.");
		$("#localSearchDataKey").focus();
		return false;
	}
	searchDataAPI(managerFactory, $("#localSearchProjectId").val(), $("#localSearchDataKey").val());
});

				

isDataExistAPI

환경 설정 data map에 key 값의 존재 유무를 판별하는 API입니다.

Parameters:

Name Description
key 검색 키

Examples:


JavaScript
isDataExistAPI(CODE.PROJECT_ID_PREFIX + dataName)

				

getDataAPI

data amp에 담겨있는 데이터정보(json)를 불러오는 API입니다.

Parameters:

Name Description
key 검색 키

Examples:


JavaScript
getDataAPI(CODE.PROJECT_ID_PREFIX + projectId);

				

getDataInfoByDataKeyAPI

data key 를 이용하여 dataInfo 공간정보를 취득하는 API입니다.

Parameters:

Name Description
managerFactoryInstance mago3D 시작 부분
projectId 프로젝트 아이디
dataKey 데이터 고유키

Examples:


JavaScript
getDataAPI(CODE.PROJECT_ID_PREFIX + projectId);

				

drawAppendDataAPI

프로젝트 단위 데이터를 추가하고 Rendering하는 API입니다.

Parameters:

Name Description
managerFactoryInstance mago3D 시작 부분
projectIdArray 프로젝트 이름들
projectDataArray 프로젝트 데이터들
projectDataFolderArray 프로젝트 f4d 파일 경로

Examples:


JavaScript
drawAppendDataAPI(managerFactory, projectIdArray, projectDataArray, projectDataFolderArray);