¿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

Respuestas:

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