简略效果图

具体实例

加载百度地图、mapv的资源

<script src="http://api.map.baidu.com/api?v=2.0&ak=fI9FbBjVQKrdaopqUigf66ONGRBhgFKm"></script>
<script src="js/mapv.js"></script>
<script src="https://code.bdstatic.com/npm/mapvgl@1.0.0-beta.125/dist/mapvgl.min.js"></script>

添加地图容器

<div id='map'></div>
<ul class='tally'><li  data-id='checkbox1'><input type="checkbox" checked class=" radiocheck" value='dx'  name="map" id='mapdx'/><label class=" nofull small left" for='mapdx'>站点1</label></li><li  data-id='checkbox1'><input type="checkbox" checked class=" radiocheck" value='lt' name="map" id='maplt'/><label class=" nofull small left" for='maplt'>站点2</label></li>
</ul>

地图初始化

var mapdata=[],mappoints=[];
var bmap = new BMap.Map("map",{maxZoom : 18 });    // 创建Map实例
bmap.enableScrollWheelZoom();
bmap.addControl(new BMap.NavigationControl({type : BMAP_NAVIGATION_CONTROL_ZOOM, //缩放控件类型 仅包含缩放按钮anchor : BMAP_ANCHOR_BOTTOM_RIGHT, //右下角offset : new BMap.Size(2,2) //进一步控制缩放按钮的水平竖直偏移量}));
$(document).ajaxStop(function(){//加载完成关闭遮罩层，只有首次有遮罩层，后续更新数据不加遮罩层$('.loadingbox').hide()
});
bmap.addEventListener("rightclick",function(e){bmap.zoomTo(bmap.getZoom() - 1);
})

准备数据和图片

数据

//1
let mapDx=[{"name":"第一人民医院病房楼室分_6","lng":114.061602,"lat":33.566774,"count":"dx"}]
//2
let mapLt=[{"name":"第一人民医院病房楼室分_6","lng":114.061602,"lat":33.566774,"count":"lt"},]

图片

数据处理

getBaseStation5gData()//地图
//获取地图数量//type+》联通电信，
function getBaseStation5gData(type){bmap.clearOverlays();let list=[...mapDx,...mapLt];if(type)list=(type&&type=='dx')?mapDx:mapLtvar len=list.length;mappoints=[];var col=['red','yellow','green']for(let i=0;i<len;i++){let num=parseInt(Math.random()*col.length)var img = new Image();let url=''if(list[i].count=='dx'){img.src='images/dx'+col[num]+'.png'url='images/dx'+col[num]+'.png'}else{img.src='images/lt'+col[num]+'.png'url='images/lt'+col[num]+'.png'}mappoints.push({geometry: {type: 'Point',coordinates: [list[i].lng, list[i].lat]},num:list[i].name,count:list[i].count,//icon: img,iconOptions: {url: url, // 非聚合时点的icon,可设置为空width: 30,height:30}});};bmap.setViewport(maplnglat);render()
}
function render(){bmap.clearOverlays();var beishu = 5;var zoom = bmap.getZoom();var blur = 0.7;let radiusvar ground_radius=beishuif (zoom == 7) {ground_radius = 1.2 * beishu;//1radius=20*beishu} else if (zoom == 8) {ground_radius = 1.8 * beishu;//1.5radius=18*beishu} else if (zoom == 9) {ground_radius = 2 * beishu;radius=16*beishu} else if (zoom == 10) {ground_radius = 2.5 * beishu;radius=14*beishu} else if (zoom == 11) {ground_radius = 3 * beishu;radius=12*beishu} else if (zoom == 12) {ground_radius = 3.5 * beishu;radius=10*beishu} else if (zoom == 13) {ground_radius = 4 * beishu;radius=8*beishu} else if (zoom == 14) {ground_radius = 4.5 * beishu;//40radius=6*beishu} else if (zoom == 15) {ground_radius = 5 * beishu;//60radius=5*beishu} else if (zoom == 16) {ground_radius = 5.5 * beishu;//140radius=4*beishu} else if (zoom >= 17) {ground_radius = 6 * beishu;//200radius=0.1} var dataSet = new mapv.DataSet(mappoints);var options = {methods: {click(point) {if (point) {if (point.iconOptions) {console.log(point);let item=pointvar stationNum=item.num;var lnglat=item.geometry.coordinates;var opts = {width : 240,     // 信息窗口宽度title : '站点信息' , // 信息窗口标题message:"站点"}var point = new BMap.Point(lnglat[0], lnglat[1]);var html='小区名称:'+stationNum+"<br/>"var infoWindow = new BMap.InfoWindow(html, opts);  // 创建信息窗口对象 bmap.openInfoWindow(infoWindow,point); //开启信息窗口}// 通过children可以拿到被聚合的所有点//console.log(point.children);}}},fillStyle: 'rgba(255, 50, 0, 1.0)', size: 50 / 3 / 2, // 非聚合点的半径// 非聚合时点的icon设置，会被具体点的设置覆盖，可设置为空minSize: 40, // 聚合点最小半径maxSize: 60, // 聚合点最大半径globalAlpha: 1, // 透明度clusterRadius: radius, // 聚合像素半径maxClusterZoom: 19, // 最大聚合的级别maxZoom: 19, // 最大显示级别minPoints: 30, // 最少聚合点数，点数多于此值才会被聚合extent: 4000, // 聚合的细腻程度，越高聚合后点越密集label: { // 聚合文本样式show: true, // 是否显示fillStyle: 'white',iconOptions: {show: true,  // 是否显示图像url: 'images/sean.png',  // 图像urloffset: {x: 0,y: 0},//shadowColor: 'rgba(20, 34, 54, 1)',   // 图像阴影配置//shadowBlur: 10,},},gradient: { 0: "blue", 0.5: 'yellow', 1.0: "rgb(255,0,0)"}, // 聚合图标渐变色draw: 'cluster',};mapvLayer = new mapv.baiduMapLayer(bmap, dataSet, options);
}

添加多选选择功能

$("input[name='map']").on('click',function(e){ //var option=$('.mapselect-city option:selected');//let city=option.text();chexkboxmap()
});
function chexkboxmap(){var chk_value =[]; $('input[name="map"]:checked').each(function(){ chk_value.push($(this).val()); });console.log(chk_value)if(chk_value.length==2){getBaseStation5gData()//地图}else if(chk_value.length==1){getBaseStation5gData(chk_value[0])//地图}else{alert("最少选择一项!");return false}
}

百度地图+mapv聚合实例相关推荐

百度地图点聚合提高效率
百度的点聚合算法是基于方格和距离的聚合算法,即开始的时候地图上没有任何已知的聚合点,然后遍历所有的点,去计算点的外包正方形(由gridSize指定),若此点的外包正方形与现有的聚合点的外包正方形不相 ...
百度地图点聚合MarkerClusterer性能优化
公司要求做个百度地图点聚合的性能优化,需一次性加载9万条数据. 记录下自己的优化过程.(只想看优化代码的可直接移步:步骤三) 一.引入百度地图 vue项目中,在index.html文件中用script ...
百度地图MapV实现海量数据画线、点聚合等功能
前言 MapVGL,是一款基于WebGL的地理信息可视化库,可以用来展示大量基于3D的地理信息点线面数据.设计初衷主要是为了解决大数据量的三维地理数据展示问题及一些炫酷的三维效果. 官网地址:MapV ...
百度地图标记聚合器MarkerClusterer结合TextIconOverlay，根据标记点的属性更换聚合器的样式
一.问题公司的项目中在百度地图上生成了成千上万的点,所以使用了标记聚合器MarkerClusterer来处理海量点,但是每个点根据异常类型,分为正常(绿色)和异常(红色),这时如果用了聚合器,只有没 ...
百度地图点聚合优化重写
vue 引入 <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0& ...
百度地图点聚合功能如何提高性能
点聚合提高加载效率百度示例上面的点聚合功能加载到一万个点就有点卡了,下面进入代码部分 map_juhe.html <!DOCTYPE html> <html lang=" ...
解决百度地图多点聚合卡顿问题
由于百度地图提供的MarkerClusterer_min.js 比较卡顿特此提供加速后的MarkerClusterer_min.js 源码如下 /*** @fileoverview MarkerCl ...
百度地图mapv方法封装
项目中使用到了百度地图,把一些方法进行了封装,在此记录一下,方便自己和其他人以后使用 1. 代码环境因为项目需求,前端页面中引用vue.js进行开发,不过这部分和百度地图关系不大,可以忽略不记 2. ...
百度地图点聚合_强强联合聚能网约车场景首汽约车为百度地图“站台”
人与出行的关系在不断刷新,关于地图的重新定义也正在进行时.12月10日,2019百度地图生态大会在京召开,"新一代人工智能地图"生态全景首次公布,百度地图成为中国最大的智能化位置服 ...

百度地图+mapv聚合实例

简略效果图

具体实例

加载百度地图、mapv的资源

添加地图容器

地图初始化

准备数据和图片

数据处理

添加多选选择功能

百度地图+mapv聚合实例相关推荐

最新文章

热门文章