地面叠加层覆盖物

更新时间：2025-08-04

简介

JSAPI GL提供的GroundOverlay类支持在地图底面上叠加覆盖物，覆盖物可以是图片、自定义Canvas、视频。
GroundOverlay类继承Overlay类，基于Bounds确定在地面上的显示范围和大小，通过options来配置覆盖物的类型、源、透明度等。

图片叠加层

Canvas叠加层

视频叠加层

DEMO详情

GroundOverlay类参考

构造函数：

构造函数	说明
BMapGL.GroundOverlay(bounds, options)	GroundOverlay继承Overlay，用于添加地面叠加层覆盖物，通过options自定义叠加层的类型（图片、视频、canvas）等

参数说明：

构造函数	类型	说明
bounds	Bounds	叠加图层显示的矩形区域，通过Bounds类创建的对象
options	Object	叠加层样式配置，可选

options属性变量：

options属性	类型	说明
type	string	'video' | 'canvas'，默认为image
url	string	video url | 自定义的canvas对象
opacity	number	图层透明度，默认为1，范围0-1

图片类型示例

1创建地图参照展示地图

2创建地面叠加层实例，并添加到地图上

创建地面叠加层使用BMapGL.GroundOverlay类，其继承自Overlay，通过map.addoverlay()方法将创建的叠加层添加到地图上。

        // 创建叠加物显示的范围Bounds
        var pStart = new BMapGL.Point(117.19635, 36.24093);
        var pEnd = new BMapGL.Point(117.20350, 36.24764);
        var bounds = new BMapGL.Bounds(new BMapGL.Point(pStart.lng, pEnd.lat), 
                                       new BMapGL.Point(pEnd.lng, pStart.lat));
        // 创建地面叠加层实例
        var imgOverlay = new BMapGL.GroundOverlay(bounds, {
            type: 'image',
            url: '/jsdemo/img/shouhuimap.png',
            opacity: 1
        });
        // 叠加层添加到地图
        map.addOverlay(imgOverlay);
    

canvas类型叠加层

1

当叠加层纹理是canvas类型时，使用方法与图片类似，在options中设置其纹理源。

            // 自定义canvas
            function getTextureCanvas() {
                var textureCanvas = document.createElement('canvas');
                textureCanvas.width = textureCanvas.height = 200;
                var ctx = textureCanvas.getContext('2d');
                ctx.fillStyle = '#79a913';
                ctx.strokeStyle = 'white';
                ctx.lineWidth = 6;
                ctx.lineCap = 'square';
                ctx.fillRect(0, 0, 200, 200);
                ctx.moveTo(50, 50);
                ctx.lineTo(150, 50);
                ctx.lineTo(150, 150);
                ctx.lineTo(50, 150);
                ctx.lineTo(50, 50);
                ctx.stroke();
                return textureCanvas;
            }
            
            // 添加canvas叠加层
            var canvasSource = getTextureCanvas();
            var pStart = new BMapGL.Point(116.447717, 39.919173);
            var pEnd = new BMapGL.Point(116.453125, 39.923475);
            var bounds = new BMapGL.Bounds(new BMapGL.Point(pStart.lng, pEnd.lat),
                                           new BMapGL.Point(pEnd.lng, pStart.lat));
            var canvasOverlay = new BMapGL.GroundOverlay(bounds, {
                type: 'canvas',
                url: canvasSource,
                opacity: 0.9
            });
            map.addOverlay(canvasOverlay);
    

video类型叠加层

1

当叠加层纹理是video类型时，使用方法与图片和canvas类似，在options中设置其纹理源。

            var pStart = new BMapGL.Point(94.582033, -7.989754);
            var pEnd = new BMapGL.Point(145.358572, 30.813867);
            var bounds = new BMapGL.Bounds(new BMapGL.Point(pStart.lng, pEnd.lat),
                                           new BMapGL.Point(pEnd.lng, pStart.lat));
            var imgOverlay = new BMapGL.GroundOverlay(bounds, {
                type: 'video',
                url: '/jsdemo/img/cloud.mov',
                opacity: 0.5
            });
            map.addOverlay(imgOverlay);