首页 > 解决方案 > 如何用画布层覆盖整个 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
});

标签: javascriptmapbox

解决方案


推荐阅读