在OpenLayers 3中的单个点上设置两个样式

时间:2016-02-10 16:16:21

标签: javascript openlayers-3

我是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
    }))
}));

在此代码中,仅设置了最后一个样式,但我想要两个样式。 谢谢你的帮助。

1 个答案:

答案 0 :(得分:2)

您可以将样式对象数组发送到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
        }))
    })
]);