当前位置: 首页 > 后端技术 > Java

使用HMSCore地图服务自定义地图样式,为您的应用打造专属的个性化地图

时间:2023-04-01 20:02:19 Java

不同行业的开发者对地图样式的展示需求大不相同。例如,物流应用希望地图样式简洁,重点关注城市分布和配送路线;AR游戏应用中的地图颜色需要适配游戏UI,使其更炫酷;结合景区特点,重点呈现重点景区。自定义地图样式可以更好的满足不同行业开发者对地图样式的展示需求。开发者可以结合自身的产品使用场景、品牌色彩等因素,自由打造最适合自己的地图风格。HMSCore地图服务(MapKit)提供自定义地图样式的能力。开发人员可以通过更改PetalMapsStudio中的样式选项来自定义地图样式的显示并更改道路、公园、企业和其他兴趣点的可视化。展示。提供七大类、上百种地图元素的样式编辑,让开发者自由编辑个性化地图。同时,开发者只需编辑一次,地图即可应用于各种终端(Android/iOS/Web),大大提高了开发效率。集成步骤1.生成样式ID1。登录PetalMapsStudio,点击“创建地图”创建自定义样式。2、导入JSON样式文件,点击“导入”。3.在编辑器中修改样式。4、点击“SAVE”生成预览ID,通过预览ID测试样式效果。单击“发布”发布并生成样式ID。styleID是一个唯一的ID,一旦生效就不会改变。2.各平台代码实现步骤地图服务提供了两种设置自定义地图样式的方法:?设置样式文件:通过嵌入JSON样式声明文件,手动定义地图样式变化。?设置样式ID:在PetalMapsStudio上创建新样式,或导入现有样式定义。样式发布后,使用该样式的应用会自动应用新样式,无需更新版本。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.1Android设置样式文件(1)在res/raw目录下添加JSON文件mapstyle_road.json(2)使用loadRawResourceStyle()方法,将其作为MapStyleOptions对象加载,然后将该对象传递给HuaweiMap.setMapStyle()方法privateHuaweiMaphMap;MapStyleOptionsstyleOptions=MapStyleOptions.loadRawResourceStyle(this,R.raw.mapstyle_road);hMap.setMapStyle(styleOptions);1.2iOS设置样式文件(1)在项目目录下定义一个JSON文件mapstyle_road.json(2)将文件路径传给setMapStyle方法//读取样式文件的路径NSString*path=[NSBundle.mainBundlepathForResource:nameofType:@"json"];//调用设置方法[self.mapViewsetMapStyle:path];1.3JavaScript设置样式文件map.setStyle("mapstyle_road.json");2.第二种方法:设置预览ID或样式ID2.1Android设置样式IDAndroidSDK提供了两种设置预览ID或样式ID的方式:创建地图前和创建地图后。(1)创建地图后使用自定义样式。通过调用HuaweiMap的setStyleId和previewId方法设置自定义样式。privateHuaweiMaphMap;StringstyleIdStr=edtStyleId.getText().toString();//创建地图后设置样式ID//StringpreviewIdStr=edtPreviewId.getText().toString();//创建map后设置预览IDif(TextUtils.isEmpty(styleIdStr)){Toast.makeText(this,"PleasemakesurethestyleIDisedited",Toast.LENGTH_SHORT).show();return;}if(null!=hMap){hMap.setStyleId("859320508888914176");//hMap.previewId("888359570022864384");}(2)在创建地图之前,调用HuaweiMapOptions的styleId和previewId方法更改已有样式,设置自定义样式。样式ID。FragmentManagerfragmentManager=getSupportFragmentManager();mSupportMapFragment=(SupportMapFragment)fragmentManager.findFragmentByTag("support_map_fragment");if(mSupportMapFragment==null){HuaweiMapOptionshuaweiMapOptions=newHuaweiMapOptions();//请将huaweiMapOptions.styleId("styleId")中的"styleId"替换为样式ID字段值;//创建地图前设置样式ID//请将huaweiMapOptions.previewId("previewId")中的"previewId"替换为预览ID字段值//创建地图前设置预览IDmSupportMapFragment=SupportMapFragment.newInstance(huaweiMapOptions);FragmentTransactionfragmentTransaction=fragmentManager.beginTransaction();fragmentTransaction.add(R.id.map_container_layout,mSupportMapFragment,"support_map_fragment");fragmentTransaction.commit();}mSupportMapFragment.getMapAsync(this)onAttach(this);2.2iOSSDK提供了一种设置预览ID或样式ID的方法:创建地图后要使用自定义样式,请调用HMapView的setMapStyleID:和setMapPreviewID:方法进行设置。/***@brief更改底图样式*@paramstyleID值为官网配置的自定义样式列表中的ID*@return是否设置成功*/-(BOOL)setMapStyleID:(NSString*)styleID;/***@brief更改底图样式*@parampreviewID值为官网配置的自定义样式列表中的预览ID*@return是否设置成功*/-(BOOL)setMapPreviewID:(NSString*)previewID;2.3JavaScript提供了两种设置PreviewID或styleID的方式:地图加载前,地图加载后(1)首次加载地图时使用指定的自定义样式。创建地图并导入华为地图API文件时,添加styleId或previewId参数。当同时传入styleId和previewId时,优先选择styleId。请注意,密钥需要进行URL转码。(2)加载地图后改变已有样式//设置样式IDmap.setStyleId(StringstyleId)//设置预览IDmap.setPreviewId(StringpreviewId)更多详情>>访问地图服务开发者联盟官网获取地图服务开发指导文档访问官方华为开发者联盟官网获取开发指导文档华为移动服务开源仓库地址:GitHub、Gitee关注我们,第一时间了解HMSCore最新技术资讯~