[OpenLayers] OSM 지도 추가 및 이미지 업로드

OpenLayers
오픈레이어스(OpenLayers)는 오픈 소스 웹 브라우저에서 지도데이터를 표시하기위한 자바스크립트 라이브러리
구글맵 또는 Bing맵 과 같은 웹 기반의 지리 응용 프로그램에 API를 제공


주요 사이트

• openlayers API doc
  https://openlayers.org/en/latest/apidoc/

자세한 옵션 설명 없이 내가 한 프로젝트에서 예제 코드만 간단히 올리는 거라 
필요한 부분은 검색이 필요함니도! 

1. openlaysers cdn 추가

https://openlayers.org/download/
html header 부분에 추가하면 된다.

<script src="https://cdn.jsdelivr.net/npm/ol@v8.1.0/dist/ol.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol@v8.1.0/ol.css">

나는 어떻게 했는지 잘 기억은 안나는데 프로젝트에서 사용하는 오픈레이어스 버전에 맞춰서 하느라 직접 파일을 다운로드 하여 resources/static 폴더 안에 직접 파일 넣어줬던거같아 ~~~

2. OSM Map 추가 (JavaScript)

let map; 
let osmLayer;
let imageLayer;
let extent;
document.addEventListener('DOMContentLoaded', (event) => {    
    osmLayer = new ol.layer.Tile({
        source: new ol.source.OSM({
            wrapX : false,
        }),
    });

    map = new ol.Map({
        target: 'map',
        layers : [osmLayer],
        view: new ol.View({
            projection : "EPSG:4326", //지도에서 사용할 좌표계
            center : [126.647016386019, 37.2427073541025], //중심좌표
            zoom: 3, //확대 zoom 레벨
            minZoom : 3, //최소 zoom 레벨. 숫자가 클수록 가까움
            extent: ol.proj.transformExtent([-180, -90, 180, 90], 'EPSG:4326', 'EPSG:3857') 
           //이건 좌표 변환하기 위해 proj 사용했는데 내가 필요해서 설정한거라 그냥 좌표값 써도 됨
           //(minX, minY, maxX, maxY) 순서로 넣으면 됨
        }),
    });

});

3. 지도 위에 이미지 업로드

imageLayer = new ol.layer.Image({ //png파일, jpeg파일 
            source : new ol.source.ImageStatic({
                url : imgLink, 
                //이미지 파일이 있는 위치의 url 입력해도 됨. 난 url을 서버단에서 보내주는 방식으로 구현해서 변수로 저장함 
                //예를 들어 "localhost:70/img/img1.png" 이런식으로 넣어도 됨
                wrapX: false,
                crossOrigin: 'anonymous',
                projection : "EPSG:4326",
                imageExtent : extent //이미지 extent값 
            }),
        });

        map.addLayer(imageLayer); //지도 위에 이미지 추가 
        map.getView().setCenter(ol.extent.getCenter(extent)); //현재 보이는 지도 뷰어의 위치를 이미지의 센터로 이동
        map.getView().fit(extent, map.getSize()); //현재 뷰어를 이미지 크기에 맞춤
        osmLayer.setOpacity(0.6); //OSM 지도의 투명도 

• 여기서 url 입력 시 주의할 사항은 로컬에 있는 파일을 가져와서 업로드할 때 업로드가 안될 수 있음
• 이럴 때는 웹서버(ex : nginx)를 통하여 이미지를 불러와서 url을 적어야함

nginx를 예로 들어 설명하자면
1) nginx 설치
2) C:/nginx/conf/nginx.conf 파일 열기
3) 서버 등록

server { 
        listen        70;
        
        proxy_busy_buffers_size   512k;
        proxy_buffers   4 512k;
        proxy_buffer_size   256k;

        location /img/ { //접근할 url명 설정
            alias  E:/img/; //이미지가 있는 로컬의 폴더 경로
            proxy_hide_header Access-Control-Allow-Origin;
            add_header 'Access-Control-Allow-Origin' '*';
            autoindex      on;
        }

    }

4) 웹브라우저에서 이미지 파일 접근 가능한지 확인
ex) http://ip주소:포트번호/img/img1.png
다운로드가 되거나 파일이 웹브라우저에서 확인이 가능하면 성공
만약 안된다면 설정 파일의 오타나 이런걸 잘 확인해봐야함

4. 지도 위에 tile map 업로드

let tileLayer = new ol.layer.Tile({
            source: new ol.source.XYZ({
                url: `/localfile${url}{z}/{x}/{y}.png`,
            }),
            extent: extent,
            crossOrigin: "anonymous",
        });

5. 레이어에 아이디 할당

여러개의 레이어를 추가하여 체크박스 생성해서 보였다가 감췄다가 하기 위해 각 레이어마다 아이디값을 할당할 수 있다.

tileLayer.set("id", `tilemap_${id}`);

6. 레이어 삭제

map.removeLayer(map.getLayer(`tilemap_${id}`));

map에 추가된 레이어 목록은 남기고 지도에서 안보이게만 하려면

layer.setVisible(!layer.getVisible());

이런식으로 쓰면 된다