안녕하세요 캡틴개구리입니다.
이번시간은 Openlayers3(OL3)와 Leaflet에 Static Image를 올려보겠습니다.
그전에 결과화면부터 보겠습니다.
> 서비스바로가기
Openlayers3 와 Leaflet 라이브러리를 받을 수 있는 곳은 아래와 같습니다.
OpenLayers3 : https://openlayers.org/
Leaflet : http://leafletjs.com/
활용 좌표계 : EPSG 4326
1. Openlayers3 및 Leaflet Image Overlay(Static Image)
이번에는 소스가 그렇게 길지 않고 간단하여 OL3와 Leaflet을 함께 진행해보도록 하겠습니다.
OL3 활용 라이브러리 : ol.Map, ol.layer.Tile, ol.layer.Image, ol.source.ImageStatic, ol.View
Leaflet 활용 라이브러리 : L.map, L.tileLayer, L.imageOverlay
<script></script>부분입니다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 | <script type="text/javascript"> //openlayers3 var extent = [126.924628, 37.518308, 126.926628, 37.520308] // image size is 128x128 px var map = new ol.Map({ layers: [ new ol.layer.Tile({ source: new ol.source.OSM() }), new ol.layer.Image({ source: new ol.source.ImageStatic({ url: '/images/common/example5OL.png', crossOrigin: '', projection: 'EPSG:4326', imageExtent: extent }) }) ], target: 'map', view: new ol.View({ projection : 'EPSG:4326', center: extent, zoom: 16 }) }); //leaflet 지도 var leafletMap = L.map('leafletMap').setView([37.518308, 126.924628],16) L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(leafletMap); var imageUrl = '/images/common/example5Leaflet.png', imageBounds = [[37.518308, 126.924628], [37.520308, 126.926628]]; L.imageOverlay(imageUrl, imageBounds).addTo(leafletMap); </script> | cs |
OL3와 Leaflet에서 Image를 Overlay함에 있어서 가장 중요한 부분은 좌표계였던것 같습니다. 그리고
OL3 Extent는 경도 위도 순으로 [minX, minY, maxX, maxY] 넣어주시면 됩니다.
Leaflet imageBounds는 위도 경도 순으로 [[minY,minX],[maxY,maxX]] 넣어주시면 됩니다.
저는 프로그웍그 로고를 넣었습니다 ㅎㅎㅎ
<body></body>부분입니다.
1 2 | <div id="map"></div> <div id="leafletMap"></div> | cs |
마지막으로 이 기능은 어디에 사용할까요? 혹시 현재 지도 위에 옛날 고지도 또는 일부 지역의 위성영상 등을 오버레이 할 때 사용합니다.
결과화면은 아래와 같습니다.
> 서비스바로가기
'꿀팁 - OpenLayers, Leaflet' 카테고리의 다른 글
| OpenLayers와 Leaflet에서 User Control 등록하기(거리재기) (0) | 2019.01.11 |
|---|---|
| OpenLayers와 Leaflet에서 Feature 이벤트 연동 (2) | 2018.11.29 |
| OpenLayers와 Leaflet에서 Feature Clustering (0) | 2018.11.22 |
| OpenLayers 와 Leaflet에서 WFS 이용하기 (0) | 2018.11.15 |
| OpenLayers 와 Leaflet에서 WMS 이용하기 (0) | 2018.11.15 |