<!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 = 600;
var selectMode = 0;
var selectedCubes = [];
var highlightedCube = null;
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;
}
}
}
}
}
}
}
simulate = function ()
{
timeduration += 0.01;
if (timeduration >= 1)
{
curtime++;
if (curtime > 23)
curtime = 0;
timeduration = 0;
}
}
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;
v -= 150;
v *= 2;
if (v < 0)
v = 0;
if (v >= 300)
v = 300;
cube.cubeMesh.geometry.drawRange.count = v*2;
var color = DustColorMap.getColor(v);
cube.cubeMesh.material.color.setRGB(color.r, color.g, color.b);
}
}
function createCube3DLayer()
{
userLayer = new CMWORLD.UserObjectLayer("lines");
cmworld.addLayer(userLayer);
cubeLayer = cmworld.addCube3DLayer("virtual", "", 0, 17, -10, 100, 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;
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 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.1 });
var particles = new THREE.Points(geometry, mat);
cube.cubeMesh = particles;
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.02764966672747, 37.49794945734461, 20), null);
userLayer.add(flycenter);
//cubeLayer.addTargetCamera("camera", 16, 120);
target = cubeLayer.addTargetObject("fly", flycenter, 17, 200);
}
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);
$.get('dustdata/Gangnam/PM10.csv', function (data)
{
var lines = data.split("\n");
dustdata = [];
for (var i = 0; i < lines.length; i++)
{
var dusttoken = lines[i].split(",");
if (dusttoken.length > 26)
{
var key = CMWORLD.Cube3D.getKeyString(17, dusttoken[0], dusttoken[1], dusttoken[2]);
var pmdata = [];
for (var j = 3; j < 27; j++)
{
pmdata.push(dusttoken[j]);
}
dustdata[key] = pmdata;
}
}
createCube3DLayer();
});
var eye_x = 127.0302956156344;
var eye_y = 37.49475315021213;
var eye_h = 200;
var look_x = 127.02764966672747; //127.06125831338251;
var look_y = 37.49794945734461; //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>
<a href="#" onclick="Start()" style="font-size:12px;left: 10px; top: 10px; position: absolute; z-index: 10000;color: rgb(182, 255, 0)">Start</a>
<a href="#" onclick="Stop()" style="font-size:12px;left: 10px; top: 30px; position: absolute; z-index: 10000;color: rgb(182, 255, 0)">Stop</a>
<a href="#" onclick="Select1()" style="font-size:12px;left: 10px; top: 50px; position: absolute; z-index: 10000;color: rgb(182, 255, 0)">Select Mode</a>
<a href="#" onclick="Select2()" style="font-size:12px;left: 10px; top: 70px; 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: 90px; position: absolute; z-index: 10000;color: rgb(182, 255, 0)">Select Mode Stop</a>
<!--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>