前言

MapBox SDK允許自定義地圖的外觀煮纵》肆梗可以選擇地圖樣式式矫，也可以調(diào)整地圖的顏色、圖標(biāo)和字體來(lái)創(chuàng)建自定義地圖樣式预明。

有兩種方法自定義地圖的外觀：

1. 使用Mapbox Studio創(chuàng)建自定義地圖樣式缩赛。
2. 使用Android版Maps SDK在運(yùn)行時(shí)更新地圖功能，并可以動(dòng)態(tài)切換語(yǔ)言贮庞，調(diào)整標(biāo)簽大小以提高可讀性峦筒，根據(jù)一天中的時(shí)間調(diào)暗地圖，個(gè)性化圖標(biāo)和地圖顏色窗慎。

本文重點(diǎn)介紹MapBox默認(rèn)的樣式物喷，樣式相關(guān)的類和方法，以及如何動(dòng)態(tài)更新樣式并本地化語(yǔ)言遮斥。

MapBox樣式對(duì)比

主要類和方法

Style類

Style對(duì)象是指應(yīng)用程序中使用的Mapbox地圖樣式峦失。通過(guò)Style對(duì)象添加將Source、Layer和Image添加到地圖上术吗。必須設(shè)置Style對(duì)象地圖才能正確顯示尉辑。如果樣式加載失敗或設(shè)置了無(wú)效樣式URL，地圖視圖將變?yōu)榭瞻捉嫌欤⒂|發(fā)MapView.OnDidFailLoadingMapListener回調(diào)隧魄。

地圖樣式是由多個(gè)組件組成的，其中最重要的是數(shù)據(jù)源 source 和圖層 layer隘蝎。

• source 是地圖數(shù)據(jù)的來(lái)源购啄，定義地圖上顯示的數(shù)據(jù)類型和數(shù)據(jù)位置。
• layer 是地圖樣式中的可視化組件嘱么，定義如何渲染數(shù)據(jù)源中的數(shù)據(jù)狮含。
• 每個(gè)圖層都引用一個(gè)數(shù)據(jù)源，并指定如何將該數(shù)據(jù)源中的數(shù)據(jù)繪制到地圖上。
• 一個(gè)數(shù)據(jù)源可以被多個(gè)圖層引用几迄，從而實(shí)現(xiàn)數(shù)據(jù)的復(fù)用和多層次的展示蔚龙。
• 通過(guò)組合不同的數(shù)據(jù)源和圖層，可以創(chuàng)建出豐富多樣的地圖樣式映胁。

Style類成員變量

public class Style {

  static final String EMPTY_JSON = "{\"version\": 8,\"sources\": {},\"layers\": []}";

  private final NativeMap nativeMap;
  private final HashMap<String, Source> sources = new HashMap<>();
  private final HashMap<String, Layer> layers = new HashMap<>();
  private final HashMap<String, Bitmap> images = new HashMap<>();
  private final Builder builder;
  private boolean fullyLoaded;
  ......
}

Style類Layer方法

默認(rèn)的MapBox樣式

/**
 * Indicates the parameter accepts one of the values from Style. Using one of these
 * constants means your map style will always use the latest version and may change as we
 * improve the style
 */
@StringDef({MAPBOX_STREETS, OUTDOORS, LIGHT, DARK, SATELLITE, SATELLITE_STREETS, TRAFFIC_DAY, TRAFFIC_NIGHT})
@Retention(RetentionPolicy.SOURCE)
public @interface StyleUrl {
}

public static final String MAPBOX_STREETS = "mapbox://styles/mapbox/streets-v11";
public static final String OUTDOORS = "mapbox://styles/mapbox/outdoors-v11";
public static final String LIGHT = "mapbox://styles/mapbox/light-v10";
public static final String DARK = "mapbox://styles/mapbox/dark-v10";
public static final String SATELLITE = "mapbox://styles/mapbox/satellite-v9";
public static final String SATELLITE_STREETS = "mapbox://styles/mapbox/satellite-streets-v11";
public static final String TRAFFIC_DAY = "mapbox://styles/mapbox/traffic-day-v2";
public static final String TRAFFIC_NIGHT = "mapbox://styles/mapbox/traffic-night-v2";

OnStyleLoaded 接口

/**
 * Callback to be invoked when a style has finished loading.
 */
public interface OnStyleLoaded {
  /**
   * Invoked when a style has finished loading.
   *
   * @param style the style that has finished loading
   */
  void onStyleLoaded(@NonNull Style style);
}

MapboxMap類

獲取樣式

/**
 * Get the Style of the map asynchronously.
 */
public void getStyle(@NonNull Style.OnStyleLoaded onStyleLoaded) {
  if (style != null && style.isFullyLoaded()) {
    onStyleLoaded.onStyleLoaded(style);
  } else {
    awaitingStyleGetters.add(onStyleLoaded);
  }
}

/**
 * Get the Style of the map.
 * <p>
 * Returns null when style is being loaded.
 * </p>
 *
 * @return the style of the map
 */
@Nullable
public Style getStyle() {
  if (style == null || !style.isFullyLoaded()) {
    return null;
  } else {
    return style;
  }
}

通過(guò)Style.StyleUrl設(shè)置樣式

/**
 * Loads a new map style from the specified bundled style.
 * <p>
 * This method is asynchronous and will return before the style finishes loading.
 * If you wish to wait for the map to finish loading, listen to the {@link MapView.OnDidFinishLoadingStyleListener}
 * callback or use the {@link #setStyle(String, Style.OnStyleLoaded)} method instead.
 * </p>
 * If the style fails to load or an invalid style URL is set, the map view will become blank.
 * An error message will be logged in the Android logcat and {@link MapView.OnDidFailLoadingMapListener} callback
 * will be triggered.
 *
 * @param style The bundled style
 * @see Style
 */
public void setStyle(@Style.StyleUrl String style) {
  this.setStyle(style, null);
}

/**
 * Loads a new map style from the specified bundled style.
 * <p>
 * If the style fails to load or an invalid style URL is set, the map view will become blank.
 * An error message will be logged in the Android logcat and {@link MapView.OnDidFailLoadingMapListener} callback
 * will be triggered.
 * </p>
 *
 * @param style    The bundled style
 * @param callback The callback to be invoked when the style has loaded
 * @see Style
 */
public void setStyle(@Style.StyleUrl String style, final Style.OnStyleLoaded callback) {
  this.setStyle(new Style.Builder().fromUri(style), callback);
}

通過(guò)Style.Builder設(shè)置樣式

/**
 * Loads a new map style from the specified builder.
 * <p>
 * If the builder fails to load, the map view will become blank. An error message will be logged in the Android logcat
 * and {@link MapView.OnDidFailLoadingMapListener} callback will be triggered. If you wish to wait for the map to
 * finish loading, listen to the {@link MapView.OnDidFinishLoadingStyleListener} callback or use the
 * {@link #setStyle(String, Style.OnStyleLoaded)} instead.
 * </p>
 *
 * @param builder The style builder
 * @see Style
 */
public void setStyle(Style.Builder builder) {
  this.setStyle(builder, null);
}

/**
 * Loads a new map style from the specified builder.
 * <p>
 * If the builder fails to load, the map view will become blank. An error message will be logged in the Android logcat
 * and {@link MapView.OnDidFailLoadingMapListener} callback will be triggered.
 * </p>
 *
 * @param builder  The style builder
 * @param callback The callback to be invoked when the style has loaded
 * @see Style
 */
public void setStyle(Style.Builder builder, final Style.OnStyleLoaded callback) {
  styleLoadedCallback = callback;
  locationComponent.onStartLoadingMap();
  if (style != null) {
    style.clear();
  }

  style = builder.build(nativeMapView);
  if (!TextUtils.isEmpty(builder.getUri())) {
    nativeMapView.setStyleUri(builder.getUri());
  } else if (!TextUtils.isEmpty(builder.getJson())) {
    nativeMapView.setStyleJson(builder.getJson());
  } else {
    // user didn't provide a `from` component, load a blank style instead
    nativeMapView.setStyleJson(Style.EMPTY_JSON);
  }
}

Style.Builder

示例代碼

地圖樣式類

設(shè)置地圖樣式木羹，樣式加載完成后重新本地化地圖語(yǔ)言。

public class MapStyle {
    MapboxMap map;

    public MapStyle(MapboxMap map) {
        this.map = map;
    }

    public void changeStyle(String style) {
        map.setStyle(style, new Style.OnStyleLoaded() {

            @Override
            public void onStyleLoaded(@NonNull Style style) {
                // Custom map style has been loaded and map is now ready 
                setLanguage(style);
            }
        });
    }

    public void setLanguage(@NonNull Style style) {
        final String chinese = "{name_zh-Hans}";
        List<Layer> layers = style.getLayers();
        for (Layer layer : layers) {
            if (layer instanceof SymbolLayer) {
                SymbolLayer symbolLayer = (SymbolLayer) layer;
                String id = symbolLayer.getId();
                if (id.contains("-label")) {
                    symbolLayer.setProperties(textField(chinese));
                }
            }
        }
    }
}

界面布局

v9-0布局.png

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MapViewActivity">

    <com.mapbox.mapboxsdk.maps.MapView
        android:id="@+id/mapView"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        app:layout_constraintBottom_toTopOf="@id/bottomView"
        app:layout_constraintTop_toTopOf="parent"
        app:mapbox_cameraTargetLat="32.2857965"
        app:mapbox_cameraTargetLng="104.293174"
        app:mapbox_cameraZoom="2"
        app:mapbox_uiCompassGravity="start|top" />

    <HorizontalScrollView
        android:id="@+id/bottomView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@android:color/background_dark"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintTop_toBottomOf="@id/mapView">

        <RadioGroup
            android:id="@+id/RadioGroup"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center_horizontal"
            android:orientation="horizontal"
            android:paddingHorizontal="10dp">

            <RadioButton
                android:id="@+id/streets"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:checked="true"
                android:onClick="setMapStyle"
                android:text="基礎(chǔ)"
                android:textColor="@color/white"
                android:textStyle="bold" />

            <RadioButton
                android:id="@+id/satellite"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:onClick="setMapStyle"
                android:text="影像"
                android:textColor="@color/white"
                android:textStyle="bold" />

            <RadioButton
                android:id="@+id/satelliteStreets"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:onClick="setMapStyle"
                android:text="影像標(biāo)簽"
                android:textColor="@color/white"
                android:textStyle="bold" />

            <RadioButton
                android:id="@+id/outdoors"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:onClick="setMapStyle"
                android:text="戶外"
                android:textColor="@color/white"
                android:textStyle="bold" />

            <RadioButton
                android:id="@+id/light"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:checked="false"
                android:onClick="setMapStyle"
                android:text="淺"
                android:textColor="@color/white"
                android:textStyle="bold" />

            <RadioButton
                android:id="@+id/dark"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:checked="false"
                android:onClick="setMapStyle"
                android:text="深"
                android:textColor="@color/white"
                android:textStyle="bold" />

        </RadioGroup>
    </HorizontalScrollView>

</androidx.constraintlayout.widget.ConstraintLayout>

控件響應(yīng)事件

public void setMapStyle(View view) {
    boolean checked = ((RadioButton) view).isChecked();
    if (!checked)
        return;

    int id = view.getId();
    if (id == R.id.streets) {
        mapStyle.changeStyle(Style.MAPBOX_STREETS);
    } else if (id == R.id.satellite) {
        mapStyle.changeStyle(Style.SATELLITE);
    } else if (id == R.id.satelliteStreets) {
        mapStyle.changeStyle(Style.SATELLITE_STREETS);
    } else if (id == R.id.outdoors) {
        mapStyle.changeStyle(Style.OUTDOORS);
    } else if (id == R.id.light) {
        mapStyle.changeStyle(Style.LIGHT);
    } else if (id == R.id.dark) {
        mapStyle.changeStyle(Style.DARK);
    }
}

運(yùn)行效果圖

基礎(chǔ)	影像	影像+標(biāo)簽
v9-1基礎(chǔ).png	v9-2影像.png	v9-3影像標(biāo)簽.png
戶外	淺	深
v9-4戶外.png	v9-5淺.png	v9-6深.png

附不同樣式中的圖層

查看地圖樣式的圖層Z索引順序和圖層ID屿愚。