2

我正在使用下面的代码添加一个自定义控件以在地图上绘制多边形并显示屏幕侧面（在 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，但没有运气。

欢迎任何建议。

4

0 回答 0