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