<!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%;
}
</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 src="./lib/gunzip.min.js"></script>
<script src="./lib/turf.min.js"></script>
<script src="./lib/slice.js"></script>
<script src="./js/calcVolumeAmount.min.js"></script>
<script>
var cmworld;
var gui;
var m_LayerName = "Test Layer";
var volumnOption;
var Volumn3D;
var m_ptlist = [];
var m_BaseHeight = 100; //분석 메쉬가 위치할 공중 위치
var options = function () {
this.opacity = 0.5;
this.polygonColor = "#0000ff";
this.terrainColor = "#ff0000";
this.cutColor = "#ff00ff";
this.fillColor = "#ffff00";
this.cuttingHeight = 30;
this.CalcVolumn = function () {
if (Volumn3D) {
SliceByHeight(this.cuttingHeight);
var fill = calculateVolume(Volumn3D.downMesh);
var cut = calculateVolume(Volumn3D.upMesh);
alert("적토량 : " + format(fill.toFixed(2)) + " 입방미터\n" + "절토량 : " + format(cut.toFixed(2)) + " 입방미터");
}
}
};
function format(num) {
return num.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1,')
}
function SetOption() {
if (Volumn3D) {
Volumn3D.material.opacity = volumnOption.opacity;
var color = parseInt(volumnOption.polygonColor.replace(/^#/, ''), 16);
Volumn3D.material.color.setHex(color);
Volumn3D.material.emissive.setHex(color);
if (Volumn3D.terrainMesh) {
color = parseInt(volumnOption.terrainColor.replace(/^#/, ''), 16);
Volumn3D.terrainMesh.material.color.setHex(color);
}
if (Volumn3D.downMesh) {
color = parseInt(volumnOption.fillColor.replace(/^#/, ''), 16);
Volumn3D.downMesh.material.color.setHex(color);
Volumn3D.downMesh.opacity = volumnOption.opacity;
}
if (Volumn3D.upMesh) {
color = parseInt(volumnOption.cutColor.replace(/^#/, ''), 16);
Volumn3D.upMesh.material.color.setHex(color);
Volumn3D.upMesh.opacity = volumnOption.opacity;
}
}
}
function getUserLayer(layerName) {
var layer = cmworld.getLayer(layerName);
if (layer) {
return layer;
}
// 없으면 만들어서 추가한다.
var userLayer = new CMWORLD.UserObjectLayer(layerName);
cmworld.addLayer(userLayer);
return userLayer;
}
function getObject(strObjName, layer) {
if (!layer)
layer = getUserLayer(m_LayerName);
return layer.getObject(strObjName);
}
window.onload = function () {
var canvas = document.querySelector("#cmworld3Canvas");
cmworld = new CMWORLD.CmWorld3(canvas, 127, 38, CMWORLD.cm_const.EarthRadius * 2.5, { 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_mo_HD&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");
var eye_x = 126.873;
var eye_y = 37.495;
var eye_h = 400;
var look_x = 126.87109037612153;
var look_y = 37.50091923499337;
var look_h = 50;
var agt = navigator.userAgent.toLowerCase();
if (agt.indexOf("trident") > 0) { //IE 경우
cmworld.gotoLookAt(look_x, look_y, 2500, look_x, look_y, 50);
}
else {
cmworld.gotoLookAt(eye_x, eye_y, eye_h, look_x, look_y, look_h);
}
volumnOption = new options();
gui = new dat.GUI();
gui.add(volumnOption, 'opacity', 0, 1.0).onChange(SetOption);
gui.add(volumnOption, 'cuttingHeight', -20, 70).onChange(SetOption);
gui.addColor(volumnOption, 'polygonColor').onChange(SetOption);
gui.addColor(volumnOption, 'terrainColor').onChange(SetOption);
gui.addColor(volumnOption, 'cutColor').onChange(SetOption);
gui.addColor(volumnOption, 'fillColor').onChange(SetOption);
gui.add(volumnOption, 'CalcVolumn');
gui.open();
gui.domElement.parentElement.style.zIndex = 10000;
m_ptlist.push({ x: 126.87031145007941, y: 37.50719266678261, z: 21.39487395156175 });
m_ptlist.push({ x: 126.8675903257627, y: 37.50509946958895, z: 21.092274146154523 });
m_ptlist.push({ x: 126.86821695647959, y: 37.50480876613932, z: 14.637192660011351 });
m_ptlist.push({ x: 126.8696982477667, y: 37.50486288214017, z: 10.222388280555606 });
m_ptlist.push({ x: 126.8711362582962, y: 37.50595371496079, z: 13.963556458242238 });
m_ptlist.push({ x: 126.87135550801577, y: 37.506819895633384, z: 13.869952485896647 });
m_ptlist.push({ x: 126.87031145007941, y: 37.50719266678261, z: 21.39487395156175 });
MakeVolumn(m_ptlist);
};
function getZoomLevel(dist) {
var _zoomLevel = Math.ceil(Math.log(CMWORLD.cm_const.EarthRadius / dist) / Math.log(2));
if (_zoomLevel < 0) _zoomLevel = 0;
else if (_zoomLevel > 15) _zoomLevel = 15;
return _zoomLevel;
}
function downloadData(url, level, row, col) {
var deferred = $.Deferred();
var xhr = new XMLHttpRequest();
xhr.responseType = "arraybuffer";
xhr.open('GET', url, true);
xhr.addEventListener('load', function () {
if (xhr.status === 200) {
deferred.resolve({
data: xhr.response,
level: level,
row: row,
col: col
});
}
else {
deferred.reject("HTTP error: " + xhr.status);
}
}, false)
xhr.send(null);
return deferred.promise();
}
function MakeVolumn(polygonPtList) {
if (!cmworld) return;
if (!polygonPtList) return;
if (polygonPtList.length < 3)
return;
var minx = Number.MAX_VALUE;
var maxx = Number.MIN_VALUE;
var miny = Number.MAX_VALUE;
var maxy = Number.MIN_VALUE;
for (var i = 0; i < polygonPtList.length; i++) {
if (minx > polygonPtList[i].x) minx = polygonPtList[i].x;
if (maxx < polygonPtList[i].x) maxx = polygonPtList[i].x;
if (miny > polygonPtList[i].y) miny = polygonPtList[i].y;
if (maxy < polygonPtList[i].y) maxy = polygonPtList[i].y;
}
var level = getZoomLevel(1000);
var powOfLevel = Math.pow(2, level);
var minCol = CMWORLD.CmMathEngine.getColFromLongitude(minx, cmworld.option.TileLevelRange[level]);
var maxCol = CMWORLD.CmMathEngine.getColFromLongitude(maxx, cmworld.option.TileLevelRange[level]);
var minRow = CMWORLD.CmMathEngine.getRowFromLatitude(miny, cmworld.option.TileLevelRange[level]);
var maxRow = CMWORLD.CmMathEngine.getRowFromLatitude(maxy, cmworld.option.TileLevelRange[level]);
var downloadList = [];
var serverURL = cmworld.getBaseQuadTerrainLayer().mapInfo.serverURL;
var url;
for (var row = minRow; row <= maxRow; row++) {
for (var col = minCol; col <= maxCol; col++) {
url = serverURL.replace("{Z}", level).replace("{Y}", row).replace("{X}", col);
url = serverURL.replace("{z}", level).replace("{y}", row).replace("{x}", col);
var func = downloadData(url, level, row, col);
downloadList.push(func);
}
}
var terrainList = [];
$.when.apply(undefined, downloadList).done(function () {
var objects = arguments;
for (var i = 0; i < objects.length; i++) {
var terrainData = getTerrainData(objects[i].data, objects[i].level, objects[i].row, objects[i].col);
terrainList.push(terrainData);
}
TerrainMeshProcess(terrainList, minRow, maxRow, minCol, maxCol);
});
}
</script>
</head>
<body>
<canvas id="cmworld3Canvas"></canvas>
</body>
</html>