OpenLayers 3의 layer.redraw (true)와 동일합니까?


13

OL3 앱에 geojson 레이어가있어 5 초마다 다시 그려야합니다 (지도에 움직임을 표시하기 위해).

어떻게합니까? Layer.redraw ()에 해당하는 항목을 찾을 수 없습니다.


ol.animation을 보셨습니까? 일반적으로 벡터 그리기는 ol3에서 더 매끄럽고 다르게 처리되지만 원하는 일을 확실하게 알 수는 없습니다.
John Powell

@ JohnBarça-내 GeoJson 데이터는 postgres에서 가져옵니다. postgres는 5 초마다 새로운 GPS 데이터로 업데이트됩니다. 맵에서 유닛의 현재 위치를 보여줄 때마다 레이어를 다시 그리려고합니다 (계속 변경 중 ...)
Alophind

따라서 재귀 setTimeout 호출 (또는 유사한 것)을 사용하여 5 초마다 데이터를 요청하고 벡터 기능을 새로 고치는 방법을 알고 싶습니까?
John Powell

@ JohnBarça-배우고 싶은 더 좋은 방법이 있다면, 이것이 내가하는 일입니다.지도에 실시간으로 GPS의 위치를 ​​보여주고 싶습니다. GPS는 자신의 위치를 ​​PostGIS로 보내고 거기서 GeoJSON을 사용하여 데이터를 읽습니다 (또는 GeoServer를 사용할 수 있습니다).하지만 레이어가 가끔씩 업데이트되기를 바랍니다.
Alophind

물론, 당신이하려고하는 것을 얻습니다. 내 경험상 원격 서버에 대한 아약스 호출로 settimeout에 애니메이션 루프를 넣고 Format.GeoJSON 또는 이와 유사한 것을 사용하여 다시 오는 json을로드하면 기능이 업데이트되기 때문에 코드 샘플이 발생할 가능성이 있습니다.
John Powell

답변:


9

다음은 GeoJSON 문서의 기능을 반환하는 웹 서비스에서 5 초마다 벡터 소스를 새로 고치는 방법입니다.

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을 의미한다고 생각합니다. 그렇지 않으면 한 번만 수행합니다.
Jonathan

9

나는이 질문이 오래되었다는 것을 알고 있지만 마침내 오픈 레이어 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, TileArcGISRestTileWMS, 그리고,에 대한 예 ol.source.Vector.
Arjan

Date # getTimeDate # getMilliseconds 보다 낫기 때문에 캐시를 무효화하고 매번 고유 번호를 보장하므로 레이어를 다시 그립니다.
walkermatt

5

으로 WFS 계층을 새로 고칠 수 있습니다 myLayer.getSource().clear().


1
OpenLayers 3 v. 0.14.2 및 WFS GeoJSON 벡터 소스를 사용하여이 작업을 수행했습니다.
Dirk

3
그들이 돈에 있다면 한 줄로 대답해도 아무 문제가 없습니다. 이 정보 상자를 제거하려면 평판 상을 받아야합니다.
Dennis Bauszus

1
정답은 정확하지만 약간의 깜박임이 나타날 수 있습니다. clear()기존 기능 을 호출 하면 맵에서 즉시 제거되며 HTTP 응답을받은 후에 만 ​​다시 추가됩니다. VectorOptions#url및에 대한 값을 지정하는 경우에 해당 됩니다 VectorOptions#loader. 실시간 데이터의 경우 일부 WebSockets 또는 XHR 매직을 수동으로 수행 한 다음 호출 한 getSource().clear()다음 getSource().addFeatures(...)최종 사용자에게 더 잘 보일 수 있습니다.
Arjan

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.은 실제로 도움이되지 않습니다. changed () 메소드를 사용하면 5 초마다 맵 다시 그리기에 대한 질문에 어떻게 대답합니까?
nmtoken

Ajax를 사용하여 수정 된 geojson 소스를 저장했으며, 문제는 레이어를 닫았다가 다시 열면 맵이 캐시 된 (수정되지 않은) 소스 버전을 사용한다는 것입니다. 캐시를 지우면 레이어는 예상대로 수정 된 소스를 사용했습니다. 불행히도 제안 layer.changed();은 나에게 아무런 영향을 미치지 source.changed();않았지만 트릭을 수행했습니다.
피터 쿠퍼

1

명시 적으로 새로 고칠 필요가 없습니다. 레이어의 내용을 업데이트 할 때마다 맵이 새로 고쳐 새 프레임 렌더링을 요청합니다.

수동으로 렌더링하려면 map.render()map.renderSync()메소드 가 있어야 합니다.


콘텐츠를 업데이트하지 않고 맵 캔버스 자체를 업데이트하기 만하면됩니다.
Mapper
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.