不同行業的開發者對地圖樣式的展示需求差異很大。例如，物流類應用希望地圖樣式簡潔一些，重點突出城市分佈和快遞路徑；AR遊戲類應用中的地圖色彩需要和遊戲UI適配，做的更酷炫一些；景區導覽應用中的地圖樣式要景區特色相結合，重點呈現關鍵景點。

自定義地圖樣式可以更好的迎合不同行業的開發者對於地圖樣式的展示需求，開發者可以綜合考慮自身產品的使用場景、品牌色調等因素，自由建立最適合的地圖樣式。

HMS Core[地圖服務](https://developer.huawei.com/consumer/cn/hms/huawei-MapKit?ha_source=hms1)（Map Kit）提供了自定義地圖樣式能力，開發者可透過更改Petal Maps Studio中的樣式選項，自定義地圖樣式的顯示，更改道路、公園、企業和其他興趣點等功能的視覺化顯示。提供七大類，上百種地圖元素的樣式編輯，讓開發者自由編輯個性化地圖。同時，開發者只需編輯一次，地圖即可適用於多種終端（Android/iOS/Web）極大的提高了開發效率

### 整合步驟

一、	生成樣式ID

1．	登入[Petal Maps Studio](https://developer.petalmaps.com/console/studio/StyleEditor)，點選“Create map”建立自定義樣式。

![](https://oscimg.oschina.net/oscnet/up-e0274f035485c5b9cf95c28e941c3ba0691.png)
 
2．	匯入JSON樣式檔案，點選“Import”。

![](https://oscimg.oschina.net/oscnet/up-60603905136223d74cc0e1c949150cb3e6e.png)
 
3．	在編輯器裡修改樣式。

4．	點選“SAVE”生成預覽ID，透過預覽ID測試樣式效果。點選“PUBLISH”釋出生成樣式ID，樣式ID是唯一ID，一旦釋出生效不會變化。

![](https://oscimg.oschina.net/oscnet/up-bc91bb30161c448f9599ef02ead557fe03d.png)

### 二、	各平臺程式碼實現步驟

地圖服務提供兩種方法設定自定義地圖樣式：

•	設定樣式檔案：透過嵌入JSON樣式宣告檔案手動定義地圖樣式的更改。

•	設定樣式ID：在Petal Maps Studio上建立新樣式，或匯入現有樣式定義。樣式一旦釋出，使用此樣式的應用都會自動應用新樣式，不需要更新版本。

#### 1. 第一種方法：設定樣式檔案

新建樣式檔案mapstyle_road.json

```
[
    {
        "mapFeature": "road.highway.city",
        "options": "all",
        "paint": {
            "color": "#7569ce"
        }
    },
    {
        "mapFeature": "road.highway.country",
        "options": "all",
        "paint": {
            "color": "#7271c6"
        }
    },
    {
        "mapFeature": "road.province",
        "options": "all",
        "paint": {
            "color": "#6c6ae2"
        }
    },
    {
        "mapFeature": "road.city-arterial",
        "options": "geometry.fill",
        "paint": {
            "color": "#be9bca"
        }
    },
    {
        "mapFeature": "transit.railway",
        "options": "all",
        "paint": {
            "color": "#b2e6b2"
        }
    }
]
```

##### 1.1 Android設定樣式檔案

（1）在res/raw目錄下新增JSON檔案 mapstyle_road.json

（2）使用loadRawResourceStyle()方法，載入為MapStyleOptions物件，再將該物件傳遞給HuaweiMap.setMapStyle()方法。

```
private HuaweiMap hMap;
MapStyleOptions styleOptions = MapStyleOptions.loadRawResourceStyle(this, R.raw.mapstyle_road);
hMap.setMapStyle(styleOptions);
```

##### 1.2	 iOS設定樣式檔案

（1）在工程目錄下定義一個JSON檔案 mapstyle_road.json

（2）將檔案路徑傳遞給setMapStyle方法

```
// 讀取樣式檔案的路徑
NSString *path = [NSBundle.mainBundle pathForResource:name ofType:@"json"];
// 呼叫設定方法
[self.mapView setMapStyle:path];
```

##### 1.3 JavaScript設定樣式檔案

```
map.setStyle("mapstyle_road.json");
```

#### 2．第二種方法：設定預覽ID或樣式ID

##### 2.1 Android設定樣式ID

Android SDK提供兩種方式設定預覽ID或樣式ID：建立地圖前、建立地圖後。

（1）在建立地圖後使用自定義樣式。

透過呼叫HuaweiMap的setStyleId和previewId方法設定自定義樣式。

```
private HuaweiMap hMap;
String styleIdStr = edtStyleId.getText().toString();           //建立地圖後設定樣式ID
// String previewIdStr = edtPreviewId.getText().toString();   //在建立地圖後設定預覽ID
if (TextUtils.isEmpty(styleIdStr)) {
    Toast.makeText(this, "Please make sure the style ID is edited", Toast.LENGTH_SHORT).show();
    return;
}
if (null != hMap) {
    hMap.setStyleId("859320508888914176");
    //   hMap.previewId("888359570022864384");
}
```

（2）在建立地圖前改變現有樣式

透過呼叫HuaweiMapOptions的styleId和previewId方法設定自定義樣式，當同時設定styleId和previewId時，優先使用styleId。

```
FragmentManager fragmentManager = getSupportFragmentManager();
mSupportMapFragment = (SupportMapFragment) fragmentManager.findFragmentByTag("support_map_fragment");

if (mSupportMapFragment == null) {
    HuaweiMapOptions huaweiMapOptions = new HuaweiMapOptions();
    // please replace "styleId" with style ID field value in
    huaweiMapOptions.styleId("styleId");       //在建立地圖前設定樣式ID
    // please replace "previewId" with preview ID field value in
    huaweiMapOptions.previewId("previewId");    //在建立地圖前設定預覽ID
    mSupportMapFragment = SupportMapFragment.newInstance(huaweiMapOptions);
    FragmentTransaction fragmentTransaction = fragmentManager.beginTransaction();
    fragmentTransaction.add(R.id.map_container_layout, mSupportMapFragment, "support_map_fragment");
    fragmentTransaction.commit();
}

mSupportMapFragment.getMapAsync(this);
mSupportMapFragment.onAttach(this);
```

##### 2.2 iOS SDK提供1種設定預覽ID或樣式ID的方式：建立地圖後。

在建立地圖後使用自定義樣式，請呼叫HMapView的setMapStyleID:和setMapPreviewID:方法設定。

```
/**
* @brief 改變底圖樣式
* @param styleID值為在官網配置的自定義樣式列表中ID
* @return 是否設定成功
*/
- (BOOL)setMapStyleID:(NSString*)styleID;
/**
* @brief 改變底圖樣式
* @param previewID值為在官網配置的自定義樣式列表中預覽ID
* @return 是否設定成功
*/
- (BOOL)setMapPreviewID:(NSString*)previewID;
```

##### 2.3 JavaScript提供兩種方式設定預覽ID或樣式ID：地圖載入前、地圖載入後

（1）在首次載入地圖時使用指定自定義樣式

在建立地圖引入華為地圖API檔案時，增加styleId或者previewId引數，當同時傳入styleId和previewId時，優先使用styleId。注意key要經過URL轉碼。

```
<div></div>
```

（2）在載入地圖後改變現有樣式

```
// 設定樣式ID
map.setStyleId(String styleId)
// 設定預覽ID
map.setPreviewId(String previewId)
```

**瞭解更多詳情>>**

訪問[地圖服務開發者聯盟官網](https://developer.huawei.com/consumer/cn/hms/huawei-MapKit?ha_source=hms1)

獲取[地圖服務開發指導文件](https://developer.huawei.com/consumer/cn/doc/development/HMSCore-Guides/android-sdk-introduction-0000001061991291?ha_source=hms1)

訪問[華為開發者聯盟官網](http://developer.huawei.com/consumer/cn/hms?ha_source=hms1)  
獲取[開發指導文件](http://developer.huawei.com/consumer/cn/doc/development?ha_source=hms1)  
華為移動服務開源倉庫地址：[GitHub](http://github.com/HMS-Core)、[Gitee](http://gitee.com/hms-core)

**關注我們，第一時間瞭解 HMS Core 最新技術資訊~**

用HMS Core地圖服務自定義地圖樣式，給你的應用製作專屬個性化地圖

相關文章