.osm에서 .map로 변환 한 후 웹 응용 프로그램의 오프라인 지형도

Question

웹 응용 프로그램에 오프라인지도를 제공하는 데 필요한 매우 기본적인 요구 사항이 있습니다. 내 웹 응용 프로그램은 인터넷에 액세스 할 수 없으므로지도를 표시하기위한 모든 온라인 API가 완전히 제외됩니다.

연구를 수행 한 후, 내가 원하는 위치에 대한 .osm.pbf 형식 파일 (예를 들어 특정 도시를) 다운로드. I

파일을 I .osm이 파일을 이용하여 타일을 생성

다음 단계 .osm .osm.pbf하는 변환.

타일 내 로컬 디렉토리에 저장됩니다.

내 마지막 단계는 장소의 위도와 경도 을 부여 마커를 내 응용 프로그램 (자바 EE)의 내부 웹 브라우저에서 맵 이러한 타일을 표시하고 배치하는 것입니다.

오프라인지도에 표시해야하는 유일한 요구 사항입니다.

내가 의미하는 용어 오프라인함으로써 내가 그것을 사용하고 오프라인지도를 표시하는 방법을 모르는 특정 city.But 타일 ..

이 응용 프로그램은 에 인트라넷에서 호스팅되는 응용 프로그램 서버 및 어떠한 상황에서도 인터넷 접속은 입니다.

친절하게 안내합니다.

Answer 1

먼저 다운로드하여 응용 프로그램 내부에 상주 할 수있는 매핑 라이브러리가 필요합니다. 몇 가지가 있지만 가장 일반적인 것들은 Leaflet과 OpenLayers입니다. 둘 다 맞춤형 타일 레이어를 지원합니다.

var map = L.map('map'); 
L.tileLayer('tiles/{z}/{x}/{y}.png').addTo(map); 

심지어 다른 기계 : 예를 들어

, 당신 타일 "타일"라는 폴더에서 웹 응용 프로그램, 가능한 레이어 정의 (리플릿에) 될 내부에있는 가정 인트라넷

var map = L.map('map'); 
L.tileLayer('http://intranetmachine/tiles/{z}/{x}/{y}.png').addTo(map); 

Answer 2

거의 다 왔어.

리플릿 .js 및 .css 파일을 로컬에 저장하십시오. 당신의 로컬 복사본에 경로 된 .js, http://leafletjs.com/examples/quick-start-example.html

변경 .CSS, 지역에 tileLayer 경로 :

• http://leafletjs.com/dist/leaflet.css
• http://leafletjs.com/dist/leaflet.js

이 기본 예제의 소스 코드를 참조하십시오 설명한대로.

L.marker([51.5, -0.09]).addTo(map) 
      .bindPopup("<b>Hello world!</b><br />I am a popup.").openPopup(); 

나는 그것이 당신이 필요로하는 무엇을 추측하고있어 :

마커의 코드를 참조하십시오. 필요한 경우 다른 다각형과 click-show-lat-long 함수를 제거하십시오.

맵을 전체 화면으로 만들려면 <div.. 태그를 100 %로 변경하십시오.

<div id="map" style="width: 100%; height: 100%"></div>