Mapbox 在绘制的多边形上悬停时显示区域

Question

我使用下面的代码添加自定义控件来在地图上绘制多边形并在屏幕侧面（在 div 上）显示该区域。

change() {
  this.map.on('load', () => {
      this.draw = new MapboxDraw({
        displayControlsDefault: false,
        controls: {
          polygon: true,
          trash: true
        }
      });
      this.map.addControl(this.draw);
      this.map.on('draw.create', (e) => {
        this.updateArea(e)
      });
      this.map.on('draw.delete', (e) => {
        this.updateArea(e)
      });
      this.map.on('draw.update', (e) => {
        this.updateArea(e)
      });
    }
  }
}
updateArea(e) {
  const data = this.draw.getAll();
  if (data.features.length > 0) {
    const area = turf.area(data);
    const rounded_area = Math.round(area * 100) / 100;
    this.selectedArea = rounded_area + ' sq m';
  } else {
    if (e.type === 'draw.delete') {
      this.selectedArea = '0 sq m';
      this.perimeter = '0 m';
    }
  }
  console.log(this.map.getStyle())
}

我想显示绘制的多边形悬停时的区域。而且，我还可以绘制多个多边形，因此每当我将鼠标悬停在绘制的多边形上时，我都需要显示带有该区域的弹出窗口。

我无法理解的是，这些多边形是在哪个特定图层/源中绘制的？我查看了“mapbox-gl-draw”文档，但没有提及该图层。我刚刚发现，当我控制台

this.map.getStyle()

时，如上所示，我得到了下面的对象：

{
  center: (2)[0, 0],
  glyphs: "mapbox://fonts/mapbox/{fontstack}/{range}.pbf",
  layers: (151)[{
    …}, ...],
  metadata: {
    mapbox: type: "default",
    mapbox: origin: "streets-v11",
    mapbox: autocomposite: true,
    mapbox: groups: {
      …}
  },
  name: "Mapbox Streets",
  sources: {
    composite: {
      …},
    contour: {
      …},
    geojson: {
      …},
    orthomosaic: {
      …},
    dsm: {
      …},
    …
  },
  sprite: "mapbox://sprites/mapbox/streets-v11",
  version: 8,
  zoom: 3,
}

因此，我在浏览器控制台中看到上述对象中的源包含

mapbox-gl-draw-hot

和

mapbox-gl-draw-cold

源。它们包含活动和陈旧的绘制多边形（及其相应的要素数据），但如何使用该数据在地图上启用弹出窗口，以显示悬停时的相应区域。我尝试使用这些源中生成的多边形的 id，但没有运气。

欢迎任何建议。

Answer 1

此链接可能对您有帮助https://docs.mapbox.com/mapbox-gl-js/example/mapbox-gl-draw/

一旦获得区域，您可以使用map.popup来显示您的值