gis-map 정적 예제

OpenLayers 지도 엔진(@gtp/gis-map)을 JSP·정적 화면에 붙이는 예제 모음입니다. 서버 프로그램(Spring·Node)이 없어도 열리고, 데이터는 전부 가상 샘플이며 우리 서버를 부르지 않습니다(바깥으로 나가는 것은 배경 지도 타일뿐).

예제

create.html — UMD (a) GisMap.create. 엔진이 지도를 만듭니다. 그리기·측정·검색·필지 정보·영역 분석·큰 데이터(묶음)·출력(PNG·PDF)·바람(가상).
attach.html — UMD (b) GisMap.attach. 업무 화면이 이미 만든 ol 지도에 엔진을 붙였다 뗍니다. checkOl 결과와 붙이기 전후 호스트 지도 상태 기록을 보여 줍니다.
map.jsp — create.html과 같은 화면. 톰캣 같은 JSP 컨테이너에서 확인용(JSTL·EL 없음, 지시자 한 줄만). 정적 서버로 열면 JSP가 실행되지 않으니 create.html을 쓰세요.

열기

http(톰캣 정적 폴더·npx http-server·nginx)로 여는 것을 권장합니다. 실제 배치와 같습니다.
file:// 더블클릭도 동작합니다(지도·도구·가짜 데이터·PNG/PDF 저장). 단, 배경지도를 VWorld로 바꿨다면 도메인 키라 동작하지 않습니다.

복사해서 쓰기

gis-demo/                폴더째 복사 (JSP 서버라면 webapp/gis-demo/ — WEB-INF 밖)
  index.html create.html attach.html map.jsp
  demo-data.js           설정 두 줄 + 두 예제가 같이 쓰는 화면 조각
  demo.css               예제 페이지 모양(지도 모듈 CSS 아님)
  lib/
    gis-map.umd.js gis-map.css                  (a) 번들 — ol 9.2.4 포함
    gis-map.attach.umd.js gis-map.attach.css    (b) 번들 — ol 제외, 페이지의 전역 ol 사용
    *.THIRD-PARTY-NOTICES.txt                   번들에 들어간 서드파티 라이선스 고지
    ol/ol.js ol.css LICENSE.md                  attach 예제의 "업무 화면이 원래 쓰던 ol" 자리

경로가 전부 상대 경로라 컨텍스트 경로와 무관합니다. 스프링 DispatcherServlet이 /에 매핑된 앱이면 <mvc:resources mapping="/gis-demo/**" location="/gis-demo/"/> 같은 정적 자원 설정이 필요하고, 로그인 필터가 있으면 이 경로를 허용 목록에 넣으세요(README.txt).

배경지도 바꾸기

demo-data.js 맨 위 두 줄입니다.

var DEMO_BASEMAP = 'osm';   // 'osm'(키 없음, 기본) | 'vworld'(이 서버 도메인 키) | 'none'(폐쇄망, 타일 요청 0)
var VWORLD_KEY = '';        // 'vworld'일 때만. 키를 파일에 적어 커밋하지 마세요

attach 호환(ol 버전)

attach.html은 페이지의 전역 ol을 쓰므로 lib/ol/ol.js·ol.css를 업무 화면이 쓰는 판으로 바꿔 끼워 확인할 수 있습니다. 시험 결과(COMPATIBILITY.md 요약):

ol	6.15.1	7.0.0	7.1.0	7.5.2	8.2.0	9.2.4	10.10.0
checkOl	막음	막음	통과	통과	통과	통과	통과

7.1 미만은 기능 문제가 아니라 지원 범위 결정으로 막습니다(GisMap.checkOl()이 이유를 알려 줍니다).

고지

샘플 필지·건물·시설·바람은 합성한 가상 데이터이며 실제와 무관합니다(가상 PNU는 실제 지번과 겹치지 않는 번호 범위).
번들 라이선스: gis-map.THIRD-PARTY-NOTICES.txt · gis-map.attach.THIRD-PARTY-NOTICES.txt · ol/LICENSE.md