使用百度地图实现放大指定倍数后显示当前可视区域的人员名称

最终效果图

<div id="map" class="container" style="width: 100%;height: 100%">div>

<script src="//api.map.baidu.com/api?v=1.0&type=webgl&ak=您的密钥">script>
<script src="//mapv.baidu.com/build/mapv.min.js">script>
<script src="jquery.js">script>
<script>
var mapObj= initBMap('map', [经度 , 纬度], 13, true, true, true, true);
var dataList = []; // 所有数据...
createClusterLayer(dataList, mapObj); // 创建点聚合图层
//监听地图缩放事件;
bmapgl.addEventListener("zoomend", function () {
	var cp = bmapgl.getBounds();
    var sw = cp.getSouthWest(); // 返回矩形区域的西南角  
    var ne = cp.getNorthEast(); // 返回矩形区域的东北角 
    var level = this.getZoom();
    var allOverlay = bmapgl.getOverlays(); // 获取当前地图上的所有覆盖物，返回覆盖物对象的集合
    if (level >= 15) {
		getLabel(dataList, mapObj, sw, ne);  // 创建自定义文本标注
	}else{
		console.log(allOverlay)
		// 缩放比例小于15时隐藏自定义文本标注
		for (var i = 0; i < allOverlay.length ; i++){
                        if(allOverlay[i]['_config'] && allOverlay[i]['_config']['myLabel'] == 'myLabel'){
                            mapObj.removeOverlay(allOverlay[i]);
                        }
                    }
	}
})

function initBMap(mapId, centerPoint, true, true, true, true, true) {
            var bmapgl = new BMapGL.Map(mapId);
            var point = new BMapGL.Point(centerPoint); // 定义一个经纬度地点

            bmapgl.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
            var scaleCtrl = new BMapGL.ScaleControl();
           	bmapgl.addControl(true); // 添加比例尺控件
            var zoomCtrl = new BMapGL.ZoomControl();
            bmapgl.addControl(true); // 添加缩放控件
            var cityCtrl = new BMapGL.CityListControl();
            bmapgl.addControl(true); // 添加城市列表控件
            return mapObj;
        }
 // 创建聚合点
 function createClusterLayer(dataList, mapObj){
	for (var i = 0, len = dataList.length; i < len; i++) 
				{
                    dataList[i].geometry = {};
                    dataList[i].geometry.type = 'Point';
                    dataList[i].geometry.coordinates = [];
                    dataList[i].geometry.coordinates = [dataList[i]['lng'], dataList[i]['lat']]; // 设置经纬度
                    dataList[i].properties = {};

                }
    var view = new mapvgl.View({
          map: mapObj
          });
   	var clusterLayer = new mapvgl.ClusterLayer({
                    
					minSize: 30, // 聚合点显示的最小直径
					maxSize: 50, // 聚合点显示的最大直径
					clusterRadius: 150, // 聚合范围半径
					gradient: {0: '#EEA9B8', 0.5: '#EE4000', 1.0: '#A52A2A'}, 
					maxZoom: 15, // 聚合的最大级别，当地图放大级别
					minZoom: 5, // 聚合的最小级别，当地图放大级别低
					showText: true,// 是否显示文字
					minPoints: 2,// 开始聚合的最少点数，点数多于此值才会被聚合
					enablePicked: true,
					onClick(e) {
                            console.log('点击事件', e);
                    }
				
				});
	view.addLayer(clusterLayer);
	clusterLayer.setData(dataList);
}
// 自定义文本
   function getLabel(markerArr, mapObj, sw, ne){
       for (var i = 0; i < markerArr.length; i++) {
           if(markerArr[i].lng != '' && (markerArr[i].lng >= sw.lng && markerArr[i].lng <= ne.lng) && (markerArr[i].lat >= sw.lat && markerArr[i].lat <= ne.lat)){
               var title = markerArr[i].name; // 人员姓名
               var lnt = markerArr[i].lng;
               var lat = markerArr[i].lat;
               // 创建文本视图
               addLabel(mapObj, title, lnt, lat);
           }
       }
   }
   // 创建文本视图
   function addLabel(mapObj, title, lng, lat){
            var opts = {
                position: new BMapGL.Point(lng, lat), // 指定文本标注所在的地理位置
                offset: new BMapGL.Size(-4, 0), // 设置文本偏移量
                "myLabel": "myLabel"
            };
            var richHtml = '
' +
        '' +'
' + ''+title+'';
            // 创建文本标注对象
            var label = new BMapGL.Label(richHtml, opts);
            mapObj.addOverlay(label);
        }
script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101

百度地图JSAPI WebGL v1.0类参考
https://lbsyun.baidu.com/cms/jsapi/reference/jsapi_webgl_1_0.html#a0b0

百度地图示例
https://lbsyun.baidu.com/solutions/mapvdata
https://lbsyun.baidu.com/index.php?title=open/jsdemo

这里有个问题是当一块区域的人员过多时，地图放大后同时加载过多的人员名称，会出现页面卡顿。欢迎各路大佬在留言区，提出解决方法