Question

我已经在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进行consoleLog ID的设置，则ID与其他所有图层一起出现在console中。没有错误。

Answer 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/

Answer 2

我更新了mapbox，并使用我发布的代码正常工作。我也尝试了您的建议，它也起作用。谢谢@Eczajk！最后，我得到了这段圆半径的代码：

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

以下是示例：https://www.mapbox.com/help/gl-dds-map-tutorial/

无法选择Mapbox ID图层

2 个答案: