在mapbox-gl-js中刷新单个矢量图块zoomlayer的解决方法是什么？

Question

我有一个由矢量平铺点组成的数据源。 当我当前在客户端上添加新点时，服务器将其添加到数据库中，并使用来自sequalize的后钩运行命令，该命令将更新所有相关zoomlayer的相关图块。 然后它显示在我的客户端的所有zoomlayer上（添加点后进行放大和缩小时），因此它应该按预期工作，但在添加点的zoomlayer上除外，因为该图块尚未刷新...例如，它最终将在刷新页面时出现。

由于当前您无法刷新客户端中的单个图块，因此我需要某种方法来解决此问题。 如何才能做到这一点？ 最好当然不用刷新。

设置如下：

• 底图：服务器A的矢量图块源
• 数据点：服务器B的矢量图块源，它是基础地图上称为“数据点”的单独层

码

axios.post('urlServerB', newpointGeojsonobject)
  .then(function (response) {
    map.removeLayer(datapointsLayerID)
    map.removeSource('datapoints')
    addDatapointsSource(map)
    map.addLayer(datapoints)
  })
  .catch(function (error) {
    console.log(error)
  })

Answer 1

您的主要问题可能是浏览器已经缓存了矢量切片，但其内容已更改。 您可以通过以下方法来解决此问题：通过添加无意义的参数，将矢量图块源替换为稍微不同的URL。

例如：

  map.removeSource('osm') ;
  map.addSource('osm', {    
    "type": "vector",
    "tiles": ["https://tile.mapzen.com/mapzen/vector/v1/all/{z}/{x}/{y}.mvt?api_key=vector-tiles-LM25tq4&update=" + Math.random()]
  });

https://codepen.io/stevebennett/pen/LzNjVv

单击地图以刷新数据源。 它确实闪烁了一点。 您可以通过禁用重绘一秒钟左右或使用其他方法掩盖该行为来解决此问题。