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

Question

我有一个由矢量切片点组成的数据源。当我当前在我的客户端上添加一个新点时，服务器将其添加到数据库并使用来自 sequalize 的后挂机运行一个命令，该命令更新所有相关 zoomlayers 的相关图块。然后它出现在我的所有 zoomlayers 客户端中（在添加点后放大和缩小时），所以它按它应该的方式工作，除了在添加点的 zoomlayer 上，因为该图块还没有刷新......例如，它最终会在您刷新页面时出现。

由于目前您可以 not 刷新客户端中的各个图块，我需要以某种方式解决这个问题。如何才能做到这一点？当然最好不要刷新。

设置如下：

底图：来自服务器 A 的矢量图块源
数据点：来自服务器 B 的矢量切片源，它是一个单独的底图上的图层名为 'datapoints'

代码

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

点击地图刷新数据源。它确实有点闪烁。您可以通过禁用重新绘制一秒钟左右，或使用其他一些技术来掩盖行为来解决这个问题。

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

What are workarounds to refresh an individual vector tile zoomlayer in mapbox-gl-js?

javascript

mapbox-gl-js

代码