无法选择 Mapbox ID 图层答案

【问题标题】：Mapbox ID layer cannot be selected无法选择 Mapbox ID 图层
【发布时间】：2018-09-19 15:29:47
【问题描述】：

我在 mapbox 中添加了图层，然后添加点击它以触发弹出窗口。效果很好，看起来像这样：

map.addLayer({
  "id": "circle",
  "type": "circle",
  "source": "companies",
  "paint": {
     "circle-radius": 20,
     "circle-color": "#C6DB3E",
     "circle-opacity": {
        "stops": [[3, 0.1], [22, 0.8]]
     }
  }
});

在这里我选择那个层来触发弹出窗口：

map.on('click', function (e) {
var features = map.queryRenderedFeatures(e.point, {
  layers: ["circle"]
});

if (!features.length) {
  return;
}

var feature = features[0];

console.log(feature);

// Populate the popup and set its coordinates and content
var popup = new mapboxgl.Popup()
  .setLngLat(feature.geometry.coordinates)
  .setHTML('...')
  .addTo(map);
});

但是当我将图层更改为使用动态圆半径时出现问题，图层现在看起来像这样：

map.addLayer({
  "id": "circle",
  "type": "circle",
  "source": "companies",
  "paint": {
     "circle-radius": {
        property: 'Size',
        type: 'identity'
     },
     "circle-color": "#C6DB3E",
     "circle-opacity": {
        "stops": [[3, 0.1], [22, 0.8]]
     }
  }
});

此图层也可以正确打印到地图上。但是我不能点击它来弹出一个窗口。所以改变圆半径后，ID是不可点击的。有趣的是，如果我使用 map.getStyle().layers 控制台记录 ID，则 ID 会出现在控制台中，以及所有其他图层。没有错误。

【问题讨论】：

标签： mapbox mapbox-gl-js

【解决方案1】：

circle-radius 的样式语法无效。请参阅Mapbox Style Spec for expressions 或this other answer。

另外：您可以通过提供图层的id 作为第二个参数来简化点击处理程序：

map.on('click', 'circle', function (e) {

  var features = e.features;

  if (!features.length) {
    return;
  }

  var feature = e.features[0];
  var popup = new mapboxgl.Popup()
    .setLngLat(feature.geometry.coordinates)
    .setHTML(feature.properties.someProperty)
    .addTo(map);
});

Mapbox 在他们的网站上有一个这样的例子：https://www.mapbox.com/mapbox-gl-js/example/popup-on-click/

【讨论】：

【解决方案2】：

我更新了 mapbox，它工作正常，我发布的代码有问题。我也尝试了你的建议，它也有效。谢谢@Eczajk！最后我得到了这个圆半径的代码：

"circle-radius": {
        property: 'Size',
        type: 'exponential',
        stops: [
           [4, 4],
           [170, 170]
        ]
     }

这里是解释示例：https://www.mapbox.com/help/gl-dds-map-tutorial/

【讨论】：