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

NoRyb 发表于 Dev

NoRyb

我通过阅读地图的WKT字符串将其添加到地图中：

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

但这为每个功能创建了一种新样式...我可能会绘制数百个功能，并且我什至拥有主观意见，即它会使所有功能变慢。这是真的吗？

我发现了这个stackoverflow帖子。但是我没有运气试图用“ $ {......”“进行插值。我猜这是一个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] })
        })
    })
});