เทียบเท่ากับ layer.redraw (จริง) ใน OpenLayers 3

13

ฉันมีเลเยอร์ geojson ในแอป OL3 ของฉันซึ่งฉันต้องการวาดใหม่ทุก 5 วินาที (เพื่อแสดงการเคลื่อนไหวบนแผนที่)

ฉันต้องทำอย่างไร ? ไม่พบสิ่งที่เทียบเท่ากับ Layer.redraw ()

openlayers

คุณดูที่ ol.animation ไหม? โดยทั่วไปแล้วการวาดภาพเวกเตอร์นั้นราบรื่นและจัดการแตกต่างกันใน ol3 แต่มันก็ไม่ชัดเจนนักจากคำถามของคุณว่าคุณต้องการทำอะไร

— John Powell

@ JohnBarça - ข้อมูล GeoJson ของฉันมาจาก postgres ซึ่งมีการอัปเดตทุก ๆ 5 วินาทีด้วยข้อมูล GPS ใหม่ ฉันต้องการวาดเลเยอร์ใหม่เพื่อแสดงทุกครั้งที่ตำแหน่งปัจจุบันของหน่วยบนแผนที่ (มันเปลี่ยน ... )

— Alophind

ดังนั้นคุณขอข้อมูลทุก ๆ 5 วินาทีโดยใช้การเรียก setTimeout แบบเรียกซ้ำ (หรือสิ่งที่คล้ายกัน) และคุณต้องการทราบวิธีบังคับให้ฟีเจอร์เวกเตอร์รีเฟรช?

— John Powell

@ JohnBarça - หากมีวิธีที่ดีกว่าที่ฉันยินดีที่จะเรียนรู้ แต่นี่คือสิ่งที่ฉันทำฉันต้องการแสดงตำแหน่งของ GPS แบบเรียลไทม์บนแผนที่ GPS ส่งตำแหน่งของพวกเขาไปที่ PostGIS และจากนั้นฉันอ่านข้อมูลโดยใช้ GeoJSON (หรือฉันสามารถใช้ GeoServer) แต่ฉันต้องการให้เลเยอร์อัปเดตตัวเองทุกครั้ง

— Alophind

แน่นอนฉันได้สิ่งที่คุณพยายามทำ โอกาสใด ๆ ของตัวอย่างรหัสเพราะในประสบการณ์ของฉันถ้าคุณใส่วนลูปภาพเคลื่อนไหวใน settimeout ด้วยการโทร ajax ไปยังเซิร์ฟเวอร์ระยะไกลและโหลด json ที่กลับมาโดยใช้ Format.GeoJSON หรือคุณลักษณะที่คล้ายคลึงกันจะได้รับการอัพเดต

— John Powell

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" (เว็บ Mercator) และพิกัดในเอกสาร GeoJSON นั้นมีความยาวและละติจูด

— erilem
แหล่งที่มา

3

รหัสนี้สร้างความสับสนให้ฉันควรvectorSourceและgeojsonSourceผสาน?

— Kelly Thomas

ฉันคิดว่าคุณหมายถึง window.setInterval ไม่ใช่ setTimeout; มิฉะนั้นจะทำได้เพียงครั้งเดียว

— Jonathan

9

ฉันรู้ว่าคำถามนี้เก่า แต่ในที่สุดฉันก็ได้พบวิธีแก้ปัญหาเพื่อรีเฟรชเลเยอร์ใน openlayers 3

คุณต้องอัปเดตพารามิเตอร์ของแหล่งข้อมูลเลเยอร์ดังนี้:

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

— VincentDEJ
แหล่งที่มา

3

ดูเหมือนว่าไม่ทุกแหล่งที่มาสนับสนุนupdateParamsวิธีการ; OL3.18.2 เพียงแสดงให้เห็นว่ามันสำหรับImageArcGISRest, ImageMapGuide, ImageWMS, TileArcGISRestและและไม่ได้สำหรับเช่นTileWMS ol.source.Vector

— Arjan

Date # getTimeอาจดีกว่าDate # getMillisecondsในการทำให้แคชใช้ไม่ได้และบังคับให้เลเยอร์วาดใหม่เนื่องจากจะรับรองหมายเลขที่ไม่ซ้ำกันในแต่ละครั้ง

— walkermatt

5

ต้องการปรับปรุงโพสต์นี้หรือไม่? ให้คำตอบโดยละเอียดสำหรับคำถามนี้รวมถึงการอ้างอิงและคำอธิบายว่าทำไมคำตอบของคุณถึงถูกต้อง คำตอบที่ไม่มีรายละเอียดเพียงพออาจแก้ไขหรือลบออกได้

คุณสามารถรีเฟรชเลเยอร์ WFS myLayer.getSource().clear()ได้

— dbaston
แหล่งที่มา

1

สิ่งนี้ทำเพื่อฉันด้วย OpenLayers 3 v. 0.14.2 และแหล่งเวกเตอร์ WFS GeoJSON

— เดิร์ค

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.ไม่เป็นประโยชน์จริง ๆ การใช้เมธอด change () จะตอบคำถามเกี่ยวกับการเขียนแผนที่ใหม่ทุก ๆ 5 วินาทีได้อย่างไร

— nmtoken

ฉันใช้ Ajax เพื่อบันทึกต้นฉบับ geojson ที่แก้ไขแล้วและปัญหาที่ฉันมีคือถ้าฉันปิดเลเยอร์และเปิดใหม่อีกครั้งแผนที่จะใช้เวอร์ชันต้นฉบับของแคช (ไม่ได้รับการแก้ไข) เมื่อฉันลบแคชแล้วเลเยอร์ก็ใช้แหล่งข้อมูลที่แก้ไขแล้วตามที่ฉันคาดไว้ น่าเสียดายที่ข้อเสนอแนะlayer.changed();ไม่มีผลสำหรับฉัน แต่source.changed();ทำเคล็ดลับ

— Peter Cooper

1

ไม่จำเป็นต้องรีเฟรชอย่างชัดเจน ทุกครั้งที่คุณอัปเดตเนื้อหาของเลเยอร์แผนที่จะรีเฟรชคำขอการเรนเดอร์เฟรมใหม่

เพื่อบังคับให้แสดงผลด้วยตนเองคุณมีmap.render()และmap.renderSync()วิธีการ

— EricSonaron
แหล่งที่มา

ไม่ได้อัปเดตเนื้อหาเพียงอัปเดตผืนผ้าใบแผนที่เอง

— Mapper