반응형
나는 예제가 많이 제공되고있는 카카오의 지도 API 를 활용하였다.
지도의 생성및 활용법은 http://apis.map.kakao.com/web/ 에서 가이드를 따라하면된다.
여기서는 이전 게시글에서 활용및 수정하였던 대한민국행정구역 SHP 파일을 사용한다.
FTP 경로에 이전게시글에서 만든 geoJSON 파일과 index.html, mapcontrol.js 를 업로드한다.
각 소스코드 파일들을 아래와 같이 작성한다.
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>지도 생성하기</title>
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=API Key"></script>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="mapcontrol.js"></script>
</head>
<body>
<div class="rightcolumn" id="map">
<script>
var mapContainer = document.getElementById('map'),
mapOption = {
center: new kakao.maps.LatLng(33.450701, 126.570667), // 지도의 중심좌표
level: 12 // 지도의 확대 레벨
};
var map = new kakao.maps.Map(mapContainer, mapOption);
Initialization(map);
DrawPolygon();
</script>
</div>
</body>
</html>mapcontrol.js
var map;
function Initialization(_map)
{
map = _map;
}
function DrawPolygon()
{
$.getJSON("geo.json", function(geojson)
{
var data = geojson.features;
var name = ''; //행정구 명
var code = '';
$.each(data, function(index, val)
{
name = val.properties.SIG_KOR_NM;
code = val.properties.SIG_CD;
if(val.geometry.type == "MultiPolygon")
{
displayArea(name, code, val.geometry.coordinates, true);
}
else
{
displayArea(name, code, val.geometry.coordinates, false);
}
});
});
}
function makePolygon(coordinates)
{
var polygonPath = [];
$.each(coordinates[0], function(index, coordinate)
{
polygonPath.push(new kakao.maps.LatLng(coordinate[1], coordinate[0]));
});
return new kakao.maps.Polygon({
path:polygonPath,
strokeWeight: 1,
strokeColor: '#004c80',
strokeOpacity: 0.8,
strokeStyle: 'longdash',
fillColor: '#A2FF99',
fillOpacity: 0.2
});
}
function makeMultiPolygon(coordinates)
{
var polygonPath = [];
$.each(coordinates, function(index, val2)
{
var coordinates2 = [];
$.each(val2[0], function(index2, coordinate)
{
coordinates2.push(new kakao.maps.LatLng(coordinate[1], coordinate[0]));
});
polygonPath.push(coordinates2);
});
return new kakao.maps.Polygon({
path:polygonPath,
strokeWeight: 1,
strokeColor: '#004c80',
strokeOpacity: 0.8,
strokeStyle: 'longdash',
fillColor: '#A2FF99',
fillOpacity: 0.2
});
}
// params : 행정구 명, 도로명 코드, 좌표, 멀티폴리곤 유무
function displayArea(name, code, coordinates, multi)
{
var polygon;
if(multi)
{
polygon = makeMultiPolygon(coordinates);
}
else
{
polygon = makePolygon(coordinates);
}
polygon.setMap(map);
}polygon 함수가 두개가 있는 이유는 geoJSON 파일에 멀티폴리곤 타입이 있기때문이다.
multipolygon 함수를 사용하지않으면 섬과 같은 지역을 표시할 수 없다.
전라남도 고흥군과 여수를 예로 들면 아래 사진과 같다.
이처럼 몆몆지역은 여러 섬들로 이루어져있기때문에 멀티폴리곤 타입으로 표현된다.
그렇기 때문에 멀티폴리곤 함수를 사용하지않으면 해당지역은 폴리곤이 생성되지않는다.
또한 각 좌표들을 하나의 배열로 묶어 사용하지않으면 섬들은 개별적으로 동작하게된다.
묶어서 사용하게되면 아래 사진처럼 서로 떨어져있는 폴리곤이라도 하나로 취급된다.
아래의 사진은 위의 코드를 실행했을때 보이는 결과물이다.
반응형
'프로그래밍 > JavaScript' 카테고리의 다른 글
| [ES6] JavaScript 문자열 ( string ) (0) | 2020.10.20 |
|---|---|
| [ES6] JavaScript 스코프 ( scope ) (1) | 2020.10.20 |
| JavaScript 클로저 ( Closer ) (0) | 2020.10.07 |
| JavaScript 모듈 ( Module ) (0) | 2020.10.06 |
| JavaScript 객체 ( Object ) (0) | 2020.10.06 |
