实现效果

视频太大这里就不传了

实现代码

2.1地图初始化

var point = new BMapGL.Point(clng || lng, clat || lat)
        map.centerAndZoom(point, zoom || 19);
        map.enableScrollWheelZoom(false);
        map.setHeading(-30);
        map.setTilt(Tilt);
        map.centerAndZoom(point, zoom || 19);

2.2获取数据（模拟）

var markers= [{
                    lng: 119.306239,
                    lat: 26.075302,
                    lv: '三',
                    num: 10,
                    type: 'red'
                },
                {
                    lng: 119.306239,
                    lat: 25.005302,
                    lv: '一',
                    num: 10,
                    type: '#53F5FF'
                },
                {
                    lng: 117.306239,
                    lat: 25.005302,
                    lv: '二',
                    num: 3,
                    type: '#53F5FF'
                },{
                    lng: 117.006239,
                    lat: 25.005302,
                    lv: '四',
                    num: 3,
                    type: '#53F5FF'
                },
                {
                            lng: 118.306239,
                            lat: 26.075302,
                            lv: '五',
                            num: 1,
                            type: 'red'
                        },
            ];

2.3 标注地图marker

    var infoBox,
            listinfoBox = [],
            listmarker = [],
            marker,
            data = [];
        for (var i = 0; i < markers.length; i++) {
            var point = new BMapGL.Point(markers[i].lng, markers[i].lat);
            // 创建小车图标
            marker = new BMapGL.Marker(point);
            marker.lv = markers[i].lv;
            marker.num = markers[i].num;
            marker.type = markers[i].type;
            infoBox = getInfoBox(map, getHtml(markers[i]));
            infoBox.open(marker);

2.4 设置地图波纹闪烁效果

var waveLayer = new mapvgl.CircleLayer({
            // 绘制带波纹扩散的圆
            type: 'wave',
            // 扩散半径，支持直接设置和回调两种形式
            radius: r => 1.6 * r,
            // 周期影响扩散速度，越小越快
            duration: 1 / 3,
            // 拖尾影响波纹数，越大越多
            trail: 3,
            enablePicked: true,
            selectedColor: 'yellow', // 选中项颜色
            autoSelect: true, // 根据鼠标位置来自动设置选中项
            onClick: (e) => { // 点击事件
                console.log(e)
                infoBox = getInfoBox(map, getHtml(e.dataItem.om));
                infoBox.open(e.dataItem.om);
            }
        });
        view.addLayer(waveLayer);
        waveLayer.setData(data);

2.5 自定义地图标注信息框

    function getInfoBox(map, ht) {
        return new BMapGLLib.InfoBox(map, ht, {
            boxStyle: {
                background: "#0006cb2fa",
                width: "193px",
                height: "102px"
            },
            closeIconMargin: "1px 1px 0 0",
            // closeIconUrl: '//mapopen.bj.bcebos.com/github/BMapGLLib/InfoBox/examples/images/close.png',
             closeIconUrl: 'myimg/close.png',
            enableAutoPan: true,
            align: INFOBOX_AT_BOTTOM,
            offset: new BMapGL.Size(100, -100)
        })
    }

2.6 设置显示地图区域（屏蔽其他区域地图）

var bd = new BMapGL.Boundary();
        bd.get(position.city, function(rs) {
            var count = rs.boundaries.length; //行政区域的点有多少个
            var pointArray = [];
            for (var i = 0; i < count; i++) {
                var path = [];
                str = rs.boundaries[i].replace(' ', '');
                points = str.split(';');
                for (var j = 0; j < points.length; j++) {
                    var lng = points[j].split(',')[0];
                    var lat = points[j].split(',')[1];
                    path.push(new BMapGL.Point(lng, lat));
                }
                var mapmask = new BMapGL.MapMask(path, {
                    isBuildingMask: true,
                    isPoiMask: true,
                    isMapMask: true,
                    showRegion: 'inside',
                    topFillColor: '#5679ea',
                    topFillOpacity: 0.5,
                    sideFillColor: '#5679ea',
                 sideFillOpacity: 1
                });
                map.addOverlay(mapmask);
            }
        });

2.7 设置地图自定义样式

    map.setMapStyleV2({
            styleId: '3e801b6531c190d7c79a9d2a41b80ca0'
        });

2.8设置天空颜色

    var skyColors = [];
        for (var i = 0; i < 10; i++) {
            skyColors[i] = 'rgba(0, 0, 0, 0.' + i + ')';
        }
        map.setDisplayOptions({
            skyColors: skyColors
        })

2.9绘制区域边界

var bd = new BMapGL.Boundary();
        bd.get(name || '福州市', function(rs) {
            var count = rs.boundaries.length; //行政区域的点有多少个
            var pointArray = [];
            for (var i = 0; i < count; i++) {
                var path = [];
                str = rs.boundaries[i].replace(' ', '');
                points = str.split(';');
                for (var j = 0; j < points.length; j++) {
                    var lng = points[j].split(',')[0];
                    var lat = points[j].split(',')[1];
                    path.push(new BMapGL.Point(lng, lat));
                }
                var prism = new BMapGL.Prism(path, 5000, {
                    topFillColor: color || '#2106ea',
                    topFillOpacity: 0.3,
                    sideFillColor: '#2106ea',
                    sideFillOpacity: 1
                });
                map.addOverlay(prism);

            }
        });

2.10模拟pull数据（实际情况可根据需要进行pull或push）

setInterval(function(){
            view.removeAllLayers();
            var ovs=map._customOverlays;
            for (var i = 0; i < ovs.length; i++) {
                ovs[i].close();
            }
            getData();
        }, 10000);