<!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 src="./Cm3WebGL/lib/require.2.1.22.min.js"></script>
<script>
var cmworld;
var gui;
var canvasLeft;
var canvasTop;
example = 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) {
alert(pos.x.toString() + ", " + pos.y.toString() + ", " + pos.z.toString());
}
}
}
else if (event.ctrlKey) {
if (cmworld) {
var mousePos = cmworld.convertPagePosToCanvasPos(event.pageX, event.pageY);
var infoWin = document.querySelector("#mappop");
if (!infoWin) return;
if (infoWin.style.display == "inline-block")
infoWin.style.display = "none";
var pos = cmworld.getHitObjectFromScreenCoordinate(mousePos.x, mousePos.y);
if (pos) {
if (pos.hasOwnProperty("key")) {
if (!pos.key) return;
infoWin.src = "http://map.vworld.kr/v2map_po_buildMetaInfov15.do?uid=" + pos.key;
infoWin.style.display = "inline-block";
}
}
}
}
}
}
window.onload = function () {
var canvas = document.querySelector("#cmworldCanvas");
canvasLeft = canvas.offsetLeft;
canvasTop = canvas.offsetTop;
canvas.onclick = example;
cmworld = new CMWORLD.CmWorld3(canvas, 127, 38, CMWORLD.cm_const.EarthRadius, { 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");
var eye_x = 126.91028012272035;
var eye_y = 37.49030914699055;
var eye_h = 200;
var look_x = 126.91538525795512;
var look_y = 37.49692862120549;
var look_h = 0;
cmworld.gotoLookAt(eye_x, eye_y, eye_h, look_x, look_y, look_h);
};
var userLayer;
var backimage, backimage2, backimage3;
var canvas;
var context;
onupdateobject = function (userObject, deltatime) {
context.clearRect(0, 0, backimage.width, backimage.height);
context.drawImage(backimage, 0, 0, backimage.width, backimage.height);
userObject.updateMaterial();
}
onupdateobject2 = function (userObject, deltatime) {
context.clearRect(0, 0, backimage2.width, backimage2.height);
context.drawImage(backimage2, 0, 0, backimage2.width, backimage2.height);
userObject.updateMaterial();
}
onupdateobject3 = function (userObject, deltatime) {
context.clearRect(0, 0, backimage3.width, backimage3.height);
context.drawImage(backimage3, 0, 0, backimage3.width, backimage3.height);
userObject.updateMaterial();
}
ShowBuildingValues = function () {
userLayer = new CMWORLD.UserObjectLayer("BuildingValueInfo");
cmworld.addLayer(userLayer);
var img = document.createElement("img");
img.onload = function (image) {
backimage = image.currentTarget;
canvas = document.createElement("canvas");
canvas.width = image.currentTarget.width;
canvas.height = image.currentTarget.height;
context = canvas.getContext("2d");
var obj = CMWORLD.UserObject.createPlane("building1", 126.9109720809396, 37.492641500047455, 85, 126.91271689130252, 37.49193904692012, 180, canvas, true, onupdateobject);
userLayer.add(obj);
}
img.src = './demofiles_01/0.png';
var eye_x = 126.91028012272035;
var eye_y = 37.49030914699055;
var eye_h = 200;
var look_x = 126.91538525795512;
var look_y = 37.49692862120549;
var look_h = 0;
cmworld.gotoLookAt(eye_x, eye_y, eye_h, look_x, look_y, look_h);
}
ShowBuildingValues2 = function () {
if (!userLayer) {
userLayer = new CMWORLD.UserObjectLayer("BuildingValueInfo");
cmworld.addLayer(userLayer);
}
var img2 = document.createElement("img");
img2.onload = function (image) {
backimage2 = image.currentTarget;
canvas = document.createElement("canvas");
canvas.width = image.currentTarget.width;
canvas.height = image.currentTarget.height;
context = canvas.getContext("2d");
var obj2 = CMWORLD.UserObject.createPlane("building2", 126.91409660060324, 37.49158693587617, 80, 126.9152052635894, 37.49179705000713, 150, canvas, true, onupdateobject2);
userLayer.add(obj2);
}
img2.src = './demofiles_01/1.png';
}
ShowBuildingValues3 = function () {
if (!userLayer) {
userLayer = new CMWORLD.UserObjectLayer("BuildingValueInfo");
cmworld.addLayer(userLayer);
}
var img3 = document.createElement("img");
img3.onload = function (image) {
backimage3 = image.currentTarget;
canvas = document.createElement("canvas");
canvas.width = image.currentTarget.width;
canvas.height = image.currentTarget.height;
context = canvas.getContext("2d");
var obj3 = CMWORLD.UserObject.createPlane("building3", 126.91023901096756, 37.49108404728239, 25, 126.91041786307541, 37.490970303145815, 68, canvas, true, onupdateobject3);
userLayer.add(obj3);
}
img3.src = './demofiles_01/barchart.png';
var eye_x = 126.90928012272035;
var eye_y = 37.48821914699055;
var eye_h = 200;
var look_x = 126.91438525795512;
var look_y = 37.49483862120549;
var look_h = 0;
cmworld.gotoLookAt(eye_x, eye_y, eye_h, look_x, look_y, look_h);
}
showEdgePosTest = function () {
// 해당 건물을 찾는다.
var ret = cmworld.getIntersectObjectsFromGeoCoordinate(126.91332483028022, 37.495828229640594);// 82.86590895429253
if (ret) {
if (ret.length > 0)
{
if (!userLayer) {
userLayer = new CMWORLD.UserObjectLayer("BuildingValueInfo");
cmworld.addLayer(userLayer);
}
var selectedBuilding = ret[0].object;
selectedBuilding.geometry.computeBoundingBox();
var buildingHeight = selectedBuilding.geometry.boundingBox.center().z;
// 외곽점을 얻는다.
var worldPosArray = CMWORLD.GeometryUtil.getCornerCoordinateArray(selectedBuilding, cmworld.option.refCenter);
if (worldPosArray && worldPosArray.length > 0) {
var worldPos = worldPosArray[0];
// 경위도로 변환
var geoPos = CMWORLD.CmMathEngine.Cartesian2Geo(worldPos.x, worldPos.y, worldPos.z);
// 높이계산
geoPos.z = ((geoPos.z + buildingHeight) - CMWORLD.cm_const.EarthRadius) / cmworld.option.VerticalExaggeration;
// Epsilon을 어딘가 정의 해야 함.
if (Math.abs(geoPos.z) < 0.00000001)
geoPos.z = 0;
// 심볼 생성
{
var arcShape = new THREE.Shape();
arcShape.absarc(0, 0, 1, 0, Math.PI * 2.0, false);
var geometry = new THREE.ShapeGeometry(arcShape);
var mesh = new THREE.Mesh(geometry, new THREE.MeshPhongMaterial({ color: 0xf00000 }));
mesh.scale.set(5, 5, 5);
//mesh.scale.set(1, 1, 1);
var obj1 = new CMWORLD.UserObject("circle555", mesh, new THREE.Vector3(geoPos.x, geoPos.y, geoPos.z + 30), null);
obj1.rotate4GlobeEarth();
userLayer.add(obj1);
buildingHeight = 50;
var img = document.createElement("img");
img.onload = function (image) {
backimage = image.currentTarget;
canvas = document.createElement("canvas");
canvas.width = 30;
canvas.height = 30;
context = canvas.getContext("2d");
var lefttop = new THREE.Vector3(geoPos.x, geoPos.y, geoPos.z + buildingHeight);
var rightbottom = new THREE.Vector3(geoPos.x + 0.0001, geoPos.y - 0.0001, geoPos.z);
var obj = CMWORLD.UserObject.createPlane("building1", lefttop.x, lefttop.y, lefttop.z, rightbottom.x, rightbottom.y, rightbottom.z, canvas, true, onupdateobject);
userLayer.add(obj);
}
img.src = './demofiles_01/0.png';
}
}
}
}
}
</script>
</head>
<body>
<canvas id="cmworldCanvas"></canvas>
<div id="labelDiv">
Ctrl + LButton : 건축물정보<br>
Shift + LButton : 좌표정보<br>
</div>
<iframe id="mappop" frameborder="0" scrolling="yes" style="left: 0px; top: 0px; width: 512px; height: 551px; overflow: hidden; display: none; position: absolute; z-index: 10000;"></iframe>
<a href="#" onclick="ShowBuildingValues()" style="right: 10px; top: 20px; position: absolute; z-index: 10000;color: rgb(182, 255, 0)">아파트시세1</a>
<a href="#" onclick="ShowBuildingValues3()" style="right: 10px; top: 40px; position: absolute; z-index: 10000;color: rgb(182, 255, 0)">아파트시세2</a>
<!--<a href="#" onclick="showEdgePosTest()" style="right: 10px; top: 60px; position: absolute; z-index: 10000;color: rgb(192, 192, 192)">위치테스트</a>-->
</body>
</html>