<!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 cmworld;
var gui;
mainLayeronoff = function () {
if (cmworld) {
var visible = cmworld.getVectorImageLayerVisible("jincheon_obj3d_klis");
visible = !visible;
cmworld.setVectorImageLayerVisible("jincheon_obj3d_klis", visible);
//cmworld.removeTopTiles();
}
}
subLayeronoff = function ()
{
for (var i = 0; i < 10; i++)
{
var visible = cmworld.getVectorImageSubLayerVisible("jincheon_obj3d_klis", i);
if (visible == true)
{
visible = false;
}
else
{
visible = true;
}
cmworld.setVectorImageSubLayerVisible("jincheon_obj3d_klis", i, visible)
}
cmworld.redrawVectorImageLayer("jincheon_obj3d_klis");
}
changeSubLayerStyle = function ()
{
var styles = cmworld.styleManager.getStyle("jincheon_obj3d_klis");
var count = styles.length;
for(var i = 0; i < count; i++)
{
var style = { strokeStyle: "rgba(0,198,0, 0, 1)", lineWidth: 2, fillStyle: "rgba(131, 60, 189, 0.1)" };
cmworld.styleManager.updateStyle("jincheon_obj3d_klis", i, style);
}
cmworld.redrawVectorImageLayer("jincheon_obj3d_klis");
}
example = function () {
var styles = [];
for (var i = 0; i < 10; i++) {
var style = { strokeStyle: "red", lineWidth: 2, fillStyle: "rgba(255, 255, 0, 0.1)" };
styles.push(style);
}
for (var i = 0; i < 10; i++) {
var style = { strokeStyle: "blue", lineWidth: 2, fillStyle: "rgba(255, 0, 0, 0.1)" };
styles.push(style);
}
for (var i = 0; i < 50; i++) {
var style = { strokeStyle: "green", lineWidth: 2, fillStyle: "rgba(0, 0, 255, 0.1)" };
styles.push(style);
}
for (var i = 0; i < 70; i++) {
var style = { strokeStyle: "yellow", lineWidth: 2, fillStyle: "rgba(0, 0, 255, 0.1)" };
styles.push(style);
}
cmworld.styleManager.addStyle("jincheon_obj3d_klis", styles);
//cmworld.setVectorImageLayerStyle("jincheon_obj3d_klis", styles);
var eye_x = 127.4443668051564;
var eye_y = 36.758601439692116;
var eye_h = 37640;
var look_x = 127.4443668051564;
var look_y = 36.858601439692116;
var look_h = 64.66499131545424;
cmworld.gotoLookAt(eye_x, eye_y, eye_h, look_x, look_y, look_h);
}
exampleSeoul = function ()
{
var style = new CMWORLD.StyleInfo();
style.strokeStyle = "yellow";
style.lineWidth = 3;
style.fillStyle = "rgba(0, 0, 255, 0.1)";
cmworld.styleManager.addStyle("서울레이어", style);
}
window.onload = function () {
var canvas = document.querySelector("#cmworldCanvas");
cmworld = new CMWORLD.CmWorld3(canvas, 127, 38, CMWORLD.cm_const.EarthRadius );
cmworld.option.worldTimer.setStartDateTime(2015, 7, 12, 14, 0, 0, 0);
cmworld.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);
cmworld.addTerrainLayer("terrain", "http://cmworld.net:5050/CmWorld/CmWorldServlet?T=dem30m&L={z}&X={x}&Y={y}", 0, 12, 90, -90, -180, 180, "CBT");
cmworld.addVectorLayer("yangsan_pic_building", "http://cmworld.net:5050/CmWorld/CmWorldServlet", "http://www.cmworld.net:5050/CmWorld/ResourceManagerServlet", "yangsan_pic_building", 12, 19, 90, -90, -180, 180, "cmv");
cmworld.addVectorImageLayer("jincheon_obj3d_klis", "http://cmworld.net:5050/CmWorld/CmWorldServlet", "http://www.cmworld.net:5050/CmWorld/ResourceManagerServlet", "jincheon_obj3d_klis", 14, [6, 8, 10], 90, -90, -180, 180, "cmv");
//cmworld.addVectorImageLayer("dangjin_last", "http://cmworld.net:5050/CmWorld/CmWorldServlet", "http://www.cmworld.net:5050/CmWorld/ResourceManagerServlet", "dangjin_last", 12, [6, 7 ,8, 9, 10, 11, 12, 13 , 14], 90, -90, -180, 180, "cmv");
cmworld.addVectorImageLayer("서울레이어", "http://cmworld.net:5050/CmWorld/CmWorldServlet", "http://www.cmworld.net:5050/CmWorld/ResourceManagerServlet", "VectorMap", 14, [6,7,8,9,10], 90, -90, -180, 180, "cmv");
cmworld.option.viewTileInfo = true;
example();
exampleSeoul();
};
</script>
</head>
<body>
<canvas id="cmworldCanvas"></canvas>
<!--div style="background:rgb(255, 255, 255); bottom : 10px; left: 10px; width:256px; height:256px; position: absolute;">
<canvas id="debugimage" style="width:100%;height:100%;"></canvas>
</div-->
<a href="#" onclick="mainLayeronoff()" style="right: 10px; top: 10px; position: absolute; z-index: 10000;color: rgb(182, 255, 0)">layer On/Off</a>
<a href="#" onclick="subLayeronoff()" style="right: 10px; top: 30px; position: absolute; z-index: 10000;color: rgb(182, 255, 0)">sublayer On/Off</a>
<a href="#" onclick="changeSubLayerStyle()" style="right: 10px; top: 50px; position: absolute; z-index: 10000;color: rgb(182, 255, 0)">sublayer style change</a>
</body>
</html>