Daddy Makers: 쉽게 개발하는 맵박스 기반 실시간 3차원 지도 웹 서비스 개발

2020년 2월 29일 토요일

쉽게 개발하는 맵박스 기반 실시간 3차원 지도 웹 서비스 개발

이 글은 매우 간단하게 3차원 동적 지도 웹 서비스 개발을 지원하는 맵박스(mapbox) 사용방법을 간략히 설명한다. 맵박스는 맞춤형 디자인 맵을 위한 오픈 소스 매핑 플랫폼이다. 맵박스를 이용해 동적 지도, 3차원 지도, 네이게이션, 증강현실, 게임 등 다양한 것을 쉽게 만들 수 있다. 맵박스는 어느 정도 이하 서비스 요청 사용자수는 무료이다(참고-과금). 정말 맵 서비스 개발에 시간이 없다면 맵박스는 정말 좋은 대안이다.

맵 박스 소개

Build better buildings with indoor maps

Realtime data in mapbox

Maps, IoT, and asset tracking in realtime

맵박스 개발 방법 소개
mapbox 사용 방법은 다음과 같이 간단하다.

이제 폴더를 만들고 index.html 파일을 만들어 아래와 같이 코딩해 본다. mapbox 사용방법은 매우 단순하고 직관적이다. accessToken 에 mapbox API키값을 넣고, <div id='map'/> 에 해당하는 mapboxgl.Map 객체를 생성해 map 에 할당하면 된다.

<html>
<head>
<title>First mapbox</title>
<script src='https://api.mapbox.com/mapbox-gl-js/v1.8.0/mapbox-gl.js'></script>

mapboxgl.accessToken = 'pk.eyJ1IjoibWFjOTk5IiwiYSI6ImNrNzdyOXc5cjBhdWozbG9kajlwNDk3NGwifQ.2Z3kIeNZbwtVaKVl5NldaA';

var map = new mapboxgl.Map({

container: 'map',

style: 'mapbox://styles/mapbox/streets-v11'

});

</script>
</body>
</html>

그럼 mapbox 기본 지도를 확인할 수 있다. 맵박스는 다음같은 다양한 예제를 제공한다.

Javascript CDN tutorials

맵박스 기반 3D 빌딩 예제 개발해 보기
맵박스에서 제공하는 예제로 3D 빌딩 맵 표시 예제를 개발해 본다. 폴더를 만들고 index.html 파일을 생성한다. 그 안에 아래 코드를 붙여 넣기한다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Display buildings in 3D</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<script src="https://api.mapbox.com/mapbox-gl-js/v1.8.1/mapbox-gl.js"></script>
<link href="https://api.mapbox.com/mapbox-gl-js/v1.8.1/mapbox-gl.css" rel="stylesheet" />
<style>
body { margin: 0; padding: 0; }
#map { position: absolute; top: 0; bottom: 0; width: 100%; }
</style>
</head>
<body>
<div id="map"></div>
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoibWFjOTk5IiwiYSI6ImNrNzdyOXc5cjBhdWozbG9kajlwNDk3NGwifQ.2Z3kIeNZbwtVaKVl5NldaA';
var map = new mapboxgl.Map({
style: 'mapbox://styles/mapbox/light-v10',
center: [-74.0066, 40.7135], zoom: 15.5, pitch: 45,
bearing: -17.6, container: 'map', antialias: true
});

// map 이 load 되면, map layers에 OpenStreetMap 지도 데이터로 부터 건물 높이를 포함한
// mapbox-streets vector 소스를 레이어로 추가한다.
map.on('load', function() {
// Insert the layer beneath any symbol layer.
var layers = map.getStyle().layers;

var labelLayerId; // 'symbol' type 레이어 ID를 획득한다
for (var i = 0; i < layers.length; i++) {
if (layers[i].type === 'symbol' && layers[i].layout['text-field']) {
labelLayerId = layers[i].id;
break;
}
}

// 3차원 건물 레이어를 추가한다.
map.addLayer(
{
'id': '3d-buildings', 'source': 'composite', 'source-layer': 'building',
'filter': ['==', 'extrude', 'true'], 'type': 'fill-extrusion',
'minzoom': 15,
'paint': {
'fill-extrusion-color': '#aaa',

// zoom 할 때 건물이 부드럽게 표시되도록 보간법(interpolate)을 사용
'fill-extrusion-height': [
'interpolate', ['linear'], ['zoom'],
15, 0, 15.05,
['get', 'height']
],
'fill-extrusion-base': [
'interpolate', ['linear'], ['zoom'],
15, 0, 15.05,
['get', 'min_height']
],
'fill-extrusion-opacity': 0.6
}
},
labelLayerId
);
});
</script>
</body>
</html>

파이썬 HTTP 서버를 실행한 후(파이선 설치), 크롬에서 localhost:9000 을 접속하면 결과를 확인할 수 있다.

서버 실행

실행 결과

실시간 데이터 기반 지도 개발

일반적으로 실시간 데이터를 가져오는 방법은 다양하나, 기본적으로 publication-subscriber 구조로 개발된다. 센서 데이터의 경우 데이터 토픽을 발생하는 서버와 이를 구독하는 서버가 존재한다. 보통 websocket, MQTT와 같은 프로토콜, PubNub 와 같은 메시징 서버 등을 사용해 실시간 데이터를 얻어 지도에 반영할 수 있다.

차량공유 맵 서비스 예시

다음은 websocket, MQTT, PubNub 를 사용한 맵박스 예제들이다.

이중 IBM의 Geofencing with IoT and Mapbox 예제는 IoT 연결 미들웨어로 많이 사용되는 오픈소스 node-red(노드레드. 사용법)를 통해 IoT 토픽 메시지를 받아 mapbox에 실시간 센서 데이터를 가시화해주는 방법을 소개하고 있다.

Geofencing with IoT and Mapbox 예제 아키텍처(IBM)

레퍼런스

다음은 mapbox를 이용한 다양한 예제이다.

댓글 4개:

manzoku2020년 8월 7일 오전 9:23
국내에 맵박스 관련 개발자들이 많이 있나요? 다들 구글맵이며 네이버 카카오 api는 많이 다루던데 맵박스 개발 가능합니다! 하시는 분 거의 못본듯 ㅠ
답글삭제
답글
맵박스유저2022년 2월 3일 오후 11:21
https://www.tozi.world/console 이 사이트경우 OpenStreetMap 빌딩 데이터와 자체 빌딩 레이어를 가지고 있는거 같은데 국내에 이런 빌딩 3D 데이터를 제공하는 곳이 있을까요? 기본 맵박스 빌딩을 쓰려니까 빈 빌딩이 너무 많이 보여서요
답글삭제
답글