百度地图API支持丰富的图层展示,除了支持在“叠加图层页面”介绍的交通流量图层,还支持图片、栅格图,可以根据自己的实际情况实现自定义栅格图层和自定义图层。
同时,LBS云服务提供海量位置数据的实时存储功能,JavaScript API还支持将用户上传到LBS云里的位置数据实时渲染成图层,叠加到地图上。
在使用自定义方式叠加图层之前,您需要先了解百度地图的地图坐标系。 百度地图坐标系涉及:
经纬度球面坐标系统
墨卡托平面坐标系统
图块编号系统通过伦敦格林尼治天文台原址的经线为0度经线,从0度经线向东、向西各分180度。赤道为0度纬线,赤道以北的纬线称为北纬、以南的称为南纬。
在百度地图中,东经和北纬用正数表示,西经和南纬用负数表示。例如北京的位置大约是北纬39.9度,东经116.4度,那么用数值标示就是经度116.6,纬度39.9。
在百度地图中,习惯经度在前,纬度在后,例如:
var point = new BMap.Point(116.404, 39.915); // 创建点坐标,经度在前,纬度在后
百度地图使用的是墨卡托投影。墨卡托平面坐标如下图所示,平面坐标与经纬度坐标系的原点是重合的。
百度地图图块编号规则如下图所示:
从平面坐标原点开始的右上方向的图块编号为0,0,以此类推。在最低的缩放级别(级别 1)中,整个地球由4张图块组成。随着级别的增长,地图所使用的图块个数也随之增多。
通过TileLayer类开发者可以实现自定义图层。
自定义图层使用方法详情请见类参考。getTilesUrl方法的参数包括tileCoord和zoom,其中tileCoord为图块的编号信息,zoom为图块的级别,每当地图需要显示特定级别的特定位置的图块时就会自动调用此方法,并提供这两个参数。
使用者需要告知API特定编号和级别所对应的图块的地址,这样API就能正常显示自定义的图层了。
var map = new BMap.Map("l-map"); // 创建地图实例 var point = new BMap.Point(116.404, 39.915); // 创建点坐标 map.centerAndZoom(point,15); // 初始化地图,设置中心点坐标和地图级别 var tilelayer = new BMap.TileLayer(); // 创建地图层实例 tilelayer.getTilesUrl=function(){ // 设置图块路径 return "layer.gif"; }; map.addTileLayer(tilelayer); // 将图层添加到地图上
百度地图API可以将用户上传到LBS云里的位置数据实时渲染成图层,然后通过CustomLayer对象叠加到地图上。目前LBS云支持用户存储poi数据,存储的字段除经纬度坐标外还包括名称、地址等属性信息。CustomLayer类提供读取LBS云数据接口,并自动渲染用户数据生成数据图层,同时提供单击叠加图层返回poi数据的功能。大致流程如下:
用户数据的上传有两种方式,分别是HTTP接口上传方式、可视化标注方式。
1. HTTP接口上传方式:HTTP接口方式首先需要创建数据存储空间(databox),然后再上传用户的poi数据。创建存储空间及poi发送的是POST请求,可以借助chrome浏览器下的Postman插件可视化发送请求。
2. 可视化标注方式:用户进入云存储编辑页面后设置标注模式进行poi数据的录入。该方式的特点是简单、直观,但是数据量大时效率低下。
示例代码如下:
//根据daboxId创建自定义图层,用户可用自己创建的geotableid替换30960 var customLayer=new BMap.CustomLayer({ geotableId: 30960, q: '', //检索关键字 tags: '', //空格分隔的多字符串 filter: '' //过滤条件,参考https://lbsyun.baidu.com/index.php?title=lbsprivatecloud });
将用户自定义图层添加到地图上的方法跟添加Tilelayer对象方式相同,即:
map.addTileLayer(customLayer);//添加自定义图层
以下是将北京火车票代售点图层叠加在地图上的展示效果:
用户数据的麻点展示示例,请体验。
代码如下:
customLayer.addEventListener('onhotspotclick',callback);//单击图层事件 function callback(e)//单击热点图层 { var customPoi = e.customPoi, //获取poi对象 str = []; str.push("address = " + customPoi.address); str.push("phoneNumber = " + customPoi.phoneNumber); var content = '<p style="width:280px;margin:0;line-height:20px;">地址:' + customPoi.address + '<br>电话:' + customPoi.phoneNumber + '</p>'; var searchInfoWindow = new BMapLib.SearchInfoWindow(map, content, { //带检索的信息窗口 title: customPoi.title, //标题 width: 290, //宽度 height: 40, //高度 panel : "panel", //检索结果面板 enableAutoPan : true, //自动平移 enableSendToPhone: true, //是否显示发送到手机按钮 searchTypes :[ BMAPLIB_TAB_SEARCH, //周边检索 BMAPLIB_TAB_TO_HERE, //到这里去 BMAPLIB_TAB_FROM_HERE //从这里出发 ] }); var point = new BMap.Point(customPoi.point.lng, customPoi.point.lat); searchInfoWindow.open(point);} }
除了展示用户自有数据外,利用JSAPI检索接口也可以对自有数据进行检索。
支持的检索类型包括:城市内检索、矩形区域检索和圆形区域检索。
以下以圆形检索为例,说明如何检索圆形区域的自有数据。var drawingManager = new BMapLib.DrawingManager(map, { //使用鼠标工具需要引入鼠标工具开源库DrawingManager_min.js及样式文件DrawingManager_min.css isOpen: false, //是否开启绘制模式 enableDrawingTool: false, //是否显示工具栏 drawingToolOptions: { anchor: BMAP_ANCHOR_TOP_RIGHT, //位置 offset: new BMap.Size(5, 5), //偏离值 scale: 0.8 //工具栏缩放比例 } }); drawingManager.setDrawingMode(BMAP_DRAWING_CIRCLE); drawingManager.open();
drawingManager.addEventListener('circlecomplete', function(e) { circle = e; var radius= parseInt(e.getRadius()); //检索半径必须是整型 var center= e.getCenter(); drawingManager.close(); if (customLayer) { map.removeTileLayer(customLayer); } localSearch.searchNearby(' ', center,radius,{customData:{databoxId: 4032}});//用新创建的databoxid替换该值 });
用户数据的检索示例请体验。