用HMS Core地图服务自定义地图样式,给你的应用制作专属个性化地图
不同行业的开发者对地图样式的展示需求差异很大。例如,物流类应用希望地图样式简洁一些,重点突出城市分布和快递路径;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(); //在创建地图后设置预览ID if (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)在加载地图后改变现有样式
// 设置样式ID map.setStyleId(String styleId) // 设置预览ID map.setPreviewId(String previewId)
了解更多详情>>
访问华为开发者联盟官网
获取开发指导文档
华为移动服务开源仓库地址:GitHub、Gitee
关注我们,第一时间了解 HMS Core 最新技术资讯~
低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。
持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。
转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。
- 上一篇
开源中的 “胖虎效应”
今天我们来聊一个非常有意思的现象:“胖虎效应”。 胖虎是经典动漫《哆啦A梦》中的“反派角色”,常年对主角大雄实施校园霸凌,一副猪皮恶霸的形象深入人心,是很多小朋友厌恶的对象。然而在一些《哆啦A梦》剧场版的作品中,胖虎偶然间做了一件好事,就会给人一种“这小子其实也不是那么坏”的感觉,使得观众对其好感直线上升。 反之,一个平日里一直做好事的正人君子,突然被曝出做了一件坏事,那么这个人在人们心中“坏”的形象则会倍增,甚至会把他此前做过的所有好事全盘否定,给人一种“这个人一直以来的好都是装出来的”感觉。也就是俗话说的,“伪君子比真小人更可怕”。 “胖虎效应”最初出自漫画《银魂》的一句恶搞台词,虽然该定律并没有什么靠谱的理论依据,但通过胖虎这个简单的例子,直观地反映了一种常见心理现象。这种现象映射到现实生活中,我们能看到很多例子与之相符,其中开源领域尤为契合。 开源中的“胖虎效应” “胖虎效应”在开源领域最经典的例子就是微软的转变。 众所周知,微软曾是开源世界最大的敌人,这个专有软件巨头在 20 年前公然宣称以 Linux 为代表的开源软件是业界毒瘤,并通过媒体舆论、法律威胁等手段对开源社区进行...
- 下一篇
聊聊基于docker部署的mysql如何进行数据恢复
前言 偶然的机会朋友说他部门的数据库误删了,想恢复回来,他百度了一些资料,也跟着试了。但发现会报一些错,于是他就找我帮忙看一下。对于我来说,因为公司的数据库都是DBA在管控,平时都没机会操作,基本上都停留在理论上。 但为了维持我在他心中的光辉形象,不能让他看出我是个半吊子,我就装逼让他把错误的信息发给我一下,我好百度一下。于是就有今天这么一篇水文出现。 朋友的数据库是基于docker搭建的,朋友一度怀疑是因为docker原因导致他恢复不成功。 数据恢复之binlog前置知识 注: 本文的例子为demo示例,mysql基于docker搭建。版本为mysql 8.0 1、先确认mysql是否已经开启binlog SHOW VARIABLES LIKE '%log_bin%'; 注: mysql8.0默认就已经开启binlog,且binlog-format为row格式。如果是mysql8.0以下,需通过/etc/my.cnf进行配置开启。配置内容如下 ##配置binlog日志路径以及日志文件名前缀、生成的日志格式为:binlog.000001 log-bin=/var/lib/mysql/b...
相关文章
文章评论
共有0条评论来说两句吧...
文章二维码
点击排行
推荐阅读
最新文章
- CentOS关闭SELinux安全模块
- CentOS7编译安装Gcc9.2.0,解决mysql等软件编译问题
- Windows10,CentOS7,CentOS8安装MongoDB4.0.16
- Hadoop3单机部署,实现最简伪集群
- SpringBoot2编写第一个Controller,响应你的http请求并返回结果
- CentOS6,CentOS7官方镜像安装Oracle11G
- Eclipse初始化配置,告别卡顿、闪退、编译时间过长
- SpringBoot2全家桶,快速入门学习开发网站教程
- CentOS8编译安装MySQL8.0.19
- CentOS6,7,8上安装Nginx,支持https2.0的开启