지도 좌표체계변환/ latlng > bbox / 이미지인코딩 사용관련 질문 드립니다
본문
(국가공간정보포털 - 오픈API) WMS/WFS 사용하려는데 풀리지않는 문제들이 있어서 질문드립니다.
상황은 이렇습니다.
현재 구글 맵 지도로 구현된 사이트가 있습니다.
국가공간정보포털 - 오픈API 에서 필요한 요청값중에 bbox 가 있는데
EPSG:5174 의 좌표체계 기준의 bbox 값을 요구합니다.
제가 처리할수있는건 구글맵 기준의 lat,lng 값입니다.
구글맵의 좌표체계가 W84? 에 EPSG:4326 으로 알고있는데 3가지가 풀리지않는것이 있습니다.
1. 좌표체계 변환 [EPSG:4326] > [EPSG:5174]
- proj4js 와 turf JS 라이브러리로 구글링을해서 시도해보았지만 버전상의 문제인지
propertie 나 function 을 찾을수없다는 에러문구만 출력되어서 계속 실패하였습니다.
- 테스트는
------------------
Proj4js.defs("EPSG:4326", "+proj=longlat +ellps=WGS84 +datum=WGS84 +no_defs");
Proj4js.defs("EPSG:5174", "+proj=tmerc +lat_0=38 +lon_0=127.5 +k=0.9996 +x_0=1000000 +y_0=2000000 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs");
// Transform the coordinates from EPSG:3857 to EPSG:5174
var point = proj4(source, target, [lng, lat]); // 변환
//var point = new Proj4js.Point(lng, lat);
var bbox = Proj4js.transform(source, target, point);
------------------
이런식으로...했습죠....
2. PNU나 구글맵의 현재위치의 lng, lat 값으로 bbox(바운딩박스) 값 추출
- 이것 역시 proj4js 와 turf JS 라이브러리로 테스트해봤지만 실패했습니다.
- turf 는 6버전입니다.
- https://unpkg.com/@turf/turf@6/turf.min.js
- https://cdn.jsdelivr.net/npm/@turf/turf@5/turf.min.js <-- 5버전으로도 테스트해봤습니다.
3. 바이너리 또는 Base64 의 이미지코드를 이미지로 변환해서 다운로드 또는 웹에서 사용
- API와 관련없는 질문이긴한데 API에서 Response 된 Body 값이 깨져서 오는데
아무래도 png 이미지의 바이너리코드나 Base64 이미지코드 같은데
헤더는 "content-language: ko-KR\r\ncontent-type: image/png;charset=UTF-8\r\n"
이 값이 들어있습니다. 이걸 이미지로 어떻게 사용해야하는지 전혀 모르겠어요....
�PNG < - 대충 이런식이고 IHDR 과 IDATx 이런값이 보이며, ����� 이런식의 값들이 대부분입니다.
아 API 요청과 받는건 자바스크립트로 했습니다.
아시는분중에 예시나 팁이될만한 링크가 있을까요??
꼭 해결하고싶어요....도와주세요...
사실 2번이 핵심입니다....
3번은 예제코드에서 bbox값이 있어서 그걸로 png 이미지코드를 받은것이고
2번이 해결안되면 무의미합니다.
답변 3
비슷한 솔루션을 구현했던 개발자입니다.
보아하니 헤딩하는게 힘들어 보이는 것 같아 지나가며 조언을 하나 남깁니다.
국가정보 WMS/WFS의 요청하는 api 호출때 xml(json) 지도를 구현하는 api정보사이트가 하나 더있을겁니다.
vworld 인데요
국토부에서 서비스하는 내용이기때문에 국가정보와도 일치하는 항목이 있을겁니다. (뭐 메뉴얼에 나와있을테지만요)
그부분에서 구글지도외 네이버/카카오 지도에 표기하는 변환 api도 같이 제공할겁니다.
관련부분을 검색하거나 구글링해보셔요(물론 영문으로 되어있는 경우도 많을겁니다.)
관련 앱을 만들면서 찾은 내용이기때문에 분명도움이 되실겁니다.
ps. 저같은 WMS/WFS는 도로교통부 데이터중 지적도 및 검색등에 사용했답니다. 그리고 지도에 마킹하는 법까지도요 도움이 되셨음 합니다.
기본지도는 vworld지도를 사용했습니다. 말씀하신것 처럼 polygon형태의 좌표값을 제공하며 해당좌표를 연결하여 건물 지도의 지적도를 이용하여 처리했습니다. 좌표정보는 검색api에서 제공하는값을 지도에 맞게 파싱하시면될것 같아요 그리고 스크립트로 좌표에서 그림을 그리는 형태이지요
말씀하신것 처럼 각 지도(네이버,카카오,구글)에서 영역이 안맞는경우가 생길수 있기때문에 공공데이터와 일치하는 vworld 지도를 사용하였지요 그러니 거의 오차범위 없이 그릴수 있었습니다.
네 해당 부분 보시면 좌표 변환하시는데 사용가능하실테고 영역그릴때는 처음시작점과 끝점이 같아야 연결이 자연스럽게 될것이에요(시계방향으로 점을 연결하는 선을 긋는다고 생각하세요) 떨어져있음 제대로 연결이 안될거에요 문자열 편집하시면 도움이 되실것 같으세요