Android地圖—— Mapbox 10.3.0 接入與基礎(chǔ)使用

• Mapbox初始配置：依賴添加
• • 1. 編輯 項(xiàng)目目錄/build.gradle （設(shè)置maven庫(kù)的訪問）；
  • 2. 前往mapbox官網(wǎng) 創(chuàng)建賬號(hào) 并 申請(qǐng)密鑰；
  • 3. 在項(xiàng)目中配置公鑰、私鑰；
  • 4. 在 模塊目錄 /build.gradle 中添加依賴；
  • 5. 配置獲取用戶定位權(quán)限；（可選）
• MapBox部分功能的Android實(shí)現(xiàn)：
• • · 地圖MapView的添加
  • · MapBox初始化以及地圖顯示：
  • • 1. 相機(jī)設(shè)置：
    • 2. 地圖加載：
  • · MapBox各種功能插件獲取：
  • • 1. 地圖 Logo 插件
    • 2. 地圖Logo旁屬性按鈕插件
    • 3. 比例尺Scalebar插件
    • 4. 指南針插件
    • 5. 相機(jī)動(dòng)畫插件
    • 6. 地圖手勢(shì)監(jiān)聽插件
    • 7. 用戶地理位置獲取插件
    • 8. 地圖標(biāo)記插件

Mapbox初始配置：依賴添加

官網(wǎng)教程指引： https://docs.mapbox.com/android/maps/guides/install/
我使用的android studio版本是舊版，依賴添加方式如下：

1. 編輯 項(xiàng)目目錄/build.gradle （設(shè)置maven庫(kù)的訪問）；

Android Studio less than Arctic Fox (2020.3.1) and Gradle less than v6.0:
注意，是在 allprojects 內(nèi)設(shè)置！

buildscript {... } allprojects {repositories {google()mavenCentral()maven {url 'https://api.mapbox.com/downloads/v2/releases/maven'authentication {basic(BasicAuthentication)}credentials {username = "mapbox"// Use the secret token you stored in gradle.properties as the passwordpassword = project.properties['MAPBOX_DOWNLOADS_TOKEN']}}} }

2. 前往mapbox官網(wǎng) 創(chuàng)建賬號(hào) 并 申請(qǐng)密鑰；

Token申請(qǐng)地址： https://account.mapbox.com/
申請(qǐng)token時(shí)記得勾選 Downloads:Read 以獲取從maven庫(kù)下載mapbox依賴文件的許可。

創(chuàng)建完成之后在Token頁(yè)面會(huì)有兩個(gè)Token：
其中一個(gè)為初始就有的公鑰；一個(gè)為你剛剛申請(qǐng)好的帶有Downloads:Read權(quán)限的私鑰。
（注意：私鑰申請(qǐng)完成后要直接復(fù)制保存，刷新頁(yè)面后會(huì)被隱藏）。

3. 在項(xiàng)目中配置公鑰、私鑰；

在 項(xiàng)目目錄下的 gradle.properites 中添加以下代碼，用于從maven庫(kù)下載mapbox相關(guān)依賴的身份驗(yàn)證。

MAPBOX_DOWNLOADS_TOKEN=自己申請(qǐng)的私鑰

在 res/valuses/strings.xml 文件中添加以下代碼。mapbox默認(rèn)你 將token放置在 strings.xml 中，在調(diào)用相關(guān)api時(shí)會(huì) 自動(dòng) 在此文件夾下面獲取token。

<string name="mapbox_access_token">公鑰</string>

4. 在 模塊目錄 /build.gradle 中添加依賴；

// mapbox地圖組件 implementation 'com.mapbox.maps:android:10.3.0'

5. 配置獲取用戶定位權(quán)限；（可選）

在 AndroidManifest.xml 文件中添加以下代碼*（當(dāng)你需要在地圖上顯示用戶位置時(shí)才需要配置）*
注意： 還需要在代碼中動(dòng)態(tài)請(qǐng)求該權(quán)限，Mapbox也提供了PermissionsManager（可參考官網(wǎng)示例）工具用于動(dòng)態(tài)請(qǐng)求權(quán)限，這里不展開）

<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />

可能遇到的問題：
① sync gradle文件時(shí)報(bào)warnning：
問題： Failed to resolve: com.mapbox.maps:android:10.0.3
解決： 檢查自己申請(qǐng)的token是否帶有 Downloads:Read，在創(chuàng)建token時(shí)記得勾選上，系統(tǒng)默認(rèn)提供的token是不帶這個(gè)scope的，需要自行申請(qǐng)。
————————————————————————————————————————————

MapBox部分功能的Android實(shí)現(xiàn)：

這部分對(duì)MapBox的主要用例的Android實(shí)現(xiàn)和原理進(jìn)行相關(guān)解釋（示例版本10.3.0）。
由于官網(wǎng)有kotlin代碼的例子，以下功能展示均使用 java代碼 進(jìn)行舉例。

以下介紹的功能代碼我都封裝到了MapBoxUtil.java文件中，可以在這個(gè)項(xiàng)目里面自行獲取。（結(jié)合這個(gè)示例項(xiàng)目的代碼閱讀更佳哦）

效果圖先行：

· 地圖MapView的添加

layout文件中添加MapView視圖：

<com.mapbox.maps.MapViewandroid:id="@+id/mapview"android:layout_width="match_parent"android:layout_height="match_parent"/>

Java文件：

MapView mMapView = findViewById(R.id.mapview); MapboxMap mMapboxMap = mapView.getMapboxMap();

· MapBox初始化以及地圖顯示：

1. 相機(jī)設(shè)置：

相機(jī)部分參數(shù)初始變量定義：

private static final double DEFAULT_LOCATION_LATITUDE = 22.55; // 初始地圖顯示坐標(biāo)（深圳） private static final double DEFAULT_LOCATION_LONGITUDE = 114.06; private static final double DEFAULT_ZOOM_VALUE = 8.0; // 初始地圖縮放大小

相機(jī)設(shè)置：

mMapboxMap.setCamera( // 設(shè)置地圖相機(jī)初始位置new CameraOptions.Builder().center(Point.fromLngLat(DEFAULT_LOCATION_LONGITUDE, DEFAULT_LOCATION_LATITUDE)).zoom(DEFAULT_ZOOM_VALUE).build());

相機(jī)更多參數(shù)設(shè)置：
https://docs.mapbox.com/android/maps/guides/camera-and-animation/camera/

2. 地圖加載：

地圖類型變量定義：

private static final String DEFAULT_MAP_STYLE = Style.MAPBOX_STREETS; // 地圖顯示樣式

加載地圖：

mMapboxMap.loadStyleUri( // 加載地圖DEFAULT_MAP_STYLE, style -> {// style 加載完成回調(diào)});

更多地圖類型：
https://docs.mapbox.com/android/maps/guides/styles/set-a-style/

· MapBox各種功能插件獲取：

mMapView .getPlugin(Plugin.MAPBOX_XXX_PLUGIN_ID); //XXX因插件而異

1. 地圖 Logo 插件

LogoPlugin logoPlugin = mMapView .getPlugin(Plugin.MAPBOX_LOGO_PLUGIN_ID); // 隱藏 Logo if (logoPlugin != null) {logoPlugin.setEnabled(false); }

2. 地圖Logo旁屬性按鈕插件

AttributionPlugin attributionPlugin = mMapView .getPlugin(Plugin.MAPBOX_ATTRIBUTION_PLUGIN_ID); // 隱藏 屬性按鈕 if (attributionPlugin != null) {attributionPlugin.setEnabled(false); }

3. 比例尺Scalebar插件

ScaleBarPlugin scaleBarPlugin = mMapView .getPlugin(Plugin.MAPBOX_SCALEBAR_PLUGIN_ID); // 隱藏 比例尺 if (scaleBarPlugin != null) {scaleBarPlugin.setEnabled(false); }

4. 指南針插件

CompassPlugin compassPlugin = mMapView .getPlugin(Plugin.MAPBOX_COMPASS_PLUGIN_ID); if (compassPlugin == null) {return; } compassPlugin.setEnabled(isEnable); // 隱藏指南針 compassPlugin.setImage(drawable); // 更換指南針icon

以上UI相關(guān)的插件均可以通過相關(guān)api設(shè)置顯示位置和大小，這里不舉例說明。

5. 相機(jī)動(dòng)畫插件

相機(jī)位置改變：
若只是簡(jiǎn)單的直接改變相機(jī)位置的話，使用上述相機(jī)初始化中的mMapboxMap.setCamera方法即可。
若想要添加移動(dòng)的動(dòng)畫，如從當(dāng)前顯示位置緩慢變換到目的位置，則需要相機(jī)動(dòng)畫插件CameraAnimationsPlugin

CameraAnimationsPlugin cameraAnimationsPlugin = mMapView.getPlugin(Plugin.MAPBOX_CAMERA_PLUGIN_ID);

相機(jī)移動(dòng)方法舉例：

/*** 將攝像頭移動(dòng)到指定位置* @param point 目標(biāo)坐標(biāo)* @param zoom 目標(biāo)縮放比例* @param duration 滑動(dòng)總時(shí)間 0為無動(dòng)畫*/ public void moveCameraTo(Point point, double zoom, int duration) {if (mMapView == null) {return;}if (duration != 0 && cameraAnimationsPlugin != null) {cameraAnimationsPlugin .flyTo(new CameraOptions.Builder().center(point).zoom(zoom).build(),new MapAnimationOptions.Builder().duration(duration).build());} else {mMapboxMap.setCamera(new CameraOptions.Builder().center(point).zoom(zoom).build());} }

更多相機(jī)動(dòng)畫：
https://docs.mapbox.com/android/maps/guides/camera-and-animation/animations

6. 地圖手勢(shì)監(jiān)聽插件

可以監(jiān)聽地圖相關(guān)運(yùn)行中狀態(tài)，Mapbox提供了手勢(shì)插件供我們監(jiān)聽各種地圖狀態(tài)：

GesturesPlugin gesturesPlugin = mMapView.getPlugin(Plugin.MAPBOX_GESTURES_PLUGIN_ID);

下面以監(jiān)聽地圖移動(dòng)為例：

if (gesturesPlugin != null) {gesturesPlugin .addOnMoveListener(onMoveListener); // 注意onDestroy時(shí)要remove掉Listener } // 地圖移動(dòng)監(jiān)聽 private final OnMoveListener onMoveListener = new OnMoveListener() {@Overridepublic void onMoveBegin(@NotNull MoveGestureDetector moveGestureDetector) {// 地圖開始移動(dòng)}@Overridepublic boolean onMove(@NotNull MoveGestureDetector moveGestureDetector) {return false;}@Overridepublic void onMoveEnd(@NotNull MoveGestureDetector moveGestureDetector) {// 地圖移動(dòng)結(jié)束} };

更多用戶交互監(jiān)聽：
https://docs.mapbox.com/android/maps/guides/user-interaction

7. 用戶地理位置獲取插件

效果圖先行：

MapBox獲取用戶位置主要通過 LocationComponentPlugin 插件獲取：

LocationComponentPlugin locationPlugin = mMapView.getPlugin(Plugin.MAPBOX_LOCATION_COMPONENT_PLUGIN_ID);

① 設(shè)置用戶位置點(diǎn)顯示UI樣式：

設(shè)置脈沖顯示效果：

locationPlugin.updateSettings(locationComponentSettings -> {locationComponentSettings.setEnabled(true);locationComponentSettings.setPulsingEnabled(true); // 脈沖效果return null; });

設(shè)置位置點(diǎn)樣式：
通過插件的 setLocationPuck() 方法進(jìn)行設(shè)置，方法接受四個(gè)參數(shù)。前三個(gè)為上\中\(zhòng)下層圖標(biāo)樣式設(shè)置，最后一個(gè)接受 Expression表達(dá)式 用于配置 位置點(diǎn)圖標(biāo)的縮放scale數(shù)值規(guī)則。
（Expression表達(dá)式的本質(zhì)是Json語(yǔ)句，是Mapbox自定義的一種描述性變量，具體Expression所涵蓋的運(yùn)算符可參考官網(wǎng)，我們可以在使用的過程中逐漸了解各運(yùn)算符具體含義）
這里我們選擇 生成一個(gè)隨地圖縮放變化規(guī)則的Expression：
我們使用 InterpolatorBuilder 來生成一個(gè)插值表達(dá)式。
下面例子的插值表達(dá)式表示當(dāng)?shù)貓Dzoom為0時(shí)，圖標(biāo)scale為1；當(dāng)zoom為20時(shí)，圖標(biāo)scale為1.5；其間值線性插值獲得。

• linear運(yùn)算符用于對(duì)一隊(duì)stop值間的數(shù)據(jù)做線性插值運(yùn)算；
• zoom表達(dá)式添加上了圖標(biāo)大小隨地圖縮放大小的羈絆。

從結(jié)果上來看即生成了如下json表達(dá)式：（清楚Expression編寫規(guī)則后，直接編寫json表達(dá)式也可以實(shí)現(xiàn)同樣的效果）

["interpolate",["linear"],["zoom"],0.0,1.0,20.0,1.5]

代碼如下所示：

// 設(shè)置圖標(biāo)隨地圖縮放比例變化 Expression.InterpolatorBuilder interpolatorBuilder = new Expression.InterpolatorBuilder("interpolate"); interpolatorBuilder.linear(); interpolatorBuilder.zoom(); interpolatorBuilder.stop(expressionBuilder -> {expressionBuilder.literal(0.0);expressionBuilder.literal(1.0);return null; }); interpolatorBuilder.stop(expressionBuilder -> {expressionBuilder.literal(20.0);expressionBuilder.literal(1.5);return null; }); // 設(shè)置用戶位置圖標(biāo)樣式 locationPlugin.setLocationPuck(new LocationPuck2D(null,AppCompatResources.getDrawable(mContext, R.drawable.mapbox_user_icon),AppCompatResources.getDrawable(mContext, R.drawable.mapbox_user_stroke_icon),interpolatorBuilder.build().toJson()));

官網(wǎng)例子：
https://docs.mapbox.com/help/tutorials/mapbox-gl-js-expressions/#add-a-zoom-expression

② 添加用戶位置監(jiān)聽器

// 添加用戶位置監(jiān)聽器 // 注意onDestroy時(shí)要remove掉Listener locationPlugin.addOnIndicatorPositionChangedListener(onIndicatorPositionChangedListener); // 用戶位置改變監(jiān)聽 private final OnIndicatorPositionChangedListener onIndicatorPositionChangedListener =new OnIndicatorPositionChangedListener() {@Overridepublic void onIndicatorPositionChanged(@NotNull Point point) {// point即為用戶位置} };

③ 移動(dòng)相機(jī)到用戶的位置：
移動(dòng)相機(jī)方法參見 5.相機(jī)動(dòng)畫插件 部分，在onIndicatorPositionChanged回調(diào)中根據(jù)point參數(shù)進(jìn)行移動(dòng)即可。
需要注意的是，onIndicatorPositionChanged監(jiān)聽器在remove前會(huì)持續(xù)回調(diào)，需編寫相關(guān)移動(dòng)相機(jī)的條件，否則地圖移動(dòng)手勢(shì)將會(huì)失效。
官網(wǎng)教程：
https://docs.mapbox.com/android/maps/guides/user-location/

8. 地圖標(biāo)記插件

Mapbox提供了annotationPlugin 插件供用戶在地圖上快捷添加標(biāo)記。添加標(biāo)記的方法如下所示
注意：以下標(biāo)記的添加需要在地圖初始化加載完成后進(jìn)行，即style加載完后進(jìn)行。

AnnotationPlugin annotationPlugin = mMapView.getPlugin(Plugin.MAPBOX_ANNOTATION_PLUGIN_ID);

[舉例] 向地圖添加點(diǎn)標(biāo)記（可以顯示icon + text）

// 注冊(cè)點(diǎn)標(biāo)記管理器 PointAnnotationManager pointAnnotationManager = (PointAnnotationManager)annotationPlugin .createAnnotationManager(AnnotationType.PointAnnotation, null);/*** 在地圖中添加Point類型標(biāo)記* @param longitude 添加坐標(biāo)X* @param latitude 添加坐標(biāo)Y*/ public void addPointAnnotationInMap(int drawable, double longitude, double latitude) {if(annotationPlugin == null){return;}if (pointAnnotationManager == null) {pointAnnotationManager = (PointAnnotationManager)annotationPlugin .createAnnotationManager(AnnotationType.PointAnnotation, null);}// Set options for the resulting symbol layer.PointAnnotationOptions pointAnnotationOptions = new PointAnnotationOptions().withPoint(Point.fromLngLat(longitude, latitude)).withIconImage(BitmapUtil.getBitmapFromDrawable(mContext, drawable));// Add the pointAnnotation to the map.pointAnnotationManager .create(pointAnnotationOptions); }

pointAnnotationOptions中還有很多方法可以設(shè)置，這里不再舉例。
更多標(biāo)記類型：
https://docs.mapbox.com/android/maps/guides/annotations/annotations/

除次之外Mapbox還提供了ViewAnnotation，用戶可以利用此添加自定義樣式的標(biāo)記，添加方法如下所示：

ViewAnnotationManager viewAnnotationManager = mMapView.getViewAnnotationManager();

以下方法舉例了如何在ViewAnnotationManager添加自定義的View標(biāo)記：

/*** 在地圖中添加View標(biāo)記 [需補(bǔ)充代碼后使用]* @param longitude 添加坐標(biāo)* @param latitude 添加坐標(biāo)* @param onClickListener view點(diǎn)擊回調(diào)*/public void addViewAnnotationInMap(double longitude, double latitude, View.OnClickListener onClickListener) {if (viewAnnotationManager == null) {viewAnnotationManager = mMapView.getViewAnnotationManager();} // View markView = viewAnnotationManager.addViewAnnotation(R.layout.item_map_image_view, // view的layout id // new ViewAnnotationOptions.Builder() // .geometry(Point.fromLngLat(longitude, latitude)) // .allowOverlap(true) // 允許markView重疊 // .build());// 初始化 layout中的組件 markView.findViewById(R.id.xxx)// ...}

上述兩種添加方式在 少量(<200) 標(biāo)記時(shí)不會(huì)造成地圖組件卡頓（應(yīng)設(shè)備而異），若要添加大量標(biāo)記，上述方法性能問題不容樂觀。
mapbox對(duì)此提供了 style layer 的解決方案，用于添加 大量圖標(biāo) 時(shí)的性能保證。

style layer 添加地圖標(biāo)記，并實(shí)現(xiàn)聚類的方法見下一篇文章：Android地圖—— Mapbox 10.3.0 聚類標(biāo)簽實(shí)現(xiàn)。

總結(jié)

以上是生活随笔為你收集整理的Android地图—— Mapbox 10.3.0 接入与基础使用的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。