<!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 cmworld3Viewer;
var gui;
var canvasLeft;
var canvasTop;
var font = null;
var clock = new THREE.Clock(true);
var tick = 0;
var poiLayername = "userPOITestLayer";
var testPOI = null;
var poiName1 = "POI회전";
// VWorld 데이터를 연결하여 사용.
var VWorldMode = false;
function loadFont() {
if (font)
return;
var fontName = "optimer";
var fontWeight = "bold";
var loader = new THREE.FontLoader();
loader.load('fonts/' + fontName + '_' + fontWeight + '.typeface.js', function (response) {
font = response;
});
}
text3DExam = function (event) {
// text
if (font )
{
var userLayer = cmworld3Viewer.getLayer("test");
var size = 100;
var height = 100;
var curveSegments = 4;
var bevelThickness = 2;
var bevelSize = 1.5;
var bevelSegments = 3;
var bevelEnabled = true;
var textGeo = new THREE.TextGeometry("hello CmWorld!", {
font: font,
size: size,
height: height,
curveSegments: curveSegments,
bevelThickness: bevelThickness,
bevelSize: bevelSize,
bevelEnabled: bevelEnabled,
material: 0,
extrudeMaterial: 1
});
textGeo.computeBoundingBox();
textGeo.computeVertexNormals();
var material = new THREE.MultiMaterial([
new THREE.MeshPhongMaterial({ color: 0xff00ff, shading: THREE.FlatShading }), // front
new THREE.MeshPhongMaterial({ color: 0xffff00 }) // side
]);
textMesh1 = new THREE.Mesh(textGeo, material);
var obj1 = new CMWORLD.UserObject("text", textMesh1, new THREE.Vector3(127, 37.44, 200), null);
userLayer.add(obj1);
}
}
init = function (event) {
// layer를 미리 준비해 놓기 위해서
var userPOI3DLayer = getPOILayer();
// 원하는 위치로 이동.
//cmworld3Viewer.gotoGeo(127, 37.5, 10000 );
loadFont();
}
/*POI를 담을 레이어*/
getPOILayer = function()
{
var userPOI3DLayer = cmworld3Viewer.getLayer(poiLayername);
if (userPOI3DLayer == null) {
// poi layer가 없다면 추가
cmworld3Viewer.addLayer(new CMWORLD.POI3DLayer(poiLayername));
userPOI3DLayer = cmworld3Viewer.getLayer(poiLayername);
userPOI3DLayer.font = "30px Arial";
// POI에서 사용할 아이콘을 등록한다.
// 한번 등록하면 모든 POI객체에서 사용할 수 있다.
var imageKey = ["R1.png", "R2.png", "R3.png", "X.png" ];
for (var i = 0; i < imageKey.length; i++) {
// 비동기로 작동하므로, 실제로 이미지가 로드되는데까지 시간이 걸린다.
CMWORLD.POI3D.addImagebyURL("./textures/" + imageKey[i], imageKey[i]);
}
}
return userPOI3DLayer;
}
userPOIExam = function ()
{
removepoilayer();
var userPOI3DLayer = getPOILayer();
if (userPOI3DLayer == null) {
return;
}
cmworld3Viewer.gotoGeo(127, 37.528, 30000);
var poi = null;
// 일반 poi 테스트
{
// layer에 poi를 추가한다.
for (var i = 0; i < 4; i++)
{
poi = new CMWORLD.POI3D();
poi.setPosition(127, 37.528 + i * 0.02, 200);
poi.label = "Hello POI " + i.toString();
// 등록된 이미지 중에서 i번째 이미지Key를 얻는다.
poi.imgKey = CMWORLD.POI3D.getImageKey(i);
userPOI3DLayer.add(poi);
}
// 이미지회전
{
poi = new CMWORLD.POI3D(poiName1);
poi.name = poiName1;
poi.setPosition(127, 37.510, 13.167962549254298);
poi.imgKey = CMWORLD.POI3D.getImageKey(0);
userPOI3DLayer.add(poi);
// poi의 updateEvent에 event를 걸어서 주기적으로 이미지를 회전한다.
poi.updateEvent.addEventListener(function (param)
{
var poi = param.self;
poi.rotateImage += 1;
if (poi.rotateImage > 360)
{
poi.rotateImage = 0;
}
}, null);
}
/*
poi = new CMWORLD.POI3D("strokeText");
poi.setPosition(127.06973788200952, 37.5326769837604, 13.167962549254298);
poi.strokeText = true;
userPOI3DLayer.add(poi);*/
// 내가 원하는 위치에 poi가 생성이 되는지 확인테스트
{
poi = new CMWORLD.POI3D("CmWorld");
poi.setPosition(126.89740068914679, 37.48591584077553, 13.167962549254298);
poi.imgKey = CMWORLD.POI3D.getImageKey(0);
userPOI3DLayer.add(poi);
}
// poi의 text가 표시될 위치를 조절한다.
{
poi = new CMWORLD.POI3D("textPosition");
poi.setPosition(126.89740068914679, 37.44591584077553, 13.167962549254298);
poi.imgKey = CMWORLD.POI3D.getImageKey(0);
poi.poiTextPosition = CMWORLD.POITextPosition.top;
userPOI3DLayer.add(poi);
}
}
// 특별히 내가 직접그리고 싶을때는 이렇게 해서 맘대로 그릴수 있다.
{
poi = new CMWORLD.POI3D();
poi.setPosition(127.07074159151295, 37.46, 13.166741248220205);
//poi.setPosition(0, 73.12686, 200);
poi.label = "이건 사용자가 직접 그린것";
poi.setUserDraw(function (userPOI, canvas, x, y)
{
// canvas의 font를 변경하는것이므로, 나중에 복구해야 한다.
canvas.font = "40px Georgia";
canvas.fillStyle = "blue";
canvas.textBaseline = 'top';
canvas.textAlign = "center";
// 등록된 이미지중에서 0번째이미지Key를 얻는다.
var imageKey = CMWORLD.POI3D.getImageKey(0);
var image = CMWORLD.POI3D.getImage(imageKey);
canvas.drawImage(image, x - image.width / 2, y - image.height / 2);
canvas.fillText(userPOI.label + " 하하하", x, y);
});
userPOI3DLayer.add(poi);
// 나중에 지울때 사용하려고
testPOI = poi;
}
}
// 깜빡임 효과.
flash = function ()
{
var userPOI3DLayer = getPOILayer();
if (userPOI3DLayer == null)
{
return;
}
var poiArray = userPOI3DLayer.getPOIArray();
var i = 0;
var boundaryTypeRandom = CMWORLD.BoundaryType.rectangle;
for (var key in poiArray)
{
var flashBoundary = new CMWORLD.FlashBoundary2D();
flashBoundary.strokeStyle = 'rgb(0,' + Math.floor(255 - 42.5 * i) + ',' +
Math.floor( 20 * i) + ')';
flashBoundary.lineWidth = 5;
flashBoundary.continueTime = 5000;
flashBoundary.flashTime = 100 + (i * 100);
flashBoundary.boundaryType = boundaryTypeRandom;
if (boundaryTypeRandom == CMWORLD.BoundaryType.rectangle)
{
boundaryTypeRandom = CMWORLD.BoundaryType.circle;
}
else
{
boundaryTypeRandom = CMWORLD.BoundaryType.rectangle;
}
i++;
poiArray[key].setFlashBoundary(flashBoundary);
}
}
/*poi Layer를 제거하여 한번에 날린다.*/
removepoilayer = function () {
var userPOI3DLayer = cmworld3Viewer.getLayer(poiLayername);
if (userPOI3DLayer) {
cmworld3Viewer.removeLayer(userPOI3DLayer);
}
};
/*특정 poi만 제거한다*/
removepoi = function () {
var userPOI3DLayer = cmworld3Viewer.getLayer(poiLayername);
if (userPOI3DLayer) {
// poi 객체로 지우기
userPOI3DLayer.remove(testPOI);
// poi 이름으로 지우기
userPOI3DLayer.removebyName(testPOI.name);
// poi ID로 지우기
userPOI3DLayer.removebyID(testPOI.id);
}
};
findPOI = function () {
var userPOI3DLayer = cmworld3Viewer.getLayer(poiLayername);
if (userPOI3DLayer) {
var findPOIName = poiName1;
var poi = userPOI3DLayer.getPOIbyName(findPOIName);
if (poi) {
cmworld3Viewer.gotoGeo(poi.position.x, poi.position.y, 10000);
}
}
}
function empty() {
}
// CMV Layer를 이용하여 POI를 표현하는 예제.
function CMVLayerPOI() {
var layerName = "POI테스트";
var poiLayer = cmworld3Viewer.getLayer(layerName);
if (poiLayer == null) {
if (VWorldMode) {
cmworld3Viewer.addVectorLayer(layerName, "http://cmworld.net:5050/CmWorld/CmWorldServlet", "http://www.cmworld.net:5050/CmWorld/ResourceManagerServlet", "seoulfire_poi_36", 13, 16, 90, -90, -180, 180, "cmv");
}
else {
//cmworld3Viewer.addVectorLayer(layerName, "http://cmworld.net:5050/CmWorld/CmWorldServlet", "http://www.cmworld.net:5050/CmWorld/ResourceManagerServlet", "cong_poi", 1, 12, 90, -90, -180, 180, "cmv");
cmworld3Viewer.addVectorLayer(layerName, "http://cmworld.net:5050/CmWorld/CmWorldServlet", "http://www.cmworld.net:5050/CmWorld/ResourceManagerServlet", "seoulfire_poi", 12, 15, 90, -90, -180, 180, "cmv");
}
cmworld3Viewer.gotoGeo(126.92621147439064, 37.52489950881731, 1000);
}
else
{
cmworld3Viewer.removeLayer(poiLayer);
}
}
mouseClick = function (event) {
if (event) {
if (event.ctrlKey) {
if (cmworld3Viewer) {
var canvasPos = cmworld3Viewer.convertPagePosToCanvasPos(event.pageX, event.pageY);
var userPOI3DLayer = cmworld3Viewer.getLayer(poiLayername);
if (userPOI3DLayer) {
var poi = userPOI3DLayer.intersect(canvasPos.x, canvasPos.y);
if( poi != null )
{
alert( "id:" + poi.id + " label:" + poi.label + " name:" + poi.name );
}
}
}
}
}
}
window.onload = function () {
var canvas = document.querySelector("#cmworldCanvas");
canvas.onclick = mouseClick;
// 영상 및 지형 레이어 추가.
if (VWorldMode) {
cmworld3Viewer = new CMWORLD.CmWorld3(canvas, 127, 37.5, 400000, { toptilespan: 36 });
cmworld3Viewer.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);
cmworld3Viewer.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, "");
}
else {
cmworld3Viewer = new CMWORLD.CmWorld3(canvas, 127, 37.5, 400000);
cmworld3Viewer.addTileImageLayer("base", "http://cmworld.net:5050/CmWorld/CmWorldServlet?T=world_raster&L={z}&X={x}&Y={y}", 0, 12, 90, -90, -180, 180, "png", false);
cmworld3Viewer.addTerrainLayer("terrain", "http://cmworld.net:5050/CmWorld/CmWorldServlet?T=dem30m&L={z}&X={x}&Y={y}", 0, 12, 90, -90, -180, 180, "CBT");
}
cmworld3Viewer.showLatLonLine(false);
init();
};
</script>
</head>
<body>
<canvas id="cmworldCanvas"></canvas>
<div id="container"></div>
<div id="labelDiv">
* 우측 상단의 메뉴를 이용하세요.<br>
* 소스 코드에서 VWorldMode = true 로 변경하면 VWorld연동 POI
</div>
<a href="#" onclick="userPOIExam()" style="right: 10px; top: 20px; position: absolute; z-index: 10000;color: rgb(182, 255, 0)">userPOI</a>
<a href="#" onclick="removepoi()" style="right: 10px; top: 40px; position: absolute; z-index: 10000;color: rgb(182, 255, 0)">removePOI</a>
<a href="#" onclick="removepoilayer()" style="right: 10px; top: 60px; position: absolute; z-index: 10000;color: rgb(182, 255, 0)">removePOILayer</a>
<a href="#" onclick="findPOI()" style="right: 10px; top: 80px; position: absolute; z-index: 10000;color: rgb(182, 255, 0)">findPOI</a>
<a href="#" onclick="empty()" style="right: 10px; top: 100px; position: absolute; z-index: 10000;color: rgb(182, 255, 0)">click POI by CTRL + LButton</a>
<a href="#" onclick="CMVLayerPOI()" style="right: 10px; top: 140px; position: absolute; z-index: 10000;color: rgb(182, 255, 0)">CMVLayerPOI</a>
<a href="#" onclick="flash()" style="right: 10px; top: 160px; position: absolute; z-index: 10000;color: rgb(182, 255, 0)">flash</a>
</body>
</html>