건물 모델을 클릭하여 모델의 정보를 볼수 있도록 표현합니다.
JS 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/XDServer/requestLayerNode?APIKey=767B7ADF-10BA-3D86-AB7E-02816B5B92E9&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/XDServer/requestLayerNode?APIKey=767B7ADF-10BA-3D86-AB7E-02816B5B92E9&Layer=dem&Level={z}&IDX={x}&IDY={y}", 0, 15, 90, -90, -180, 180, "");
cmworld.addReal3DLayer("facility_build", "http://xdworld.vworld.kr:8080/XDServer/requestLayerNode?Layer=facility_build&Level={z}&IDX={x}&IDY={y}&APIKey=767B7ADF-10BA-3D86-AB7E-02816B5B92E9",
"http://xdworld.vworld.kr:8080/XDServer/requestLayerObject?APIKey=767B7ADF-10BA-3D86-AB7E-02816B5B92E9&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';
}
}
}
}
}