javascript - 如何用画布层覆盖整个 MapBox 地图?
问题描述
我正在使用以下代码:
mapLoaded(event) {
this.map = event;
//add source
this.map.addSource('canvasSource', {
type: 'canvas',
canvas: 'mycanvas',
coordinates: [
[-81.490, 46.437],
[-72.582, 46.437],
[-72.582, 38.907],
[-81.490, 38.907]
]
});
//add layer
this.map.addLayer({
id: 'canvasLayer',
source: 'canvasSource',
type: 'raster',
paint: { 'raster-opacity': 0.85 }
});
}
我看到了如何将光栅图像添加到地图,但我想做的是用不透明的画布覆盖整个地图。我想将画布添加到地图中。我该如何做到这一点,以及如何做到这一点,使其覆盖整个地图而不管缩放级别如何?似乎我可以设置所需的不透明度{ 'raster-opacity': 0.85 }
。
如果我想添加这样的坐标,坐标需要是什么才能覆盖整个地图?我不明白这应该如何工作。
map.addSource('canvas-source', {
type: 'canvas',
canvas: 'canvasID',
coordinates: [
[91.4461, 21.5006],
[100.3541, 21.5006],
[100.3541, 13.9706],
[91.4461, 13.9706]
],
// Set to true if the canvas source is animated. If the canvas is static, animate should be set to false to improve performance.
animate: true
});
解决方案
推荐阅读
- javascript - 在使用 React 缩放多个组件的同时提高性能
- sql-server - 在 SQL 中查询列标题数据
- laravel - 尝试在 laravel 中建立关系时出错
- python - 在 pygame 上验证 Pong 碰撞逻辑
- c# - 如何使用参数从 Lua / MoonSharp 脚本调用和等待异步 C# 方法?
- tokenize - 有没有办法获取在 BERT 中生成某个令牌的子字符串的位置?
- c++ - free():在 tcache 2 中检测到双重空闲
- javascript - 在两个文件中使用两个 MVC 模型
- angular - EventEmitter 没有在 Angular 9 中发射对象
- python-3.x - 如何在不改变python中输入元素顺序的情况下用数字分隔单词