<!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="./lib/kriging.js"></script>
<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.context = null;
this.canvas = null;
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();
}
simulate = function ()
{
timeduration += 0.05;
if (timeduration >= 1)
{
curtime++;
if (curtime > 23)
curtime = 0;
timeduration = 0;
}
setTimeText();
}
Start = function ()
{
timerId = setInterval("simulate()", 10);
}
Stop = function ()
{
clearInterval(timerId);
}
function changeCubeDust(cube)
{
if (dustdata[cube.key])
{
var s = curtime;
var e = curtime + 1;
if (e > 23)
e = 0;
var v1 = Math.floor(dustdata[cube.key][s]);
var v2 = Math.floor(dustdata[cube.key][e]);
var v = v1 + (v2 - v1) * timeduration;
var color = DustColorMap.getColor(v);
cube.cubeMesh.material.color.setRGB(color.r, color.g, color.b);
if (v < 150)
{
v = 0;
}
else
{
v -= 150;
v *= 2;
}
if (v < 0)
v = 0;
if (v >= 300)
v = 300;
cube.cubeMesh.geometry.drawRange.count = v * 2;
}
}
function createCube3DLayer()
{
userLayer = new CMWORLD.UserObjectLayer("lines");
cmworld.addLayer(userLayer);
cubeLayer = cmworld.addCube3DLayer("virtual", "", 0, 14, -10, 200, 2097152 /*4194304*/, "virtual", "");
//cubeLayer.renderFrame = true;
cubeLayer.cubeHighlightColor.setRGB(0, 1, 0);
cubeLayer.cubeSelectedColor.setRGB(1, 0, 0);
cubeLayer.cubeMakeData = function (cube, cinfo, orgpos, data)
{
var xf = cinfo.east - cinfo.west;
var yf = cinfo.north - cinfo.south;
var zf = cinfo.topHeight - cinfo.bottomHeight;
var ww = cinfo.west - xf * 0.5;
var ss = cinfo.south - yf * 0.5;
var zz = cinfo.bottomHeight - zf * 0.5;
xf *= 2;
yf *= 2;
zf *= 2;
geometry = new THREE.BufferGeometry();
var vertices = new Float32Array(particleCount * 3);
for (i = 0; i < particleCount; i++)
{
/*
var x = cinfo.west + Math.random() * xf;
var y = cinfo.south + Math.random() * yf;
var z = cinfo.bottomHeight + Math.random() * zf;
*/
var x = ww + Math.random() * xf;
var y = ss + Math.random() * yf;
var z = zz + Math.random() * zf;
var pt = CMWORLD.CmMathEngine.Geo2Cartesian(x, y, z);
pt.x -= orgpos.x;
pt.y -= orgpos.y;
pt.z -= orgpos.z;
vertices[i * 3 + 0] = pt.x;
vertices[i * 3 + 1] = pt.y;
vertices[i * 3 + 2] = pt.z;
}
geometry.addAttribute('position', new THREE.BufferAttribute(vertices, 3));
var mat = new THREE.PointsMaterial({ color: 0xc1c100, size: 0.5 });
var particles = new THREE.Points(geometry, mat);
cube.cubeMesh = particles;
//console.log(cinfo.row.toString() + ",", cinfo.col.toString() + ", " + cinfo.floor.toString());
changeCubeDust(cube);
}
cubeLayer.cubeBeforeUpdate = function (cube, cubemesh)
{
};
cubeLayer.cubeBeforeLayerRender = function (cubelayer)
{
}
cubeLayer.cubeBeforeCubeRender = function (cube, cubemesh)
{
if (cube.cubeMesh)
{
var time = Date.now() * 0.00005;
cube.cubeMesh.rotation.y = time;
changeCubeDust(cube);
}
}
cubeLayer.cubeAfterCubeRender = function (cube, cubemesh)
{
}
cubeLayer.cubeAfterLayerRender = function (cubelayer)
{
}
var geo = new THREE.SphereGeometry(1);
var material = new THREE.MeshBasicMaterial({ color: 0xff0000 });
var mesh = new THREE.Mesh(geo, material);
var ff;
flycenter = new CMWORLD.UserObject("fly", mesh, new THREE.Vector3(127.0465239, 37.504347, 20), null);
userLayer.add(flycenter);
//cubeLayer.addTargetCamera("camera", 16, 120);
target = cubeLayer.addTargetObject("fly", flycenter, 14, 2000);
}
function Interpolate(start, end, steps, count)
{
var s = start,
e = end,
final = s + (((e - s) / steps) * count);
return Math.floor(final);
}
onupdateobject = function (poleobj)
{
if (poleobj.userTag)
{
var s = curtime;
var e = curtime + 1;
if (e > 23)
e = 0;
var v1 = Math.floor(poleobj.userTag.pm10[s]);
var v2 = Math.floor(poleobj.userTag.pm10[e]);
var v = v1 + (v2 - v1) * timeduration;
var d = new Date();
poleobj.userTag.context.clearRect(0, 0, 256, 64);
var text = v.toString();
context.font = "96px arial bold";
context.fillStyle = "white";
context.fillText(text, 5, 5);
context.lineWidth = 1;
context.strokeStyle = "red";
context.strokeText(text, 5, 5);
poleobj.updateMaterial();
}
}
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 = kriging.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 = kriging.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);
}
key = CMWORLD.Cube3D.getKeyString(14, r, c, 0);
val *= 0.5;
if (dustdata[key])
{
dustdata[key].push(val);
}
else
{
dustdata[key] = [];
dustdata[key].push(val);
}
key = CMWORLD.Cube3D.getKeyString(14, r, c, 1);
val *= 0.5;
if (dustdata[key])
{
dustdata[key].push(val);
}
else
{
dustdata[key] = [];
dustdata[key].push(val);
}
key = CMWORLD.Cube3D.getKeyString(14, r, c, 2);
val *= 0.5;
if (dustdata[key])
{
dustdata[key].push(val);
}
else
{
dustdata[key] = [];
dustdata[key].push(val);
}
}
}
}
//console.log(dustdata.length);
createCube3DLayer();
/*
// 원점들을 만들자
for (var i = 0; i < dustpoints.length; i++)
{
var item = dustpoints[i];
var geometry = new THREE.BoxBufferGeometry(10, 10, 1000);
var material = new THREE.MeshBasicMaterial({ color: 0x0000ff });
var cylinder = new THREE.Mesh(geometry, material);
var pole = new CMWORLD.UserObject("dustpole" + key, cylinder, new THREE.Vector3(item.lon, item.lat, 50), null);
pole.rotate4GlobeEarth();
userLayer.add(pole);
var valcanvas = document.createElement("canvas");
valcanvas.width = 256;
valcanvas.height = 64;
context = valcanvas.getContext("2d");
context.beginPath();
context.rect(0, 0, 256, 64);
context.fillStyle = "red";
context.fill();
item.canvas = valcanvas;
item.context = context;
//var obj = CMWORLD.UserObject.createPlane("dustval", item.lon, item.lat, 32.68422885239124, 127.08155310743014, 37.51490774188941, 92.971704616211355, canvas, true, onupdateobject);
var obj = CMWORLD.UserObject.createBillboardwithTexture("dustval" + key, item.lon, item.lat, 600, 200, 50, valcanvas, onupdateobject);
obj.userTag = item;
userLayer.add(obj);
}
*/
});
}
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=DD71C122-E7BB-31C4-AA69-1B80BB30DDC9&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=DD71C122-E7BB-31C4-AA69-1B80BB30DDC9&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=DD71C122-E7BB-31C4-AA69-1B80BB30DDC9&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>
<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>
<canvas id="cmworld3Canvas"></canvas>
<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>