Эквивалент layer.redraw (true) в OpenLayers 3?


13

У меня есть слой geojson в моем приложении OL3, который я хочу перерисовывать каждые 5 секунд (чтобы показать движение на карте).

Как это сделать ? Не удалось найти эквивалент Layer.redraw ().


Вы смотрели на ol.animation? В общем, векторная графика в ol3 более плавная и обрабатывается по-разному, но из вашего вопроса не совсем понятно, что вы хотите сделать.
Джон Пауэлл

@ JohnBarça - Мои данные GeoJson поступают с postgres, который обновляется каждые 5 секунд новыми данными GPS. Я хочу перерисовать слой, чтобы каждый раз показывать текущую позицию юнитов на карте (она продолжает меняться ...)
Alophind

Итак, вы запрашиваете данные каждые 5 секунд, используя рекурсивный вызов setTimeout (или что-то подобное), и вы просто хотите знать, как заставить векторные объекты обновляться?
Джон Пауэлл

@ JohnBarça - Если есть лучший способ, которым я хочу учиться, но это то, что я делаю, я хочу показать местоположение GPS в режиме реального времени на карте. GPS отправляет их местоположение в PostGIS, и оттуда я читаю данные, используя GeoJSON (или я могу использовать GeoServer), но я хочу, чтобы слой обновлялся сам по себе время от времени.
Алофинд

Конечно, я понимаю, что вы пытаетесь сделать. Любой шанс получить пример кода, потому что, по моему опыту, если вы поместите цикл анимации в settimeout с помощью вызова ajax на удаленный сервер и загрузите json, который возвращается с помощью Format.GeoJSON или аналогичного, функции будут обновлены.
Джон Пауэлл

Ответы:


9

Вот как вы можете обновлять векторный источник каждые 5 секунд из веб-службы, возвращающей объекты в документе GeoJSON:

var vectorSource = new ol.source.Vector();
var geojsonFormat = new ol.format.GeoJSON();

window.setTimeout(function() {
  $.ajax('http://example.com/data.json', function(data) {
    var features = geojsonFormat.readFeatures(data
        {featureProjection:"EPSG:3857"});
    geojsonSource.clear();
    geojsonSource.addFeatures(features);
  });
}, 5000);

Здесь jQuery используется для запроса данных через Ajax ( $.ajax), но вы, очевидно, можете использовать библиотеку по вашему выбору.

В этом фрагменте кода также предполагается, что проекции карты - это «EPSG: 3857» (веб-меркатор) и что координаты в документах GeoJSON представляют собой долготы и широты.


3
Этот код смущает меня, должны vectorSourceи должны geojsonSourceбыть объединены?
Келли Томас

Я думаю, что вы имеете в виду window.setInterval не setTimeout; в противном случае он делает это только один раз.
Джонатан

9

Я знаю, что этот вопрос старый, но я наконец-то нашел решение обновить слой на openlayers 3.

Вы должны обновить параметры источника слоя следующим образом:

var source = yourLayer.getSource();
var params = source.getParams();
params.t = new Date().getMilliseconds();
source.updateParams(params);

3
Кажется, не все источники поддерживают updateParamsметод; OL3.18.2 только показывает , что для ImageArcGISRest, ImageMapGuide, ImageWMS, TileArcGISRestи TileWMS, а не для, например, ol.source.Vector.
Арджан

Date # getTime может быть лучше, чем Date # getMilliseconds, чтобы сделать недействительным кеш и принудительно перерисовать слой, поскольку каждый раз он будет обеспечивать уникальное число.
Уолкерматт

5

Вы можете обновить слой WFS с помощью myLayer.getSource().clear().


1
Это было сделано для меня с OpenLayers 3 v. 0.14.2 и векторным источником WFS GeoJSON.
Дирк

3
ничего плохого в однострочном ответе, если они на деньги. Для удаления этого информационного блока должна быть награда за репутацию.
Деннис Баусус

1
Ответ правильный, но это может показывать некоторое мерцание: при вызове clear()любые существующие функции будут сразу удалены с карты и добавлены только после получения ответа HTTP. Это верно как для указания значения для, так VectorOptions#urlи для VectorOptions#loader. Для данных реального времени, вручную делать некоторые WebSockets или XHR магии , а затем призвании getSource().clear()затем getSource().addFeatures(...)может выглядеть лучше для конечного пользователя.
Арджан

3

В OL2 я использовал стратегию обновления слоя, которая не была добавлена ​​в OL3. Ниже приведена функция самовызова, которая будет использовать ajax-запрос, чтобы получить GeoJSON, а затем прочитать его и добавить в источник.

var yourSource = new ol.source.GeoJSON();

//add this source to a layer, the layer to a map with a view etc
...

//now fetch the data
var fetchData = function () {
    jQuery.ajax(url,
    {
        dataType: 'json',
        success: function (data, textStatus, jqXHR) {
            yourSource.clear(); //remove existing features
            yourSource.addFeatures(yourSource.readFeatures(data));
        },
        error: function (jqXHR, textStatus, errorThrown) {
            console.log(errorThrown);
        }
    });

    //call this again in 5 seconds time
    updateTimer = setTimeout(function () {
        fetchData();
    }, 5000);
};
fetchData(); //must actually call the function!

Надеюсь это поможет.


2

Это прекрасно работает для слоев:

layer.changed();

согласно http://openlayers.org/en/latest/apidoc/ol.layer.Vector.html#changed


1
Вы должны объяснить немного больше о том, как layer.changed();идеально подходит для слоев. Описание документации Increases the revision counter and dispatches a 'change' event.не очень полезно. Как использование метода change () отвечает на вопрос о перерисовке карты каждые 5 секунд?
nmtoken

Я использовал Ajax для сохранения исправленного источника геоджона, и у меня возникла проблема: если я закрою слой и снова открою его, карта будет использовать кэшированную (неизмененную) версию источника. Как только я очистил кеш, слой использовал исправленный источник, как я и ожидал. К сожалению, предложенное layer.changed();не дало никакого эффекта для меня, но source.changed();сделало трюк.
Питер Купер

1

Нет необходимости обновлять явно. Каждый раз, когда вы обновляете содержимое слоя, карта обновляется, запрашивая рендеринг нового кадра.

Для принудительного рендеринга у вас есть map.render()и map.renderSync()методы.


Это не обновляет содержимое, просто обновляет сам холст карты.
Mapper
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.