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