Flutter 앱용 오프라인지도

Flutter는 단일 코드베이스에서 모바일, 웹 및 데스크톱 애플리케이션을 구축하기위한 Google의 새로운 휴대용 UI 도구입니다. Flutter를 사용하면 간단한 애플리케이션을 쉽게 빌드 할 수 있지만, 가장 인기있는 기능 이외의 기능이 필요한 경우 비교적 새로운 것이기 때문에 오프라인지도와 같은 자체 솔루션을 롤링해야 할 수도 있습니다.

Google지도 지원은 최근에만 g 사용할 수 있으며 Apple지도에 대한 지원은 제공되지 않습니다. 타사 옵션을 찾아야합니다. 다행히도 https://github.com/tobrun/flutter-mapbox-gl에서 작동하는 MapBox Flutter 플러그인이 있습니다. MapBox는 오프라인지도 지원을 포함하여 풍부한 기능 세트와 도구가 포함 된 완전한 기능의 매핑 SDK입니다.

새 Flutter 애플리케이션 만들기

지침에 따라 Flutter를 설치하고 계속하기 전에 개발 환경과 작업 공간이 올바르게 설정되었는지 확인하는 애플리케이션을 만듭니다.

MapBox API 토큰 등록

다음으로 MapBox API 토큰을 등록해야합니다. 가입하면 우리의 목적에 맞는 기본 토큰을 받게됩니다. API 토큰은 MapBox가 사용량을 추적하고 청구 하는 방법입니다. 애플리케이션을 시작하기 전에 API 토큰 설정을 검토해야합니다.

Flutter 애플리케이션에 MapBox 추가

종속 항목 섹션 아래의 pubspec.yaml 파일에 mapbox_gl 을 추가합니다. 최신 코드를 얻기 위해 dart 패키지 대신 소스를 사용합니다.

그런 다음 프로젝트가 복제 된 디렉터리를 참조하도록 pubspec.yaml 을 업데이트하세요.

mapbox_gl 패키지를 설치하고 패키지를 실행합니다.

Android 변경 사항

AndroidManifest에 API 토큰 추가

iOS 변경 사항

mapbox_gl 플러그인에 필요한 iOS 9를 타겟팅하도록 플랫폼 행의 주석 처리를 제거하고 use frameworks! 행을 추가합니다.

코드

테스트 실행

이제 애플리케이션을 실행하고지도를 볼 수 있습니다.

빌드시지도 데이터 다운로드

오프라인지도를 지원하려면 빌드 할 때 필요한지도 타일을 다운로드하여 앱에 포함해야합니다. Mapbox에는 여기에이 작업을 수행하는 방법에 대한 지침이 있지만 tl; dr 버전은 아래에 있습니다.

MapBox 도구 구축

지도 타일 다운로드

필요한 모든지도 타일을 다운로드하려면 지원할 확대 / 축소 수준뿐 아니라 포함하려는 위도 / 경도의 경계 상자가 필요합니다.

스타일 인수는 Mapbox 디자이너를 사용하여 만든 사용자 지정 스타일을 지정하는 데 사용할 수 있지만 여기서는 기본값을 사용합니다.

이 명령은 확대 / 축소 수준 12 ~ 18에서 주어진 북 / 남 / 동 / 서 좌표 사이의지도를 렌더링하는 데 필요한 모든 타일을 다운로드합니다.

사용자가 해당 좌표 또는 확대 / 축소 수준 밖으로 스크롤하면 MapBox API가 런타임에 타일 다운로드를 시도합니다. 따라서 진정한 오프라인지도를 원한다면 사용자의 스크롤 및 확대 / 축소 기능을 제한하는 것이 중요합니다.

타일 추가

지도 타일을 다운로드하여 자산 디렉토리에 추가합니다. db 파일의 이름은 cache.db 여야합니다.

pubspec.yaml 을 업데이트하여 cache.db 파일을 앱에 포함

타일을 제자리에 복사

맵뷰가 cache.db 를 사용하려면 예상 위치에 복사해야합니다. 또한지도보기가 네트워크에 완전히 액세스하지 못하도록 방지하려면 지도보기가로드되기 전에 cache.db 가 예상 위치에 복사되었는지 확인해야합니다. 이는 일반적으로 “로드”화면 중에 cache.db 를 제자리에 복사한다는 것을 의미합니다.

비행기 모드로 실행

모든 작업을 올바르게 수행했다면 비행기 모드에서 애플리케이션을 실행할 때지도가 계속로드되는 것을 확인할 수 있습니다.

결론

약간의 조사와 MapBox SDK를 통해 이제 iOS 및 Android 용 애플리케이션에 오프라인지도 지원을 포함 할 수 있습니다.

행복한 Fluttering!