javascript - 添加对 Mapbox 图标的 onclick 调用

Question

我正在努力向 Mapbox map 上的点添加点击事件。我必须将后端 SQL 查询的源添加到 hbs 模板中。我尝试仅添加business1 作为源而不使用for 循环，但我收到无效的geojson 对象警告。如果我只添加“位置”作为 id，显然它会警告我该 id 已存在于 map 上。

那么我如何为动态 ID 添加 onclick 调用？

我如何加载积分

business1 = {{{businesses}}}

for(i=0;i<business1.length;i++){
  // Add the data to your map as a lyer
  map.addLayer({
    id: 'locations'+[i],
    type: 'symbol',
   minzoom: zoomThreshold,
    // Add a GeoJSON source containing place coordinates and information.
    source: {
      type: 'geojson',
      data: business1[i]
    },
    layout: {
      'icon-image': 'circle-stroked-15',
      'icon-allow-overlap': true,
    }
  });

}

如何调用 map 点击 - 添加 [i] 只是为了显示我的想法

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

  var features = map.queryRenderedFeatures(e.point, {
    layers: ['locations'+[i]] // replace this with the name of the layer
  });

  if (!features.length) {
    return;
  }

我还尝试过什么 - 但无论点击什么，总是返回相同的位置

   for(i=0; i<business1.length;i++){

    var features = []
    var feature = [i]
        feature.dataPosition = i;
 var clickedNameClicked = names[this.dataPosition]
 console.log(clickedNameClicked)

  features.push(business1[i]);

  }

Answer 1

我绝对不建议为每个业务添加新的源/层。如果您有一堆层，这将不会提高性能，而且我认为这会给您的点击逻辑增加太多复杂性。

I've tried just adding business1 as the source without the for loop but i get an invalid geojson object warning.

这强烈表明您的业务数据存在问题，您应该先解决该问题，然后再将其添加到 map 并担心点击事件。我建议使用像 http://geojsonlint.com/ 这样的工具看看那里发生了什么。

一旦有了有效的 geojson，向图标添加点击事件就会容易得多。 https://docs.mapbox.com/mapbox-gl-js/example/queryrenderedfeatures-around-point/

<小时/>

⚠️免责声明:我目前在 Mapbox 工作 ⚠️