React와 Leaflet으로 프로젝트를 만들고 있습니다.
이 프로젝트는 아무것도 연결되지 않은 컴퓨터에서 오프라인으로 실행되므로 동일한 컴퓨터 (타일 서버 없음)에 타일 레이어를 저장해야합니다.
몇 국가 만 고정 된 매우 간단한지도가 필요하기 때문에 너무 무겁지 않을 것 같습니다.
<MapContainer center={[lat,lng]} zoom={z}>
<TileLayer
attribution='© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" <-- this needs to be stored locally
/>
</MapContainer>
이것은 이미 알려진 문제 이지만 필요한 것보다 약간 더 복잡한 대답이 있습니다. 내 의사 대답 / 조언은 다음과 같습니다.
시작하기 전에 slippymap 타일 이름에 대한 이 기사 를 읽어 보는 것이 좋습니다 . 도움이 될 것입니다 ...
고정 확대 / 축소가 있고 제한된 맵 범위 (경계)처럼 들리는 것을 고려할 때 타일을 얻는 것이 너무 어렵지 않아야합니다. 해당 확대 / 축소 및 경계로 설정된 전단지 맵이있는 브라우저를 열고 네트워크 탭을 살펴 봅니다. 필요한 모든 타일에 대한 네트워크 요청이 표시되고 해당 타일에 대한 URL이 표시됩니다. 그런 다음 해당 타일을 직접 다운로드 할 수 있습니다.
이를 위해 전단지 오프라인 을 사용할 수도 있습니다 . 모든 타일 URL을 가져오고 필요한 타일 URL을 아름답게 배치하는 훌륭한 도구입니다. leaflet-offline은 필요한 디렉토리 구조에서 이러한 모든 타일을 자동으로 다운로드하는 방법을 제공 할 수도 있지만 문서를 따르기가 어렵다는 것을 알았습니다.
컴퓨터 어딘가에 디렉토리를 만들고 "my-offline-tiles"와 같이 유용한 이름을 지정합니다. 해당 디렉토리에서 하위 디렉토리를 만들고지도에 예상되는 확대 / 축소 수준의 이름을 지정합니다 (10이라고 말함). 따라서 다음과 같은 것이 있습니다.
/my-offlline-tiles
/10
한 번에 하나의 타일을 다운로드 할 때 다운로드하면 "32.png"와 같은 이름이 지정되거나 기본적으로 "someNumber.png"와 같은 이름이 지정됩니다. 이 숫자 (내가 링크 한 기사에서 설명했듯이)는 주어진 확대 / 축소 및 x 열에 대한 타일의 y 위치입니다. 따라서 해당 URL에있는 z 및 x 값에주의를 기울이고 타일을 "my-offline-tiles"디렉토리의 적절한 하위 디렉토리로 다운로드해야합니다. 예를 들어,로 끝나는 모든 타일 10/245/something.png은 다음 디렉토리로 이동합니다.
/my-offlline-tiles
/10
/245
something.png
당신은 당신의 디렉토리 아래에 소수의 디렉토리 /10와 각각의 소수의 png 파일로 끝날 것입니다 . 이 기사에서 읽으 셨으면하는 것처럼 타일 서버가 쉽게 액세스 할 수 있도록 타일 파일을 구성하는 방법입니다. 해당 구조를 복제하고 원하는 확대 / 축소 수준에 대한 범위를 포함 할 수있는 충분한 타일 만 제공해야합니다.
이제지도에서 해당 L.tileLayer의 URL을 타일 위치로 지정하기 만하면됩니다. 수 있습니다 말은 /my-offlline-tiles에 public(당신의 index.html을 포함) 프로젝트의 디렉토리
<TileLayer url="/my-offline-tiles/{z}/{x}/{y}.png" />
프로젝트 구조, 빌드 프로세스 또는 실행중인 머신의 dir 구조에 따라 약간 조정해야 할 수 있습니다. 기본적으로 리 액트 앱이 머신에서 이러한 파일을 찾을 수있는 위치를 알고 있는지 확인해야합니다. 그러나 그렇게하는 한, 전단지는 타일을 찾아서 예상대로지도에 렌더링합니다.
시작하기에 충분하길 바랍니다.
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다