<!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%;
}
#labelDiv {
font-size: 12px;
color: #ffd800;
position: absolute;
top: 20px;
left: 10px;
z-index: 1;
}
</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>
<script>
var cmworld;
var gui;
var userLayer;
var cubeLayer;
var userObj;
var dustLayer;
var dustCube;
var DustColorMap;
var target = null;
var COfiles;
var curfiles;
var curlines;
var curcolormap;
var timerId;
var dustdata;
var curtime = 0;
var timeduration = 0;
var particleCount = 1200;
var selectMode = 0;
var selectedCubes = [];
var highlightedCube = null;
var dustpoints = [];
var dustpole = [];
function dustitem()
{
this.ID = "";
this.address = "";
this.lat = 0;
this.lon = 0;
this.alt = 0;
this.row = -1;
this.col = -1;
this.floor = -1;
this.pm10 = [];
}
Select1 = function ()
{
selectMode = 1;
}
Select2 = function ()
{
if (selectedCubes)
{
selectMode = 2;
}
}
EndSelect = function ()
{
selectMode = 0;
if (highlightedCube)
{
highlightedCube.setHighlighted(false);
}
if (selectedCubes)
{
for (var key in selectedCubes)
{
selectedCubes[key].setSelected(false);
}
}
}
mouseClick = function (event)
{
if (event)
{
if (selectMode == 1)
{
if (cmworld)
{
var mousePos = cmworld.convertPagePosToCanvasPos(event.pageX, event.pageY);
var pos = cmworld.getHitCoordinateOnGround(mousePos.x, mousePos.y);
if (pos)
{
if (highlightedCube)
{
highlightedCube.setHighlighted(false);
}
if (selectedCubes)
{
for (var key in selectedCubes)
{
selectedCubes[key].setSelected(false);
}
}
// 높이와 상관없이 해당 지점에 위치하는 모든 격자를 선택
selectedCubes = target.Select(17, pos.x, pos.y);
if (selectedCubes)
{
for (var key in selectedCubes)
{
selectedCubes[key].setSelected(true);
}
}
}
}
}
else if (selectMode == 2)
{
if (cmworld)
{
if (selectedCubes)
{
if (highlightedCube)
{
highlightedCube.setHighlighted(false);
}
var mousePos = cmworld.convertPagePosToCanvasPos(event.pageX, event.pageY);
for (var key in selectedCubes)
{
if (selectedCubes[key].isHited(mousePos.x, mousePos.y) == true)
{
highlightedCube = selectedCubes[key];
highlightedCube.setHighlighted(true);
return;
}
}
}
}
}
}
}
pad = function(n, width)
{
n = n + '';
return n.length >= width ? n : new Array(width - n.length + 1).join('0') + n;
}
setTimeText = function ()
{
var elem = document.getElementById('timeLabel');
var hh = curtime;
var tt = timeduration * 3600;
var mm = parseInt(tt/ 60);
var ss = parseInt(tt % 60);
elem.innerText = pad(hh, 2) + ":" + pad(mm, 2) + ":" + pad(ss, 2);
}
timefunc = function (t)
{
clearInterval(timerId);
curtime = t;
timeduration = 0;
setTimeText();
changeCubeDust();
}
simulate = function ()
{
timeduration += 0.01;
if (timeduration >= 1)
{
curtime++;
if (curtime > 23)
curtime = 0;
timeduration = 0;
}
setTimeText();
changeCubeDust();
}
Start = function ()
{
timerId = setInterval("simulate()", 10);
}
Stop = function ()
{
clearInterval(timerId);
}
function changeCubeDust(cube)
{
var s = curtime;
var e = curtime + 1;
if (e > 23)
e = 0;
for (var key in dustpole)
{
if (dustdata[key])
{
var v1 = Math.floor(dustdata[key][s]);
var v2 = Math.floor(dustdata[key][e]);
var v = v1 + (v2 - v1) * timeduration;
var color = DustColorMap.getColor(v);
dustpole[key].object.material.color.setRGB(color.r, color.g, color.b);
v -= 150;
v *= 2;
if (v <= 0)
v = 0.001;
if (v >= 300)
v = 300;
v /= 100;
v *= 3;
dustpole[key].setScale(1, 1, v);
}
}
}
function Interpolate(start, end, steps, count)
{
var s = start,
e = end,
final = s + (((e - s) / steps) * count);
return Math.floor(final);
}
function DataLoad()
{
var pmdata = [];
dustdata = [];
$.get('dustdata/Gangnam/GPM10.csv', function (data)
{
dustpoints = [];
var lines = data.split("\n");
dustdata = [];
for (var i = 0; i < lines.length; i++)
{
var dusttoken = lines[i].split(",");
if (dusttoken.length > 28)
{
var item = new dustitem();
item.ID = dusttoken[0];
item.address = dusttoken[1];
item.lat = Number.parseFloat(dusttoken[2]);
item.lon = Number.parseFloat(dusttoken[3]);
item.alt = Number.parseFloat(dusttoken[4]);
item.row = CMWORLD.CmMathEngine.getRowFromLatitude(item.lat, cmworld.option.TileLevelRange[14]);
item.col = CMWORLD.CmMathEngine.getColFromLongitude(item.lon, cmworld.option.TileLevelRange[14]);
item.floor = -1;
for (var j = 5; j < 29; j++)
{
item.pm10.push(Number.parseFloat(dusttoken[j]));
}
}
dustpoints.push(item);
}
var baserow = 58010;
var basecol = 139725;
var maxrow = 58042;
var maxcol = 139754;
for (var i = 0; i < 24; i++)
{
var sigma2 = 0, alpha = 100;
var tt = [];
var xx = [];
var yy = [];
for (var j = 0; j < dustpoints.length; j++)
{
tt.push(dustpoints[j].pm10[i]);
/*
xx.push(dustpoints[j].col - basecol);
yy.push(dustpoints[j].row - baserow);
*/
xx.push(dustpoints[j].lon);
yy.push(dustpoints[j].lat);
}
var model = "spherical";
var sigma2 = 0, alpha = 430;
var variogram = CMWORLD.CmKriging.train(tt, xx, yy, model, sigma2, alpha);
for (var r = baserow; r <= maxrow; r++)
{
for (var c = basecol; c <= maxcol; c++)
{
var bound = CMWORLD.CmMathEngine.getBoundFromRowCol(14, r, c);
var tpredicted = CMWORLD.CmKriging.predict((bound.East + bound.West) * 0.5, (bound.North + bound.South) * 0.5, variogram);
var val = tpredicted;
var key = CMWORLD.Cube3D.getKeyString(14, r, c, -1);
if (dustdata[key])
{
dustdata[key].push(val);
}
else
{
dustdata[key] = [];
dustdata[key].push(val);
}
}
}
}
//console.log(dustdata.length);
userLayer = new CMWORLD.UserObjectLayer("lines");
cmworld.addLayer(userLayer);
// dustpoint를 만들자
for (var r = baserow; r <= maxrow; r++)
{
for (var c = basecol; c <= maxcol; c++)
{
var bound = CMWORLD.CmMathEngine.getBoundFromRowCol(14, r, c);
var lat = (bound.North + bound.South) * 0.5;
var lon = (bound.East + bound.West) * 0.5;
var key = CMWORLD.Cube3D.getKeyString(14, r, c, -1);
if (dustdata[key])
{
var val = dustdata[key][0];
var geometry = new THREE.BoxBufferGeometry(250, 250, 250);
var material = new THREE.MeshBasicMaterial({ color: 0xff0000 });
var cylinder = new THREE.Mesh(geometry, material);
var pole = new CMWORLD.UserObject("dustpole" + key, cylinder, new THREE.Vector3(lon, lat, 50), null);
pole.rotate4GlobeEarth();
dustpole[key] = pole;
userLayer.add(pole);
changeCubeDust();
}
}
}
});
}
window.onload = function ()
{
var canvas = document.querySelector("#cmworld3Canvas");
canvas.onclick = mouseClick;
cmworld = new CMWORLD.CmWorld3(canvas, 127, 38, CMWORLD.cm_const.EarthRadius, { toptilespan: 36 });
cmworld.option.worldTimer.setStartDateTime(2015, 7, 12, 14, 0, 0, 0);
// 여기에 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");
DustColorMap = new CMWORLD.CmColorMap();
/*
DustColorMap.addColor(255, 255, 255, 255, 0);
DustColorMap.addColor(255, 0, 255, 0, 120);
DustColorMap.addColor(255, 0, 0, 255, 160);
DustColorMap.addColor(255, 255, 0, 0, 200);
DustColorMap.addColor(255, 0, 0, 0, 300);
*/
DustColorMap.addColor(255, 0, 1, 255, 0);
DustColorMap.addColor(255, 0, 31, 255, 3.3);
DustColorMap.addColor(255, 0, 62, 255, 6.7);
DustColorMap.addColor(255, 0, 93, 255, 10);
DustColorMap.addColor(255, 0, 124, 255, 13.3);
DustColorMap.addColor(255, 0, 155, 255, 16.7);
DustColorMap.addColor(255, 0, 186, 255, 20);
DustColorMap.addColor(255, 0, 255, 255, 23.3);
DustColorMap.addColor(255, 0, 255, 223, 26.7);
DustColorMap.addColor(255, 0, 255, 191, 30);
DustColorMap.addColor(255, 0, 255, 159, 34.5);
DustColorMap.addColor(255, 0, 255, 127, 39.1);
DustColorMap.addColor(255, 0, 255, 95, 43.6);
DustColorMap.addColor(255, 0, 255, 63, 48.2);
DustColorMap.addColor(255, 0, 255, 0, 52.7);
DustColorMap.addColor(255, 31, 255, 0, 57.3);
DustColorMap.addColor(255, 62, 255, 0, 61.8);
DustColorMap.addColor(255, 93, 255, 0, 66.4);
DustColorMap.addColor(255, 124, 255, 0, 70.9);
DustColorMap.addColor(255, 155, 255, 0, 75.5);
DustColorMap.addColor(255, 186, 255, 0, 80);
DustColorMap.addColor(255, 255, 255, 0, 88.75);
DustColorMap.addColor(255, 255, 214, 0, 97.5);
DustColorMap.addColor(255, 255, 185, 0, 106.25);
DustColorMap.addColor(255, 255, 155, 0, 115);
DustColorMap.addColor(255, 255, 125, 0, 123.75);
DustColorMap.addColor(255, 255, 95, 0, 132.5);
DustColorMap.addColor(255, 255, 65, 0, 141.25);
DustColorMap.addColor(255, 255, 35, 0, 150);
DustColorMap.addColor(255, 243, 0, 0, 168.75);
DustColorMap.addColor(255, 224, 0, 0, 187.5);
DustColorMap.addColor(255, 204, 0, 0, 206.25);
DustColorMap.addColor(255, 180, 0, 0, 225);
DustColorMap.addColor(255, 155, 0, 0, 243.75);
DustColorMap.addColor(255, 130, 0, 0, 262.5);
DustColorMap.addColor(255, 105, 0, 0, 281.25);
DustColorMap.addColor(255, 80, 0, 0, 300);
DustColorMap.addColor(255, 40, 0, 0, 350);
DustColorMap.addColor(255, 20, 0, 0, 400);
DustColorMap.addColor(255, 10, 0, 0, 500);
var eye_x = 127.0465239;
var eye_y = 37.504347;
var eye_h = 10000;
var look_x = 127.0465239; //127.06125831338251;
var look_y = 37.504347; //37.4740406463569;
var look_h = 10;
cmworld.gotoLookAt(eye_x, eye_y, eye_h, look_x, look_y, look_h);
cmworld.preUpdateEvent.addEventListener(preUpdate);
function preUpdate(params, owner)
{
}
};
</script>
</head>
<body>
<canvas id="cmworld3Canvas"></canvas>
<div id="timeLabel" style="position: absolute; z-index: 10000; left: 10px; bottom: 120px;font-size: 30pt;color: rgb(199, 199, 194)">00:00:00</div>
<a href="#" onclick="DataLoad()" style="font-size:12px;left: 10px; top: 10px; position: absolute; z-index: 10000;color: rgb(182, 255, 0)">Load Data</a>
<a href="#" onclick="Start()" style="font-size:12px;left: 10px; top: 30px; position: absolute; z-index: 10000;color: rgb(182, 255, 0)">Start</a>
<a href="#" onclick="Stop()" style="font-size:12px;left: 10px; top: 50px; position: absolute; z-index: 10000;color: rgb(182, 255, 0)">Stop</a>
<a href="#" onclick="Select1()" style="font-size:12px;left: 10px; top: 70px; position: absolute; z-index: 10000;color: rgb(182, 255, 0)">Select Mode</a>
<a href="#" onclick="Select2()" style="font-size:12px;left: 10px; top: 90px; position: absolute; z-index: 10000;color: rgb(182, 255, 0)">Select Cube Mode</a>
<a href="#" onclick="EndSelect()" style="font-size:12px;left: 10px; top: 110px; position: absolute; z-index: 10000;color: rgb(182, 255, 0)">Select Mode Stop</a>
<a href="#" onclick="timefunc(0)" style="font-size:12px;left: 100px; top: 10px; position: absolute; z-index: 10000;color: rgb(182, 255, 0)">0</a>
<a href="#" onclick="timefunc(1)" style="font-size:12px;left: 120px; top: 10px; position: absolute; z-index: 10000;color: rgb(182, 255, 0)">1</a>
<a href="#" onclick="timefunc(2)" style="font-size:12px;left: 140px; top: 10px; position: absolute; z-index: 10000;color: rgb(182, 255, 0)">2</a>
<a href="#" onclick="timefunc(3)" style="font-size:12px;left: 160px; top: 10px; position: absolute; z-index: 10000;color: rgb(182, 255, 0)">3</a>
<a href="#" onclick="timefunc(4)" style="font-size:12px;left: 180px; top: 10px; position: absolute; z-index: 10000;color: rgb(182, 255, 0)">4</a>
<a href="#" onclick="timefunc(5)" style="font-size:12px;left: 200px; top: 10px; position: absolute; z-index: 10000;color: rgb(182, 255, 0)">5</a>
<a href="#" onclick="timefunc(6)" style="font-size:12px;left: 220px; top: 10px; position: absolute; z-index: 10000;color: rgb(182, 255, 0)">6</a>
<a href="#" onclick="timefunc(7)" style="font-size:12px;left: 240px; top: 10px; position: absolute; z-index: 10000;color: rgb(182, 255, 0)">7</a>
<a href="#" onclick="timefunc(8)" style="font-size:12px;left: 260px; top: 10px; position: absolute; z-index: 10000;color: rgb(182, 255, 0)">8</a>
<a href="#" onclick="timefunc(9)" style="font-size:12px;left: 280px; top: 10px; position: absolute; z-index: 10000;color: rgb(182, 255, 0)">9</a>
<a href="#" onclick="timefunc(10)" style="font-size:12px;left: 300px; top: 10px; position: absolute; z-index: 10000;color: rgb(182, 255, 0)">10</a>
<a href="#" onclick="timefunc(11)" style="font-size:12px;left: 320px; top: 10px; position: absolute; z-index: 10000;color: rgb(182, 255, 0)">11</a>
<a href="#" onclick="timefunc(12)" style="font-size:12px;left: 340px; top: 10px; position: absolute; z-index: 10000;color: rgb(182, 255, 0)">12</a>
<a href="#" onclick="timefunc(13)" style="font-size:12px;left: 360px; top: 10px; position: absolute; z-index: 10000;color: rgb(182, 255, 0)">13</a>
<a href="#" onclick="timefunc(14)" style="font-size:12px;left: 380px; top: 10px; position: absolute; z-index: 10000;color: rgb(182, 255, 0)">14</a>
<a href="#" onclick="timefunc(15)" style="font-size:12px;left: 400px; top: 10px; position: absolute; z-index: 10000;color: rgb(182, 255, 0)">15</a>
<a href="#" onclick="timefunc(16)" style="font-size:12px;left: 420px; top: 10px; position: absolute; z-index: 10000;color: rgb(182, 255, 0)">16</a>
<a href="#" onclick="timefunc(17)" style="font-size:12px;left: 440px; top: 10px; position: absolute; z-index: 10000;color: rgb(182, 255, 0)">17</a>
<a href="#" onclick="timefunc(18)" style="font-size:12px;left: 460px; top: 10px; position: absolute; z-index: 10000;color: rgb(182, 255, 0)">18</a>
<a href="#" onclick="timefunc(19)" style="font-size:12px;left: 480px; top: 10px; position: absolute; z-index: 10000;color: rgb(182, 255, 0)">19</a>
<a href="#" onclick="timefunc(20)" style="font-size:12px;left: 500px; top: 10px; position: absolute; z-index: 10000;color: rgb(182, 255, 0)">20</a>
<a href="#" onclick="timefunc(21)" style="font-size:12px;left: 520px; top: 10px; position: absolute; z-index: 10000;color: rgb(182, 255, 0)">21</a>
<a href="#" onclick="timefunc(22)" style="font-size:12px;left: 540px; top: 10px; position: absolute; z-index: 10000;color: rgb(182, 255, 0)">22</a>
<a href="#" onclick="timefunc(23)" style="font-size:12px;left: 560px; top: 10px; position: absolute; z-index: 10000;color: rgb(182, 255, 0)">23</a>
<img src="dustdata/Gangnam/dustcolormap.png" alt="범례" style="position: absolute; z-index: 10000; left: 10px; bottom: 20px;">
<!--textarea id="coordtext" rows="30" cols="30" style="background: rgb(255, 255, 255); bottom: 5px; left: 5px; width: 450px; height: 20%; position: absolute; overflow-y: scroll;"></!--textarea-->
</body>
</html>