why are all polygons of geojson-layer in OpenLayers 3 black?

Question

I want to color each polygon of my geojson according to its Hex-Value at "DN". I tried this:

var map = new ol.Map({
    target: 'map',
    layers: [
        new ol.layer.Tile({
            source: new ol.source.OSM()
        }),
        new ol.layer.Vector({
            title: 'added Layer',
            source: new ol.source.GeoJSON({
                projection : 'EPSG:3857',
                url: 'json2.json'
            }),
            style: new ol.style.Style({
                fill: new ol.style.Fill({color : '${DN}'})
            })
        })
    ],
    view: new ol.View(
        center:[52.5243700 , 13.4105300],
        zoom:2 
    })
});

My geojsonfile (json2.json) has this pattern:

{
    "type": "FeatureCollection",
    "crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },

    "features": [
        { "type": "Feature", "properties": { "DN": "#FFFFA5" }, "geometry": { "type": "Polygon", "coordinates": [ [ [ 13.282823309930697, 52.660705106390886 ], [ 13.285901346780852, 52.660201769236203 ], [ 13.282823309930697, 52.660705106390886 ] ] ] } }
    ]
}

The polygons are all displayed but they are all black although there is not the HEX-code of black in any "DN"..

Answer 1

You can't use the OL2 way variable substitution, using the ${} notation.

In OL3 there is the "style function" concept you can pass to the layer style property. It is executed for each feature and receives as argument the feature to be rendered and the resolution at which it is rendered. With all this you can get feature properties and use to return an ol.Style used to render the feature.

See the code of these examples:

• http://openlayers.org/en/master/examples/kml-earthquakes.html
• http://acanimal.github.io/thebookofopenlayers3/chapter04_07_style_functions.html

Note this can be very expensive, because is executed each time features are rendered, so try to use a "cache" mechanism storing your computed styled in an array and reuse them if possible.