不同行业的开发者对地图款式的展现需要差别很大。例如,物流类利用心愿地图款式简洁一些,重点突出城市散布和快递门路;AR游戏类利用中的地图色调须要和游戏UI适配,做的更酷炫一些;景区导览利用中的地图款式要景区特色相结合,重点出现要害景点。

自定义地图款式能够更好的投合不同行业的开发者对于地图款式的展现需要,开发者能够综合思考本身产品的应用场景、品牌色调等因素,自在创立最适宜的地图款式。

HMS Core地图服务(Map Kit)提供了自定义地图款式能力,开发者可通过更改Petal Maps Studio中的款式选项,自定义地图款式的显示,更改路线、公园、企业和其余趣味点等性能的可视化显示。提供七大类,上百种地图元素的款式编辑,让开发者自在编辑个性化地图。同时,开发者只需编辑一次,地图即可实用于多种终端(Android/iOS/Web)极大的进步了开发效率

集成步骤

一、 生成款式ID

1. 登录Petal Maps Studio,点击“Create map”创立自定义款式。

2. 导入JSON款式文件,点击“Import”。

3. 在编辑器里批改款式。

4. 点击“SAVE”生成预览ID,通过预览ID测试款式成果。点击“PUBLISH”公布生成款式ID,款式ID是惟一ID,一旦公布失效不会变动。

二、 各平台代码实现步骤

地图服务提供两种办法设置自定义地图款式:

• 设置款式文件:通过嵌入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();   //在创立地图后设置预览IDif (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转码。

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

(2)在加载地图后扭转现有款式

// 设置款式IDmap.setStyleId(String styleId)// 设置预览IDmap.setPreviewId(String previewId)

理解更多详情>>

拜访地图服务开发者联盟官网

获取地图服务开发领导文档

拜访华为开发者联盟官网
获取开发领导文档
华为挪动服务开源仓库地址:GitHub、Gitee

关注咱们,第一工夫理解 HMS Core 最新技术资讯~