OpenLayers 지도 기능을
폴더 하나로 어디든 옮겨 쓴다

기능별로 써 보기

카드를 누르면 지도 데모가 그 단계의 안내와 함께 열립니다. 표시:샘플 브라우저 안 가짜 데이터실제 실제 외부 서버 호출

이식 방법 3가지

엔진은 인증·주소·키·권한을 호스트(GisMapHost)로, 데이터를 소스(GisMapSources)로 주입받습니다. 그래서 어느 화면에든 같은 코드가 붙습니다.

<GisMapProvider host={host} config={CONFIG}>
  <MapShell brand={{ title: '업무 지도' }} />
</GisMapProvider>

var map = GisMap.create({
  target: 'map',
  host: { keys: { vworld: '' } },
  sources: [mySources]  // 데이터는 소스로 주입
});

if (GisMap.checkOl().ok) {
  gis = GisMap.attach(workMap, { sources: [mySources] });
}
gis.destroy(); // 업무 지도는 그대로

자바 서버에 복사해 쓰기 (JDK 11 톰캣·전자정부)

정적 예제 폴더 하나에 번들·CSS·샘플 데이터가 다 들어 있습니다. 서버 프로그램 없이 정적 폴더나 JSP 옆에 그대로 놓으면 열립니다.

gis-demo/
├─ index.html      예제 목록·호환 표
├─ create.html     UMD GisMap.create
├─ attach.html     기존 ol 지도에 붙이기
├─ map.jsp         create.html + JSP 지시자 1줄
├─ demo-data.js    가짜 소스·샘플(서버 호출 0)
├─ demo.css · README.txt
└─ lib/
   ├─ gis-map.umd.js · gis-map.css
   ├─ gis-map.attach.umd.js · gis-map.attach.css
   ├─ *.THIRD-PARTY-NOTICES.txt
   └─ ol/ol.js · ol.css · LICENSE.md

로그인 후 기능

아래 기능은 계정과 서버 데이터가 필요해 이 공개 데모에는 넣지 않았습니다.

• 나만의지도 파일 업로드·공유(데모에서는 저장하지 않습니다)
• GeoTIFF 올리기와 래스터 표시
• 주소 엑셀 변환·내보내기
• 실제 연속지적도·공시지가 필지 정보와 도로명주소 건물
• 기상청 예보 자료 기반 실제 바람지도
• 레이어 개인 설정과 메뉴 권한