在OpenLayers的單點上設置兩種樣式3

Question

我是Openlayer的新手。我如何在單個點上設置兩種樣式？ 例如圖標和方在一起

x.setStyle(new ol.style.Style({ 
    image: new ol.style.RegularShape({ 
     fill: new ol.style.Fill({color: 'red'}), 
     stroke: new ol.style.Stroke({color: 'black', width: 2}), 
     points: 4, 
     radius: 10, 
     angle: Math.PI/4 
    }) 
})); 
x.setStyle(new ol.style.Style({ 
    image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({ 
     // color: '#8959A8', 
     src: '{!! url('/img/sensor_blue.png') !!}', 
     scale: 0.3, 
     opacity: 0.2 
    })) 
})); 

在這段代碼中只有最後的樣式設置，但我想兩種風格在一起。 感謝您的幫助。

Answer 1

您可以發送一個樣式對象數組到ol.Feature#setStyle方法。請參閱文檔：http://openlayers.org/en/v3.13.1/apidoc/ol.Feature.html#setStyle

x.setStyle([ 
    new ol.style.Style({ 
     image: new ol.style.RegularShape({ 
      fill: new ol.style.Fill({color: 'red'}), 
      stroke: new ol.style.Stroke({color: 'black', width: 2}), 
      points: 4, 
      radius: 10, 
      angle: Math.PI/4 
     }) 
    }), 
    new ol.style.Style({ 
     image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({ 
      // color: '#8959A8', 
      src: '{!! url('/img/sensor_blue.png') !!}', 
      scale: 0.3, 
      opacity: 0.2 
     })) 
    }) 
]);