본문 바로가기

웹/오픈레이어스3

오픈레이어스 카카오맵(타일) 사용하기 상황 현재 오픈레이어스 6.5.0 버전을 사용 중. 오픈레이어스를 사용해 카카오맵을 연동하여 구현하고자 한다. 구글링하여 찾아 본 방법은 현재 버전과 맞지 않는 듯 하여 이리저리 수정한 결과 연동에 성공. - 찾아본 방식은 4버전대 까지 지원하는 듯 하다. 기본적으로는 카카오에서 제공해주는 API를 사용하여 구축하는게 가장 best함. 아래는 구현에 사용된 소스이다. kakaoMapType = { BASE: "base", SATELLITE: "satellite", HYBRID: "hybrid" } kakaoTileGrid = new ol.tilegrid.TileGrid({ extent : [(-30000-524288), (-60000-524288), (494288+524288), (988576+52428.. 2023. 1. 19.
오픈레이어스 버전 확인 오픈레이어스의 버전을 확인하는 방법. js파일의 주석으로 현재 버전이 명시되어 있지 않기 때문에 별도의 코드를 통해 확인. 개발자 도구를 열어 콘솔에 다음의 스크립트를 실행 let version; try { let layer = new ol.layer.Vector({ style: new ol.style.Circle({ radius: 30 }) }); } catch(err) { let parts = err.message.split("/v"); parts = parts[parts.length - 1].split("/"); version = parts[0]; } console.log(version); 다음은 실제 콘솔창에서 실행한 결과입니다. 2022. 2. 15.
오픈레이어스 이미지 저장 및 프린트 오픈레이어스의 이미지 저장 및 프린트를 하기 위해서는 별도의 코드 구현이 필요하다. 구글 검색을 해보면 여러 케이스가 나오지만 제대로 작동되지 않는 코드가 많이 있었다. 공식 홈페이지에서 정상작동하는 코드를 확인할 수 있다. 현재시간 기준으로 6.5.0 버전에서 정상작동하는 코드를 정리하였다. - 이미지 저장 map.once('rendercomplete', function(event) { const mapCanvas = document.createElement("canvas"); const size = map.getSize(); mapCanvas.width = size[0]; mapCanvas.height = size[1]; const mapContext = mapCanvas.getContext("2d".. 2022. 2. 15.