Couche de données utilisateur

L'API Baidu Map peut restituer les données de localisation téléchargées par les utilisateurs sur le cloud LBS dans une couche en temps réel, puis les superposer sur la carte via l'objet CustomLayer. Actuellement, LBS Cloud permet aux utilisateurs de stocker des données de POI. En plus des coordonnées de longitude et de latitude, les champs stockés incluent également le nom, l'adresse et d'autres informations d'attribut. La classe CustomLayer fournit une interface pour lire les données cloud LBS et restitue automatiquement les données utilisateur pour générer des couches de données. Elle fournit également la fonction de cliquer sur la couche de superposition pour renvoyer les données POI. Le processus général est le suivant :

Téléchargement des données utilisateur

Il existe deux façons de télécharger des données utilisateur, à savoir la méthode de téléchargement de l'interface HTTP et la méthode d'annotation visuelle.

1. Méthode de téléchargement de l'interface HTTP : la méthode de l'interface HTTP nécessite d'abord de créer un espace de stockage de données (databox), puis de télécharger les données POI de l'utilisateur. Lors de la création d'un espace de stockage et d'un poi, une requête POST est envoyée. Vous pouvez utiliser le plug-in Postman sous le navigateur Chrome pour envoyer la requête visuellement.

2. Méthode d'annotation visuelle : après avoir accédé à la page d'édition du stockage cloud, l'utilisateur définit le mode d'annotation pour saisir les données de POI. Cette méthode se caractérise par sa simplicité et son intuitivité, mais s’avère inefficace lorsque la quantité de données est importante.

Affichage de la couche de données utilisateur

Superposition de la couche de données utilisateur

Le constructeur CustomLayer peut générer une couche de données utilisateur en recevant le paramètre d'identifiant d'espace de stockage de données (identifiant géotable). L'identifiant d'espace de stockage peut être utilisé lors de la création d'un. stockage de données obtenir.

Le code est le suivant :

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

La méthode d'ajout d'une couche définie par l'utilisateur à la carte est la même que pour ajouter un objet Tilelayer, c'est-à-dire :

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

Ce qui suit est l'effet d'affichage de la superposition de la couche des points de vente de billets de train de Pékin sur la carte :

Exemple d'affichage en creux des données utilisateur, veuillez en faire l'expérience.

Événement de couche de données utilisateur

JSAPIv1.5 fournit des événements de couche de données utilisateur de clic et prend en charge le renvoi d'informations sur les points POI cliqués. Le code est le suivant :

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);}  
 
}

Récupération des données utilisateur

En plus d'afficher les données appartenant à l'utilisateur, l'interface de récupération JSAPI peut également être utilisée pour récupérer ses propres données. Les types de recherche pris en charge incluent : la recherche dans la ville, la recherche dans une zone rectangulaire et la recherche dans une zone circulaire. Ce qui suit prend la récupération circulaire comme exemple pour illustrer comment récupérer ses propres données dans une zone circulaire. Tout d'abord, utilisez la souris pour dessiner une zone circulaire :

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();

Période de recherche environnante dans la fonction de rappel d'événement de fin de cercle de la souris :

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替换该值  
});

Voici les résultats de recherche pour la recherche de ventes de billets de train points autour de Zhongguancun Image :

Exemple de récupération de données utilisateur, veuillez en faire l'expérience.