浏览器版本低!无法浏览完整内容,建议升级或更换浏览器。
简介

个性化地图,通过改变底图各元素和文字的颜色、可见性,实现地图多样展现效果,适配各个行业不同的地图呈现效果或适配不同App风格。

支持设置地图点、线、面共51个元素,包含陆地、水系、绿地、人造区域、建筑物、道路、铁路、地铁,POI、行政区划、边界线等。

支持设置的地图元素的颜色、透明度、宽度、指定级别控制元素及其可见性的变更。

个性化地图功能示例代码位于基础地图(BaseMapDemo)这个功能模块,开发者使用时可以参考。

效果示例:
MapCustom.png MapCustom2.png

个性化地图定制方式

两种方式:

通过个性地图编辑工具,自行编辑地图展示样式,通过【编辑JSON】查看生成的JSON,然后通过【下载JSON】拿到JSON文件。注意:目前两端暂未统一,请根据表里支持的元素配置,配置后请在工程中验证。

根据个性化地图元素说明规则,编辑JSON代码。 在个性地图编辑工具中提供了个几套标准模板样式文件供大家使用,点击编辑器中【个性化模版】选择喜欢的模版【下载JSON】拿到JSON文件,可参照该模版编辑您自己的样式文件。JSON基本的格式如下:
MapIndividuationJson.png

在项目中使用个性化地图
1在项目中添加自定义样式文件

在assets目录下新建一个用来存放自定义样式文件的目录,放入编辑好的JSON样式文件。
MapIndividuationFilePath.png

2在代码中加载自定义样式文件,让自定义样式生效

1.通过MapView的静态方法#setCustomMapStylePath来设定地图样式文件的路径(在开发中我们推荐使用安全文件加载方式,是从手机的文件系统中加载,所以我们建议先通过File操作将自定义样式文件写入本地再从代码中调用该方法加载,这也是我们下面的实例代码中的做法)。
注意:该方法的调用必须位于Activity的布局文件加载之前。
2.通过MapView的静态方法#setMapCustomEnable来开启自定义样式。
自V4.0起,支持个性化地图和普通地图切换。设置个性化地图后,个性化地图默认为关闭状态,需要通过该方法手动设置生效。MapMapView/TextureMapView/WearView均支持此接口
注意:必须在Activity的onDestroy方法中重新调用该方法来关闭自定义样式,否则只会在应用第一次打开时显示自定义样式。

3加载自定义样式的示例代码如下:
/**
 * 将个性化文件写入本地后调用MapView.setCustomMapStylePath加载
 * @param context
 * @param fileName assets目录下自定义样式文件的文件名
 */
private void setMapCustomFile(Context context, String fileName) {
    InputStream inputStream = null;
    FileOutputStream fileOutputStream = null;
    String moduleName = null;
    try {
        inputStream = context.getAssets().open("customConfigDir/" + fileName);
        byte[] b = new byte[inputStream.available()];
        inputStream.read(b);
        moduleName = context.getFilesDir().getAbsolutePath();
        File file = new File(moduleName + "/" + fileName);
        if (file.exists()) file.delete();
        file.createNewFile();
        fileOutputStream = new FileOutputStream(file);
        //将自定义样式文件写入本地
        fileOutputStream.write(b);
    } catch (IOException e) {
        e.printStackTrace();
    } finally {
        try {
            if (inputStream != null) {
                inputStream.close();
            }
            if (fileOutputStream != null) {
                fileOutputStream.close();
            }
        } catch (IOException e) {
            e.printStackTrace();
        }
    }
//设置自定义样式文件
    MapView.setCustomMapStylePath(moduleName + "/" + fileName);
}

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

    setMapCustomFile(this, "custom_config_0323-darkNight.json");
    setContentView(R.layout.activity_main);
    //获取地图控件引用
    mMapView = (MapView) findViewById(R.id.map_view);
    //开启个性化地图
    MapView.setMapCustomEnable(true);
}

以下效果是个性地图编辑工具提供下载自定义样式文件应用效果:
MapCustom.png MapCustom3.png MapCustom4.png

一蓑烟雨绿野仙踪眼眸

个性化地图元素说明

支持修改的地图元素
注意:版本支持是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.strokegeometry.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)如右图:
MapCustom8.png MapCustom7.png

设置指定级别控制元素生效
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级生效。
MapImageOne.png MapImageTwo.png MapImageThree.png

图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元素的宽度的增大。
MapIndividuationWeight.png

设置颜色的元素属性 - 透明度
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"
    }
}

效果如图:
MapIndividuationAlpha.png
3.透明度样式的值使用十六进制,范围为:[0x00, 0xff],默认值为0xff。为兼容以前的颜色样式,SDK旧版本的样式值将自动补齐透明度值,默认0xff,即不透明。

  • 文档根本没法用

  • 文档水平很差

  • 文档水平一般

  • 文档不错

  • 文档写的很好

如发现文档错误,或对此文档有更好的建议,请在下方反馈。问题咨询请前往反馈平台提交工单咨询。

提交反馈

拖动标注工具

添加矩形标注

添加箭头标注

完成

取消