没有match的答案？试试对话大模型
| 第1行： | 第1行： | ||
{{jspopularGL-sidebar}} | {{jspopularGL-sidebar}} | ||
| − | <div class="h1-title">地面叠加层覆盖物</div><div id="update- | + | <div class="h1-title">地面叠加层覆盖物</div><div id="update-time1">更新时间：2020年12月14日</div><div class="bluetitle"><div class="serve-explain-text"><div class="service-page-anchor"><span>简介</span></div></div></div><div class="serve-explain-text"> |
JSAPI GL提供的GroundOverlay类支持在地图底面上叠加覆盖物，覆盖物可以是图片、自定义Canvas、视频。<br/>GroundOverlay类继承Overlay类，基于Bounds确定在地面上的显示范围和大小，通过options来配置覆盖物的类型、源、透明度等。 | JSAPI GL提供的GroundOverlay类支持在地图底面上叠加覆盖物，覆盖物可以是图片、自定义Canvas、视频。<br/>GroundOverlay类继承Overlay类，基于Bounds确定在地面上的显示范围和大小，通过options来配置覆盖物的类型、源、透明度等。 | ||
| − | </div><div class="jsapidemo_template"><div class="demo_area"><div dir="https://lbsyun.baidu.com/jsdemo.htm#sLngLatSearchPath"></div></div><div class="demo_control"><div class="demo_btn">[https://lbsyun.baidu.com/jsdemo/demo/gImageGround.htm 图片叠加层]</div><div class="demo_btn">[https://lbsyun.baidu.com/jsdemo/demo/gCanvasGround.htm Canvas叠加层]</div><div class="demo_btn">[https://lbsyun.baidu.com/jsdemo/demo/gVideoGround.htm 视频叠加层]</div></div><div class="jsapi-demo-link">[https://lbsyun.baidu.com/jsdemo.htm#gImageGround DEMO详情]</div></div><div class="bluetitle"><div class=" | + | </div><div class="jsapidemo_template"><div class="demo_area"><div dir="https://lbsyun.baidu.com/jsdemo.htm#sLngLatSearchPath"></div></div><div class="demo_control"><div class="demo_btn">[https://lbsyun.baidu.com/jsdemo/demo/gImageGround.htm 图片叠加层]</div><div class="demo_btn">[https://lbsyun.baidu.com/jsdemo/demo/gCanvasGround.htm Canvas叠加层]</div><div class="demo_btn">[https://lbsyun.baidu.com/jsdemo/demo/gVideoGround.htm 视频叠加层]</div></div><div class="jsapi-demo-link">[https://lbsyun.baidu.com/jsdemo.htm#gImageGround DEMO详情]</div></div><div class="bluetitle"><div class="serve-explain-text"><div class="service-page-anchor"><span>GroundOverlay类参考</span></div></div></div><div class="serve-explain-text"> |
构造函数： | 构造函数： | ||
</div> | </div> | ||
| 第51行： | 第51行： | ||
| 图层透明度，默认为1，范围0-1 | | 图层透明度，默认为1，范围0-1 | ||
|} | |} | ||
| − | <div class="bluetitle"><div class=" | + | <div class="bluetitle"><div class="serve-explain-text"><div class="service-page-anchor"><span>图片类型示例</span></div></div></div><div class="devguide"><div class="leftborderbg" style="height:5000px;"></div><div class="devguideorder"><span>1</span>创建地图参照展示地图</div><div class="devguidecenter"></div><div class="devguideorder"><span>2</span>创建地面叠加层实例，并添加到地图上</div><div class="devguidecenter">创建地面叠加层使用BMapGL.GroundOverlay类，其继承自Overlay，通过map.addoverlay()方法将创建的叠加层添加到地图上。<pre class="prettyprint codestyle"> // 创建叠加物显示的范围Bounds |
var pStart = new BMapGL.Point(117.19635, 36.24093); | var pStart = new BMapGL.Point(117.19635, 36.24093); | ||
var pEnd = new BMapGL.Point(117.20350, 36.24764); | var pEnd = new BMapGL.Point(117.20350, 36.24764); | ||
| 第65行： | 第65行： | ||
map.addOverlay(imgOverlay); | map.addOverlay(imgOverlay); | ||
</pre> | </pre> | ||
| − | </div></div><div class="bluetitle"><div class=" | + | </div></div><div class="bluetitle"><div class="serve-explain-text"><div class="service-page-anchor"><span>canvas类型叠加层</span></div></div></div><div class="devguide"><div class="leftborderbg" style="height:5000px;"></div><div class="devguideorder"><span>1</span></div><div class="devguidecenter">当叠加层纹理是canvas类型时，使用方法与图片类似，在options中设置其纹理源。<pre class="prettyprint codestyle"> // 自定义canvas |
function getTextureCanvas() { | function getTextureCanvas() { | ||
var textureCanvas = document.createElement('canvas'); | var textureCanvas = document.createElement('canvas'); | ||
| 第97行： | 第97行： | ||
map.addOverlay(canvasOverlay); | map.addOverlay(canvasOverlay); | ||
</pre> | </pre> | ||
| − | </div></div><div class="bluetitle"><div class=" | + | </div></div><div class="bluetitle"><div class="serve-explain-text"><div class="service-page-anchor"><span>video类型叠加层</span></div></div></div><div class="devguide"><div class="leftborderbg" style="height:5000px;"></div><div class="devguideorder"><span>1</span></div><div class="devguidecenter">当叠加层纹理是video类型时，使用方法与图片和canvas类似，在options中设置其纹理源。<pre class="prettyprint codestyle"> var pStart = new BMapGL.Point(94.582033, -7.989754); |
var pEnd = new BMapGL.Point(145.358572, 30.813867); | var pEnd = new BMapGL.Point(145.358572, 30.813867); | ||
var bounds = new BMapGL.Bounds(new BMapGL.Point(pStart.lng, pEnd.lat), | var bounds = new BMapGL.Bounds(new BMapGL.Point(pStart.lng, pEnd.lat), | ||
2022年8月19日 (五) 13:26的最后版本
地面叠加层覆盖物
更新时间：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);