无极低码 ：https://wheart.cn

本文介绍了一段 JavaScript 代码，通过使用百度地图 Web GL API，实现了掩模功能和自定义覆盖物标记等功能。具体包括以下内容：

1. 实现地图掩模功能：程序中使用 BMapGL.Boundary 类获取区域边界点，并通过 BMapGL.Prism 类绘制区域掩模。掩模功能能够很好的帮助用户更加清晰地看到地图上的重要信息。
2. 自定义覆盖物标记：在地图上自定义绘制覆盖物标记，可以更好的突出标记点，并给用户带来更佳的视觉体验。本程序使用 mapvgl.CircleLayer 类，实现了带波纹扩散的圆形标记，同时还使用了 BMapGL.Point 类和 BMapGL.Marker 类来实现标记点的绘制和添加信息框等功能，让用户能够更加直观地了解该标记点所代表的信息。
3. 自动更新数据：程序中使用 setInterval() 函数来动态获取数据，定期更新覆盖物标记和信息，保证了展示数据的时效性。
4. 操作地图的其他功能：程序中还实现了地图的缩放、拖拽等操作，同时使用了 BMapGL.MapMask 类来实现区域掩模功能，提高了程序的应用实用性。

本文只是简单地介绍了该 JavaScript 代码所实现的功能，其具体实现涉及到多种类和函数，需要读者具备一定的前端开发技术基础。

实现效果

实现代码

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);

无极低码 ：https://wheart.cn