OpenLayers 3: วิธีรีเฟรชแผนที่หลังจากเปลี่ยนสไตล์ของฟีเจอร์?


9

ฉันมีแผนที่ OpenLayers 3.2.0 ซึ่งมีบางแหล่งเวกเตอร์ ( ol.source.Vector) และเลเยอร์เวกเตอร์ที่เกี่ยวข้อง ( ol.layer.Vector)

เมื่อเพิ่มคุณสมบัติ ( ol.Feature) ลงในแหล่งที่มาของเวกเตอร์คุณสมบัติเหล่านั้นจะได้รับdataคุณสมบัติที่ตั้งค่าเป็นวัตถุจาวาสคริปต์ที่คุณสมบัติดังกล่าวแสดง TypeScript มีดังนี้ ...

vectorSource.addFeature(new ol.Feature({
    geometry: /* ... */,
    data: vectorData,
}));

เลเยอร์เวกเตอร์นั้นมีฟังก์ชั่นสไตล์ที่อ่านdataคุณสมบัติและดึงสไตล์ของมัน:

vectorLayer = new ol.layer.Vector({
    source: vectorSource,
    renderBuffer: /* ... */,
    style: function (feature: ol.Feature, resolution: any) {
        var data = </* TypeScript Type */>feature.get('data');
        if ((data) && (data.style)) {
            return [data.style];
        }
        else {
            /* return default style */
        }
    }
});

บางครั้งเหตุการณ์ที่ไม่เกี่ยวข้องกับแผนที่ทำให้สไตล์เปลี่ยนไป ตัวอย่างเช่นเมื่อวัตถุไม่ถูกต้องสไตล์จะเปลี่ยนไป ชัดเจนเนื่องจากdata.styleอยู่ในการควบคุมของฉันทั้งหมดการเปลี่ยนแปลงจึงเป็นเรื่องเล็กน้อย

ปัญหาคือแผนที่ไม่ทราบว่าสไตล์มีการเปลี่ยนแปลง ถ้าฉันเปลี่ยนสไตล์ของวัตถุแล้วซูมแผนที่บังคับให้วาดใหม่ฉันสังเกตเห็นว่าสไตล์ฟังก์ชั่นของฉันทำงานและคืนสไตล์ใหม่และคุณลักษณะนั้นถูกวาดขึ้นมาใหม่ ฉันจะบังคับให้แผนที่รีเฟรชแบบเป็นโปรแกรมได้อย่างไร

หลังจากค้นหาและทดลองฉันได้ลอง:

  1. เรียกร้องrender()กับol.Mapตัวเอง
  2. Calling dispatchChangeEvent()บนol.source.Vector
  3. Calling redraw()บนol.layer.Vector

สิ่งเหล่านี้ถูกนำเสนอ แต่ไม่มีวิธีใดทำงานได้ซึ่งไม่น่าแปลกใจเนื่องจากมีเพียงวิธีแรกเท่านั้นที่แสดงรายการไว้ในเอกสารประกอบ OpenLayers 3.2.0 API และไม่ได้ทำเครื่องหมายว่าเสถียร


คุณเคยลอง vectorlayer.refresh ({force: true}); ?
ylka

ฉันมี แต่แปลกใจที่ไม่ทำงานเพราะนั่นเป็นวิธี OpenLayers 2
Xharlie

คำตอบ:


12

โดยบังเอิญฉันได้พบคำตอบ - มันคือการโทรหาchanged()คุณสมบัติตัวเองหลังจากเปลี่ยนstyleคุณสมบัติของข้อมูลที่เกี่ยวข้องของพวกเขา ดู: http://openlayers.org/en/v3.2.0/apidoc/ol.Feature.html?unstable=true#changed

สิ่งนี้ทำให้ฉันต้องติดตามol.Featureวัตถุที่เกี่ยวข้องกับแต่ละvectorDataวัตถุ (ก่อนหน้านี้ฉันแค่ต้องการค้นหาvectorDataจากคุณสมบัติที่สามารถทำได้ด้วยget()) แต่นี่ไม่ใช่ค่าใช้จ่าย

(ฉันพบสิ่งนี้โดยดูที่setGeometryและsetStyleวิธีการอื่น ๆol.Featureเพื่อดูว่าพวกเขาทำอะไร)


แม้ว่าวิธีการนี้จะใช้งานได้ แต่การเรียกchangedใช้ฟีเจอร์ในจำนวนที่เหมาะสมจะได้รับการลงโทษด้านประสิทธิภาพอย่างร้ายแรง (Chrome ขัดข้องหลายครั้งด้วยวิธีนี้) ฉันขอแนะนำให้เรียกchanged()ที่มาของเลเยอร์ของคุณหลังจากที่คุณสมบัติทั้งหมดของคุณเปลี่ยนไป
Kyle

0

ฉันใช้เวลาหนึ่งสัปดาห์ในการพยายามหาวิธีทำให้คุณสมบัติ (รูปหลายเหลี่ยม) หายไปจากแผนที่หลังจากลบมัน ( vectorSource.removeFeature(selectedFeature)และไม่มีวิธีแก้ปัญหาทำงานผิดปกติ OL3 v3.15.1 ปัจจุบันไม่มีฟังก์ชั่นบังคับรีเฟรช / แสดงผลพื้นฐานที่ ได้ผล! ทางออกสำหรับฉันคือเปลี่ยนselectedFeatureสไตล์:

        var newStyle = new ol.style.Style({
            image: new ol.style.Circle({
                radius: 5,
                fill: new ol.style.Fill({color: 'red'}),
                stroke: new ol.style.Stroke({color: 'yellow', width: 1})
            })
        });
        selectedFeature.setStyle(newStyle)

สไตล์ใดก็ได้จะใช้งานได้เนื่องจากคุณลักษณะนี้ถูกลบออกจากเลเยอร์แล้ว แต่ไม่ได้รีเฟรช

โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.