Question

我通过阅读WKT-String来为地图添加功能：

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

每个要素都有一个bxObject-Property，此属性包含“radius”-Property。

我为图层添加样式，添加了功能，如下所示：

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

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

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个功能，我甚至有主观意见，它会减慢一切。 这真的是这样吗？

我发现了stackoverflow 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 - 单独设置每个功能的样式

1 个答案: