2024. 4. 11. 20:44ㆍToy Project
지도 상에 콜라주된 이미지를 덮어씌우는 것은 쉬운 문제가 아니었다.
일단, folium 지도 자체에 이미지를 올려놓는 것은 가능하나, 복잡한 멀티 폴리곤 형태의 이미지를 넣을 수 없었다.
folium 내부적으로 Leaflet.js를 사용하기 때문에 leaflet.js 자체를 뜯어고치면 구현이 가능은 할 것 같았다.
하지만 js로 개발을 해야하기 때문에 일관성과 연속성이 떨어질 것 같아 제외하려 한다.
Leaflet - a JavaScript library for interactive maps (leafletjs.com)
Leaflet — an open-source JavaScript library for interactive maps
Leaflet is a modern, lightweight open-source JavaScript library for mobile-friendly interactive maps.
leafletjs.com
다른 방법이 없을까 고민하던 중, 예전에 통계정보를 지도상에 BI하기 위해서 사용했던 Mapbox가 생각이 났다.
Mapbox | Maps, Navigation, Search, and Data
Mapbox | Maps, Navigation, Search, and Data
APIs and SDKs for AI-powered maps, location search, turn-by-turn navigation, and geospatial data in mobile or web apps. Get started for free.
www.mapbox.com
서비스로 제작하기에 일정 사용량 마다 요금을 내야하지만 prototype 개발하는데 있어서 도움이 될 것 같다.
Display multiple shapes on a map | Maps SDK v6 | iOS | Mapbox
Display multiple shapes on a map | Maps SDK v6 | iOS
Display multiple shapes from a single source of data.
docs.mapbox.com
위와 같이 geojson 같은 영역을 지도에 표시할 수 있고, 이미지를 충분히 표현할 수 있어보인다.
mapbox를 사용하기 위해서는 mapbox에서 계정 생성 후 access token을 발급받아서 코드 상에 입력해야 사용가능하다.
import base64
# 이미지 파일 경로
image_path = input(str("이미지 경로 입력"))
access_token = input(str("엑세스 토큰 입력"))
# 이미지를 Base64로 인코딩
with open(image_path, "rb") as image_file:
encoded_string = base64.b64encode(image_file.read()).decode()
html_code = f"""
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Mapbox 이미지 오버레이 예제</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<link href="https://api.mapbox.com/mapbox-gl-js/v2.3.1/mapbox-gl.css" rel="stylesheet">
<script src="https://api.mapbox.com/mapbox-gl-js/v2.3.1/mapbox-gl.js"></script>
<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 = {access_token}; // Mapbox 액세스 토큰 설정
var map = new mapboxgl.Map({{
container: 'map', // 지도를 표시할 요소의 ID
style: 'mapbox://styles/mapbox/streets-v11', // 지도 스타일
center: [128.5918, 35.8888], // 지도의 초기 중심점 [경도, 위도]
zoom: 10 // 지도의 초기 줌 레벨
}});
map.on('load', function() {{
// 지도가 로드된 후 이미지 소스와 레이어를 추가
map.addSource('yourImage', {{
type: 'image',
url: 'data:image/jpg;base64,{encoded_string}',
coordinates: [
[128.5918, 37.8888], // 좌상단 좌표
[130.5918, 37.8888], // 우상단 좌표
[130.5918, 35.8888], // 우하단 좌표
[128.5918, 35.8888] // 좌하단 좌표
]
}});
map.addLayer({{
id: 'yourImageOverlay',
source: 'yourImage',
type: 'raster',
paint: {{
'raster-opacity': 0.85 // 이미지의 투명도 설정
}}
}});
}});
</script>
</body>
</html>
"""
# HTML 파일로 저장하는 코드
html_filename = "mapbox_image_overlay_example.html"
with open(html_filename, 'w', encoding='UTF-8') as file:
file.write(html_code)
위 결과물로 아래와 같은 html 소스가 생성되었다.
지도상에 콜라주 이미지를 표현하는 것까지는 성공했으니 geojson을 적용하기 위해
이미지 좌표 coordinates 부분을 multi-polygon 좌표로 변경하여 실행했으나.... 적용이 되지 않았다.
mapbox 공식문서를 확인해보니 map.addLayer에서 type이 image이면 4개의 좌표 만을 입력으로 받아 4각형 이미지를 나타내는 것으로 확인했다.
map.on('load', function () {
map.addSource('multipolygon', {
'type': 'geojson',
'data': {
'type': 'Feature',
'properties': {},
'geometry': {
'type': 'MultiPolygon',
'coordinates': [
// 여기에 멀티 폴리곤 좌표 배열 입력
// 예: [[[ [경도, 위도], [경도, 위도], ... ]], ...]
]
}
}
});
map.addLayer({
'id': 'multipolygon-layer',
'type': 'fill',
'source': 'multipolygon',
'layout': {},
'paint': {
'fill-color': '#888888', // 채우기 색
'fill-opacity': 0.5 // 투명도
}
});
});위와 같이 멀티폴리곤을 생성할 수 있는 것 까지는 확인했으나, 해당 type에 image가 적용이 되는지도 테스트 해봐야한다.
만약 적용이 된다고 하더라도 이미지가 사각형이므로 적용이 안될 것으로 보인다
다음에 이를 적용해보고 지도 상의 지역 경계면 좌표 multi-polygon 형태로 이미지를 삽입하는 방식을 시도해보려고 한다.
'Toy Project' 카테고리의 다른 글
| 서비스 데모 준비를 위한 데이터 수집 (1) (0) | 2024.05.05 |
|---|---|
| 토이 프로젝트 피보팅 (0) | 2024.04.29 |
| 지도 상에 멀티 폴리곤 형태로 이미지를 삽입하는 방법(절망편) (0) | 2024.04.14 |
| 위치 기반 서비스 개발 메모 (0) | 2024.04.10 |
| 위치기반 서비스 앱 런칭 아이디어 (0) | 2024.04.09 |