百度地图 - 点聚合方式批量渲染坐标点

最近在做一个大数据人员分布的系统，需要能够在地图上渲染数据库中的坐标点，大概有四万个坐标点，普通的渲染方式会导致客户端崩溃的，或者是坐标点太过于密集，用户体验差。于是使用了百度地图的点聚合方式，特此记录一下

1、百度地图API

首先我们需要去百度地图申请一个应用，得到密钥

http://lbsyun.baidu.com/

2、点聚合

代码如下：

<head><meta charset="UTF-8"><title>获取自定义区域内的坐标点 - 百度地图</title><style>html,body {width: 100%;height: 100vh;padding: 0;margin: 0;overflow: hidden;}/* 隐藏百度地图logo */.anchorBL {display: none;}.btn-contrail button {margin-bottom: 30px;margin-left: 0px!important;background-color: #FFFFFF;color: rgba(0, 0, 0, .5);padding: 10px;}.layui-btn:hover {background-color: #1890ff!important;color: #FFFFFF!important;}.btn-click {background-color: #1890ff!important;color: #FFFFFF!important;}</style>
</head><body><div style="position: fixed;top: 0;right: 0;height: 100vh;background: rgba(0,0,0,0);width: 125px;z-index: 9999999;display: flex;justify-content: center;align-items: center;"><div class="tools" style="width: 100%;height: 100%"><div class="btn-contrail" style="height: 100%;background: rgba(0,0,0,.5);width: 100%;display: flex;flex-direction: column;justify-content: center;align-items: center;"><button type="button" class="layui-btn btn-click" data-model="0">查看点</button><button type="button" class="layui-btn" data-model="1">标新点</button><button type="button" class="layui-btn" data-model="2">删除点</button></div></div></div><!-- 地图容器 --><div id="container" style="height: 100vh;width: 100%"></div><!-- jquery --><script type="text/javascript" src="js/jquery-3.2.0.min.js" ></script><!-- 百度地图api --><script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=您的密钥"></script><!-- 点聚合工具 --><script type="text/javascript" src="http://api.map.baidu.com/library/TextIconOverlay/1.2/src/TextIconOverlay_min.js"></script><!-- 点聚合工具 --><script type="text/javascript" src="https://api.map.baidu.com/library/MarkerClusterer/1.2/src/MarkerClusterer_min.js"></script><script type="text/javascript">// 工具栏模式：0-查看点1-标新点2-删除点var model = 0;// 地图上所有的点var points = [];// 切换模式$('body').on('click', '.layui-btn', function() {// 样式改变$('.btn-contrail').find('.layui-btn').removeClass('btn-click');$(this).addClass('btn-click');// 事件监听model = $(this).data('model');if(3 == model) {$('.BMapLib_Drawing').show();} else {$('.BMapLib_Drawing').hide();}// 清除域if(4 == model) {clearAll();}// 计算点if(5 == model) {alert('所选区域点数：' + areaPoint.length);}});// 定义地图var mp = new BMap.Map("container");// 鼠标滚动缩放mp.enableScrollWheelZoom(true);// 地图中心点，并设置级别mp.centerAndZoom(new BMap.Point(106.908, 28.1744), 10);// 地图类型，卫星地图mp.setMapType(BMAP_HYBRID_MAP);// 地图缩放级别mp.setZoom(10)// 请求数据，并渲染地图init();function init() {// 获取数据$.get("json/data.json", function(res) {points = res.data;renderMap();});}// 渲染地图坐标点function renderMap() {var markers = [];points.forEach(v => {// 创建新的坐标点const marker = new BMap.Marker(new BMap.Point(v['lng'], v['lat']), {icon: ''})// 为每一个点添加点击事件marker.addEventListener('click', function() {showPoint(v, marker);});markers.push(marker)})// 添加点聚合new BMapLib.MarkerClusterer(mp, {markers: markers});}// 监听地图点击事件mp.addEventListener("click", function(e) {var point = e.point;// 标新点if(1 == model) {// 创建新的坐标点const marker = new BMap.Marker(new BMap.Point(point.lng, point.lat));// 添加点击事件marker.addEventListener('click', function() {showPoint(point, marker);});// 添加坐标点到地图中mp.addOverlay(marker);// 将坐标点添加到我们的坐标带你集合中points.push(point);}});// 坐标点的点击事件监听function showPoint(point, marker) {// 查看点if(0 == model) {var lng = parseFloat(point.lng).toFixed(5);var lat = parseFloat(point.lat).toFixed(5);alert('经度：' + lng + '，纬度：' + lat);}// 删除点if(2 == model) {mp.removeOverlay(marker);}}</script>
</body>

3、JSON 数据格式

{"code": 200,"msg": "操作成功","data": [{"lng": "109.19151","lat": "27.73559"},{"lng": "106.67668","lat": "26.559734"}]
}

如您在阅读中发现不足，欢迎留言！！！

百度地图 - 点聚合方式批量渲染坐标点相关推荐

百度地图点聚合MarkerClusterer性能优化
公司要求做个百度地图点聚合的性能优化,需一次性加载9万条数据. 记录下自己的优化过程.(只想看优化代码的可直接移步:步骤三) 一.引入百度地图 vue项目中,在index.html文件中用script ...
百度地图点聚合提高效率
百度的点聚合算法是基于方格和距离的聚合算法,即开始的时候地图上没有任何已知的聚合点,然后遍历所有的点,去计算点的外包正方形(由gridSize指定),若此点的外包正方形与现有的聚合点的外包正方形不相 ...
百度地图点聚合_强强联合聚能网约车场景首汽约车为百度地图“站台”
人与出行的关系在不断刷新,关于地图的重新定义也正在进行时.12月10日,2019百度地图生态大会在京召开,"新一代人工智能地图"生态全景首次公布,百度地图成为中国最大的智能化位置服 ...
【百度地图API】如何批量转换为百度经纬度
摘要: 百度地图API的官网上提供了常用坐标转换的示例.但是,一次只能转换一个,真的非常麻烦!!这里结合了官方的示例,自制一个批量转换工具,供大家参考. ----------------------- ...
百度地图标记聚合器MarkerClusterer结合TextIconOverlay，根据标记点的属性更换聚合器的样式
一.问题公司的项目中在百度地图上生成了成千上万的点,所以使用了标记聚合器MarkerClusterer来处理海量点,但是每个点根据异常类型,分为正常(绿色)和异常(红色),这时如果用了聚合器,只有没 ...
百度地图批量精度和维度Java_【百度地图API】如何批量转换为百度经纬度
摘要: 百度地图API的官网上提供了常用坐标转换的示例.但是,一次只能转换一个,真的非常麻烦!!这里结合了官方的示例,自制一个批量转换工具,供大家参考. ----------------------- ...
百度地图点聚合功能php,百度地图js lite api 支持点聚合
百度地图lite api 是专门为h5 绘制海量点设计的,但是偏偏忽略掉了点聚合的需求,所以需要自己动手,做一次二次改造. 我们知道点聚合需要引入开源库: MarkerClusterer: http ...
百度地图点聚合优化重写
vue 引入 <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0& ...
百度地图点聚合功能如何提高性能
点聚合提高加载效率百度示例上面的点聚合功能加载到一万个点就有点卡了,下面进入代码部分 map_juhe.html <!DOCTYPE html> <html lang=" ...

百度地图 - 点聚合方式批量渲染坐标点

1、百度地图API

2、点聚合

3、JSON 数据格式

百度地图 - 点聚合方式批量渲染坐标点相关推荐

最新文章

热门文章