实现步骤-自定义地图样式-JavaScript-地图服务

设置地图样式，您可以使用地图预置样式（standard、simple、night），也可以通过样式编辑器或Maps Studio云平台自定义地图样式。

使用预置样式

调用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上创建新样式，或导入现有样式定义。一旦发布，使用此样式的应用都会自动应用新样式，不需要更新版本。

设置样式文件

调用HWMap的setStyle(json)方法设置自定义地图样式，JSON为自定义的地图样式文件，JSON样式声明文件的定义参见样式参考。图4展示了通过嵌入JSON文件自定义地图样式的效果：

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

图4 自定义地图样式
点击放大

设置样式ID

登录Petal Maps Studio云平台。
点击“Create map”创建自定义样式。
导入JSON样式文件，点击“Import”。
在编辑器里修改样式。
点击“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)