<!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/lib/jquery-3.5.1.min.js"></script>
<script src="./lib/tf.min.js"></script>
<script src="./lib/imagetracer_v1.2.5.js"></script>
<script src="./lib/umd.js"></script>
<script src="./Cm3WebGL/cm_compile.js"></script>
<script>CMWORLD.Compile.includeCm3Library("./Cm3WebGL/")</script>
<script src="./lib/dat.gui.min.js"></script>
<script type="text/javascript" src="./lib/d3.js"></script>
<script>
var cmworld;
var gui;
var userLayer;
var userObj;
var usermm;
var terrainEnabled = true;
var buildingEnabled = true;
var vectorlayer;
var clipraster;
var pickUndergroundMode = 0;
var bholelist = [];
var crossSectionMaker;
var srctr;
var desttr;
setClipState = function (obj, enabled)
{
if (obj)
{
if (obj instanceof THREE.Object3D)
{
obj.traverse(function (child)
{
if (child instanceof THREE.Mesh)
{
var mat = child.material;
mat["clipping"] = enabled;
if (enabled == true)
{
mat["clippingPlanes"] = cmworld.clipBox.localPlanes;
mat["clipIntersection"] = cmworld.clipBox.clipIntersection;
}
else
{
mat["clippingPlanes"] = cmworld.clipBox.hidePlanes;
mat["clipIntersection"] = cmworld.clipBox.clipIntersection;
}
mat.needsUpdate = true;
child.needsUpdate = true;
}
});
}
}
}
makeClipPlane = function ()
{
cmworld.mouse.setMouseMode(CMWORLD.MouseMode.drawPolygon);
cmworld.mouse.userDrawHandler.displayMeasureText = false;
cmworld.mouse.userDrawHandler.callbackEndEditing = function (editingPointList, currObjectType)
{
if (CMWORLD.GisObjectType.polygon == currObjectType)
{
// editingPointList에 목록이 담겨 온다.
// 최상위 놈이와 최하위 높이를 고려해야 한다.
if (editingPointList.length < 3)
{
return;
}
makeCrossSection(editingPointList);
}
cmworld.mouse.userDrawHandler.clear();
cmworld.measureLayer.clear();
cmworld.reDrawOverlayMap();
// 취소
return false;
//return true;
}
}
addToLine = function (str)
{
var lines = coordtext.value + str;
coordtext.value = lines;
//coordtext.focus();
//coordtext.setSelectionRange(coordtext.value.length,coordtext.value.length);
}
mouseClick = function (event)
{
if (event)
{
if (pickUndergroundMode == 1)
{
pickUndergroundMode = 0;
if (cmworld)
{
var mousePos = cmworld.convertPagePosToCanvasPos(event.pageX, event.pageY);
//var p = ctx.getImageData(mousePos.x, mousePos.y, 1, 1).data;
//var hex = "#" + ("000000" + rgbToHex(p[0], p[1], p[2])).slice(-6);
//$('#status').html(coord + "<br>" + hex);
//console.log(hex);
var pos = cmworld.getHitCoordinate(mousePos.x, mousePos.y);
if (pos)
{
var coordtext = document.getElementById("coordtext");
if (coordtext)
{
var str = "(" + pos.x.toString() + ", " + pos.y.toString() + ", " + pos.z.toString() + ")\n";
addToLine(str);
}
}
}
}
else
{
if (event.shiftKey)
{
if (cmworld)
{
var mousePos = cmworld.convertPagePosToCanvasPos(event.pageX, event.pageY);
var pos = cmworld.getHitCoordinate(mousePos.x, mousePos.y);
if (pos)
{
var coordtext = document.getElementById("coordtext");
if (coordtext)
{
var str = "(" + pos.x.toString() + ", " + pos.y.toString() + ", " + pos.z.toString() + ")\n";
addToLine(str);
}
}
}
}
else if (event.ctrlKey)
{
if (cmworld)
{
var mousePos = cmworld.convertPagePosToCanvasPos(event.pageX, event.pageY);
if (cmworld.mouse.isClick(mousePos) == false)
return;
var pos = cmworld.getHitCoordinate(mousePos.x, mousePos.y);
if (pos)
{
if (cmworld.clipBox)
{
cmworld.clipBox.setLocalPosition(pos.y, pos.x, pos.z);
}
}
}
}
}
}
}
window.onload = function ()
{
var canvas = document.querySelector("#cmworld3Canvas");
canvas.onclick = mouseClick;
var vworld_mode = true;
if (vworld_mode) {
cmworld = new CMWORLD.CmWorld3(canvas, 127, 38, CMWORLD.cm_const.EarthRadius, { toptilespan: 36 });
// 여기에 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");
}
else {
cmworld = new CMWORLD.CmWorld3(canvas, 127, 38, CMWORLD.cm_const.EarthRadius);
// 영상레이어
cmworld.addBaseImageLayer("http://cmworld.net:5050/CmWorld/CmWorldServlet?T=world_raster&L={z}&X={x}&Y={y}", 0, 14, 90, -90, -180, 180);
// 지형레이어
cmworld.addTerrainLayer("terrain", "http://cmworld.net:5050/CmWorld/CmWorldServlet?T=dem30m&L={z}&X={x}&Y={y}", 0, 14, 90, -90, -180, 180, "CBT");
}
cmworld.option.worldTimer.setStartDateTime(2015, 7, 12, 14, 0, 0, 0);
// 여기에 transparancy 추가...
// 투명 값은 여기서 설정
cmworld.option.terrainTransparency = false;
cmworld.option.terrainOpacity = 1;
// Opacity를 위한 User Interface 용
var params =
{
terrain: true,
building: true,
subway: true,
pipeline: true,
clipIntersection: false, //cmworld.clipBox.clipIntersection,
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;
}
});
var folder2 = gui.addFolder("Clipping Setting");
folder2.add(params, 'clipIntersection').name('clip intersection').onChange(
function (value)
{
cmworld.clipBox.clipIntersection = value;
});
folder2.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);
/*
var eye_x = 127.0284353974798;
var eye_y = 37.493689215013305;
var eye_h = 196.27;
var look_x = 127.02757826432276;
var look_y = 37.49802454065084;
var look_h = 13.42819338105619;
*/
// 강서
/*
var eye_x = 126.80654514519867;
var eye_y = 37.565380333346845;
var eye_h = 500;
var look_x = 126.80601882986258;
var look_y = 37.57555672226788;
var look_h = 10;
*/
/*
// 강남
var eye_x = 127.05;
var eye_y = 37.48;
var eye_h = 500;
var look_x = 127.04559889936567; //127.06125831338251;
var look_y = 37.49056149432855; //37.4740406463569;
var look_h = 10;
*/
// 홍재
/*
var eye_x = 127.00851207249613;
var eye_y = 37.59758042469101;
var eye_h = 500;
var look_x = 127.00851207249613; //127.06125831338251;
var look_y = 37.60758042469101; //37.4740406463569;
var look_h = 10;
*/
// 선능역 주변
var eye_x = 127.04816726430784;
var eye_y = 37.496633457531715;
var eye_h = 400;
var look_x = 127.04816726430784; //127.06125831338251;
var look_y = 37.499633457531715; //37.4740406463569;
var look_h = 10;
//var bb = CMWORLD.CmMathEngine.getBoundFromRowCol(17, 464529, 1117560);
cmworld.gotoLookAt(eye_x, eye_y, eye_h, look_x, look_y, look_h);
initCrossSection();
cmworld.preUpdateEvent.addEventListener(preUpdate);
function preUpdate(params, owner)
{
if (cmworld.clipBox)
{
}
}
};
function getBoringdata()
{
bholelist = [];
var filename = "./data/boring/borings.csv";
d3.text(filename, function (text1)
{
var rows1 = d3.csv.parseRows(text1);
var hole, lon, lat, alt = 0;
var r = 3;
for (var row in rows1)
{
values = rows1[row];
hole = values[3];
if (!bholelist[hole])
{
lon = parseFloat(values[0]);
lat = parseFloat(values[1]);
alt = parseFloat(values[2]);
var pointGeo = { x: lon, y: lat, z: alt };
var pointTM = proj4(srctr, desttr).forward([lon, lat]);
bholelist[hole] = {
positionGeo: pointGeo, positionTM: { x: pointTM[0], y: pointTM[1] }, data: []
};
}
}
filename = "./data/boring/borings2.csv";
d3.text(filename, function (text)
{
var rows = d3.csv.parseRows(text);
var list = {};
for (var row in rows)
{
values = rows[row];
var deeps = [];
var codes = [];
if (bholelist[values[0]])
{
bholelist[values[0]].data.push({
deep: parseFloat(values[1]), code: parseFloat(values[2])
});
}
}
// 혹시 모르니까 깊이 별로 소팅하자
//console.log(bholelist);
});
});
}
function initCrossSection()
{
// google
proj4.defs['EPSG:3857'] = "+proj=merc +a=6378137 +b=6378137 +lat_ts=0.0 +lon_0=0.0 +x_0=0.0 +y_0=0 +k=1.0 +units=m +nadgrids=@null +no_defs";
proj4.defs['EPSG:5186'] = "+proj=tmerc + lat_0=38 + lon_0=127 + k=1 + x_0=200000 + y_0=600000 + ellps=GRS80 + units=m + no_defs";
srctr = cmworld.baseProj;
desttr = proj4.defs['EPSG:5186'];
getBoringdata();
crossSectionMaker = new CMWORLD.CmGeoCrossSection();
var stratum;
crossSectionMaker.defaultColor = new THREE.Color(0x6C5E5B);
crossSectionMaker.fillDefaultColor = true;
stratum = new CMWORLD.CmStratumItem(1, 0x6fBF44);
crossSectionMaker.addStratum(stratum);
stratum = new CMWORLD.CmStratumItem(2, 0x54272A);
crossSectionMaker.addStratum(stratum);
stratum = new CMWORLD.CmStratumItem(3, 0x578700);
crossSectionMaker.addStratum(stratum);
stratum = new CMWORLD.CmStratumItem(7, 0xB97536);
crossSectionMaker.addStratum(stratum);
stratum = new CMWORLD.CmStratumItem(8, 0xBF9C86);
crossSectionMaker.addStratum(stratum);
stratum = new CMWORLD.CmStratumItem(9, 0x6C5E5B);
crossSectionMaker.addStratum(stratum);
stratum = new CMWORLD.CmStratumItem(4, 0xff0000);
crossSectionMaker.addStratum(stratum);
stratum = new CMWORLD.CmStratumItem(5, 0x00ff00);
crossSectionMaker.addStratum(stratum);
stratum = new CMWORLD.CmStratumItem(6, 0x0000ff);
crossSectionMaker.addStratum(stratum);
}
clearClipPlane = function ()
{
cmworld.clipBox.clearLocalClipbox();
}
makeCrossSection = function (editingPointList)
{
let bufferDist = 100;
let ept = [];
if (CMWORLD.CmMathEngine.IsClockwise(editingPointList) == true)
{
// 포인트 목록을 뒤집어야 한다.
for (var i = editingPointList.length - 1; i >= 0; i--)
{
ept.push(new THREE.Vector3(editingPointList[i].x, editingPointList[i].y, editingPointList[i].z));
}
}
else
{
for (var i = 0; i < editingPointList.length; i++)
{
ept.push(new THREE.Vector3(editingPointList[i].x, editingPointList[i].y, editingPointList[i].z));
}
}
if (editingPointList[editingPointList.length - 1].x != editingPointList[0].x ||
editingPointList[editingPointList.length - 1].y != editingPointList[0].y)
{
ept.push(new THREE.Vector3(editingPointList[0].x, editingPointList[0].y, editingPointList[0].z));
}
var eptTM = [];
var tmpt;
for (var i = 0; i < ept.length; i++)
{
tmpt = proj4(srctr, desttr).forward([ept[i].x, ept[i].y, ept[i].z]);
eptTM.push({ x: tmpt[0], y: tmpt[1] });
}
//let mesh = crossSectionMaker.makeCrossSectionImage(eptTM, desttr, './data/kigam/seoul/', 500, 0.5, 5, -10, 500);
let mesh = crossSectionMaker.makeCrossSectionImage(ept, eptTM, desttr, 'http://demo.cmworld.net/data/kigam/seoul/', 500, 0.5, 5, -10, 150,
function (meshlist)
{
// 기존 거는 지워야 한다.
cmworld.clipBox.clearLocalClipbox();
meshlist.name = "clipLocalMesh";
cmworld.clipBox.clipIntersection = false;
//meshlist.visible = false;
cmworld.clipBox.localMesh = meshlist;
cmworld.clipBox.setLocalPosition(editingPointList[0].y, editingPointList[0].x, -10);
cmworld.clipBox.localMeshisWorldObject = true;
cmworld.clipBox.hideLocalMesh = false;
cmworld.clipBox.needLocalClipboxUpdate = true;
cmworld.clipBox.localClipboxEnabled = true;
});
}
</script>
</head>
<body>
<canvas id="cmworld3Canvas"></canvas>
<a href="#" onclick="makeClipPlane()" style="font-size:12px;left: 10px; top: 10px; position: absolute; z-index: 10000;color: rgb(182, 255, 0)">Make Clip plane</a>
<a href="#" onclick="clearClipPlane()" style="font-size:12px;left: 10px; top: 30px; position: absolute; z-index: 10000;color: rgb(182, 255, 0)">Clear Clip plane</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>