Question

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

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

设置如下：

基本地图：来自服务器A的矢量图块源
datapoints：来自服务器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有哪些变通方法？

代码

1 个答案: