จะเปลี่ยนสีของคุณสมบัติใน openlayers ได้อย่างไร?

11

ฉันกำลังโหลดไฟล์ geojson ลงใน openlayers เพื่อแสดงรูปหลายเหลี่ยม จากไฟล์นี้ฉันจะสร้างรายชื่อทั้งหมดของรูปหลายเหลี่ยมเหล่านี้

ตอนนี้ฉันต้องการเปลี่ยนสีของรูปหลายเหลี่ยมเมื่อเลือกจากรายการ (คลิกที่ชื่อ)

สิ่งที่ฉันพยายามคือสร้างสไตล์ ( http://docs.openlayers.org/library/feature_styling.html ) แต่ฉันไม่สามารถหาวิธีเพิ่มสไตล์นี้ให้กับรูปหลายเหลี่ยมได้ ฉันจะทำสิ่งนั้นได้อย่างไร

openlayers-2

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

7

คุณสามารถสร้างชุดแฮชสัญลักษณ์ของสไตล์และกำหนดให้กับรูปหลายเหลี่ยมที่คุณเลือกก่อนที่จะเพิ่มลงในเลเยอร์:

var selected_polygon_style = {
    strokeWidth: 5,
    strokeColor: '#ff0000'
    // add more styling key/value pairs as your need
};

selectedFeature.style = selected_polygon_style;
layer.addFeatures([selectedFeature]);

ที่หน้านี้ ( http://docs.openlayers.org/library/feature_styling.html ) คุณสามารถค้นหาข้อมูลมากมายเกี่ยวกับคุณสมบัติของสไตล์ที่คุณสามารถแก้ไขได้:

เติมสี
fillOpacity
strokeColor
strokeOpacity
strokeWidth
strokeLinecap
strokeDashstyle
...

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

9

แต่ถ้ามันอยู่ในชั้นแล้ว ฉันพบโซลูชันนี้: mylayer.drawFeature (mylayer.getFeatureById (id), {fillColor: "# 00ffff", strokeColor: "# 00ffff"});

— jlai79

ใช่คุณพูดถูกคุณเพิ่งวาดมันด้วยรูปแบบใหม่

— mfdev

2

การใช้เคสในคำตอบอื่น ๆ

เพียงแค่เปลี่ยนการใช้ "setStyle ()"

กรณีนี้ใช้ได้สำหรับฉัน

var selected_polygon_style = {
    strokeWidth: 5,
    strokeColor: '#ff0000'
    // add more styling key/value pairs as your need
};

selectedFeature.setStyle(selected_polygon_style);
layer.addFeatures([selectedFeature]);

— Jorge Rocha
แหล่งที่มา

สิ่งนี้ไม่ได้ผลสำหรับฉันฉันได้รับ "Uncaught TypeError: feature.setStyle ไม่ใช่ฟังก์ชั่น"

— Matthew Lock

1

Whit OpenLayers 4.6.5 สำหรับการเปลี่ยนสีฉันใช้สิ่งนี้:

myLayer.getSource().getFeatures()[1].setStyle(new ol.style.Style({
      image: new ol.style.Icon(/** @type {module:ol/style/Icon~Options} */({ // /** @type {olx.style.IconOptions} */
        color: '#00ffff', //  #FF0000
        crossOrigin: 'anonymous',
        src: '/img/dot.png'
      }))
    }));

getFeatures()[1]เป็นหนึ่งในองค์ประกอบของคุณสมบัติของฉัน ถ้าฉันจะเปลี่ยนคุณสมบัติทั้งหมดแล้วฉันจะใช้วน

— Antonio Faienza
แหล่งที่มา