探索自定义地图样式，打造应用专属个性化地图

不同应用的开发者对地图样式的展示需求差异很大。例如，物流类应用希望地图样式简洁一些，重点突出城市分布和快递路径；AR游戏类应用中的地图色彩需要和游戏UI适配，做的更酷炫一些；景区导览应用中的地图样式要景区特色相结合，重点呈现关键景点。
这就要求地图样式为开发者提供多种地图样式供选择，包括简洁风格、酷炫风格、特色风格等，让开发者可以根据自己的需求自定义地图样式，包括颜色、标注、线条等元素，以实现更加个性化的展示效果，以满足不同应用的需求。
HarmonyOS SDK地图服务（Map Kit）提供了自定义地图样式的能力，开发者可使用Petal Maps Studio管理地图样式或者通过传入自定义JSON更改地图样式。提供八大类，上百种地图元素的样式编辑，让开发者自由编辑个性化地图。同时，开发者只需编辑一次，地图即可适用于多种终端，极大的提高了开发效率。

开发步骤

Map Kit提供两种方法设置自定义地图样式：
• 设置样式ID：使用Petal Maps Studio管理地图样式，并使用样式ID将它们链接到您的地图上。您可以在Petal Maps Studio上创建新样式，或导入现有样式定义。样式一旦发布，使用此样式的应用都会自动应用新样式。
• 设置样式内容：通过传入自定义JSON更改地图样式，JSON的定义参见样式参考。
设置样式ID

• 导入相关模块。
  import { MapComponent, mapCommon, map } from '@kit.MapKit';
  import { AsyncCallback } from '@kit.BasicServicesKit';
  
• 创建样式ID。
  

a. 登录Petal Maps Studio。

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

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

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

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

• Map Kit提供两种方法设置样式ID：
  

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

1. @Entry
2. @Component
3. struct CustomMapStyleDemo {
4.   private mapOptions?: mapCommon.MapOptions;
5.   private mapController?: map.MapComponentController;
6.   private callback?: AsyncCallback<map.MapComponentController>;
8.   aboutToAppear(): void {
9.     // 地图初始化参数
10.     this.mapOptions = {
11.       position: {
12.         target: {
13.           latitude: 31.984410259206815,
14.           longitude: 118.76625379397866
15.         },
16.         zoom: 15
17.       }
18.     };
19.     this.callback = async (err, mapController) => {
20.       if (!err) {
21.         this.mapController = mapController;
22.         // 自定义样式参数，styleId需要替换为您自己的样式ID或者预览ID，样式ID或者预览ID可在Petal Maps Studio平台上创建
23.         let param: mapCommon.CustomMapStyleOptions = {
24.            styleId: "1346407266336828736"
25.         };
26.         // 设置自定义样式
27.         await this.mapController.setCustomMapStyle(param);
28.       }
29.     };
30.   }
32.   build() {
33.     Stack() {
34.       Column() {
35.         MapComponent({ mapOptions: this.mapOptions, mapCallback: this.callback });
36.       }.width('100%')
37.     }.height('100%')
38.   }
39. }

复制代码

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

1. @Entry
2. @Component
3. struct CustomMapStyleDemo {
4.   private mapOptions?: mapCommon.MapOptions;
5.   private mapController?: map.MapComponentController;
6.   private callback?: AsyncCallback<map.MapComponentController>;
8.   aboutToAppear(): void {
9.     // 地图初始化参数
10.     this.mapOptions = {
11.       position: {
12.         target: {
13.           latitude: 31.984410259206815,
14.           longitude: 118.76625379397866
15.         },
16.         zoom: 15
17.       },
18.       // 自定义样式参数，styleId需要替换为您自己的样式ID或者预览ID，样式ID或者预览ID可在Petal Maps Studio平台上创建
19.       styleId: "1346407266336828736"
20.     };
21.     this.callback = async (err, mapController) => {
22.       if (!err) {
23.         this.mapController = mapController;
24.       }
25.     };
26.   }
28.   build() {
29.     Stack() {
30.       Column() {
31.         MapComponent({ mapOptions: this.mapOptions, mapCallback: this.callback });
32.       }.width('100%')
33.     }.height('100%')
34.   }
35. }

复制代码

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

设置样式内容

• 导入相关模块。
  

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

复制代码

• 设置样式内容。
  

1. @Entry
2. @Component
3. struct CustomMapStyleDemo {
4.   private mapOptions?: mapCommon.MapOptions;
5.   private mapController?: map.MapComponentController;
6.   private callback?: AsyncCallback<map.MapComponentController>;
8.   aboutToAppear(): void {
9.     // 地图初始化参数
10.     this.mapOptions = {
11.       position: {
12.         target: {
13.           latitude: 31.984410259206815,
14.           longitude: 118.76625379397866
15.         },
16.         zoom: 15
17.       }
18.     };
19.     this.callback = async (err, mapController) => {
20.       if (!err) {
21.         this.mapController = mapController;
22.         // 自定义样式参数
23.         let param: mapCommon.CustomMapStyleOptions = {
24.                styleContent: `[{
25.                    "mapFeature": "landcover.natural",
26.                    "options": "geometry.fill",
27.                    "paint": {
28.                        "color": "#8FBC8F"
29.                    }},
30.                    {
31.                   "mapFeature": "water",
32.                   "options": "geometry.fill",
33.                   "paint": {
34.                       "color": "#4682B4"
35.                   }}]`
36.         };
37.         // 设置自定义样式
38.         await this.mapController.setCustomMapStyle(param);
39.       }
40.     };
41.   }
43.   build() {
44.     Stack() {
45.       Column() {
46.         MapComponent({ mapOptions: this.mapOptions, mapCallback: this.callback });
47.       }.width('100%')
48.     }.height('100%')
49.   }
50. }

复制代码

了解更多详情>>
访问地图服务联盟官网
获取自定义地图样式开发指导文档

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！