본문 바로가기
JavaScript

[지도 API] leaflet

by amoomar 2024. 11. 22.
반응형

해당 게시글은 leaflet이라는 지도 라이브러리를 활용하여, 지도에 특정 도형 레이어를 생성하는 모듈에 대한 내용을 정리한 글이다. 목차는 다음과 같다.

1. 지도 객체 생성
2. 값 변환에 따른 polygon 컨트롤

 

표출 결과를 먼저 하단에 첨부하였다.

See the Pen leaflet by HamJeong (@HamJeong) on CodePen.

 

1. 지도 객체 생성

지도 생성을 위해 필요한 leaflet라이브러리(js, css)와 간편한 요소 조작을 위한 jquery라이브러리를 참조한 후, 값 변경에 필요한 select요소와 지도를 생성할 div 요소를 추가한 html코드 및 스타일 시트 코드이다.

#map {
        width: 500px;
        height: 350px;
}
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />

<select name="airport" id="stnCd">
  <option value="RKPC" selected>제주공항</option>
  <option value="RKSI">인천공항</option>
</select>
<div id="map"></div>

 

 

아래에는 지도 객체를 정의하고, 사용자의 공항 지점 변경 요청에 따라 map의 표출 center가 변경될 수 있도록 이벤트 핸들링 적용 및 메서드를 정의하는 js코드를 아래에 첨부하였다. 

var domainAddr = 'https://tiles.osm.kr'; //map layer 도메인
var mwo = { //공항별 좌표(center 조정 목적)
	"RKSI":[37.4625, 126.439166],
	"RKPC":[33.5073, 126.4925],
};
var viewPos = {"mwo":mwo};

// 지도 객체 생성
map = L.map('map', {
	center: mwo.RKPC,
	attributionControl:false,
	keyboard: false,
	tap: false,
	doubleClickZoom:false,
	touchZoom: false,
	zoom: 11,
	controls: [],
	layers:[
			L.tileLayer(domainAddr + '/hot/{z}/{x}/{y}.png',
			{opacity: 0.6, maxZoom: 18, minZoom: 2,attribution: '&copy; 2019. AMO, <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'}),
	],
});

//선택 공항 변경 이벤트 핸들링
$("#stnCd").change(function() {
  moveStn(this.value);
});

//지도 센터 변경 메서드
 function moveStn(airport) {
  var airportlatlan = viewPos["mwo"][airport];
  latlan = new L.LatLng(airportlatlan[0], airportlatlan[1]);
  map.setMaxBounds(L.latLngBounds(L.latLng(airportlatlan[2], airportlatlan[3]), L.latLng(airportlatlan[4], airportlatlan[5])));
  map.panTo(latlan);
 }

 

 

각 위까지의 내용을 반영한 결과이다.

공항 선택 변경에 따른 표출 위치 수정 결과

 

 

 

2. 값 변환에 따른 polygon 컨트롤

 

아래 코드는 길지만, 논리는 간단하다.

각 활주로를 사각형 도형으로 표현하여 배열에 담고, 이 배열을 L.jpolygon함수를 통해 도형화 한다. 이때 도형의 스타일 정보를 변수화 하여 함께 전달함으로써 추후 수정에 용이하다.

 

그리고, 위에서 생성한 각 도형들을 다시 한 번 arr*라는 객체 배열에 저장한 후, 한개의 그룹 레이어로 묶어 fgLayer*에 저장하여 전체적인 그룹 레이어의 제어를 용이하게 하는 내용이다.

 

글로하는 설명 보다는 코드를 직접 보며 이해하는 것이 수월할 것이다.

var normalStyle = {color: "#000000", fillOpacity:0, weight: 2};
var fgLayerRKSI = null; //각 도형 그룹화 목적
var fgLayerRKPC = null; //각 도형 그룹화 목적
var arrRKSI = [];
var arrRKPC = [];

// 제주공항 활주로 모양 도형 생성 메서드
function rkpcDrawPolygon() {
		var RKPC_RWY1_1 = [[33.508006454356824 , 126.48206591606139], [33.50601151869789 , 126.4835786819458], [33.49878284648231 , 126.46933078765869], [33.501037398140774 , 126.46782875061035]];
		var RKPC_RWY1_2 = [[33.508006454356824 , 126.48206591606139], [33.50601151869789 , 126.4835786819458], [33.513552670570235 , 126.49858832359313], [33.51580683748349 , 126.49689316749571]];
		var RKPC_RWY2_1 = [[33.50951828079395 , 126.49413585662842], [33.51187989763739 , 126.49653911590575], [33.516531378661014 , 126.48859977722167], [33.51406254679761 , 126.48636817932129]];
		var RKPC_RWY2_2 = [[33.50951828079395 , 126.49413585662842], [33.51187989763739 , 126.49653911590575], [33.506584060991216 , 126.50460720062256], [33.50415073008585 , 126.50228977203368]];
		var RKPC_07_1 = [[33.49387988861095, 126.47319316864014], [33.486149113696094, 126.45873069763184], [33.49842497573976, 126.44993305206299], [33.50593995064492, 126.46379470825195]];
		var RKPC_07_2 = [[33.486149113696094, 126.45873069763184], [33.478435546380005, 126.44418239593506], [33.49076618727727, 126.43534183502196], [33.49842497573976, 126.44993305206299]];
		var RKPC_25_1 = [[33.508766843736105, 126.50220394134521], [33.516602937954254, 126.51666641235352], [33.528337861123596, 126.5079116821289], [33.52093216507163, 126.49310588836669]];
		var RKPC_25_2 = [[33.516602937954254, 126.51666641235352], [33.524366769630326, 126.53121471405028], [33.53574292298258, 126.52263164520264], [33.528337861123596, 126.5079116821289]];
		var RKPC_25_3 = [[33.524366769630326, 126.53121471405028], [33.53223722395908, 126.54567718505858], [33.54325465646098, 126.53735160827638], [33.53574292298258, 126.52263164520264]];
		var RKPC_13_1 = [[33.52123627618708, 126.49250507354735], [33.52973306619476, 126.47864341735838], [33.51814144844116, 126.46847248077393], [33.50962562841239, 126.48237705230713]];
		var RKPC_31_1 = [[33.49989223638244, 126.49855613708498], [33.49137462047746, 126.51297569274901], [33.50286246838008, 126.52336120605467], [33.51116426297622, 126.50928497314453]];
		var RKPC_31_2 = [[33.49137462047746, 126.51297569274901], [33.48296354734531, 126.52713775634766], [33.494309355869966, 126.53722286224364], [33.50286246838008, 126.52336120605467]];
		
		RKPC_07_Poly1 = L.polygon(RKPC_07_1, normalStyle);
		RKPC_07_Poly2 = L.polygon(RKPC_07_2, normalStyle);
		RKPC_25_Poly1 = L.polygon(RKPC_25_1, normalStyle);
		RKPC_25_Poly2 = L.polygon(RKPC_25_2, normalStyle);
		RKPC_25_Poly3 = L.polygon(RKPC_25_3, normalStyle);
		RKPC_13_Poly1 = L.polygon(RKPC_13_1, normalStyle);
		RKPC_31_Poly1 = L.polygon(RKPC_31_1, normalStyle);
		RKPC_31_Poly2 = L.polygon(RKPC_31_2, normalStyle);
		RKPC_RWY1_1Poly = L.polygon(RKPC_RWY1_1, normalStyle);
		RKPC_RWY1_2Poly = L.polygon(RKPC_RWY1_2, normalStyle);
		RKPC_RWY2_1Poly = L.polygon(RKPC_RWY2_1, normalStyle);
		RKPC_RWY2_2Poly = L.polygon(RKPC_RWY2_2, normalStyle);
		
		arrRKPC.push(RKPC_07_Poly1);
		arrRKPC.push(RKPC_07_Poly2);
		arrRKPC.push(RKPC_25_Poly1);
		arrRKPC.push(RKPC_25_Poly2);
		arrRKPC.push(RKPC_25_Poly3);
		arrRKPC.push(RKPC_13_Poly1);
		arrRKPC.push(RKPC_31_Poly1);
		arrRKPC.push(RKPC_31_Poly2);
		arrRKPC.push(RKPC_RWY1_1Poly);
		arrRKPC.push(RKPC_RWY1_2Poly);
		arrRKPC.push(RKPC_RWY2_1Poly);
		arrRKPC.push(RKPC_RWY2_2Poly);
		
		fgLayerRKPC = L.featureGroup(arrRKPC);
	}

// 인천공항 활주로 도형 그리는 메서드
function rksiDrawPolygon() {
		var RKSI_RWY1_1 = [[37.46956605937009 , 126.45160138607025], [37.47054104638537 , 126.45328044891357], [37.48417675891201 , 126.44102811813356], [37.48318066559576 , 126.43925786018372]];
		var RKSI_RWY1_2 = [[37.46956605937009 , 126.45160138607025], [37.47054104638537 , 126.45328044891357], [37.4571200206993 , 126.4656937122345], [37.45602136561186 , 126.46370887756349]];
		
		var RKSI_RWY2_1 = [[37.46729671720295 , 126.44765853881835], [37.46852293691052 , 126.44980430603026], [37.482086650369354 , 126.43727302551268], [37.48108201527433 , 126.43542766571046]];
		var RKSI_RWY2_2 = [[37.46729671720295 , 126.44765853881835], [37.46852293691052 , 126.44980430603026], [37.454999346389435 , 126.4617133140564], [37.45387510911383 , 126.45967483520506]];
		
		var RKSI_RWY3_1 = [[37.45615763378631 , 126.42836809158324], [37.45758843462739 , 126.43081426620483], [37.473287120498604 , 126.41674339771271], [37.47182681767756 , 126.41417384147644]];
		var RKSI_RWY3_2 = [[37.45615763378631 , 126.42836809158324], [37.45758843462739 , 126.43081426620483], [37.44401175772827 , 126.44270181655884], [37.4426999532675 , 126.44032001495361]];
		
		var RKSI_RWY4_1 = [[37.46977 , 126.41024], [37.47149 , 126.41328], [37.45567 , 126.42756], [37.45391 , 126.42440]];
		var RKSI_RWY4_2 = [[37.45385 , 126.42446], [37.45556 , 126.42759], [37.44207 , 126.43904], [37.44049 , 126.43634]];
		
		var RKSI_15L_1 = [[37.48820444, 126.4475000], [37.49903570226483, 126.43755641174316], [37.49117247529013, 126.42283726348876], [37.48000000, 126.4327000]];
		var RKSI_15L_2 = [[37.49117247529013, 126.42283726348876], [37.50318937824072, 126.4127254486084], [37.510883282244855, 126.42748832702635], [37.49903570226483, 126.43755641174316]];
		var RKSI_15L_3 = [[37.50318937824072, 126.4127254486084], [37.51530861996962, 126.40302658081053], [37.52276301861761, 126.4173173904419], [37.510883282244855, 126.42748832702635]];
		
		var RKSI_33R_1 = [[37.4605521492884, 126.47205591201782], [37.44890100809654, 126.48267745971678], [37.44082590699928, 126.46802186965942], [37.45234203104993, 126.45748615264893]];
		var RKSI_33R_2 = [[37.44890100809654, 126.48267745971678], [37.43775918459271, 126.49327754974367], [37.42930801035828, 126.47872924804686], [37.44082590699928, 126.46802186965942]];
		var RKSI_33R_3 = [[37.43775918459271, 126.49327754974367], [37.4264112189763, 126.50439262390135], [37.41775425682906, 126.48945808410645], [37.42930801035828, 126.47872924804686]];
		
		var RKSI_15R_1 = [[37.48604546225423, 126.44362449645996], [37.49706092281259, 126.4337968826294], [37.48905912679541, 126.4189052581787], [37.4777870579213, 126.42879724502563]];
		var RKSI_15R_2 = [[37.49706092281259, 126.4337968826294], [37.508908816149834, 126.42366886138916], [37.50111256913632, 126.40882015228271], [37.48905912679541, 126.4189052581787]];
		var RKSI_15R_3 = [[37.508908816149834, 126.42366886138916], [37.52085694188474, 126.41366958618163], [37.513130024958315, 126.39899253845213], [37.50111256913632, 126.40882015228271]];
		
		var RKSI_33L_1 = [[37.458380473321924, 126.46822571754456], [37.44675454728125, 126.4787721633911], [37.4385429144958, 126.46388053894043], [37.450076424826364, 126.45347356796263]];
		var RKSI_33L_2 = [[37.44675454728125, 126.4787721633911], [37.4356124041315, 126.48950099945068], [37.42699058621973, 126.47475957870483], [37.4385429144958, 126.46388053894043]];
		var RKSI_33L_3 = [[37.4356124041315, 126.48950099945068], [37.42433227607827, 126.50074481964111], [37.41560690265357, 126.48576736450195], [37.42699058621973, 126.47475957870483]];
		
		var RKSI_16L_1 = [[37.47691859535626, 126.42298221588135], [37.48858239699699, 126.412296295166], [37.48047752493705, 126.39770507812499], [37.46867621295971, 126.40821933746336]];
		var RKSI_16L_2 = [[37.48047752493705, 126.39770507812499], [37.49229399862877, 126.38731956481932], [37.50039758870085, 126.40203952789307], [37.48858239699699, 126.412296295166]];

		var RKSI_16L_3 = [[37.49229399862877, 126.38731956481932], [37.50410860317125, 126.37697696685791], [37.51227899400889, 126.39182567596434], [37.50039758870085, 126.40203952789307]];
		
		var RKSI_34R_1 = [[37.44753818297062, 126.44917130470276], [37.43568055683859, 126.45954608917235], [37.42750178888766, 126.44463300704956], [37.439301080178396, 126.43435478210449]];
		var RKSI_34R_2 = [[37.43568055683859, 126.45954608917235], [37.424093705168225, 126.47023200988768], [37.415675073573645, 126.45499706268309], [37.42750178888766, 126.44463300704956]];
		var RKSI_34R_3 = [[37.424093705168225, 126.47023200988768], [37.41260732074295, 126.48117542266846], [37.403812399623334, 126.46572589874268], [37.415675073573645, 126.45499706268309]];
		
		var RKSI_16R_1 = [[37.4747596176104, 126.41910671234], [37.4866076175446, 126.408536766052], [37.4783641764423, 126.393773072814], [37.466463270881, 126.404316582488]];
		var RKSI_16R_2 = [[37.4866076175446, 126.408536766052], [37.4982834365378, 126.3982329776], [37.4903268755923, 126.383571353149], [37.4783641764423, 126.393773072814]];
		var RKSI_16R_3 = [[37.4982834365378, 126.3982329776], [37.5101569250863, 126.388019972228], [37.5022460003495, 126.373500823975], [37.4903268755923, 126.383571353149]];
		
		var RKSI_34L_1 = [[37.4453665070041, 126.445341110229], [37.4335340960232, 126.455640792847], [37.4252187963842, 126.44049167633], [37.4370354739547, 126.430342197418]];
		var RKSI_34L_2 = [[37.4335340960232, 126.455640792847], [37.421946924707, 126.466455459594], [37.4133576494351, 126.451027393341], [37.4252187963842, 126.44049167633]];
		//var RKSI_34L_3 = [[37.421946924707, 126.466455459594], [37.4105283778448, 126.477527618408], [37.4016650454478, 126.462035179137], [37.4133576494351, 126.451027393341]];
		var RKSI_34L_3 = [[37.421946924707, 126.466455459594], [37.4105283778448, 126.477527618408], [37.4015050454478, 126.461605179137], [37.4133576494351, 126.451027393341]];
		
		RKSI_15L_Poly1 = L.polygon(RKSI_15L_1, normalStyle);
		RKSI_15L_Poly2 = L.polygon(RKSI_15L_2, normalStyle);
		RKSI_15L_Poly3 = L.polygon(RKSI_15L_3, normalStyle);
		RKSI_33R_Poly1 = L.polygon(RKSI_33R_1, normalStyle);
		RKSI_33R_Poly2 = L.polygon(RKSI_33R_2, normalStyle);
		RKSI_33R_Poly3 = L.polygon(RKSI_33R_3, normalStyle);
		RKSI_15R_Poly1 = L.polygon(RKSI_15R_1, normalStyle);
		RKSI_15R_Poly2 = L.polygon(RKSI_15R_2, normalStyle);
		RKSI_15R_Poly3 = L.polygon(RKSI_15R_3, normalStyle);
		RKSI_33L_Poly1 = L.polygon(RKSI_33L_1, normalStyle);
		RKSI_33L_Poly2 = L.polygon(RKSI_33L_2, normalStyle);
		RKSI_33L_Poly3 = L.polygon(RKSI_33L_3, normalStyle);
		RKSI_16L_Poly1 = L.polygon(RKSI_16L_1, normalStyle);
		RKSI_16L_Poly2 = L.polygon(RKSI_16L_2, normalStyle);
		RKSI_16L_Poly3 = L.polygon(RKSI_16L_3, normalStyle);
		RKSI_34R_Poly1 = L.polygon(RKSI_34R_1, normalStyle);
		RKSI_34R_Poly2 = L.polygon(RKSI_34R_2, normalStyle);
		RKSI_34R_Poly3 = L.polygon(RKSI_34R_3, normalStyle);
		RKSI_16R_Poly1 = L.polygon(RKSI_16R_1, normalStyle);
		RKSI_16R_Poly2 = L.polygon(RKSI_16R_2, normalStyle);
		RKSI_16R_Poly3 = L.polygon(RKSI_16R_3, normalStyle);
		RKSI_34L_Poly1 = L.polygon(RKSI_34L_1, normalStyle);
		RKSI_34L_Poly2 = L.polygon(RKSI_34L_2, normalStyle);
		RKSI_34L_Poly3 = L.polygon(RKSI_34L_3, normalStyle);
		
		RKSI_RWY1_1Poly = L.polygon(RKSI_RWY1_1, normalStyle);
		RKSI_RWY1_2Poly = L.polygon(RKSI_RWY1_2, normalStyle);
		RKSI_RWY2_1Poly = L.polygon(RKSI_RWY2_1, normalStyle);
		RKSI_RWY2_2Poly = L.polygon(RKSI_RWY2_2, normalStyle);
		RKSI_RWY3_1Poly = L.polygon(RKSI_RWY3_1, normalStyle);
		RKSI_RWY3_2Poly = L.polygon(RKSI_RWY3_2, normalStyle);
		RKSI_RWY4_1Poly = L.polygon(RKSI_RWY4_1, normalStyle);
		RKSI_RWY4_2Poly = L.polygon(RKSI_RWY4_2, normalStyle);
		
		arrRKSI.push(RKSI_15L_Poly1);
		arrRKSI.push(RKSI_15L_Poly2);
		arrRKSI.push(RKSI_15L_Poly3);
		arrRKSI.push(RKSI_33R_Poly1);
		arrRKSI.push(RKSI_33R_Poly2);
		arrRKSI.push(RKSI_33R_Poly3);
		arrRKSI.push(RKSI_15R_Poly1);
		arrRKSI.push(RKSI_15R_Poly2);
		arrRKSI.push(RKSI_15R_Poly3);
		arrRKSI.push(RKSI_33L_Poly1);
		arrRKSI.push(RKSI_33L_Poly2);
		arrRKSI.push(RKSI_33L_Poly3);
		arrRKSI.push(RKSI_16L_Poly1);
		arrRKSI.push(RKSI_16L_Poly2);
		arrRKSI.push(RKSI_16L_Poly3);
		arrRKSI.push(RKSI_34R_Poly1);
		arrRKSI.push(RKSI_34R_Poly2);
		arrRKSI.push(RKSI_34R_Poly3);
		arrRKSI.push(RKSI_16R_Poly1);
		arrRKSI.push(RKSI_16R_Poly2);
		arrRKSI.push(RKSI_16R_Poly3);
		arrRKSI.push(RKSI_34L_Poly1);
		arrRKSI.push(RKSI_34L_Poly2);
		arrRKSI.push(RKSI_34L_Poly3);
		
		arrRKSI.push(RKSI_RWY1_1Poly);
		arrRKSI.push(RKSI_RWY1_2Poly);
		arrRKSI.push(RKSI_RWY2_1Poly);
		arrRKSI.push(RKSI_RWY2_2Poly);
		arrRKSI.push(RKSI_RWY3_1Poly);
		arrRKSI.push(RKSI_RWY3_2Poly);
		arrRKSI.push(RKSI_RWY4_1Poly);
		arrRKSI.push(RKSI_RWY4_2Poly);
		
		fgLayerRKSI = L.featureGroup(arrRKSI);
	}

 

 

위에서 정의한 내용을 토대로 하여 각 선택 공항에 따라 polygon레이어가 추가 및 제거 되도록 조작하는 메서드를 아래와 같이 정의하였다.

// DOM로드 시, polygon생성 함수 동작
$(function(){ drwnPolygon(); })

$("#stnCd").change(function() {
  moveStn(this.value);
  drwnPolygon();
});

// 도형 생성 함수 호출 메서드
function drwnPolygon() {
    layerReset();
    if ($("#stnCd").val()=="RKSI") {
        rksiDrawPolygon();
        fgLayerRKSI.addTo(map);
    } else if ($("#stnCd").val()=="RKPC") {
        rkpcDrawPolygon();
        fgLayerRKPC.addTo(map);
    }
}

// polygon레이어 지우는 메서드
function layerReset() {
    if (fgLayerRKSI!=null) {
        map.removeLayer(fgLayerRKSI);
        fgLayerRKSI=null;
        arrRKSI = [];
    }
    if (fgLayerRKPC!=null) {
        map.removeLayer(fgLayerRKPC);
        fgLayerRKPC=null;
        arrRKPC = [];
    }
}

 

 

위 내용을 반영한 표출 결과는 아래와 같다.

 

 

 

반응형

'JavaScript' 카테고리의 다른 글

[지도API] Leaflet, 기준 좌표의 반경 polygon 생성  (0) 2025.01.10
[JS] 타임 슬라이더 구현(자동 스크롤)  (0) 2024.11.25
[JS] 부등식 검증 함수  (0) 2024.07.04
Object의 value로 index접근하는 방법  (0) 2022.11.24
[openLayers_proj] 좌표계 변환  (0) 2022.11.21

관련글

티스토리툴바