个性化地图,通过改变底图各元素和文字的颜色、可见性,实现地图多样展现效果,适配各个行业不同的地图呈现效果或适配不同App风格。
.支持设置地图点、线、面共51个元素,包含陆地、水系、绿地、人造区域、建筑物、道路、铁路、地铁,POI、行政区划、边界线等。
.支持设置的地图元素的颜色、透明度、宽度、指定级别控制元素及其可见性的变更。
.个性化地图功能示例代码位于基础地图(BaseMapDemo)这个功能模块,开发者使用时可以参考。
效果示例:
两种方式:
.通过个性地图编辑工具,自行编辑地图展示样式,通过【编辑JSON】查看生成的JSON,然后通过【下载JSON】拿到JSON文件。注意:目前两端暂未统一,请根据表里支持的元素配置,配置后请在工程中验证。
.根据个性化地图元素说明规则,编辑JSON代码。 在个性地图编辑工具中提供了个几套标准模板样式文件供大家使用,点击编辑器中【个性化模版】选择喜欢的模版【下载JSON】拿到JSON文件,可参照该模版编辑您自己的样式文件。JSON基本的格式如下:
在assets目录下新建一个用来存放自定义样式文件的目录,放入编辑好的JSON样式文件。
// 地图View实例 private MapView mMapView; // 声明json文件变量 private static final String CUSTOM_FILE_NAME_GRAY = "custom_map_config_gray.json"; @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); mMapView = new MapView(this, new BaiduMapOptions()); FrameLayout frameLayout = new FrameLayout(this); frameLayout.addView(mMapView); setContentView(frameLayout); // 获取json文件路径 String customStyleFilePath = getCustomStyleFilePath(CustomMapDemo.this, CUSTOM_FILE_NAME_GRAY); // 设置个性化地图样式文件的路径和加载方式 mMapView.setMapCustomStylePath(customStyleFilePath); // 动态设置个性化地图样式是否生效 mMapView.setMapCustomStyleEnable(true); } /** * 读取json路径 */ private String getCustomStyleFilePath(Context context, String customStyleFileName) { FileOutputStream outputStream = null; InputStream inputStream = null; String parentPath = null; try { inputStream = context.getAssets().open("customConfigdir/" + customStyleFileName); byte[] buffer = new byte[inputStream.available()]; inputStream.read(buffer); parentPath = context.getFilesDir().getAbsolutePath(); File customStyleFile = new File(parentPath + "/" + customStyleFileName); if (customStyleFile.exists()) { customStyleFile.delete(); } customStyleFile.createNewFile(); outputStream = new FileOutputStream(customStyleFile); outputStream.write(buffer); } catch (IOException e) { Log.e("CustomMapDemo", "Copy custom style file failed", e); } finally { try { if (inputStream != null) { inputStream.close(); } if (outputStream != null) { outputStream.close(); } } catch (IOException e) { Log.e("CustomMapDemo", "Close stream failed", e); return null; } } return parentPath + "/" + customStyleFileName; }
以下效果是个性地图编辑工具提供下载自定义样式文件应用效果:
一蓑烟雨绿野仙踪眼眸
.支持修改的地图元素
注意:版本支持是V4.5.0表示V4.5.0及以上版本新增属性,版本支持是V5.1.0表示V5.1.0及以上版本新增属性,V4.5.0以下版本更换版本后,请先验证显示效果。
地图元素 | 元素代码 | 形状边框 颜色 |
形状填充 颜色 |
文字边框 颜色 |
文字填充 颜色 |
icon 可见性 |
颜色 可见性 |
颜色 透明度 |
备注 版本支持 |
全部 | all | √ | V4.5.0 | ||||||
陆地 | land | √ | √ | √ | √ | V4.2.0 | |||
水系 | water | √ | √ | √ | √ | √ | √ | ||
绿地 | green | √ | √ | √ | √ | ||||
人造区域 | manmade | √ | √ | √ | √ | √ | √ | ||
人造区域之地铁区域 | subwaystation | √ | √ | √ | √ | √ | V4.5.0 | ||
人造区域之教育区域 | education | √ | √ | √ | √ | √ | √ | √ | |
人造区域之医疗区域 | medical | √ | √ | √ | √ | √ | √ | √ | |
人造区域之景点区域 | scenicspots | √ | √ | √ | √ | √ | √ | √ | |
人造区域之地产小区区域 | estate | √ | √ | √ | √ | √ | √ | √ | V5.1.0 |
人造区域之购物区域 | shopping | √ | √ | √ | √ | √ | √ | √ | |
人造区域之交通设施区域 | transportation | √ | √ | √ | √ | √ | √ | √ | |
建筑物 | building | √ | √ | √ | √ | V4.2.0 | |||
高速及国道 | highway | √ | √ | √ | √ | √ | √ | √ | |
城市主路 | arterial | √ | √ | √ | √ | √ | √ | √ | |
普通道路 | local | √ | √ | √ | √ | √ | √ | √ | |
国道 | nationalway | √ | √ | √ | √ | √ | √ | √ | V5.2.1 |
省道 | provincialway | √ | √ | √ | √ | √ | √ | √ | |
城市快速路 | cityhighway | √ | √ | √ | √ | √ | √ | √ | |
三级道路 | tertiaryway | √ | √ | √ | √ | √ | √ | √ | |
四级道路 | fourlevelway | √ | √ | √ | √ | √ | √ | √ | |
景区内部道路 | scenicspotsway | √ | √ | √ | √ | √ | √ | √ | |
高校内部道路 | universityway | √ | √ | √ | √ | √ | √ | √ | |
度假地内部道路 | vacationway | √ | √ | √ | √ | √ | √ | √ | |
铁路 | railway | √ | √ | √ | √ | √ | √ | √ | V4.2.0 |
地铁 | subway | √ | √ | √ | √ | √ | √ | √ | |
行政区边界 | boundary | √ | √ | √ | √ | ||||
行政区化 | districtlabel | √ | √ | √ | √ | √ | |||
全部POI标注(V4.5.0起不再去除行政区文字) | poilabel | √ | √ | √ | √ | √ | |||
行政区划之大洲 | continent | √ | √ | √ | √ | √ | V4.5.0 | ||
行政区划之国家 | country | √ | √ | √ | √ | √ | |||
行政区划之省 | province | √ | √ | √ | √ | √ | |||
行政区划之城市 | city | √ | √ | √ | √ | √ | |||
行政区划之区县 | district | √ | √ | √ | √ | √ | |||
行政区划之乡镇 | town | √ | √ | √ | √ | √ | |||
机场标注 | airportlabel | √ | √ | √ | √ | √ | |||
旅游景点标注 | scenicspotslabel | √ | √ | √ | √ | √ | |||
教育标注 | educationlabel | √ | √ | √ | √ | √ | |||
医疗标注 | medicallabel | √ | √ | √ | √ | √ | |||
房产小区标注 | estatelabel | √ | √ | √ | √ | √ | V5.1.0 | ||
商务大厦标注 | businesstowerlabel | √ | √ | √ | √ | √ | |||
公司企业标注 | companylabel | √ | √ | √ | √ | √ | |||
政府机构标注 | governmentlabel | √ | √ | √ | √ | √ | |||
餐饮类标注 | restaurantlabel | √ | √ | √ | √ | √ | |||
宾馆类标注 | hotellabel | √ | √ | √ | √ | √ | |||
购物类标注 | shoppinglabel | √ | √ | √ | √ | √ | |||
生活服务类标注 | lifeservicelabel | √ | √ | √ | √ | √ | |||
汽车服务类标注 | carservicelabel | √ | √ | √ | √ | √ | |||
交通设施类标注 | transportationlabel | √ | √ | √ | √ | √ | |||
金融类标注 | financelabel | √ | √ | √ | √ | √ | |||
其它类标注 | otherlabel | √ | √ | √ | √ | √ |
.支持修改的元素类型和包容关系
元素类型elementType | |||||
元素代码featureType | 形状边框颜色 | 形状填充颜色 | 文字边框颜色 | 文字填充颜色 | icon可见性 |
highway | geometry.stroke | geometry.fill | labels.text.stroke | labels.text.fill | labels.icon |
元素代码featureType | 形状[边框]和[填充]颜色 | 文字[边框]和[填充]颜色 | |||
highway | geometry | labels.text |
边框和填充为同一颜色时,既可以分别设置geometry.stroke和geometry.fill,也可以一起设置geometry
.V5.1.0起同一元素多个样式同时同级别设置,生效策略做调整
1.功能说明:
因为涉及到样式缩放级别的控制,所以可见性(visibility),颜色(color),宽度(weight)等样式的生效策略做了调整, 即:当同一元素的可见性(visibility)颜色(color),宽度(weight)一起设置时,以最后设置的样式生效;
2.使用示例:
{ "featureType":"water", "elementType":"all", "stylers":{ "color":"#96b5d6" } },
通过上述代码地图中水系地图元素(昆明湖)将显示为如代码中定义颜色,如下左图;
修改自定义样式文件,为water元素新加入visibility样式,此时water元素将有两个样式同时设置,并以后面一个生效代码如下:
{ "featureType":"water", "elementType":"all", "stylers":{ "color":"#96b5d6" } }, { "featureType":"water", "elementType":"all", "stylers":{ "visibility":"off" } },
运行后实际效果以visibility样式生效(注意:visibility默认为on)如右图:
.设置指定级别控制元素生效
1.接口说明:
自V5.1.0起增加地图缩放级别进行设置个性化地图的自定义样式,即不同的缩放级别可以呈现不同的自定义样式。
1)Json样式的stylers中新增:"level"字段,用来控制样式的生效级别,如果stylers中不配置"level"字段,则认为该样式在所有地图缩放级别生效;
2)"level"字段的值在Json样式中以字符串表现,取值对标普通地图的缩放级别范围[4-21]。如果该字段值小于地图缩放级别的最小值,则取地图缩放级别的最小值;如果该字段大于地图缩放级别的最大值,则取地图缩放缩放级别的最大值;
3)如果Json样式,存在未指定缩放级别样式1和指定了生效的缩放级别样式2的同一元素,则在指定的缩放级别展示样式2,在其他缩放级别展示样式1;
BaiduMap SDK 定义缩放级别和比例尺的关系参考显示地图。
2.使用示例:
自定义样式文件中定义”highway”地图元素的样式文件如下:
{ "featureType":"highway", "elementType":"geometry.fill", "stylers":{ "color":"#a6cfcf", } },
显示效果如下图1,可以看到北京市各条环线的被渲染为青色。
修改自定义样式文件,在其中加入level字段并赋值为11。
{ "featureType":"highway", "elementType":"geometry.fill", "stylers":{ "color":"#a6cfcf", "level":"11", } },
生效后为highway地图元素的自定义样式只在11 级别生效,如下图2中12级缩放级别highway地图元素显示默认样式。缩小至图3中11级生效。
图1图2图3
.设置宽度样式
1.接口说明: 自V5.1.0起增加宽度样式可以控制点元素,线元素的宽度展示,当前生效的元素包括:点元素(poi类元素,字体),线元素(如高速,地铁等);
1)Json样式的stylers中新增: "weight"字段,用于指定元素要展示的宽度,不设置该字段则以默认样式宽度展示;
2)"weight"字段的值类型在Json样式中以字符串表现,取值范围为[0, 255],当取值小于0时,实际以0值生效,当大于255时,以255生效;
2.使用示例: 自定义样式文件中设置highway元素宽度为20:
{ "featureType":"highway", "elementType":"geometry.fill", "stylers":{ "color":"#a6cfcf", "weight":"20" } },
显示效果如下图,可见highway元素的宽度的增大。
.设置颜色的元素属性 - 透明度
1.接口说明
自V4.5.2起增加透明度样式,适用所有可以设置颜色的元素属性。透明度样式与颜色样式一起设置,通过“color”字段赋值,格式如下:
#RRGGBBAA R:Red G:Green B:Blue A:Alpha,透明度AA可以设置为0x00,即完全透明。
注意:当前版本透明度不支持单独设置。
2.使用示例:
如设置为人造区域的颜色为黄色,且透明度为0x78
{ "featureType": "manmade", "elementType": "geometry", "stylers": { "color": "#ffff0078" } }
效果如图:
3.透明度样式的值使用十六进制,范围为:[0x00, 0xff],默认值为0xff。为兼容以前的颜色样式,SDK旧版本的样式值将自动补齐透明度值,默认0xff,即不透明。