<!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: 50px;
}
#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 cmworld;
var gui;
var UserLayer;
onupdateobject = function (userobject, deltatime) {
}
clearMeasure = function () {
cmworld.mouse.userDrawHandler.clear();
cmworld.measureLayer.clear();
cmworld.reDrawOverlayMap();
}
ModeNormal = function () {
cmworld.mouse.setMouseMode(CMWORLD.MouseMode.normal);
}
DrawPointMode = function () {
cmworld.mouse.setMouseMode(CMWORLD.MouseMode.drawPoint);
}
DrawPolylineMode = function () {
cmworld.mouse.setMouseMode(CMWORLD.MouseMode.drawPolyline);
cmworld.mouse.userDrawHandler.displayMeasureText = false;
cmworld.mouse.userDrawHandler.callbackEndEditing = function (editingPointList, currObjectType) {
if (CMWORLD.GisObjectType.polyline == currObjectType) {
}
for (var key in editingPointList) {
editingPointList[key].x;
editingPointList[key].y;
editingPointList[key].z;
}
// 취소
//return false;
return true;
}
}
DrawPolygonMode = function () {
cmworld.mouse.setMouseMode(CMWORLD.MouseMode.drawPolygon);
}
DrawRectangleMode = function () {
cmworld.mouse.setMouseMode(CMWORLD.MouseMode.drawRectangle);
}
DrawCircleMode = function () {
cmworld.mouse.setMouseMode(CMWORLD.MouseMode.drawCircle);
}
drawDomeMode = function () {
cmworld.mouse.setMouseMode(CMWORLD.MouseMode.drawSphere);
}
drawVolumePolygonMode = function () {
cmworld.mouse.setMouseMode(CMWORLD.MouseMode.drawVolumePolygon);
}
// volumepolygon의 높이를 조절한다.
var volumePolygon_test = null;
updateVolumePolygon = function (sum) {
if (CMWORLD.Util.isDefined(volumePolygon_test)) {
// 부피 최상단값을 설정한다.
volumePolygon_test.maxHeight += sum;
// 객체의 모양을 다시 만든다.
volumePolygon_test.genVolumePolygonMesh();
}
}
example = function () {
UserLayer = new CMWORLD.UserObjectLayer("user1");
cmworld.addLayer(UserLayer);
var eye_x = 126.93137694810623;
var eye_y = 37.58217966892915;
var eye_h = 668.865632826;
var look_x = 126.92663173256057;
var look_y = 37.59148981296575;
var look_h = 0;
cmworld.gotoLookAt(eye_x, eye_y, eye_h, look_x, look_y, look_h);
var poly = new CMWORLD.GisPolyline();
var pts = [
new THREE.Vector2(126.93137694810623, 37.58217966892915),
new THREE.Vector2(126.92663173256057, 37.59148981296575)
]
poly.points = pts;
poly.drawStyle = { linewidth: 3, strokeStyle: " red" };
poly.needsUpdate = true;
cmworld.gisObjects.push(poly);
}
window.onload = function () {
var canvas = document.querySelector("#cmworldCanvas");
var vworld_mode = false;
if (vworld_mode) {
cmworld = new CMWORLD.CmWorld3(canvas, 127, 38, 10000, { toptilespan: 36 });
cmworld.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);
cmworld.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, "");
cmworld.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");
}
else {
cmworld = new CMWORLD.CmWorld3(canvas, 127, 38, 10000);
// 영상레이어
cmworld.addBaseImageLayer("http://cmworld.net:5050/CmWorld/CmWorldServlet?T=world_raster&L={z}&X={x}&Y={y}", 0, 14, 90, -90, -180, 180);
// 지형레이어
cmworld.addTerrainLayer("terrain", "http://cmworld.net:5050/CmWorld/CmWorldServlet?T=dem30m&L={z}&X={x}&Y={y}", 0, 14, 90, -90, -180, 180, "CBT");
}
cmworld.option.viewTileInfo = true;
// 부피 측정 객체를 얻어오기 위해서.
// 객체의 이름을 알면 나중에 measurelayer에서 객체를 찾아도 된다.
cmworld.measureLayer.addObjectEvent.addEventListener(function (param) {
if (CMWORLD.Util.isDefined(param.object)) {
if (param.object instanceof CMWORLD.VolumePolygon) {
volumePolygon_test = param.object;
}
}
});
example();
};
</script>
</head>
<body>
<!--div id="header"> header </!--div-->
<canvas id="cmworldCanvas"></canvas>
<a href="#" onclick="ModeNormal()" style="right: 10px; top: 10px; position: absolute; z-index: 10000;color: rgb(182, 255, 0)">Normal Mode</a>
<a href="#" onclick="clearMeasure()" style="right: 10px; top: 30px; position: absolute; z-index: 10000;color:rgb(182, 255, 0)">Clear</a>
<a href="#" onclick="DrawPolylineMode()" style="right: 10px; top: 50px; position: absolute; z-index: 10000;color:rgb(182, 255, 0)">Draw Polyline</a>
<a href="#" onclick="DrawPolygonMode()" style="right: 10px; top: 70px; position: absolute; z-index: 10000;color:rgb(182, 255, 0)">Draw Polygon</a>
<a href="#" onclick="DrawCircleMode()" style="right: 10px; top: 90px; position: absolute; z-index: 10000;color:rgb(182, 255, 0)">Draw Circle</a>
<a href="#" onclick="drawDomeMode()" style="right: 10px; top: 110px; position: absolute; z-index: 10000;color:rgb(182, 255, 0)">Draw Dome</a>
<a href="#" onclick="drawVolumePolygonMode()" style="right: 80px; top: 130px; position: absolute; z-index: 10000;color:rgb(182, 255, 0)">Draw Volume</a>
<a href="#" onclick="updateVolumePolygon(5)" style="right: 40px; top: 130px; position: absolute; z-index: 10000;color:rgb(182, 255, 0)">(+)</a>
<a href="#" onclick="updateVolumePolygon(-5)" style="right: 10px; top: 130px; position: absolute; z-index: 10000;color:rgb(182, 255, 0)">(-)</a>
</body>
</html>