<!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%;
}
</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 articfirst = true;
var antarcticfirst = true;
// polar이미지는 180 혹은 -180경도선이 이미지의 북쪽을 가리키도록 고정되어 있음.
// 그러므로 image를 그릴때 기준으로 삼아야 함.
// 이 콜백은 매번 화면을 갱신할때마다 호출됨.
// isArctic이 true이면 북극의 이미지를 갱신하게 되고 false면 남극의 이미지를 갱신함.
// return값이 true이면 갱신하고 아니면 갱신하지 않음. 그러므로 이미지를 갱신하였다면 반드시 true를 리텅해야 함.
polarimagecallback = function(isArctic, context)
{
if (context) {
if (isArctic == true) {
if (articfirst == true) {
// 뭔가 그려 넣자.
var centerX = context.canvas.width / 2;
var centerY = context.canvas.height / 2;
var radius = (context.canvas.width / 2) - 10;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.lineWidth = 5;
context.strokeStyle = 'red';
context.stroke();
articfirst = false;
return true;
}
}
else {
if (antarcticfirst == true) {
// 뭔가 그려 넣자.
var centerX = context.canvas.width / 2;
var centerY = context.canvas.height / 2;
var radius = (context.canvas.width / 2) - 10;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.lineWidth = 5;
context.strokeStyle = 'green';
context.stroke();
antarcticfirst = false;
return true;
}
}
}
return false;
}
clearPolarimaga = function()
{
var context = cmworld3Viewer.polar.getPolarimageContext(true);
context.clearRect(0, 0, context.canvas.width, context.canvas.height);
//var w = context.canvas.width;
//context.canvas.width = 1;
//context.canvas.width = w;
cmworld3Viewer.polar.updatePolarImage();
}
// 이 함수는 직접 pola이미지를 갱신하는 예제임.
directDraw = function ()
{
// 극지방에 그려질 수 있는 범위를 늘려보자.
cmworld3Viewer.polar.setPolarImageRadius(40);
var image1 = document.createElement('img');
image1.addEventListener('load', function (event)
{
// 극지의 이미지 context를 가져옴.
// 파라메터가 true이면 북극의 이미지를 false면 남극의 이미지를 가져옴.
// 그래픽 작업은 일반적인 contex를 다루는 함수와 동일함.
var context = cmworld3Viewer.polar.getPolarimageContext(true);
context.globalAlpha = 1.0;
var cWidth = context.canvas.width;
{
context.save();
// move to the center of the canvas
// 중심으로 이동.
context.translate(cWidth / 2, cWidth / 2);
// 회전.
context.rotate(90 * Math.PI / 180);
//context.drawImage(image1, -image1.width / 2, -image1.width / 2);
context.drawImage(image1, 0, 0, image1.width, image1.height, -(cWidth / 2), -(cWidth/2), cWidth, cWidth);
//context.drawImage(image1, 0, 0, image1.width, image1.height, 0,0, 1024,1024);
context.restore();
context.fillStyle = "red";
var pt = new THREE.Vector2();
for (var i = 0.0; i < 127; i++)
{
pt = cmworld3Viewer.polar.getPolarImagePosition(i, 80);
context.fillRect(pt.x -2 , pt.y - 2, 4, 4);
}
}
context = cmworld3Viewer.polar.getPolarimageContext(false);
context.globalAlpha = 1.0;
var cWidth = context.canvas.width;
{
context.fillStyle = "green";
var pt = new THREE.Vector2();
for (var i = 0.0; i < 127; i++)
{
pt = cmworld3Viewer.polar.getPolarImagePosition(i, -80);
context.fillRect(pt.x - 2, pt.y - 2, 4, 4);
}
}
// 이지지를 갱신하였다면, cmworld3Viewer에 갱신 되었다고 알려 주어야 함.
cmworld3Viewer.polar.updatePolarImage();
}, false);
image1.src = ".\\textures\\nt_197811.png";
}
example = function () {
//cmworld3Viewer.setAmbientColor(0xaaaaaa);
// polaimage를 활성화 시킴.
// 첫번째 인자는 극으로 부터 이미지를 적용할 최대 범위를 나타냄. 각도로 지정하게됨. 예제에서는 20도 지정하였으므로, 북극에서는 70에서 90도까지 남극에서는 -70에서 -90도 까지 적용됨.
// 두번째 인자는 이미지의 크기임, 내부적으로 생성되는 이미지는 지정된 크기를 이용하여 정사각형의 이미지를 만들어냄. 너무 크면 메모리에 문제가 생기므로 적당한 크리를 사용하는 것이 좋음.
// 세번째는 화면이 갱신될 때마다 호출할 함수를 지정함. 이 함수는 위의 예처럼 북극인지 여부와 해당 극의 이미지 context를 인자로 받게됨.
cmworld3Viewer.polar.enablePolarImageOverlay(30, 1024, polarimagecallback)
var eye_x = 92.28543980222322;
var eye_y = 79.45410790253543;
var eye_h = 3367027.811760755;
var look_x = 79.3173629383541;
var look_y = 82.13269451458342;
var look_h = 10;
cmworld3Viewer.gotoLookAt(eye_x, eye_y, eye_h, look_x, look_y, look_h);
}
window.onload = function () {
var canvas = document.querySelector("#cmworldCanvas");
cmworld3Viewer = new CMWORLD.CmWorld3(canvas, 127, 38, CMWORLD.cm_const.EarthRadius, { toptilespan: 36 });
// 최대 거리에서도 최상위 타일을 보여준다.
//cmworld3Viewer.SetTopTileDisplayDistance(Number.MAX_VALUE);
cmworld3Viewer.option.worldTimer.setStartDateTime(2015, 7, 12, 14, 0, 0, 0);
/*
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");
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.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, "");
cmworld3Viewer.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");
cmworld3Viewer.option.showFPS(true);
example();
};
</script>
</head>
<body>
<canvas id="cmworldCanvas"></canvas>
<a href="#" onclick="directDraw()" style="right: 10px; top: 10px; position: absolute; z-index: 10000;color: rgb(182, 255, 0)">directDraw</a>
<a href="#" onclick="clearPolarimaga()" style="right: 10px; top: 30px; position: absolute; z-index: 10000;color: rgb(182, 255, 0)">clear</a>
</body>
</html>