사용자 데이터 레이어


Directory

  • 1 사용자 데이터 레이어
  • 2 사용자 데이터 업로드
  • 3 사용자 데이터 레이어 표시
  • 4 사용자 데이터 검색

Baidu Map API는 사용자가 LBS 클라우드에 업로드한 위치 데이터를 실시간으로 레이어로 렌더링한 다음 CustomLayer 개체를 통해 지도에 오버레이할 수 있습니다. 현재 LBS Cloud는 사용자가 POI 데이터를 저장할 수 있도록 지원하며, 저장된 필드에는 이름, 주소 및 기타 속성 정보도 포함됩니다. CustomLayer 클래스는 LBS 클라우드 데이터를 읽기 위한 인터페이스를 제공하고, 사용자 데이터를 자동으로 렌더링하여 데이터 레이어를 생성하는 기능도 제공하여 POI 데이터를 반환합니다. 일반적인 프로세스는 다음과 같습니다.

jsdev9_madian.jpg

사용자 데이터 업로드

사용자 데이터를 업로드하는 방법에는 HTTP 인터페이스 업로드 방법과 시각적 주석 방법의 두 가지가 있습니다.

1. HTTP 인터페이스 업로드 방법: HTTP 인터페이스 방법은 먼저 데이터 저장 공간(데이터박스)을 생성한 후 사용자의 POI 데이터를 업로드해야 합니다. 저장공간과 POI를 생성할 때 보내는 것은 POST 요청인데, 크롬 브라우저 아래 Postman 플러그인을 사용하면 시각적으로 요청을 보낼 수 있습니다.

2. 시각적 주석 방법: 사용자는 클라우드 스토리지 편집 페이지에 들어간 후 POI 데이터를 입력하도록 주석 모드를 설정합니다. 이 방법은 단순성과 직관성이 특징이지만, 데이터의 양이 많을 때에는 비효율적이다.

사용자 데이터 레이어 표시

사용자 데이터 레이어 오버레이

CustomLayer 생성자는 데이터 저장 공간 ID(geotable id) 매개변수를 수신하여 사용자 데이터 레이어를 생성할 수 있습니다. 데이터 저장을 얻습니다.

코드는 다음과 같습니다. 

//根据daboxId创建自定义图层，用户可用自己创建的geotableid替换30960  
var customLayer=new BMap.CustomLayer({  
    geotableId: 30960,   
    q: '', //检索关键字  
    tags: '', //空格分隔的多字符串  
    filter: '' //过滤条件,参考http://developer.baidu.com/map/lbs-geosearch.htm#.search.nearby  
});

지도에 사용자 정의 레이어를 추가하는 방법은 Tilelayer 객체를 추가하는 것과 동일합니다. 즉, 

map.addTileLayer(customLayer);//添加自定义图层

다음은 베이징 기차표 판매점 레이어를 지도에 오버레이한 표시 효과입니다.

jsdev9_madian_demo.png


사용자 데이터 포켓 전시예를 체험해 보세요.

사용자 데이터 영역 이벤트

JSAPIv1.5는 클릭 사용자 데이터 영역 이벤트를 제공하고 클릭 지점에 대한 정보 반환을 지원합니다. 코드는 다음과 같습니다: 

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替换该值  
});
다음은 중관촌 주변 열차표 판매점을 검색한 검색 결과입니다.

#🎜 🎜#

jsdev9_local_demo.png 사용자 데이터 검색 예시, 직접 경험해 보세요.

←
→