Renderizar y estilizar múltiples características geométricas en OpenLayers

Question

Utilizando OpenLayers 4.2.0.

Tengo una característica con dos geometrías:

var feature = new ol.Feature({
  geometry: new ol.geom.Polygon(polyCoords),
  labelPoint: new ol.geom.Point(labelCoords),
  name: 'My Polygon'
});

¿Es posible renderizarlas todas a la vez y estilizar cada geometría individualmente? En particular, necesito renderizar la geometría y mostrar el nombre en el labelPoint.

Si establezco un estilo a la característica se aplica sólo a la geometría. Vea esto fiddle .

También lo he probado a través de la colección de geometría

var feature = new ol.Feature({
  geometry: new ol.geom.GeometryCollection([
    new ol.geom.Polygon(polyCoords),
    new ol.geom.Point(labelCoords)
  ]),
  name: 'My Polygon'
});

pero en este caso el nombre se representa dos veces. Vea esto fiddle .

Answer 1

En lugar de utilizar una colección de geometría, utilice características con dos columnas de geometría. Algo así como

var feature = new ol.Feature({
  geometry: new ol.geom.Polygon([[[-10e6, 6e6], [10e6, 6e6], [10e6, -6e6], [-10e6, -6e6]]]),
  point: new ol.geom.Point([0,3e6]),
  name: 'My Polygon'
});

A continuación, cree dos estilos, uno para la geometría principal y otro para la segunda ( 'geometry: point' ):

var style = [
  new ol.style.Style({
    stroke: new ol.style.Stroke({
      color: 'red',
      width: 2
    })
  }), 
  new ol.style.Style({
    geometry: 'point',
    image: new ol.style.Circle({
      radius: 5,
      fill: new ol.style.Fill({
        color: 'blue'
      })    
    }),
    text: new ol.style.Text({
      text: (feature.get('name')).toString(),
      font: '30px sans-serif',
      fill: new ol.style.Fill({
        color: 'red'
      })
    })
  })
];