如何在 Mapbox GL JS 中通过缩放级别设置 map.loadImage 可见性？

Question

我正在使用以下代码加载图像：

map.on('load', function () {

map.loadImage('....png', function(error, image) { 
  if (error) throw error;
  map.addImage('b7', image);
  map.addLayer({ 
    "id": "b7",
    "type": "symbol",
    "source": { 
      "type": "geojson",
      "data": {
        "type": "FeatureCollection",
        "features": [{
          "type": "Feature",
          "geometry": {
            "type": "Point",
            "coordinates": [0, 0] 
          } 
        }] 
      }
    },
    "layout": {
      "icon-image": "b7",
      "icon-size": 0.2
    }
  });
});

在某个缩放级别，如何将可见性设置为无？

看起来您不能在 loadImage 上使用 map.setLayoutProperty。在控制台中，它显示：错误：地图样式中不存在图层“b7”且无法设置样式。

乳清我尝试类似的东西：

map.setLayoutProperty( 'b7', 'visibility', 'none' );

有任何想法吗？

Answer 1

关于如何解决这个问题的两个建议：

首先，确保您的图像名称和图层名称不同。可能是该函数正在寻找 b7 层，但它首先找到了名为 b7 的图像（反之亦然）。无论哪种方式，这都应该改变，因为它会产生冲突的变量。

其次，如果这不起作用，请尝试单独添加源而不是在层内。

 map.addSource("mySource", {
  "type": "geojson",
  "data": {
    "type": "FeatureCollection",
    "features": [{
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [-74.981906, 41.742503]
      },
      "properties": {
        "title": "title ",
        "icon": "myImage",
      }
    }]
  }
});

然后添加带有源的图层。

 map.addLayer({
  "id": "b7",
  "type": "symbol",
  "source": "mySource",
  "layout": {
    "icon-image": "myImage",
    "icon-size": 0.2
  }
});

您现在可以在 zoomstart 侦听器上调用 setLayoutProperty。如果您只希望在特定缩放级别使用，请添加条件map.getZoom();您需要在此处设置图层的可见性，而不是图像。

map.on('zoomstart', 'b7', function(e) {
  if (map.getZoom() > 12) {
    map.setLayoutProperty('b7', 'visibility', 'none');
  }
})

片段如下，如果您遇到任何问题，请告诉我。

 map.addSource("mySource", {
  "type": "geojson",
  "data": {
    "type": "FeatureCollection",
    "features": [{
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [-74.981906, 41.742503]
      },
      "properties": {
        "title": "title ",
        "icon": "myImage",
      }
    }]
  }
});