OpenLayers 3中的动态样式

Question

在OpenLayers 2中，可以使用动态部分扩展样式定义 - 特殊函数可在渲染时计算特定样式值。 OpenLayers 3中是否有等价物？从的OpenLayers

下面的代码示例2：

var stdStyleMap = new OpenLayers.StyleMap({ 
    "default": new OpenLayers.Style({ 
     /* fixed value */ 
     fillOpacity: 0.8, 
     /* value from server response */ 
     fillColor: "${fillcolor}", 
     /* value calculated at render time */ 
     pointRadius: "${getPointRadius}", 
    }, { 
     context: { 
      /* function that calculates the point radius */ 
      getPointRadius: function(feature) { 
       if (feature.attributes && feature.attributes.pointRadius) 
        return feature.attributes.pointRadius; 
       else 
        return 5; 
      }    
     }}) 
}); 

Answer 1

是有风格的函数，它的特征和当前的分辨率，看到在车间的一些例子：http://openlayers.org/workshop/vector/style.html

Answer 2

这里是using custom styles for polygons一个很好的例子来自Openlayers site。

但是，以下是一个例子，回答a question i posted ...所以，对我们两个人...也许。

// we'd normally pass feature & resolution parameters to the function, but we're going to 
// make this dynamic, so we'll return a style function for later use which will take those params. 

DynamicStyleFunction = (function(/* no feat/res yet!*/) { 

    /** 
    you really only get style are rendered upon simple geometries, not features. features are made of different geometry types, and styleFunctions are passed a feature that has its geometries rendered. in terms of styling vector geometries, you have only a few options. side note: if there's some feature you expect to see on the the map and it's not showing up, you probably haven't properly styled it. Or, maybe it hasn't been put it in a collection that is included in the source layer... which is a hiccup for a different day. 
    */ 

    // for any geometry that you want to be rendered, you'll want a style. 
    var styles = {}; 
    var s = styles; 

/** 
    an ol.layer.Vector or FeatureOverlay, renders those features in its source by applying Styles made of Strokes, Fills, and Images (made of strokes and fills) on top of the simple geometries which make up the features 

    Stroke styles get applied to ol.geom.GeometryType.LINE_STRING 

    MULTI_LINE_STRING can get different styling if you want 

    */ 

    var strokeLinesWhite = new ol.style.Stroke({ 
     color: [255, 255, 255, 1], // white 
     width: 5, 
    }) 

    var whiteLineStyle new ol.style.Style({ 
    stroke: strokeLinesWhite 
    }) 

    styles[ol.geom.GeometryType.LINE_STRING] = whiteLineStyle 

    /** 
    Polygon styles get applied to ol.geom.GeometryType.POLYGON 

    Polygons are gonna get filled. They also have Lines... so they can take stroke 

    */ 

    var fillPolygonBlue = new ol.style.Style({ 
    fill: new ol.style.Fill({ 
     color: [0, 153, 255, 1], // blue 
    }) 
    }) 

    var whiteOutlinedBluePolygon = new ol.style.Style({ 
    stroke: strokeLinesWhite, 
    fill: fillPolygonBlue, 
    }) 

    styles[ol.geom.GeometryType.POLYGON] = fillPolygonBlue 

    /** 
    Circle styles get applied to ol.geom.GeometryType.POINT 

    They're made with a radius and a fill, and the edge gets stroked... 

    */ 

    var smallRedCircleStyle = new ol.style.Style({ 
    image: new ol.style.Circle({ 
     radius: 5, 
     fill: new ol.style.Fill({ 
     color: '#FF0000', // red... but i had to look it up 
     }) 
    }) 
    }) 

    var whiteBigCircleWithBlueBorderStyle = new ol.style.Style({ 
    image: new ol.style.Circle({ 
     radius: 10, 
     fill: new ol.style.Fill({ 
     color: '#FFFFFF' // i guessed it 
     }) 
    }), 
    stroke: new.ol.style.Stroke({ 
     color: '#0000FF', // blue 
     width: 5 
    }) 
    }) 

    // render all points as small red circles 
    styles[ol.geom.GeometryType.POINT] = smallRedCircleStyle 


    // if you pass an array as the style argument, every rendering of the feature will apply every defined style style rendered with the geometry as the argument. that can be a whole lot of rendering in a FeatureOverlay... 

    smallRedCircleStyle.setZIndex(Infinity) 
    whiteBigCircleWithBlueBorderStyle.setZIndex(Infinity -1) // that prob wouldn't work, but i hope it's instructive that you can tinker with styles 

    // so... 
    var bullseyePointStyle = [ smallRedCircleStyle, whiteBigCircleWithBlueBorderStyle ]; 

    return function dynamicStyleFunction (feature, resolution){ 

    // this is the actual function getting invoked on each function call 
    // do whatever you want with the feature/resolution. 

    if (Array.indexOf(feature.getKeys('thisIsOurBullseyeNode') > -1) { 
     return bullseyePointStyle 
    } else if (feature.getGeometryName('whiteBlueBox')){ 
     return whiteOutlinedBluePolygon 
    } else { 
     return styles[feature.getGeometryName()] 
    } 
    } 
})()