<!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;
}
#cmworldCanvas {
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>
var cmworld;
var gui;
var canvasLeft;
var canvasTop;
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 (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 cartesianPos = CMWORLD.CmMathEngine.Geo2CartesianEarth(pos.x, pos.y, pos.z);
var str = "(" + pos.x.toString() + ", " + pos.y.toString() + ", " + pos.z.toString() + ")"
+ " (" + cartesianPos.x.toString() + ", " + cartesianPos.y.toString() + ", " + cartesianPos.z.toString() + ")" + "\n";
addToLine(str);
}
}
}
}
else if (event.ctrlKey) {
var mousePos = cmworld.convertPagePosToCanvasPos(event.pageX, event.pageY);
if (cmworld) {
var info = cmworld.getHitInformationOnObject(mousePos.x, mousePos.y);
if (info) {
if (info.hasOwnProperty("key")) {
addToLine(info.key + "\n");
}
// 이걸 통해서 CmUserObject의 정보를 얻을 수 있다.
if (info.userObject) {
var cmUserObject = info.userObject;
addToLine(cmUserObject.name);
}
// 이건 threejs object 정보
if (info.hasOwnProperty("object")) {
addToLine(info.object.toString());
}
}
}
}
else if (event.altKey) {
// camera의 현재 상태 값을 돌려 준다.
var camerapos = cmworld.getCamera().getPositionGeo();
var lookpos = cmworld.getCamera().getLookPositionGeo();
if (camerapos) {
var coordtext = document.getElementById("coordtext");
if (coordtext) {
var str = "camera(" + camerapos.x.toString() + ", " + camerapos.y.toString() + ", " + camerapos.z.toString() + ")\n"
+ "look (" + lookpos.x.toString() + ", " + lookpos.y.toString() + ", " + lookpos.z.toString() + ")\n";
addToLine(str);
}
}
}
}
}
/*사용자 레이어를 얻자.*/
getUserLayer = function () {
var layerName = "testLayer";
var layer = cmworld.getLayer(layerName);
if (layer)
return layer;
// 없으면 만들어서 추가한다.
var userLayer = new CMWORLD.UserObjectLayer(layerName);
cmworld.addLayer(userLayer);
return userLayer;
}
sampleLine = function () {
var userLayer = getUserLayer();
var lon = 127.0803048462868;
var lat = 37.51913878594175;
var alt = 30;
var width = 0.001;
var koreaGeoPts = [];
koreaGeoPts.push(new THREE.Vector3(lon, lat, alt));
koreaGeoPts.push(new THREE.Vector3(lon + width, lat, alt));
koreaGeoPts.push(new THREE.Vector3(lon + width, lat - width, alt));
koreaGeoPts.push(new THREE.Vector3(lon, lat - width, alt));
koreaGeoPts.push(new THREE.Vector3(lon, lat, alt));
var worldObject1 = CMWORLD.UserObject.createWorldObject("경위도객체1", koreaGeoPts);
worldObject1.setColor(new THREE.Color(0x0000ff));
userLayer.add(worldObject1);
lon = 127.0803048462868 + width * 3;
lat = 37.51913878594175;
koreaGeoPts = [];
koreaGeoPts.push(new THREE.Vector3(lon, lat, alt));
koreaGeoPts.push(new THREE.Vector3(lon + width, lat, alt));
koreaGeoPts.push(new THREE.Vector3(lon + width, lat - width, alt));
koreaGeoPts.push(new THREE.Vector3(lon, lat - width, alt));
koreaGeoPts.push(new THREE.Vector3(lon, lat, alt));
worldObject1 = CMWORLD.UserObject.createWorldObject("경위도객체2", koreaGeoPts, true);
worldObject1.setColor(new THREE.Color(0x00ff00));
userLayer.add(worldObject1);
}
window.onload = function () {
var canvas = document.querySelector("#cmworldCanvas");
canvasLeft = canvas.offsetLeft;
canvasTop = canvas.offsetTop;
canvas.onclick = mouseClick;
var vworld_mode = false;
if (vworld_mode) {
cmworld = new CMWORLD.CmWorld3(canvas, 127, 38, 5000, { toptilespan: 36 });
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, 5000);
// 영상레이어
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.showFPS(true);
sampleLine();
var eye_x = 127.08174188396235;
var eye_y = 37.51231017799103;
var eye_h = 200;
var look_x = 127.08174188396235;
var look_y = 37.51505310508758;
var look_h = 10;
cmworld.gotoLookAt(eye_x, eye_y, eye_h, look_x, look_y, look_h);
};
</script>
</head>
<body>
<canvas id="cmworldCanvas"></canvas>
<div id="labelDiv">
1. Shift + LButtone.<br>
2. Alt + LButtone.<br>
3. Ctrl + LButtone on Objects.
</div>
<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>