浏览器版本低!无法浏览完整内容,建议升级或更换浏览器。
地面叠加层覆盖物
更新时间:2020年12月14日 
简介

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

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);
    
  • 文档根本没法用

  • 文档水平很差

  • 文档水平一般

  • 文档不错

  • 文档写的很好

如发现文档错误,或对此文档有更好的建议,请在下方反馈。问题咨询请前往反馈平台提交工单咨询。

提交反馈

拖动标注工具

添加矩形标注

添加箭头标注

完成

取消