<!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;
}
#header {
background-color: #ff0000;
height: 100px;
}
#centerleft {
background-color: #ff6a00;
width: 100px;
height: calc(100%);
float: left;
}
#cmworld3Canvas {
background-color: #00ff00;
width: 100%;
height: 100%;
float: left;
display: block;
}
#footer {
background-color: #0000ff;
height: 40px;
position: absolute;
bottom: 0;
width: 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 = null;
canvasMouseClick = function (event)
{
if (event)
{
if (cmworld3Viewer)
{
var button = CMWORLD.CmMouse.getMouseButton(event);
if (button == CMWORLD.MouseButton.LButton)
{
// page좌표를 canvas좌표로 변환한다.
var pos = cmworld3Viewer.convertPagePosToCanvasPos(event.pageX, event.pageY);
var hitCoordinate = cmworld3Viewer.getHitCoordinateOnGround(pos.x, pos.y);
if (hitCoordinate)
{
var layer = getPOILayer();
var poi = new CMWORLD.POI3D();
poi.setPosition(hitCoordinate.x, hitCoordinate.y, hitCoordinate.z);
poi.imgKey = CMWORLD.POI3D.getImageKey(0);
layer.add(poi);
}
}
}
}
}
// 제대로 그려지고 있는지 확인하자.
confirmDrawingArea = function ()
{
if (cmworld3Viewer != null)
{
cmworld3Viewer.option.showCanvasArea = !cmworld3Viewer.option.showCanvasArea;
}
}
/*POI를 담을 레이어*/
getPOILayer = function ()
{
var poiLayername = "userPOITestLayer";
var userPOI3DLayer = cmworld3Viewer.getLayer(poiLayername);
if (userPOI3DLayer == null)
{
cmworld3Viewer.addLayer(new CMWORLD.POI3DLayer(poiLayername));
userPOI3DLayer = cmworld3Viewer.getLayer(poiLayername);
var imageKey = ["circlesym8.png"];
for (var i = 0; i < imageKey.length; i++)
{
// 비동기로 작동하므로, 실제로 이미지가 로드되는데까지 시간이 걸린다.
CMWORLD.POI3D.addImagebyURL("./textures/" + imageKey[i], imageKey[i]);
}
}
return userPOI3DLayer;
}
function saveCanvasToFile(imagepath)
{
if (cmworld3Viewer != null)
{
cmworld3Viewer.saveCanvasToPNG("prettyimage.png");
}
}
window.onload = function ()
{
var cmworld3Canvas = document.querySelector("#cmworld3Canvas");
// canvas에서 직접 마우스 이벤트를 받자.
cmworld3Canvas.onclick = canvasMouseClick;
// canvas 지정, 시작 위치 지정
cmworld3Viewer = new CMWORLD.CmWorld3(cmworld3Canvas, 127, 37, CMWORLD.cm_const.EarthRadius * 2);
// windows의 사이즈가 변경됐을때 canvas의 크기를 설정하기 위한 함수 등록.
cmworld3Viewer.setWindowResizeCallback(function ()
{
// canvas의 좌상단 기준으로 canvas의 크기를 계산해서 넣어줘야 한다.
var gap = 20;
var width = window.innerWidth - 100 - gap;
var height = window.innerHeight - 190 - gap;
return { width: width, height: height };
});
};
</script>
</head>
<body>
<div id="header"> header </div>
<div id="centerleft"> left </div>
<canvas id="cmworld3Canvas"> cmworld3Canvas </canvas>
<div id="footer"> footer </div>
<div id="labelDiv">
마우스로 클릭하면 점이 추가됨.<br>
</div>
<a href="#" onclick="confirmDrawingArea()" style="right: 10px; top: 10px; position: absolute; z-index: 10000;color: rgb(182, 255, 0)">confirmDrawingArea</a>
<a href="#" onclick="saveCanvasToFile()" style="right: 10px; top: 30px; position: absolute; z-index: 10000;color: rgb(182, 255, 0)">saveCanvasToFile</a>
</body>
</html>