AI 地图
产品服务
解决方案
文档与支持
定价
更新时间: 2026/07/27 10:37
您当前查看的是 JSAPI GL 历史版本文档。该版本仅用于维护现有项目,不建议用于新项目开发。新项目请使用 JSAPI 4.0,如需升级现有项目,请参考升级指南
You are viewing the legacy JSAPI GL documentation. This version is maintained for existing projects only and is not recommended for new development. For new projects, use the JSAPI 4.0 documentation. If you are upgrading an existing project, please refer to the Migration Guide.
地面叠加层覆盖物
简介

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

DEMO详情
图片叠加层
Canvas叠加层
视频叠加层
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.2035, 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类型叠加层

当叠加层纹理是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类型叠加层

当叠加层纹理是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);

上一篇

3D棱柱绘制

下一篇

文本标注
本篇文章对您是否有帮助?