<!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 canvas = null;
addToLine = function (str)
{
var lines = str + coordtext.value;
coordtext.value = lines;
}
function posChangedCallbackFunction(event)
{
addToLine("camera position committed.");
var kkk = event.camera;
}
function eventCameraCommited() {
if (cmworld3Viewer) {
cmworld3Viewer.camera.positionChangedEvent.addEventListener( posChangedCallbackFunction );
}
}
window.onload = function () {
canvas = document.querySelector("#cmworldCanvas");
cmworld3Viewer = new CMWORLD.CmWorld3(canvas, 127, 38, CMWORLD.cm_const.EarthRadius);
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");
};
</script>
</head>
<body>
<canvas id="cmworldCanvas"></canvas>
<textarea id="coordtext" rows="30" cols="30" style="background: rgb(255, 255, 255); bottom: 5px; left: 5px; width: 250px; height: 50%; position: absolute; overflow-y: scroll;"></textarea>
<a href="#" onclick="eventCameraCommited()" style="right: 10px; top: 10px; position: absolute; z-index: 10000;color: rgb(182, 255, 0)">event CameraCommitted</a>
</body>
</html>