百度地图Javascript使用海量点加载数据并自定义图标

由于数据量较大时使用Marker点在地图上标点会造成浏览器卡死，点聚合的形式可以解决数据量大浏览器卡死问题，但是移除点时点聚合不太好用，所以使用mapv的散点图形式展示点来解决该问题！！！

首先mapv需要引用js

<script src="http://mapv.baidu.com/build/mapv.min.js"></script>

var datas = [];             //定义数组装地图上标的点以及点的信息function yjsgisutil() {$.ajax({url : '/gisutil/showAll',dataType : 'json',type : 'get',async : false,success : function(data) {datas=[];map.clearOverlays(); // 清除地图覆盖物var img = new Image();img.src = '/statics/map/img/工厂.png';     //自定义点的图片img.onload = function() {// 构造数据for (var i = 0; i < data.length; i++) {         //循环接口内的数据datas.push({geometry: {type: 'Point',coordinates: [data[i].longitude, data[i].latitude] //经纬度，用于标点},icon: img,tag: { utilName: data[i].utilName,id:data[i].id,principal:data[i].principal,telphone:data[i].telphone,address:data[i].address,notes:data[i].notes //点的信息，用于后面实现点击标的点弹窗在弹窗中显示详细信息} });}var dataSet = new mapv.DataSet(datas);var options = {deg:0,draw: 'icon',methods: {click: (datas) => {             //图标点击事件if (datas && datas.tag) {let bPoint = new BMap.Point(datas.geometry.coordinates[0], datas.geometry.coordinates[1]);map.openInfoWindow(new BMap.InfoWindow("<div class='BMap_bubble_content' style='width: auto; height: auto;'><div>"+ "<table width='100%'><tbody><tr><td><a style='font-size: 14px; color: rgb(77, 77, 77); font-weight: bold; text-decoration: none;'>"+ datas.tag.utilName+ "</a><a style='font-size: 12px; color: rgb(61, 109, 204); margin-left: 5px; text-decoration: none;' href='javascript:dates8("+datas.tag.id+");'"+ "'>详情»</a></td>"+ "</tr>"+ "<tr><td><p style='padding: 0px; margin: 0px; line-height: 18px; font-size: 12px; color: rgb(127, 127, 127);margin-top: 4px;'>责任人："+ datas.tag.principal+ "</p></td></tr>"+ "<tr><td><p style='padding: 0px; margin: 0px; line-height: 18px; font-size: 12px; color: rgb(127, 127, 127);margin-top: 4px;'>责任人电话："+ datas.tag.telphone+ "</p></td></tr><tr><td><p style='padding: 0px; margin: 0px; line-height: 18px; font-size: 12px; color: rgb(127, 127, 127);margin-top: 4px;'>详细地址："+ datas.tag.address+ "</p></td></tr><tr><td><p style='padding: 0px; margin: 0px; line-height: 18px; font-size: 12px; color: rgb(127, 127, 127);margin-top: 4px;'>备注："+ datas.tag.notes+ "</p></td></tr></tbody></table>"+ "</div></div>"),bPoint);}}},size: 30,//设置图片大小width: 30,height: 30,//sx: 10,//sy: 10,//swidth: 50,//sheight: 50,}var mapvLayer = new mapv.baiduMapLayer(map, dataSet, options);}}});
}

效果图如下：
可在此链接进行demo测试
上述方法就算是100万条数据也不会造成浏览器卡死，只是需要等10秒钟左右

如有其他百度地图JavaScript的其他问题都可以问我

百度地图Javascript使用海量点加载数据并自定义图标相关推荐

【百度地图】——利用三级联动加载百度地图
[百度地图]--利用三级联动加载百度地图 HTML+CSS代码如下: <!DOCTYPE html> <html lang="en"><head> ...
echarts加载数据时自定义加载动画
echarts加载数据时自定义加载动画 1.实现 1.实现有时用echarts加载数据时,尤其是首次加载,可能一时加载不出数据,可以给它加一个加载动画 let departChart = this. ...
百度地图API的两种加载方式
1. 同步加载直接在页面中使用script标签,引入api地址即可,如下: <script src="http://api.map.baidu.com/api?v=2.0&a ...
百度地图热力图大量点位快速加载
近期做了个热力图在此记载一下,用的是百度的api,做了ajax异步渲染,做了快速定位当TOP1的点位,并且获取该点位的信息演示地址:http://api.azcity.cn/api/v1.index ...
在百度地图中叠加CAD图及GIS数据展示踩坑记
前言在之前的几篇博客中分别介绍了在Cesium中实现与CAD的DWG图叠加显示分析 https://www.cnblogs.com/vjmap/p/16541751.html . 高德地图与CAD ...
dwz怎么使用数据加载中提示_百度地图数据采集手把手教，从此POI数据不再是愁...
本文介绍使用八爪鱼采集百度地图数据(以上海-建设银行为例)的方法采集网站:http://map.baidu.com/ 适用版本:八爪鱼7版本,8版本请参照官网新手入门教程制作 8版本新手入门教程:用 ...
百度地图：层级地图、行政边界、圆形覆盖物、自定义覆盖物、可视化数据显示、放大及缩小、下拉滚动加载数据等...
写了一天,以下是我自己摸索出来的,暂时只做了两层地图,废话不多说,上图上代码图片: 第一层地图点击圆形覆盖物或者放大地图进入第二层地图,缩放会回到第一层拖拽地图或者缩放地图会触发可视化数据下拉 ...
html5 百度地图api文档,开发指南--百度地图JavaScript API大众版.doc
开发指南--百度地图JavaScriptAPI大众版开发指南--百度地图JavaScriptAPI大众版简介 JavaScript API大众版 JavaScript API功能介绍百度地图Jav ...
百度echart柱图、折线图、饼图、Map类型等类似视图的动态加载数据
这几天接触的一个项目需要使用到百度的echart,所以简单查找并实验了几款比较简单且适用性较广的例子,做了几个简单的Demo,一来是对echart有所了解,二来也是记录一下,方便以后进一步的优化. 首 ...

百度地图Javascript使用海量点加载数据并自定义图标

百度地图Javascript使用海量点加载数据并自定义图标

如有其他百度地图JavaScript的其他问题都可以问我

百度地图Javascript使用海量点加载数据并自定义图标相关推荐

最新文章

热门文章