# 显示自定义地图

#### 场景介绍

本章节将向您介绍如何在应用中添加自定义样式的地图。

![](https://media:301785151558574503 "点击放大")  

#### 接口说明

自定义样式功能主要由[CustomMapStyleOptions](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/map-common#custommapstyleoptions)、[setCustomMapStyle](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/map-map-mapcomponentcontroller#setcustommapstyle)提供，更多接口及使用方法请参见[接口文档](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/map-map-mapcomponentcontroller#setcustommapstyle)。  

|接口名|描述|
|:---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|:-------------|
|[CustomMapStyleOptions](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/map-common#custommapstyleoptions)|自定义样式参数。|
|[setCustomMapStyle](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/map-map-mapcomponentcontroller#setcustommapstyle)(customMapStyleOptions: [mapCommon.CustomMapStyleOptions](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/map-common#custommapstyleoptions)): Promise\<void\>|将地图样式修改为自定义样式。|

#### 开发步骤

Map Kit提供两种方法设置自定义地图样式：

* 设置样式ID：使用[Petal Maps Studio](https://developer.petalmaps.com/console/studio/)管理地图样式，并使用样式ID将它们链接到您的地图上。您可以在[Petal Maps Studio](https://developer.petalmaps.com/console/studio/)上创建新样式，或导入现有样式定义。样式一旦发布，使用此样式的应用都会自动应用新样式。

* 设置样式内容：通过传入自定义JSON更改地图样式，JSON的定义参见[样式参考](#样式参考)。

#### 设置样式ID

1. 导入相关模块。

   ```
   import { MapComponent, mapCommon, map } from '@kit.MapKit';
   import { AsyncCallback, BusinessError } from '@kit.BasicServicesKit';
   ```

2. 创建样式ID。

   a.登录[Petal Maps Studio](https://developer.petalmaps.com/console/studio/)。

   ![](https://media:301785151558692505)

   b.点击"Create map"创建自定义样式。

   ![](https://media:301785151558759506)

   c.导入JSON样式文件，点击"Import"。

   ![](https://media:301785151558848508)

   d.在编辑器里修改样式。

   ![](https://media:301785151559107512)

   e.点击"SAVE"生成预览ID，预览ID在编辑样式时会重新生成，您可以通过预览ID测试样式效果。点击"PUBLISH"发布生成样式ID，样式ID是唯一ID，一旦发布生效不会变化。

   ![](https://media:301785151559273514)

   ![](https://media:301785151559325516)
3. Map Kit提供两种方法设置样式ID：

   * 在创建地图后设置样式ID

     ```
     import { MapComponent, mapCommon, map } from '@kit.MapKit';
     import { AsyncCallback, BusinessError } from '@kit.BasicServicesKit';
     ```

   * 在初始化地图时设置样式ID

     ```
     @Entry
     @Component
     struct MapStyleDemo {
       // ...
       private TAG = 'MapStyleDemo';
       private mapOptions?: mapCommon.MapOptions;
       private mapController?: map.MapComponentController;
       private callback?: AsyncCallback<map.MapComponentController>;

       aboutToAppear(): void {
         // 地图初始化参数
         this.mapOptions = {
           position: {
             target: {
               latitude: 31.984410259206815,
               longitude: 118.76625379397866
             },
             zoom: 15
           }
         };
         this.callback = async (err, mapController) => {
           if (!err) {
             this.mapController = mapController;
             // 自定义样式参数，styleId需要替换为您自己的样式ID或者预览ID，样式ID或者预览ID可在Petal Maps Studio平台上创建
             let param: mapCommon.CustomMapStyleOptions = {
               styleId: 'XXX'
             };
             // 设置自定义样式
             await this.mapController.setCustomMapStyle(param).then(() => {
               console.info(this.TAG + `setCustomMapStyle OK`);
             }).catch((error: BusinessError) => {
               console.error(this.TAG + `Failed in getting CustomMapStyle, code is：${error.code}, message is
               ${error.message}`);
             })
           } else {
             console.error(`Failed to initialize the map, code is：${err.code}, message is ${err.message}`);
           }
         };
       }

       build() {
         // ...
           Stack() {
             // 调用MapComponent组件初始化地图
             Column() {
               MapComponent({ mapOptions: this.mapOptions, mapCallback: this.callback });
             }.width('100%')
           }.height('100%')

           // ...
       }
     }
     ```

     设置样式ID之后效果如下：

![](https://media:301785151559491519 "点击放大")  

#### 设置样式内容

1. 导入相关模块。

   ```
   import { MapComponent, mapCommon, map } from '@kit.MapKit';
   import { AsyncCallback } from '@kit.BasicServicesKit';
   ```

2. 设置样式内容。

   ```
   @Entry
   @Component
   struct MapStyleDemo {
     // ...
     private mapOptions?: mapCommon.MapOptions;
     private mapController?: map.MapComponentController;
     private callback?: AsyncCallback<map.MapComponentController>;

     aboutToAppear(): void {
       // 地图初始化参数
       this.mapOptions = {
         position: {
           target: {
             latitude: 31.984410259206815,
             longitude: 118.76625379397866
           },
           zoom: 15
         }
       };
       this.callback = async (err, mapController) => {
         if (!err) {
           this.mapController = mapController;
           // 自定义样式参数
           let param: mapCommon.CustomMapStyleOptions = {
             styleContent: `[{
                      'mapFeature': 'landcover.natural',
                      'options': 'geometry.fill',
                      'paint': {
                          'color': '#8FBC8F'
                      }},
                      {
                     'mapFeature': 'water',
                     'options': 'geometry.fill',
                     'paint': {
                         'color': '#4682B4'
                     }}]`
           };
           // 设置自定义样式
           await this.mapController.setCustomMapStyle(param);
         } else {
           console.error(`Failed to initialize the map, code is：${err.code}, message is ${err.message}`);
         }
       };
     }

     build() {
       // ...
         Stack() {
           // 调用MapComponent组件初始化地图
           Column() {
             MapComponent({ mapOptions: this.mapOptions, mapCallback: this.callback });
           }.width('100%')
         }.height('100%')

         // ...
     }
   }
   ```

![](https://media:301785151559731522 "点击放大")  

#### 样式参考

自定义地图样式JSON内容通过下列4个元素来定义地图样式：

* mapFeature：地图要素

* options：元素选项

  * geometry.fill：几何填充
  * geometry.stroke：几何描边
  * geometry.icon：几何图标
  * labels.text.fill：文本填充
  * labels.text.stroke：文本描边
* paint：绘制属性

  * color：颜色，16进制颜色，例如"#FFFF00"
  * weight：线条宽度。整型值，\[1, 24\]，默认为1，大于1表示加宽
  * icon-type：图标类型，目前支持night、simple、standard
* visibility：可见属性，默认为可见

  * true：可见
  * false：不可见

下列各表将向您展示支持修改的地图元素。  
![](https://media:301785151559770523)  
* 图标类型icon-type支持范围为：standard/night/simple。

1. All

   All代表全部，即所有类别的集合，支持能力范围同其他所有列表，All仅可调整visibility（可见属性）。
2. Administrative

   |元素类型 Feature type|填充颜色 Geometry. fill. color|填充宽度 Geometry. fill. weight|描边颜色 Geometry. stroke. color|描边宽度 Geometry. stroke. weight|填充颜色 Labels. fill. color|文本大小 Labels. fill. weight|描边颜色 Labels. stroke. color|描边大小 Labels. stroke. weight|图标类型 Icon. icon-type|
   |:----------------|:------------------------------------|:------------------------------------|:------------------------------------|:------------------------------------|:------------------------------------|:------------------------------------|:------------------------------------|:------------------------------------|:------------------------------------|
   |Capital 首都|-|-|-|-|![](https://media:301785151559824525)|![](https://media:301785151559859527)|![](https://media:301785151559888529)|![](https://media:301785151559909530)|![](https://media:301785151559941532)|
   |Country 国家|![](https://media:301785151559966533)|![](https://media:301785151560374544)|![](https://media:301785151560403546)|![](https://media:301785151560515549)|![](https://media:301785151560618551)|![](https://media:301785151560642552)|![](https://media:301785151560681555)|![](https://media:301785151560768557)|-|
   |District 区/县|-|-|-|-|![](https://media:301785151560803559)|![](https://media:301785151560833561)|![](https://media:301785151560860563)|![](https://media:301785151560962564)|![](https://media:301785151561155571)|
   |Locality 乡村、城镇|-|-|-|-|![](https://media:301785151561194572)|![](https://media:301785151561219573)|![](https://media:301785151561245574)|![](https://media:301785151561292576)|![](https://media:301785151561327578)|
   |Major-city 1-4级城市|-|-|-|-|![](https://media:301785151561358580)|![](https://media:301785151561384581)|![](https://media:301785151561413582)|![](https://media:301785151561440584)|![](https://media:301785151561503586)|
   |Province 省|![](https://media:301785151561532587)|![](https://media:301785151561567589)|![](https://media:301785151561626591)|![](https://media:301785151561652592)|![](https://media:301785151561680593)|![](https://media:301785151561705594)|![](https://media:301785151561727595)|![](https://media:301785151561752596)|-|

3. Landcover

   |元素类型 Feature type|填充颜色 Geometry. fill. color|描边颜色 Geometry. stroke. color|填充颜色 Labels. fill. color|文本大小 Labels. fill. weight|描边颜色 Labels. stroke. color|描边大小 Labels. stroke. weight|
   |:--------------------------|:------------------------------------|:------------------------------------|:------------------------------------|:------------------------------------|:------------------------------------|:------------------------------------|
   |Attraction 游乐场、动植物园等|![](https://media:301785151561798597)|-|![](https://media:301785151561830599)|![](https://media:301785151561859600)|![](https://media:301785151561907601)|![](https://media:301785151561938602)|
   |Business 购物中心、商业区等|![](https://media:301785151561962604)|-|![](https://media:301785151561994605)|![](https://media:301785151562091607)|![](https://media:301785151562193609)|![](https://media:301785151562236610)|
   |College 学校|![](https://media:301785151562278611)|-|![](https://media:301785151562503614)|![](https://media:301785151562532615)|![](https://media:301785151562617619)|![](https://media:301785151562657621)|
   |Hospital 医院|![](https://media:301785151562684623)|-|![](https://media:301785151562707624)|![](https://media:301785151562765627)|![](https://media:301785151562806628)|![](https://media:301785151562834629)|
   |Human-made 聚集区、小区、工业区、监狱地面等|![](https://media:301785151562874630)|![](https://media:301785151562904632)|![](https://media:301785151562939634)|![](https://media:301785151562990635)|![](https://media:301785151563062639)|![](https://media:301785151563211640)|
   |Human-made 建筑物|![](https://media:301785151563256642)|![](https://media:301785151563283643)|-|-|-|-|
   |Natural 陆地、岛屿、海滩、冰川等|![](https://media:301785151563321644)|-|![](https://media:301785151563349645)|![](https://media:301785151563376646)|![](https://media:301785151563400647)|![](https://media:301785151563430648)|
   |Parkland 森林、公园、荒地、高尔夫球场等|![](https://media:301785151563459649)|-|![](https://media:301785151563489650)|![](https://media:301785151563517651)|![](https://media:301785151563544653)|![](https://media:301785151563599656)|

4. Poi

   |元素类型 Feature type|填充颜色 Labels. fill. color|文本大小 Labels. fill. weight|描边颜色 Labels. stroke. color|描边大小 Labels. stroke. weight|图标类型 Icon. icon-type|
   |:-------------------------|:------------------------------------|:------------------------------------|:------------------------------------|:------------------------------------|:------------------------------------|
   |Airport 飞机场|![](https://media:301785151563645658)|![](https://media:301785151563673659)|![](https://media:301785151563698660)|![](https://media:301785151563725661)|![](https://media:301785151563757662)|
   |Automotive 汽修、充电桩、洗车等|![](https://media:301785151563870664)|![](https://media:301785151563917665)|![](https://media:301785151564052669)|![](https://media:301785151564119670)|![](https://media:301785151564154671)|
   |Beauty 美容中心|![](https://media:301785151564296675)|![](https://media:301785151564334677)|![](https://media:301785151564362678)|![](https://media:301785151564387679)|![](https://media:301785151564415680)|
   |Business 公司、商业楼等|![](https://media:301785151564445681)|![](https://media:301785151564473683)|![](https://media:301785151564497685)|![](https://media:301785151564530687)|![](https://media:301785151564569689)|
   |Eating\&drinking 饮食快餐|![](https://media:301785151564597690)|![](https://media:301785151564624691)|![](https://media:301785151564666693)|![](https://media:301785151564695695)|![](https://media:301785151564725697)|
   |Health-care 医院、诊所、药店等|![](https://media:301785151564760698)|![](https://media:301785151564797700)|![](https://media:301785151564897702)|![](https://media:301785151564970704)|![](https://media:301785151565147706)|
   |Leisure 休闲娱乐|![](https://media:301785151565204707)|![](https://media:301785151565250708)|![](https://media:301785151565527711)|![](https://media:301785151565552713)|![](https://media:301785151565578714)|
   |Lodging 酒店、住宿点|![](https://media:301785151565731717)|![](https://media:301785151565759719)|![](https://media:301785151565785720)|![](https://media:301785151565835722)|![](https://media:301785151565869723)|
   |Miscellaneous 自然地物|![](https://media:301785151565900725)|![](https://media:301785151565929726)|![](https://media:301785151565962728)|![](https://media:301785151565982729)|![](https://media:301785151566024732)|
   |Natural 山峰、森林等|![](https://media:301785151566259736)|![](https://media:301785151566300737)|![](https://media:301785151566325739)|![](https://media:301785151566346740)|![](https://media:301785151566370741)|
   |Public-service 医院、诊所、药店等|![](https://media:301785151566394742)|![](https://media:301785151566415743)|![](https://media:301785151566437744)|![](https://media:301785151566461745)|![](https://media:301785151566506747)|
   |Railway 铁路|![](https://media:301785151566538749)|![](https://media:301785151566563750)|![](https://media:301785151566598752)|![](https://media:301785151566621753)|![](https://media:301785151566645754)|
   |Shopping 购物中心、市场等|![](https://media:301785151566671756)|![](https://media:301785151566700758)|![](https://media:301785151566725759)|![](https://media:301785151566751760)|![](https://media:301785151566805762)|
   |Sports-outdoor 户外运动、爬山、骑车等|![](https://media:301785151566830763)|![](https://media:301785151567050768)|![](https://media:301785151567075769)|![](https://media:301785151567112770)|![](https://media:301785151567144771)|
   |Tourism 旅游景点、历史遗迹、教堂等|![](https://media:301785151567232775)|![](https://media:301785151567423780)|![](https://media:301785151567448781)|![](https://media:301785151567474782)|![](https://media:301785151567500783)|

5. Road

   |元素类型 Feature type|填充颜色 Geometry. fill. color|填充宽度 Geometry. fill. weight|描边颜色 Geometry. stroke. color|描边宽度 Geometry. stroke. weight|填充颜色 Labels. fill. color|文本大小 Labels. fill. weight|描边颜色 Labels. stroke. color|描边大小 Labels. stroke. weight|图标类型 Icon. icon-type|
   |:------------------|:------------------------------------|:------------------------------------|:------------------------------------|:------------------------------------|:------------------------------------|:------------------------------------|:------------------------------------|:------------------------------------|:------------------------------------|
   |City-arterial 城市主干道|![](https://media:301785151567527784)|![](https://media:301785151567557785)|![](https://media:301785151567584786)|![](https://media:301785151567608787)|![](https://media:301785151567637788)|![](https://media:301785151567663789)|![](https://media:301785151567690790)|![](https://media:301785151567713791)|![](https://media:301785151567746792)|
   |Highway 城市高速|![](https://media:301785151567766793)|![](https://media:301785151567800794)|![](https://media:301785151567825795)|![](https://media:301785151567853797)|![](https://media:301785151567883799)|![](https://media:301785151568220807)|![](https://media:301785151568243809)|![](https://media:301785151568267810)|![](https://media:301785151568293812)|
   |Minor-road 市区内支线等|![](https://media:301785151568321814)|![](https://media:301785151568351815)|![](https://media:301785151568374817)|![](https://media:301785151568399819)|![](https://media:301785151568431821)|![](https://media:301785151568461822)|![](https://media:301785151568482823)|![](https://media:301785151568506824)|-|
   |National 国道|![](https://media:301785151568528825)|![](https://media:301785151568556826)|![](https://media:301785151568578827)|![](https://media:301785151568625830)|![](https://media:301785151568651832)|![](https://media:301785151568683834)|![](https://media:301785151568703836)|![](https://media:301785151568731838)|![](https://media:301785151568759839)|
   |Province 省道|![](https://media:301785151568792840)|![](https://media:301785151568818842)|![](https://media:301785151568925844)|![](https://media:301785151568951845)|![](https://media:301785151568976847)|![](https://media:301785151568998848)|![](https://media:301785151569024850)|![](https://media:301785151569050851)|![](https://media:301785151569224855)|
   |Sidewalk 人行道|![](https://media:301785151569258857)|![](https://media:301785151569287858)|![](https://media:301785151569322859)|![](https://media:301785151569348860)|![](https://media:301785151569373861)|![](https://media:301785151569401862)|![](https://media:301785151569424863)|![](https://media:301785151569454864)|-|

6. Trafficinfo

   |元素类型 Feature type|填充颜色 Geometry. fill. color|填充颜色 Labels. fill. color|文本大小 Labels. fill. weight|
   |:----------------|:------------------------------------|:------------------------------------|:------------------------------------|
   |Closed 封路|![](https://media:301785151569693870)|![](https://media:301785151569794871)|![](https://media:301785151569834873)|

7. Transit

   |元素类型 Feature type|填充颜色 Geometry. fill. color|填充宽度 Geometry. fill. weight|描边颜色 Geometry. stroke. color|描边宽度 Geometry. stroke. weight|填充颜色 Labels. fill. color|文本大小 Labels. fill. weight|描边颜色 Labels. stroke. color|描边大小 Labels. stroke. weight|图标类型 Icon. icon-type|
   |:-----------------------------|:------------------------------------|:------------------------------------|:------------------------------------|:------------------------------------|:------------------------------------|:------------------------------------|:------------------------------------|:------------------------------------|:------------------------------------|
   |Airport 机场|![](https://media:301785151569861874)|-|-|-|![](https://media:301785151569886875)|![](https://media:301785151569922878)|![](https://media:301785151569950880)|![](https://media:301785151570032883)|![](https://media:301785151570058884)|
   |Airport Runway 机场跑道|![](https://media:301785151570167888)|![](https://media:301785151570192889)|![](https://media:301785151570217890)|![](https://media:301785151570239891)|-|-|-|-|-|
   |Airport Runway Taxiway 机场跑道滑行道|![](https://media:301785151570264892)|![](https://media:301785151570286893)|![](https://media:301785151570313895)|![](https://media:301785151570340897)|-|-|-|-|-|
   |Bus 公交|-|-|-|-|![](https://media:301785151570547900)|![](https://media:301785151570821904)|![](https://media:301785151570857906)|![](https://media:301785151570912908)|![](https://media:301785151570963910)|
   |Ferry-line 航线|![](https://media:301785151570998912)|-|-|-|![](https://media:301785151571114914)|![](https://media:301785151571140916)|![](https://media:301785151571164917)|![](https://media:301785151571212918)|-|
   |Ferry-terminal 港口|![](https://media:301785151571244919)|-|-|-|![](https://media:301785151571387926)|![](https://media:301785151571414928)|![](https://media:301785151571459930)|![](https://media:301785151571486932)|![](https://media:301785151571665936)|
   |Other 出租车、 出入口等|-|-|-|-|![](https://media:301785151571704938)|![](https://media:301785151571757940)|![](https://media:301785151571829943)|![](https://media:301785151571923945)|![](https://media:301785151571961947)|
   |Rail-station 火车站、 高铁站|![](https://media:301785151571989948)|-|-|-|![](https://media:301785151572033950)|![](https://media:301785151572081952)|![](https://media:301785151572206953)|![](https://media:301785151572444961)|![](https://media:301785151572472962)|
   |Railway 铁路线、 高铁线|![](https://media:301785151572500963)|![](https://media:301785151572535964)|![](https://media:301785151572592965)|![](https://media:301785151572626967)|-|-|-|-|-|
   |Subway 地铁|![](https://media:301785151572847970)|![](https://media:301785151572940972)|![](https://media:301785151572964973)|![](https://media:301785151573003975)|![](https://media:301785151573024977)|![](https://media:301785151573117981)|![](https://media:301785151573178982)|![](https://media:301785151573201983)|![](https://media:301785151573226984)|
   |Traffic_light 交通灯|-|-|-|-|-|-|-|-|![](https://media:301785151573249985)|

8. Water

   |元素类型 Feature type|填充颜色 Geometry. fill. color|填充颜色 Labels. fill. color|文本大小 Labels. fill. weight|
   |:----------------|:------------------------------------|:------------------------------------|:------------------------------------|
   |Ocean 水系、海洋、湖泊、河流|![](https://media:301785151573269986)|![](https://media:301785151573299987)|![](https://media:301785151573323988)|