¿Cómo cambiar el color de una característica en capas abiertas?

11

Estoy cargando un archivo geojson en capas abiertas para mostrar algunos polígonos. A partir de este archivo también creo una lista de todos los nombres de estos polígonos.

Ahora quiero cambiar el color de un polígono cuando se selecciona de la lista (se hace clic en el nombre).

Lo que he intentado es crear un estilo ( http://docs.openlayers.org/library/feature_styling.html ) pero no pude descubrir cómo agregar este estilo al polígono. ¿Cómo puedo hacer eso?

openlayers-2

— jlai79
fuente

7

Puede crear un conjunto de hash de simbolizador de estilo y asignarlo al polígono seleccionado antes de agregarlo a la capa:

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

En esta página ( http://docs.openlayers.org/library/feature_styling.html ) puede encontrar mucha información sobre las propiedades de estilo que puede modificar:

color de relleno
fillOpacity
color del trazo
strokeOpacity
anchura del trazo
strokeLinecap
estilo de vida
...

— mfdev
fuente

99

Pero, ¿y si ya está en la capa? Encontré esta solución: mylayer.drawFeature (mylayer.getFeatureById (id), {fillColor: "# 00ffff", strokeColor: "# 00ffff"});

— jlai79

Sí, tienes razón, simplemente la redibujaste con un nuevo estilo.

— mfdev

2

Usando el caso en la otra respuesta.

Simplemente cambiando el uso de "setStyle ()"

Este caso funcionó para mí.

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
fuente

Esto no funcionó para mí, obtuve "TypeError no capturado: feature.setStyle no es una función"

— Matthew Lock

1

Con OpenLayers 4.6.5 para cambiar el color estoy usando esto:

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]Es uno de los elementos de mi función. Si cambiara TODAS las funciones, usaría un Loop.

— Antonio Faienza
fuente