<!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 userObj;
var dustLayer;
var dustCube;
var COColorMap;
var NO2ColorMap;
var O3ColorMap;
var PM2_5ColorMap;
var PM10ColorMap;
var PM10ColorMap2;
var SO2ColorMap;
var COfiles;
var NO2files;
var O3files;
var PM2_5files;
var PM10files;
var SO2files;
var curfiles;
var curlines;
var curcolormap;
var timerId;
var sprite;
function createCORSRequest(method, url, async)
{
var xhr = new XMLHttpRequest();
//xhr.responseType = 'arraybuffer';
if ("withCredentials" in xhr)
{
xhr.open(method, url, async);
}
else if (typeof XDomainRequest != "undefined")
{
xhr = new XDomainRequest();
xhr.open(method, url);
} else
{
// Otherwise, CORS is not supported by the browser.
xhr = null;
}
xhr.responseType = 'arraybuffer';
return xhr;
}
function download2(url, func)
{
//var url = "files/28835_69898_0.cbr";
// download
var xhr = createCORSRequest('GET', url, true);
if (!xhr)
{
xhr = null;
//responseFunction();
return;
}
xhr.onload = function ()
{
if (this.readyState == 4 && this.status == 200)
{
if (this.response)
{
this.response = this.response.slice(0);
if (func)
{
func(this.response);
}
}
}
else
{
this.response = null;
this._NotFound = true;
}
}
xhr.send(null);
}
setDataCO = function ()
{
curfiles = COfiles;
curlines = 0;
curcolormap = COColorMap;
timerId = setInterval("simulate()", 1000);
}
setDataNO2 = function ()
{
curfiles = NO2files;
curlines = 0;
curcolormap = NO2ColorMap;
timerId = setInterval("simulate()", 1000);
}
setDataO3 = function ()
{
curfiles = O3files;
curlines = 0;
curcolormap = O3ColorMap;
timerId = setInterval("simulate()", 1000);
}
setDataPM2_5 = function ()
{
curfiles = PM2_5files;
curlines = 0;
curcolormap = PM2_5ColorMap;
timerId = setInterval("simulate()", 1000);
}
setDataPM10 = function ()
{
curfiles = PM10files;
curlines = 0;
curcolormap = PM10ColorMap;
timerId = setInterval("simulate()", 1000);
}
setDataPM10_2 = function ()
{
curfiles = PM10files;
curlines = 0;
curcolormap = PM10ColorMap2;
timerId = setInterval("simulate()", 1000);
}
setDataSO2 = function ()
{
curfiles = SO2files;
curlines = 0;
curcolormap = SO2ColorMap;
timerId = setInterval("simulate()", 1000);
}
Stop = function ()
{
clearInterval(timerId);
}
simulate = function()
{
var url = curfiles[curlines];
curlines++;
if (curlines >= curfiles.length)
{
curlines = 0;
}
download2(url,
function (blob)
{
if (dustCube)
{
dustCube.setData(blob, curcolormap, sprite);
}
}
);
}
createCube3DClipLayer = function ()
{
dustLayer = new CMWORLD.Cube3DSingleRasterLayer();
cmworld.addLayer(dustLayer);
dustCube = new CMWORLD.Cube3DSingleRaster(125.85, 36.70, 0 + CMWORLD.cm_const.EarthRadius, 126.88, 37.55, 10000 + CMWORLD.cm_const.EarthRadius, 64, 64, 24, 0, 1000);
dustCube.renderFrame = true;
dustLayer.addCube(dustCube);
COColorMap = new CMWORLD.CmColorMap();
COColorMap.addColor(255, 242, 0, 255, 0.05);
COColorMap.addColor(255, 127, 39, 255, 0.5);
COColorMap.addColor(237, 28, 36, 255, 1);
COColorMap.addColor(136, 0, 21, 255, 2);
NO2ColorMap = new CMWORLD.CmColorMap();
NO2ColorMap.addColor(255, 242, 0, 255, 0.000001);
NO2ColorMap.addColor(255, 127, 39, 255, 0.0001);
NO2ColorMap.addColor(237, 28, 36, 255, 0.01);
NO2ColorMap.addColor(136, 0, 21, 255, 1);
O3ColorMap = new CMWORLD.CmColorMap();
O3ColorMap.addColor(255, 242, 0, 255, 0.01);
O3ColorMap.addColor(255, 127, 39, 255, 0.05);
O3ColorMap.addColor(237, 28, 36, 255, 0.1);
O3ColorMap.addColor(136, 0, 21, 255, 0.5);
PM2_5ColorMap = new CMWORLD.CmColorMap();
PM2_5ColorMap.addColor(255, 242, 0, 255, 1);
PM2_5ColorMap.addColor(255, 127, 39, 255, 25);
PM2_5ColorMap.addColor(237, 28, 36, 255, 50);
PM2_5ColorMap.addColor(136, 0, 21, 255, 100);
PM10ColorMap = new CMWORLD.CmColorMap();
PM10ColorMap.addColor(255, 242, 0, 255, 0.01);
PM10ColorMap.addColor(255, 127, 39, 255, 10);
PM10ColorMap.addColor(237, 28, 36, 255, 25);
PM10ColorMap.addColor(136, 0, 21, 255, 50);
PM10ColorMap2 = new CMWORLD.CmColorMap();
PM10ColorMap2.addColor(237, 28, 36, 255, 25);
PM10ColorMap2.addColor(136, 0, 21, 255, 50);
SO2ColorMap = new CMWORLD.CmColorMap();
SO2ColorMap.addColor(255, 242, 0, 255, 0.001);
SO2ColorMap.addColor(255, 127, 39, 255, 0.5);
SO2ColorMap.addColor(237, 28, 36, 255, 1);
SO2ColorMap.addColor(136, 0, 21, 255, 2);
$.get('dustdata/CO.txt', function (data)
{
var lines = data.split("\n");
COfiles = lines;
});
$.get('dustdata/NO2.txt', function (data)
{
var lines = data.split("\n");
NO2files = lines;
});
$.get('dustdata/O3.txt', function (data)
{
var lines = data.split("\n");
O3files = lines;
});
$.get('dustdata/PM2_5.txt', function (data)
{
var lines = data.split("\n");
PM2_5files = lines;
});
$.get('dustdata/PM10.txt', function (data)
{
var lines = data.split("\n");
PM10files = lines;
});
$.get('dustdata/SO2.txt', function (data)
{
var lines = data.split("\n");
SO2files = lines;
});
sprite = new THREE.TextureLoader().load('textures/disc.png');
}
window.onload = function ()
{
var canvas = document.querySelector("#cmworld3Canvas");
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");
// Opacity를 위한 User Interface 용
var params =
{
terrain: true,
building: true,
opacity: 1.0,
};
gui = new dat.GUI();
var folder = gui.addFolder("Layer Clipping");
folder.add(params, 'terrain').onChange(
function (v)
{
terrainEnabled = v;
});
folder.add(params, 'building').onChange(
function (v)
{
buildingEnabled = v;
var layer = cmworld.getLayer("facility_build");
if (layer != null)
{
layer.visible = v;
}
});
folder.add(params, 'opacity', 0, 1).name("terrain opacity").onChange
(
function ()
{
if (cmworld)
{
cmworld.setTerrainTransparancy(params.opacity);
}
});
gui.open();
userLayer = new CMWORLD.UserObjectLayer("lines");
cmworld.addLayer(userLayer);
createCube3DClipLayer();
var eye_x = 126.5;
var eye_y = 35.48;
var eye_h = 100000;
var look_x = 126.365; //127.06125831338251;
var look_y = 37.125; //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="setDataCO()" style="font-size:12px;left: 10px; top: 10px; position: absolute; z-index: 10000;color: rgb(182, 255, 0)">set CO data</a>
<a href="#" onclick="setDataNO2()" style="font-size:12px;left: 10px; top: 30px; position: absolute; z-index: 10000;color: rgb(182, 255, 0)">set NO2 data</a>
<a href="#" onclick="setDataO3()" style="font-size:12px;left: 10px; top: 50px; position: absolute; z-index: 10000;color: rgb(182, 255, 0)">set O3 data</a>
<a href="#" onclick="setDataPM2_5()" style="font-size:12px;left: 10px; top: 70px; position: absolute; z-index: 10000;color: rgb(182, 255, 0)">set PM2_5 data</a>
<a href="#" onclick="setDataPM10()" style="font-size:12px;left: 10px; top: 90px; position: absolute; z-index: 10000;color: rgb(182, 255, 0)">set PM10 data</a>
<a href="#" onclick="setDataPM10_2()" style="font-size:12px;left: 10px; top: 110px; position: absolute; z-index: 10000;color: rgb(182, 255, 0)">set PM10 sub data</a>
<a href="#" onclick="setDataSO2()" style="font-size:12px;left: 10px; top: 130px; position: absolute; z-index: 10000;color: rgb(182, 255, 0)">set SO2 data</a>
<a href="#" onclick="Stop()" style="font-size:12px;left: 10px; top: 150px; position: absolute; z-index: 10000;color: rgb(182, 255, 0)">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>