OpenLayers3 - 分别设置每个功能的样式

Question

我正在通过阅读他们的 WKT 字符串向地图添加要素：

var feature = wkt.readFeature(entity.WellKnownText);
feature.bxObject = entity;
src.addFeature(feature);

每个特征都有一个bxObject-属性，这个属性包含"radius"-属性.

我为图层设置样式，添加的功能如下：

var layer = new ol.layer.Vector({
    source: src,
    style: new ol.style.Style({
        image: new ol.style.Circle({
            radius: 6,
            stroke: new ol.style.Stroke({
                color: 'blue',
                width: 1
            }),
            fill: new ol.style.Fill({ color: [0, 0, 255, 0.1] })
        })
    })
});

我希望样式的半径-属性是动态的。我所做的和作为解决方法的工作如下：

var layer = new ol.layer.Vector({
    source: src,
    style: function (feature, resolution) {
        return [
            new ol.style.Style({
                image: new ol.style.Circle({
                    radius: feature.bxObject.radius || 6,
                    stroke: new ol.style.Stroke({
                        color: 'blue',
                        width: 1
                    }),
                    fill: new ol.style.Fill({ color: [0, 0, 255, 0.1] })
                })
            })
        ];
    }
});

但这会为每个功能创建一种新样式...我可能会绘制 100 个功能，我什至有主观意见，它会减慢一切。 真的是这样吗？

我找到了这个 Whosebug post。但是我没有运气尝试用“${...}”进行插值。我想这是一个 openLayers 2 功能：

var layer = new ol.layer.Vector({
    source: src,
    style: new ol.style.Style({
        image: new ol.style.Circle({
            radius: "${bxObject.radius}",
            stroke: new ol.style.Stroke({
                color: 'blue',
                width: 1
            }),
            fill: new ol.style.Fill({ color: [0, 0, 255, 0.1] })
        })
    })
});

Answer 1

是的，确实如此，但您应该保留样式缓存并尽可能重复使用。例如参见：http://openlayers.org/en/v3.10.1/examples/kml-earthquakes.html

OpenLayers3 - 分别设置每个功能的样式

OpenLayers3 - Style each Feature individually

openlayers-3