<!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;
}
#cmworldCanvas {
width: 100%;
height: 100%;
}
#titleDiv {
font-size: 12px;
color: #000000;
}
/* Style Add - 임재영 */
/* Style Add - 임재영 */
@font-face {
font-family: 'NanumSquare';
src: url('http://hangeul.naver.com/webfont/NanumSquare/NanumSquareR.eot');
src: url('http://hangeul.naver.com/webfont/NanumSquare/NanumSquareR.eot?#iefix') format('embedded-opentype'), url('http://hangeul.naver.com/webfont/NanumSquare/NanumSquareR.woff') format('woff'), url('http://hangeul.naver.com/webfont/NanumSquare/NanumSquareR.ttf') format('truetype');
}
* {
font-family: 'NanumSquare', Dotum, '돋움', sans-serif;
}
#select-form {
position: absolute;
top: 70px;
right: 10px;
z-index: 1000;
background: #fff;
border-radius: 2px;
box-shadow: 0 3px 7px rgba(0,0,0,0.2);
width: 220px;
}
#select-form .form-box {
padding: 14px 20px;
width: calc(100% - 40px);
}
#select-form h3 {
width: 100%;
height: 30px;
line-height: 30px;
font-size: 16px;
font-weight: 600;
color: #3171fe;
margin: 0;
padding: 0;
}
.input-fields {
width: 100%;
display: block;
margin-top: 10px;
}
.input-fields + .input-fields {
margin-top: 34px;
}
.input-fields label {
display: block;
font-size: 12px;
font-weight: 600;
color: #999;
margin-bottom: 8px;
}
.input-fields .ampm {
font-size: 12px;
display: inline-block;
margin-right: 5px;
float: right;
}
#datePicker {
width: calc(100% - 20px);
height: 32px;
border-radius: 2px;
border: 1px solid #e2e2e2;
padding: 0 10px;
font-size: 14px;
color: #666;
}
#hourlabel {
display: inline-block;
float: right;
font-size: 20px;
color: #333;
margin-top: -7px;
}
#hour {
width: 100%;
}
.btn-area {
width: 100%;
border-top: 1px solid #efefef;
margin: 0;
padding: 0;
display: block;
}
.btn-area button + button {
border-left: 1px solid #efefef;
}
.btn-area button {
width: calc((100% - 1px) / 2);
height: 34px;
border-radius: 2px;
border: 0;
background: #fff;
margin: 0;
padding: 0;
display: inline-block;
font-size: 13px;
font-weight: 600;
color: #888;
cursor: pointer;
}
button.btn-save {
color: #4999ea;
}
.btn-area button:hover {
color: #f8318a;
}
</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>
var cmworld = null;
var gui;
var interval_id = -1;
var date;
var hour = 12;
var min = 0;
var sec = 0;
var sunLight = true;
enableSunLight = function (enable)
{
cmworld.enableSunLight(enable);
cmworld.option.atmosphereEnabled = enable;
sunLight = enable;
}
goToLoc = function ()
{
var eye_x = 127.08174188396235;
var eye_y = 37.51231017799103;
var eye_h = 200;
var look_x = 127.08174188396235;
var look_y = 37.51505310508758;
var look_h = 10;
cmworld.gotoLookAt(eye_x, eye_y, eye_h, look_x, look_y, look_h);
}
window.onload = function ()
{
var canvas = document.querySelector("#cmworldCanvas");
cmworld = new CMWORLD.CmWorld3(canvas, 127, 38, CMWORLD.cm_const.EarthRadius, { toptilespan: 36 });
cmworld.option.worldTimer.setStartDateTime(2015, 7, 12, 14, 0, 0, 0);
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");
date = new Date();
document.getElementById('datePicker').valueAsDate = date;
document.getElementById('hour').value = (hour - 6) * 60;
cmworld.option.showFPS(true);
enableSunLight(sunLight);
cmworld.option.worldTimer.setStartDateTime(date.getFullYear(), date.getMonth(), date.getDay(), hour, min, sec, 0);
/*
var eye_x = 127.08174188396235;
var eye_y = 37.51231017799103;
var eye_h = 200;
var look_x = 127.08174188396235;
var look_y = 37.51505310508758;
var look_h = 10;
cmworld.gotoLookAt(eye_x, eye_y, eye_h, look_x, look_y, look_h);
*/
};
function dateUpdate(v)
{
date = new Date(v);
cmworld.option.worldTimer.setStartDateTime(date.getFullYear(), date.getMonth(), date.getDay(), hour, min, sec, 0);
}
function hourUpdate(v)
{
hour = Math.floor((v / 60) + 6);
min = v % 60;
document.getElementById('hourlabel').innerText = hour.toString() + "시 " + min.toString() + "분"
cmworld.option.worldTimer.setStartDateTime(date.getFullYear(), date.getMonth(), date.getDay(), hour, min, sec, 0);
}
</script>
<form id="select-form" class="select-form">
<!-- Select Box -->
<div class="form-box">
<h3>Select Date Time</h3>
<div class="input-fields">
<label>Date selector</label>
<input id="datePicker" type="date" onchange="dateUpdate(value)">
</div>
<div class="input-fields">
<label>Time selector<div id="hourlabel">12시 0분</div><span class="ampm"></span></label>
<input min="0" max="720" id="hour" type="range" oninput="hourUpdate(value)">
</div>
</div>
</form>
</head>
<body>
<canvas id="cmworldCanvas"></canvas>
<a href="#" onclick="enableSunLight(!sunLight)" style="font-size:12px;right: 10px; top: 10px; position: absolute; z-index: 10000;color: rgb(182, 255, 0)">SunLight On/Off</a>
<a href="#" onclick="goToLoc()" style="font-size:12px;right: 10px; top: 40px; position: absolute; z-index: 10000;color: rgb(182, 255, 0)">잠실</a>
</body>
</html>