Какие есть обходные пути для обновления отдельного векторного слоя мозаики в mapbox-gl-js?

1

У меня есть источник данных, состоящий из точек векторной плитки. Когда я в настоящее время добавляю новую точку на моем клиенте, сервер добавляет ее в базу данных, а использование afterhook from sequalize запускает команду, которая обновляет соответствующие фрагменты для всех соответствующих масштабирующих объектов. Затем он отображается в моем клиенте на всех масштабируемых объектах (при масштабировании и выводе после добавления точки), поэтому он работает так, как должен, за исключением масштабируемого слоя, на котором была добавлена точка, поскольку эта плитка еще не обновилась... Это, в конечном счете, появится, когда вы обновите страницу, например.

Поскольку в настоящее время вы не можете обновлять отдельные плитки в клиенте, мне нужно как-то обойти это. Как это может быть сделано? Предпочтительно, конечно, без обновления.

Настройка выполняется следующим образом:

  • базовая карта: источник векторной плитки с сервера 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)
  })
  • 0
    Пожалуйста, покажите свой код
  • 0
    @JGallardo Я добавил это в конец моего вопроса. Извините, но я не могу сделать правильный отступ, чтобы он отображался в виде кода ... Обычно это не проблема, но отступ от обещания вызывает у меня головную боль! Может быть, вы знаете, как это сделать?
Показать ещё 3 комментария
Теги:
mapbox-gl-js

1 ответ

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

Нажмите на карту, чтобы обновить источник данных. Он немного мерцает. Возможно, вы сможете обойти это, отключив перерисовку на секунду или так, или используя какой-либо другой метод, маскируйте поведение.

Поделиться
  • 0
    Выглядит неплохо. Я действительно преуспел, установив заголовок Cache-Control, который запрещает кэширование, что работает. Но поскольку кэширование само по себе хорошо, ваше решение будет лучше. Проблема, возникающая при добавлении Math.random (), заключается в том, что я получаю ошибку CORS: в запрошенном ресурсе отсутствует заголовок «Access-Control-Allow-Origin». Я посмотрю, смогу ли я обойти это.
  • 1
    Ах, в моем случае мне нужно было добавить знак вопроса, а затем Math.random (). Отлично работает сейчас!
Показать ещё 3 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню