如何从 Mapbox 中的多面体中识别一个面体？答案

【问题标题】：How to identify one polygon from a multipolygon in Mapbox?如何从 Mapbox 中的多面体中识别一个面体？
【发布时间】：2020-07-15 17:07:09
【问题描述】：

我在 mapbox 中绘制了一个多多边形，这意味着即使这些多边形是明显分开的，但它们链接到同一个源。如果我为此添加一个单击处理程序，然后单击多面体中的任何一个多边形，它会平等地影响多面体中的所有其他多边形。

现在我的问题是，我想确定从多边形中单击了哪个特定多边形。

假设我在有人点击源/图层时调用了一个函数，我想发送一个唯一标识符，该标识符表示从多面体中点击了哪个多边形。

我怎样才能做到这一点？

以下是可能相关的代码的 sn-p：

for (let k = 0; k < sectionResult.data.response.length; k++) {
  let features = sectionResult.data.response[k].coordinates.map((item) => {
    return {
      type: 'Feature',
      geometry: {
        type: 'Polygon',
        coordinates: item
      }
    };
  });
  map.addSource(sectionResult.data.response[k].name, {
    type: 'geojson',
    data: {
      type: 'FeatureCollection',
      features: features
    }
  });
  map.addLayer({
    id: sectionResult.data.response[k].name,
    type: 'fill',
    source: sectionResult.data.response[k].name,
    paint: {
      'fill-color': '#00e',
      'fill-opacity': 0.3
    }
  });
  map.addLayer({
    id: `${sectionResult.data.response[k].name}-labels`,
    type: 'symbol',
    source: sectionResult.data.response[k].name,
    layout: {
      'text-field': sectionResult.data.response[k].name,
      'text-size': 20
    },
    paint: {
      'text-color': '#fff308'
    }
  });
  map.addLayer({
    id: `${sectionResult.data.response[k].name}-borders`,
    type: 'line',
    source: sectionResult.data.response[k].name,
    layout: {},
    paint: {
      'line-color': '#fff308',
      'line-width': 3
    }
  });
  map.on('mousemove', sectionResult.data.response[k].name, function (e) {
    map.getCanvas().style.cursor = 'pointer';
    let mapLayer = map.getLayer(
      `${sectionResult.data.response[k].name}-borders-onHover`
    );
    if (typeof mapLayer === 'undefined') {
      map.addLayer({
        id: `${sectionResult.data.response[k].name}-borders-onHover`,
        type: 'line',
        source: sectionResult.data.response[k].name,
        layout: {},
        paint: {
          'line-color': '#fff308',
          'line-width': 3
        }
      });
    }
  });
  map.on('mouseleave', sectionResult.data.response[k].name, function (e) {
    map.getCanvas().style.cursor = '';
    let mapLayer = map.getLayer(
      `${sectionResult.data.response[k].name}-borders-onHover`
    );
    if (typeof mapLayer !== 'undefined') {
      map.removeLayer(`${sectionResult.data.response[k].name}-borders-onHover`);
    }
  });
  map.on('click', sectionResult.data.response[k].name, function (e) {
    functionCall(); //I want to pass the unique identifier of the polygon that was clicked.
  });
}

【问题讨论】：

标签： node.js reactjs mapbox mapbox-gl-js

【解决方案1】：

我认为您正在寻找的是 queryRenderedFeatures 这将返回具体过滤器中的功能，包括鼠标位置。

        map.on('mousemove', function (e) {
        var features = map.queryRenderedFeatures(e.point);

        // Limit the number of properties we're displaying for
        // legibility and performance
        var displayProperties = [
            'type',
            'properties',
            'id',
            'layer',
            'source',
            'sourceLayer',
            'state'
        ];

        var displayFeatures = features.map(function (feat) {
            var displayFeat = {};
            displayProperties.forEach(function (prop) {
                displayFeat[prop] = feat[prop];
            });
            return displayFeat;
        });

        document.getElementById('features').innerHTML = JSON.stringify(
            displayFeatures,
            null,
            2
        );
    });

你有一个完整的例子here

【讨论】：