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

Question

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

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

设置如下:

• basemap :来自服务器A的矢量图 block 源
• 数据点:来自服务器 B 的矢量切片源，它是一个单独的基础 map 上的图层称为“数据点”

代码

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

您的主要问题可能是浏览器已经缓存了您的矢量图 block ，但它们的内容已更改。您可以通过添加无意义的参数，将矢量切片源替换为略有不同的 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

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