用戶數(shù)據(jù)圖層
目錄
- 1 用戶數(shù)據(jù)圖層
- 2 用戶數(shù)據(jù)上傳
- 3 用戶數(shù)據(jù)圖層展示
- 4 用戶數(shù)據(jù)檢索
百度地圖API可以將用戶上傳到LBS云里的位置數(shù)據(jù)實(shí)時(shí)渲染成圖層，然后通過CustomLayer對(duì)象疊加到地圖上。目前LBS云支持用戶存儲(chǔ)poi數(shù)據(jù)，存儲(chǔ)的字段除經(jīng)緯度坐標(biāo)外還包括名稱、地址等屬性信息。CustomLayer類提供讀取LBS云數(shù)據(jù)接口，并自動(dòng)渲染用戶數(shù)據(jù)生成數(shù)據(jù)圖層，同時(shí)提供單擊疊加圖層返回poi數(shù)據(jù)的功能。大致流程如下：
用戶數(shù)據(jù)上傳
用戶數(shù)據(jù)的上傳有兩種方式，分別是HTTP接口上傳方式、可視化標(biāo)注方式。
1. HTTP接口上傳方式：HTTP接口方式首先需要?jiǎng)?chuàng)建數(shù)據(jù)存儲(chǔ)空間（databox），然后再上傳用戶的poi數(shù)據(jù)。創(chuàng)建存儲(chǔ)空間及poi發(fā)送的是POST請(qǐng)求，可以借助chrome瀏覽器下的Postman插件可視化發(fā)送請(qǐng)求。
2. 可視化標(biāo)注方式：用戶進(jìn)入云存儲(chǔ)編輯頁(yè)面后設(shè)置標(biāo)注模式進(jìn)行poi數(shù)據(jù)的錄入。該方式的特點(diǎn)是簡(jiǎn)單、直觀，但是數(shù)據(jù)量大時(shí)效率低下。
用戶數(shù)據(jù)圖層展示
疊加用戶數(shù)據(jù)圖層
CustomLayer構(gòu)造函數(shù)可以通過接收數(shù)據(jù)存儲(chǔ)空間id（geotable id）參數(shù)生成用戶數(shù)據(jù)圖層，存儲(chǔ)空間id可以在創(chuàng)建數(shù)據(jù)存儲(chǔ)時(shí)獲得。
代碼如下：
//根據(jù)daboxId創(chuàng)建自定義圖層，用戶可用自己創(chuàng)建的geotableid替換30960
var customLayer=new BMap.CustomLayer({
geotableId: 30960,
q: '', //檢索關(guān)鍵字
tags: '', //空格分隔的多字符串
filter: '' //過濾條件,參考http://developer.baidu.com/map/lbs-geosearch.htm#.search.nearby
});將用戶自定義圖層添加到地圖上的方法跟添加Tilelayer對(duì)象方式相同，即：
map.addTileLayer(customLayer);//添加自定義圖層
以下是將北京火車票代售點(diǎn)圖層疊加在地圖上的展示效果：
用戶數(shù)據(jù)的麻點(diǎn)展示示例，請(qǐng)?bào)w驗(yàn)。
用戶數(shù)據(jù)圖層事件
JSAPIv1.5提供單擊用戶數(shù)據(jù)圖層事件，并支持返回點(diǎn)擊poi點(diǎn)的信息。代碼如下：
customLayer.addEventListener('onhotspotclick',callback);//單擊圖層事件
function callback(e)//單擊熱點(diǎn)圖層
{
var customPoi = e.customPoi, //獲取poi對(duì)象
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, //標(biāo)題
width: 290, //寬度
height: 40, //高度
panel : "panel", //檢索結(jié)果面板
enableAutoPan : true, //自動(dòng)平移
enableSendToPhone: true, //是否顯示發(fā)送到手機(jī)按鈕
searchTypes :[
BMAPLIB_TAB_SEARCH, //周邊檢索
BMAPLIB_TAB_TO_HERE, //到這里去
BMAPLIB_TAB_FROM_HERE //從這里出發(fā)
]
});
var point = new BMap.Point(customPoi.point.lng, customPoi.point.lat);
searchInfoWindow.open(point);}
}用戶數(shù)據(jù)檢索
除了展示用戶自有數(shù)據(jù)外，利用JSAPI檢索接口也可以對(duì)自有數(shù)據(jù)進(jìn)行檢索。支持的檢索類型包括：城市內(nèi)檢索、矩形區(qū)域檢索和圓形區(qū)域檢索。以下以圓形檢索為例，說明如何檢索圓形區(qū)域的自有數(shù)據(jù)。 首先，用鼠標(biāo)繪制圓形區(qū)域：
var drawingManager = new BMapLib.DrawingManager(map, {
//使用鼠標(biāo)工具需要引入鼠標(biāo)工具開源庫(kù)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();在鼠標(biāo)畫圓結(jié)束事件回調(diào)函數(shù)內(nèi)進(jìn)行周邊檢索：
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}});//用新創(chuàng)建的databoxid替換該值
});以下是檢索中關(guān)村周邊的火車票代售點(diǎn)的檢索結(jié)果圖：
用戶數(shù)據(jù)的檢索示例，請(qǐng)?bào)w驗(yàn)。