Làm cách nào để thay đổi màu sắc của một tính năng trong openlayers?

11

Tôi đang tải tệp Geojson vào openlayers để hiển thị một số đa giác. Từ tập tin này tôi cũng tạo ra một danh sách tất cả tên của các đa giác này.

Bây giờ tôi muốn thay đổi màu của đa giác khi được chọn từ danh sách (nhấp vào tên).

Những gì tôi đã cố gắng là tạo một kiểu ( http://docs.openlayers.org/l Library / feature_stomme.html ) nhưng tôi không thể tìm ra cách thêm kiểu này vào đa giác. Làm thế nào tôi có thể làm điều đó?

openlayers-2

— jlai79
nguồn

7

Bạn chỉ có thể tạo một bộ băm biểu tượng kiểu và gán nó cho đa giác đã chọn trước khi thêm nó vào lớp:

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]);

Tại trang này ( http://docs.openlayers.org/l Library / feature_stomme.html ) bạn có thể tìm thấy nhiều thông tin về các thuộc tính kiểu bạn có thể sửa đổi:

tô màu
fillOpacity
màu sắc nét
đột quỵ
Chiều rộng đột quỵ
đột quỵ
đột quỵ
...

— mfdev
nguồn

9

Nhưng nếu nó đã ở trên lớp thì sao? Tôi đã tìm thấy giải pháp này: mylayer.drawFeature (mylayer.getFeatureById (id), {fillColor: "# 00ffff", StroColor: "# 00ffff"});

— jlai79

vâng, bạn đã đúng, bạn chỉ cần vẽ lại nó với phong cách mới.

— mfdev

2

Sử dụng các trường hợp trong câu trả lời khác.

Chỉ cần thay đổi việc sử dụng "setStyle ()"

Trường hợp này làm việc cho tôi.

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
nguồn

Điều này không hiệu quả với tôi, tôi đã nhận được "Uncaught TypeError: Feature.setStyle không phải là một chức năng"

— Matthew Lock

1

Whit OpenLayers 4.6.5 để thay đổi màu tôi đang sử dụng:

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]là một trong những yếu tố của Tính năng của tôi. Nếu tôi thay đổi TẤT CẢ các tính năng thì tôi sẽ sử dụng Vòng lặp.

— Antonio Faienza
nguồn