샘플 리스트
<!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; } #cmworld3Canvas { 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 fistGroundPoint = null; var secondGroundPoint = null; var selectGroundPointMode = false; window.onload = function () { var canvas = document.querySelector("#cmworld3Canvas"); var siteRoot = CMWORLD.Compile.getSiteRootUrl(); var vworld_mode = false; if (vworld_mode) { cmworld = new CMWORLD.CmWorld3(canvas, 127, 38, CMWORLD.cm_const.EarthRadius * 2.5, { toptilespan: 36 }); //gliEmbedDebug = true; 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"); cmworld.addReal3DLayer("facility_build_at", "http://xdworld.vworld.kr:8080/XDServer3d/requestLayerNode?Layer=facility_build_at&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_at&Level={z}&IDX={x}&IDY={y}&DataFile={f}", "facility_build_at", 0, 15, 90, -90, -180, 180, "dat"); cmworld.addReal3DLayer("facility_bridge", "http://xdworld.vworld.kr:8080/XDServer3d/requestLayerNode?Layer=facility_bridge&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_bridge&Level={z}&IDX={x}&IDY={y}&DataFile={f}", "facility_bridge", 0, 14, 90, -90, -180, 180, "dat"); cmworld.addOverlayImageLayer("hybrid_road", "http://xdworld.vworld.kr:8080/XDServer3d/requestLayerNode?APIKey=B470EFE5-A211-35EE-A38A-0D5AD519F236&Layer=hybrid_road&Level={z}&IDX={x}&IDY={y}", 0, 15, 90, -90, -180, 180, ""); /* cmworld.addVWPOILayer("poi_base", "http://xdworld.vworld.kr:8080/XDServer/requestLayerNode?Layer=poi_base&Level={z}&IDX={x}&IDY={y}&APIKey=B470EFE5-A211-35EE-A38A-0D5AD519F236", "http://xdworld.vworld.kr:8080/XDServer/requestLayerObject?APIKey=B470EFE5-A211-35EE-A38A-0D5AD519F236&Layer=poi_base&Level={z}&IDX={x}&IDY={y}&DataFile={f}", "poi_base", 0, 15, 90, -90, -180, 180, "poi"); */ } else { cmworld = new CMWORLD.CmWorld3(canvas, 127, 38, CMWORLD.cm_const.EarthRadius * 2.5 ); // 영상레이어 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.worldTimer.setStartDateTime(2015, 7, 12, 14, 0, 0, 0); if (CMWORLD.Compile.DistributionMode == false) { cmworld.option.showFPS(true); } //여의도로 이동 //spline curve path를 얻어 render에서 위치 이동함. var startHeight = 12752201; var endHeight = 30; var splitCount = 300; var ptList = getSplinePath(126.92287806018567, 37.52385624604935, startHeight, 126.92287806018567, 37.52385624604935, endHeight, splitCount); var stepHeight = (startHeight - endHeight) / splitCount; //ptList.reverse - // 매프레임 카메라의 위치를 갱신하기 위해서 event를 통해서 호출을 받는다. cmworld.preUpdateEvent.addEventListener(preUpdate, this ); function preUpdate(params, owner ) { if (ptList.length > 1) { cmworld.gotoLookAt(ptList[0].x, ptList[0].y, startHeight, ptList[1].x, ptList[1].y, endHeight ); // 위의 getSplinePath에서 나온값이 이상해서 따로 계산했다. startHeight = startHeight - stepHeight; // 마지막일때. if (ptList.length == 2 ) { cmworld.gotoLookAt(126.92514152860832, 37.520251187255276, 150, 126.92287806018567, 37.52385624604935, 10); ptList.shift(); } ptList.shift(); } else { // 이제, event를 제거한다. cmworld.preUpdateEvent.removeEventListener(preUpdate); } } function getSplinePath(sx, sy, sh, ex, ey, eh, nCount) { // var curve = new THREE.SplineCurve3([ new THREE.Vector3(sx, sy, sh), new THREE.Vector3(ex, ey, eh) ]); var geometry = new THREE.Geometry(); geometry.vertices = curve.getPoints(nCount); return geometry.vertices; } }; </script> </head> <body> <canvas id="cmworld3Canvas"></canvas> </body> </html>