BMap添加海量点数据，BMap.Point携带数据

在开发web项目的过程中使用到了百度地图，由于要在地图中画出很多点比较影响加载速度，查看官方文档，发现有提供加载海量点的功能BMap.PointCollection，用这个加快速度，但是官方文档中提供的demo中仅能获取到点击坐标的经度、纬度。无法再获取到其他信息，用户自定义的数据也不行。要想在点的点击事件中获取到其他information，思考后有两种解决方案：

**1. 获取到经度、纬度之后，通过经度和纬度，循环原先的数据集进行比对，判断出点中的地图点，从而找出开发者需要的数据。
这种方法在数据集的size适中时可以使用，不会对运行速度有太大的影响，但是弊端非常明显，首先如果数据量巨大，循环需要花费大量的时间，这显然与我们之前想要提升性能相违背。其次有可能出现位置相同的点，那可能会出现得到错误的information。
2. BMap.PointCollection中的元素为BMap.Point， JavaScript是弱类型的，我们可以让BMap.Point在加入到点集合BMap.PointCollection之前携带数据，那么数据会存储到BMap.PointCollection中，在点击这个点是就可得到BMap.Point，从而得到它携带的除经纬度之外的信息数据。优选此方案
示例：**

重要代码如下：

$(document).ready(function(){// 百度地图API功能 -122.3695400,"olat":47.6646100  116.404, 39.915var map = new BMap.Map("container", {});map.centerAndZoom(new BMap.Point(-122.3695400, 47.6646100), 15);map.enableScrollWheelZoom();$('#show').click (function () {var start_date=$('#start_date').val();var start_time=$('#start_time').val();var end_date=$('#end_date').val();var end_time=$('#end_time').val();var city=$('#daddress').val();var url = "<%=basePath %>data/list";                $.ajax({type: "post",url: url,data: {"start_date":start_date,"start_time":start_time,"end_date":end_date,"end_time":end_time,"city":city},cache: false,async : false,dataType: "json",success: function (data ,textStatus, jqXHR){                       map.centerAndZoom(new BMap.Point(data[0].olon, data[0].olat), 14);map.clearOverlays();       //清除地图上所有覆盖物if(document.createElement('canvas').getContext) { // 判断当前浏览器是否支持绘制海量点var points = []; // 添加海量点数据for(var i = 0; i < data.length; i++) {var point=new BMap.Point(data[i].olon, data[i].olat);point.id = data[i].id;point.otime = data[i].otime;point.dtime = data[i].dtime;point.dlon = data[i].dlon;point.dlat = data[i].dlat;point.distance = data[i].distance;point.ofuel = data[i].ofuel;point.dfuel = data[i].dfuel;point.fuelConsumption = data[i].fuelConsumption;point.oaddress = data[i].oaddress;point.daddress = data[i].daddress;points.push(point);                             }var options = {size: BMAP_POINT_SIZE_BIG,    //BMAP_POINT_SIZE_SMALLshape: BMAP_POINT_SHAPE_STAR,color: '#D84C29'}var pointCollection = new BMap.PointCollection(points, options); // 初始化PointCollectionpointCollection.addEventListener('click', function(e) {// 监听点击事件/*                             var p=e.point;alert('单击点的坐标为：' + p.lng + ',' + p.lat+' \r   '+p.oaddress + ',' + p.daddress+'   ');   */var point = new BMap.Point(e.point.lng, e.point.lat);var opts = {width: 200,     // 信息窗口宽度height: 150,     // 信息窗口高度title: "Title", // 信息窗口标题enableMessage: false//设置允许信息窗发送短息};var infowindow = new BMap.InfoWindow(p.oaddress + ',' + p.daddress, opts);map.openInfoWindow(infowindow, point);}); map.addOverlay(pointCollection); // 添加Overlay} else {alert('请在chrome、safari、IE8+以上浏览器查看');}/*                      if("true"==data.flag){alert("合法！");return true;}else{alert("不合法！错误信息如下："+data.errorMsg);return false;} */},error:function (XMLHttpRequest, textStatus, errorThrown) {      alert("请求失败！");}});}) ;});

BMap添加海量点数据，BMap.Point携带数据相关推荐

使用高德地图2D/3D SDK添加海量描点Marker以及视图中显示所有描点、我的定位添加呼吸动画
高德地图SDK添加海量描点.我的定位呼吸动画一.添加海量描点 1.高德2D SDK添加实现 1)初始化MarkerOverlay 2)设置海量描点数据 4)Marker点击监听 5)MarkerOv ...
Avue 点击事件触发新增，新增携带数据
一. 新增按钮设置为false option: {addBtn: false,//设置不显示新增按钮column[{label: "预警类型",prop: "typeId ...
R语言ggplot2可视化：ggplot2可视化时间序列数据并在末尾数据点添加数值标签（number label）
R语言ggplot2可视化:ggplot2可视化时间序列数据并在末尾数据点添加数值标签(number label) 目录
R语言生成数据及其95%置信区间数据（或者其它区间）、使用geom_ribbon函数为ggplot2图像手动添加置信区间的阴影区域using geom_ribbon to create shaded
R语言生成数据及其95%置信区间数据(或者其它区间).使用geom_ribbon函数为ggplot2图像手动添加置信区间的阴影区域(using geom_ribbon to create shaded ...
seaborn使用violinplot函数可视化小提琴图、并在violinplot函数中设置inner参数来添加横线（inner=“stick“）显示数据的稠密程度
seaborn使用violinplot函数可视化小提琴图.并在violinplot函数中设置inner参数来添加横线(inner="stick")显示数据的稠密程度(Seaborn ...
R语言为散点图添加凸包（convex hull）：数据预处理(创建一个包含每组数据凸包边界的数据集)、ggplot2使用geom_polygon函数为可视化图像添加凸包（convex hull）
R语言为散点图添加凸包(convex hull):数据预处理(创建一个包含每组数据凸包边界的数据集).ggplot2使用geom_polygon函数为可视化图像添加凸包(convex hull) 目录
R语言dplyr包为dataframe添加数据列实战（ Add Columns）：基于mutate()函数添加一个或者多个数据列（尾部添加、头部添加、条件生成、某个具体数据列的前后）
R语言dplyr包为dataframe添加数据列实战( Add Columns):基于mutate()函数添加一个或者多个数据列(尾部添加.头部添加.条件生成.某个具体数据列的前后) 目录
Python之Pandas：利用pandas实现行数据添加，即将字典格式的数据，按照行数据，从头开始循环添加到dataframe中
Python之Pandas:利用pandas实现行数据添加,即将字典格式的数据,按照行数据,从头开始循环添加到dataframe中e中目录利用pandas实现行数据添加,即将字典格式的数据,按照行 ...
DataContract 添加到 DataContractSet，因为已经存在数据协定名称也为命名空间
因为我使用了泛型数据合同,使用的名字又是同一个,所以就会报个错误, System.InvalidOperationException: 在调用 WSDL 导出扩展过程中引发异常: System.Ser ...

BMap添加海量点数据，BMap.Point携带数据

BMap添加海量点数据，BMap.Point携带数据相关推荐

最新文章

热门文章