实现步骤

使用预置样式

调用HWMap的setPresetStyleId(String)方法设置地图样式，目前支持standard（图1）、simple（图2）、night（图3）三种样式。地图类型为ROADMAP（基础地图）时，支持样式包括：standard（默认）、simple、night；地图类型为TERRAIN（地形图）时，仅支持standard样式。

map.setPresetStyleId("night");

图1 标准样式

图2 简单样式

图3 黑夜样式

自定义地图样式

华为地图提供以下两种方法设置自定义地图样式：

• 设置样式文件：通过嵌入JSON样式声明文件手动定义地图样式的更改。
• 设置样式ID：使用Petal Maps Studio云平台创建和管理地图样式，并使用样式ID将它们链接到您的地图上。您可以在Petal Maps Studio上创建新样式，或导入现有样式定义。一旦发布，使用此样式的应用都会自动应用新样式，不需要更新版本。

[h2]设置样式文件

map.setStyle([
		{
			"mapFeature": "landcover.natural",
			"options": "geometry.fill",
			"paint": {
				"color": "#8FBC8F"
			}
		},
		{
			"mapFeature": "water",
			"options": "geometry.fill",
			"paint": {
				"color": "#4682B4"
			}
		}
	]
);

图4 自定义地图样式

[h2]设置样式ID

1. 登录Petal Maps Studio云平台。

   

2. 点击“Create map”创建自定义样式。

   

3. 导入JSON样式文件，点击“Import”。

   

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

   

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

   

   

调用JavaScript接口设置预览ID和样式ID，将地图样式设置为新增的自定义样式。

JavaScript提供两种方式设置预览ID或样式ID：地图加载前、地图加载后。

• 在首次加载地图时就使用指定自定义样式。

  在创建地图引入华为地图API文件时，增加styleId或者previewId参数，当同时传入styleId和previewId时，优先使用styleId。注意key要经过URL转码。

  <script src="https://mapapi.cloud.huawei.com/mapjs/v1/api/js?callback=initMap&key=API KEY&styleId=styleId"></script>

• 在加载地图后改变现有样式，可以调用HWMap的如下方法：

  // 设置样式ID
  map.setStyleId(String styleId)
  // 设置预览ID
  map.setPreviewId(String previewId)