百度地图API使用系列-02 底图

前言

为了便于更好的传达用户地理数据的位置信息，通常都是需要有地理空间参考数据做为依据。例如：一栋楼、一条河流或者几个点数据在没有其他参考物的前提下，是不具备可视化效果、可阅读性的。通常我们会选用标准地图做为参考或者卫星图像做为参考。如果开发者有自己整体或者局部完整的地理数据参考，那可以使用空白地图。本文将介绍这张底图的相关概念内容。

底图配置

官方提供的底图有：标准底图、卫星底图、空白底图。在标准底图的基础上，再配合个性化样式，可以延伸出 个性化底图。

开发者可以控制标准底图和个性化底图的图标、文字、楼块、室内图是否展示。另外一个比较好的功能点是：为开发者提供了底图添加图标&文字的能力，可以弥补数据上的缺失或者展示优先级。底图上的POI点具备可点击能力，开发者可以利用此功能获取底图POI信息，与业务进行联动。

可以通过设置画布样式与个性化底图的背景样式想匹配，避免切换或刷新会出现与整体页面不协调的色调。

底图上可以添加拥挤度路网、全景图路网。开发者可根据需求结合进行使用。

具体示例大家可以参考 百度地图开放平台示例中心地图基础部分，下面罗列一些示例中没有明确标明的点。

设置空底图

var map = new BMapGL.Map('container', {
    mapType: window.BMAP_NONE_MAP,
    enableDragging: true,
    enableWheelZoom: true,
    enableDblclickZoom: true
});
map.centerAndZoom("上海", 12); 

地图背景颜色设置

// 改变Map DIV容器背景颜色
document.getElementById('container').style = {
    backgroundColor: 'rgb(245 245 245)'
}
var map = new BMapGL.Map('container', {
    style:'grayed-out',
    // 改变Map canvas容器颜色，alpha取值为[0-255]
    backgroundColor: [245, 245, 245, 255],
    enableDragging: true,
    enableWheelZoom: true
});
// 改变Map DIV容器背景图片设置
map.getContainer().style = {
    backgroundImage: ''
}
map.centerAndZoom("上海", 12); 

底图添加图标&文字

var labels = [
    {
        position: BMapGL.Projection.convertLL2MC(new BMapGL.Point(116.397112, 39.920977)),
        displayRange: [12, 22],
        textMargin: 4,
        name: '测试\\自定义POI',
        style: {
            fontSize: 28,
            color: 'pink',
            haloSize: 2,
            strokeColor: '#fff',
            icon: 'http://maponline0.bdimg.com/sty/map_icons2x/MapRes/zhanlanguan.png',
            iconSize: [64, 64],
        },
        uid: 'uuid0000001',
        direction: 1,
        rank: 50000
    }
];
// 自定义POI添加到地图
map.addLabelsToMapTile(labels);
// 指定自定义POI uid移除
map.removeLabelsFromMapTile(['uuid0000001']);
// 自定义POI全部移除
map.clearLabels();

拥挤度路网设置描边

var map = new BMapGL.Map('container', {
    style:'grayed-out',
    enableDragging: true,
    enableWheelZoom: true
});
map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 12); 
// 方式1
BMapGL.trafficLayer.setEdge(false);
map.setTrafficOn();
// 方式2
var layer = new BMapGL.TrafficLayer();
layer.setEdge(false);
map.addTileLayer(layer);

基础控制

主要分为显示控制和交互控制两部分。

显示控制可以设置地图中心点、显示区域、显示等级、锁定区域等。

交互控制可以设置移动、旋转、俯仰等是否允许操作。

具体示例大家可以参考 百度地图开放平台示例中心地图基础部分。

锁定地图区域

var _p1 = new BMapGL.Point(116.203694, 39.527552);
var _p2 = new BMapGL.Point(116.603694, 40.227552);
var r = new BMapGL.Bounds(_p1, _p2);
map.restrictBounds(r);

注意问题

React框架下的strict模式会导致页面初始化两次，如果在页面加载中存在地图加载，那么有状态组件在挂载时进行了地图初始化，那么在卸载时需要同步进行地图销毁；函数组件在useEffect进行初始化，那么 return 中需要进行地图销毁；不然就会导致地图初始化两次造成内存泄漏。

在业务组件中如果使用 异步加载地图API初始化地图时，需要判断当前window是否已经注册了window.BMapGL对象，如果存在则不需要再次异步加载地图API，避免造成内存泄漏。