<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml">
<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 type="text/javascript" src="./Cm3WebGL/lib/shp.js"></script>
<script type="text/javascript" src="./Cm3WebGL/lib/ThreeCSG.js"></script>
<script type="text/javascript" src="./Cm3WebGL/lib/proj4.js"></script>
<script type="text/javascript" src="./js/floorAreaRatio.min.js"></script>
<!--3D-->
<!--<script src="./Cm3WebGL/lib/require.2.1.22.min.js"></script>-->
<script language="JavaScript">
var cmworld;
var m_AcceptableLayerName = "acceptableLayer";
var m_BuildableLayerName = "buildableLayer";
//용적율 변수
var m_BuildingRates = {};
var m_PNUField = "A1";
var m_CodeField = "CODE";
var m_LandAreaField = "LAND_AREA";
var m_BuildAreaField = "BUILD_AREA";
var wgslatlon;
var wgsutm;
var utmk;
function getBuildingRates()
{
m_BuildingRates['UQA111'] = 1.00;
m_BuildingRates['UQA112'] = 1.20;
m_BuildingRates['UQA121'] = 1.50;
m_BuildingRates['UQA122'] = 2.00;
m_BuildingRates['UQA123'] = 2.50;
m_BuildingRates['UQA130'] = 4.00;
m_BuildingRates['UQA210'] = 10.00;
m_BuildingRates['UQA220'] = 8.00;
m_BuildingRates['UQA230'] = 6.00;
m_BuildingRates['UQA240'] = 6.00;
m_BuildingRates['UQA310'] = 2.00;
m_BuildingRates['UQA320'] = 2.00;
m_BuildingRates['UQA330'] = 4.00;
m_BuildingRates['UQA410'] = 0.50;
m_BuildingRates['UQA420'] = 0.50;
m_BuildingRates['UQA430'] = 0.50;
}
window.onload = function ()
{
var canvas = document.querySelector("#cmworldCanvas");
var siteRoot = CMWORLD.Compile.getSiteRootUrl();
var vworldMode = true;
if (vworldMode) {
cmworld = new CMWORLD.CmWorld3(canvas, 127, 38, CMWORLD.cm_const.EarthRadius, { toptilespan: 36 });
var serverUri = "http://xdworld.vworld.kr:8080/XDServer3d";
let textureOption = { noTexture: true, opacity: 0.5 };
cmworld.addBaseImageLayer(serverUri + "/requestLayerNode?APIKey=B470EFE5-A211-35EE-A38A-0D5AD519F236&Layer=tile&Level={z}&IDX={x}&IDY={y}", 0, 15, 90, -90, -180, 180);
cmworld.addTerrainLayer("terrain", serverUri + "/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", serverUri + "/requestLayerNode?Layer=facility_build&Level={z}&IDX={x}&IDY={y}&APIKey=B470EFE5-A211-35EE-A38A-0D5AD519F236",
serverUri + "/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", textureOption);
cmworld.addReal3DLayer("facility_build_at", serverUri + "/requestLayerNode?Layer=facility_build_at&Level={z}&IDX={x}&IDY={y}&APIKey=B470EFE5-A211-35EE-A38A-0D5AD519F236",
serverUri + "/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", textureOption);
//cmworld.addTileImageLayer("base", "http://xdworld.vworld.kr:8080/XDServer/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/XDServer/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/XDServer/requestLayerNode?Layer=facility_build&Level={z}&IDX={x}&IDY={y}&APIKey=350E1668-0D3F-348A-A950-7F80174028D5",
// "http://xdworld.vworld.kr:8080/XDServer/requestLayerObject?APIKey=350E1668-0D3F-348A-A950-7F80174028D5&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, CMWORLD.cm_const.EarthRadius);
// 영상레이어
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);
cmworld.setAmbientColor(0xeeeeee);
cmworld.option.showFPS(true);
proj4.defs([
["WGS_LATLON", "+proj=longlat +ellps=WGS84 +datum=WGS84 +no_defs"],
["WGS_UTM52", "+proj=utm +zone=52 +ellps=WGS84 +datum=WGS84 +units=m +no_defs"],
["UTM_K", "+proj=tmerc +lat_0=38 +lon_0=127.5 +k=0.9996 +x_0=1000000 +y_0=2000000 +ellps=GRS80 +units=m +no_defs"]
]);
wgslatlon = new proj4.Proj('WGS_LATLON');
wgsutm = new proj4.Proj('WGS_UTM52');
utmk = new proj4.Proj('UTM_K');
cmworld.gotoLookAt(126.91821927160821, 37.55271515842018, 1000, 126.91821927160821, 37.55271515842018, 10); //126.92287806018567, 37.52385624604935, 0);
//용적율 설정
getBuildingRates();
};
var m_jijuk_ptlist;
function openShp() {
var layer = cmworld.getLayer(m_AcceptableLayerName);
if (layer) {
alert('이미 레이이가 존재합니다.');
return;
}
var url2 = "./demofiles_01/jijuk.zip";
shp(url2).then(function (data2) {
var geoDataLen2 = data2.features.length; // 실행한 shp 파일의 객체 수를 저장합니다
if (geoDataLen2 == 0) return;
var pnus = {};
for (var i = 0; i < geoDataLen2; i++) {
pnus[data2.features[i].properties.A1] = data2.features[i].geometry.coordinates[0]; //PNU에 포인트 할당
}
var url = "./demofiles_01/shp_acceptable.zip";
// shp 파일을 실행하여 데이터를 조회합니다
shp(url).then(function (data) {
var geoDataLen = data.features.length; // 실행한 shp 파일의 객체 수를 저장합니다
if (geoDataLen == 0) return;
var light = new THREE.DirectionalLight(0x606060);
light.position.set(0.75, 0.75, 1.0).normalize();
cmworld.getWorldScene().add(light);
var color = 0x505050;
var jijuk_ptlist, code, areaLand, areaBuild, isLight;
var areaY; //용적율 면적
var ptlist, dHeight, h, model, dFloor, iFloor;
for (var i = 0; i < geoDataLen; i++) {
try {
ptlist = data.features[i].geometry.coordinates[0];
ptlist.length = ptlist.length - 1;
for (var j = 0; j < ptlist.length; j++) {
ptlist[j].x = ptlist[j][0]; ptlist[j].y = ptlist[j][1];
}
jijuk_ptlist = pnus[data.features[i].properties.A1]; //PNU
if (!jijuk_ptlist) continue;
for (var j = 0; j < jijuk_ptlist.length; j++) {
jijuk_ptlist[j].x = jijuk_ptlist[j][0]; jijuk_ptlist[j].y = jijuk_ptlist[j][1];
}
code = data.features[i].properties.CODE.trim();
isLight = data.features[i].properties.ISLIGHT;
if (!m_BuildingRates[code]) continue;
h = cmworld.getGroundHeight(ptlist[0].x, ptlist[0].y); //지형 높이
areaLand = data.features[i].properties.LAND_AREA;
areaBuild = data.features[i].properties.BUILD_AREA;
areaY = areaLand * m_BuildingRates[code]; //토지면적 X 용적율 = 가능한 면적
//가능 층수
dFloor = areaY / areaBuild;
iFloor = parseInt(dFloor);
data.features[i].properties.BUILD_LEVEL = iFloor + 1;
var bBoxBuild = true;
if (code.indexOf('UQA1') == 0 && isLight == true) //주거지역은 사선처리
{
if (iFloor > 2) //3층 이하이면 박스로 그림
{
bBoxBuild = false;
//토지면적, 건물면적, 용적율, 토지ptlist, 건물 ptlist
//areaLand, areaBuild, m_BuildingRates[code], jijuk_ptlist, ptlist
//사선으로 건물 그리자.
model = makeBuildingMesh2(iFloor, areaLand, areaBuild, m_BuildingRates[code], jijuk_ptlist, ptlist);
//console.log(iFloor);
//dHeight = iFloor * 3;
//model = makeBuildingMesh(ptlist, dHeight, 0);
if (model) {
var obj = new CMWORLD.UserObject(name, model, new THREE.Vector3(ptlist[0].x, ptlist[0].y, h));
obj.rotate4GlobeEarth();
var userLayer = getUserLayer(m_AcceptableLayerName);
userLayer.add(obj);
data.features[i].properties.BUILD_LEVEL = model.BUILD_LEVEL;
}
}
}
if (bBoxBuild == true) //박스형 건물
{
dHeight = iFloor * 3; //ptlist를 dHeight만큼 그리고, 나머지 옥상 그림
remareaBuild = areaBuild * (dFloor - iFloor); //옥상 면적... ptlist 다시 계산해서 옥상 그리기
if (dHeight < 3) dHeight = 3;
var color = 0x505050;
//건물 그리자.
ptlist = sortSouthFirst(ptlist);
model = makeBuildingMesh(ptlist, dHeight, areaBuild, remareaBuild, color);
//console.log(data.features[i]);
if (model) {
var obj = new CMWORLD.UserObject(name, model, new THREE.Vector3(ptlist[0].x, ptlist[0].y, h));
obj.rotate4GlobeEarth();
var userLayer = getUserLayer(m_AcceptableLayerName);
userLayer.add(obj);
}
}
}
catch (e) {
//console.log("Error Message: " + i.toString() + " " + e.message);
}
}
var userLayer = getUserLayer(m_AcceptableLayerName);
if (userLayer) {
$('#divVisible').show();
$('#divBuildable').show();
}
//5층 이상인 건물 찍어봄....
var cnt = 0;
for (var i = 0; i < geoDataLen; i++) {
if (data.features[i].properties.BUILD_LEVEL > 5) {
console.log(i + ' : ' + data.features[i].properties.BUILD_LEVEL);
cnt++;
}
}
console.log('total = ' + cnt);
});
});
}
function openBuildableShp() {
var layer = cmworld.getLayer(m_BuildableLayerName);
if (layer) {
alert('이미 레이이가 존재합니다.');
return;
}
var url = "./demofiles_01/shp_buildable.zip";
// shp 파일을 실행하여 데이터를 조회합니다
shp(url).then(function (data) {
var geoDataLen = data.features.length; // 실행한 shp 파일의 객체 수를 저장합니다
if (geoDataLen == 0) return;
var color = 0x505050;
var code, areaLand, areaBuild, isLight;
var areaY; //용적율 면적
var ptlist, dHeight, h, model, dFloor, iFloor;
for (var i = 0; i < geoDataLen; i++) {
try {
ptlist = data.features[i].geometry.coordinates[0];
ptlist.length = ptlist.length - 1;
for (var j = 0; j < ptlist.length; j++) {
ptlist[j].x = ptlist[j][0]; ptlist[j].y = ptlist[j][1];
}
code = data.features[i].properties.CODE.trim();
isLight = data.features[i].properties.ISLIGHT;
if (!m_BuildingRates[code]) continue;
h = cmworld.getGroundHeight(ptlist[0].x, ptlist[0].y); //지형 높이
areaLand = data.features[i].properties.LAND_AREA;
areaBuild = data.features[i].properties.BUILD_AREA;
areaY = areaLand * m_BuildingRates[code]; //토지면적 X 용적율 = 가능한 면적
//가능 층수
dFloor = areaY / areaBuild;
iFloor = parseInt(dFloor);
data.features[i].properties.BUILD_LEVEL = iFloor + 1;
var bBoxBuild = true;
if (code.indexOf('UQA1') == 0 && isLight == true) //주거지역은 사선처리
{
if (iFloor > 2) //3층 이하이면 박스로 그림
{
bBoxBuild = false;
//토지면적, 건물면적, 용적율, 건물 ptlist
//areaLand, areaBuild, m_BuildingRates[code], ptlist
//사선으로 건물 그리자.
model = makeBuildingMesh3(iFloor, areaLand, areaBuild, m_BuildingRates[code], jijuk_ptlist, ptlist);
//console.log(iFloor);
//dHeight = iFloor * 3;
//model = makeBuildingMesh(ptlist, dHeight, 0);
if (model) {
var obj = new CMWORLD.UserObject(name, model, new THREE.Vector3(ptlist[0].x, ptlist[0].y, h));
obj.rotate4GlobeEarth();
var userLayer = getUserLayer(m_BuildableLayerName);
userLayer.add(obj);
data.features[i].properties.BUILD_LEVEL = model.BUILD_LEVEL;
}
}
}
if (bBoxBuild == true) //박스형 건물
{
data.features[i].properties.BUILD_LEVEL = 34;
dHeight = 100;
var color = 0x505000;
//건물 그리자.
ptlist = sortSouthFirst(ptlist);
model = makeBuildingMesh(ptlist, dHeight, areaBuild, 0, color, 0.5);
//console.log(data.features[i]);
if (model) {
var obj = new CMWORLD.UserObject(name, model, new THREE.Vector3(ptlist[0].x, ptlist[0].y, h));
obj.rotate4GlobeEarth();
var userLayer = getUserLayer(m_BuildableLayerName);
userLayer.add(obj);
}
}
}
catch (e) {
//console.log("Error Message: " + i.toString() + " " + e.message);
}
}
var userLayer = getUserLayer(m_BuildableLayerName);
if (userLayer) $('#divBuildVisible').show();
});
}
function getUserLayer(layerName) {
var layer = cmworld.getLayer(layerName);
if (layer) {
return layer;
}
// 없으면 만들어서 추가한다.
var userLayer = new CMWORLD.UserObjectLayer(layerName);
cmworld.addLayer(userLayer);
return userLayer;
}
function setVisible(div, lname) {
var userLayer = getUserLayer(lname);
if (!userLayer) return;
if (userLayer.visible == true) {
$(div).text("레이어보이기");
userLayer.visible = false;
}
else {
$(div).text("레이어숨기기");
userLayer.visible = true;
}
}
</script>
</head>
<body>
<!-- 3D GIS -->
<canvas id="cmworldCanvas"></canvas>
<a href="#" onclick="openShp()" style="right: 10px; top: 20px; position: absolute; z-index: 10000;color: rgb(182, 255, 0);">shp열기(용적율계산으로 허용가능건물모양))</a>
<a href="#" onclick="setVisible(this,'acceptableLayer')" id="divVisible" style="right: 10px; top: 40px; position: absolute; z-index: 10000;color: rgb(182, 255, 0); display:none;">레이어숨기기</a>
<a href="#" onclick="openBuildableShp()" id="divBuildable" style="right: 10px; top: 60px; position: absolute; z-index: 10000;color: rgb(182, 255, 0); display:none;">건축가능필지공간</a>
<a href="#" onclick="setVisible(this,'buildableLayer')" id="divBuildVisible" style="right: 10px; top: 80px; position: absolute; z-index: 10000;color: rgb(182, 255, 0); display:none;">레이어숨기기</a>
</body>
</html>