<OpenLayers3> Сделать choropleth карту с GeoJSON

Question

Я пытаюсь сделать choropleth карту с OpenLayers3 и GeoJSON порождая в JavaScript.

Я хочу использовать свойства моего GeoJson для создания этой карты.

Если у вас есть город с объектами недвижимости ["name"='1'] и города со свойствами ["name"='2'] Я хочу, чтобы у вас был синий цвет для '1' и красного цвета для '2'.

я нашел в Интернете, как сделать эту карту с OpenLayers2 ([Пример для сделать choropleth карту с OL2][1]), но я не нахожу эквивалентность в OL3. Код с OL2 выглядеть :

var subteStyleMap = new OpenLayers.StyleMap({ 
'strokeWidth': 4 
}); 

var lookup = { 
    "1": {strokeColor: "#46C7FA"}, 
    "2": {strokeColor: "#E81D1A"} 
} 

subteStyleMap.addUniqueValueRules("default", "number", lookup); 

var geojson_layer = new OpenLayers.Layer.Vector("GeoJSON", { 
    projection: new OpenLayers.Projection("EPSG:4326"), 
    strategies: [new OpenLayers.Strategy.Fixed()], 
    protocol: new OpenLayers.Protocol.HTTP({ 
     url: "generation_geojson2.php", 
     format: new OpenLayers.Format.GeoJSON() 
    }), 
    styleMap: subteStyleMap 
}); 

Я начал адаптацию, но я не нахожу эквивалентность 'addUniqueValueRules'

var lookup = { 
    "1": {strokeColor: "#46C7FA"}, 
    "2": {strokeColor: "#E81D1A"} 
} 

subteStyleMap.addUniqueValueRules("default", "number", lookup); 

var vector_arret_tad = new ol.layer.Vector 
          ({ 
          source: new ol.source.GeoJSON({ url: 'generation_geojson2.php',defaultProjection :'EPSG:4326', projection: 'EPSG:3857'}), 
          name: 'City', 
          style: subteStyleMap 
          }); 

Какова эквивалентность OL3 этого кода или другое решение этой проблемы?

Answer 1

Вам нужно использовать функцию стиля. Функция стиля - это функция, которая принимает функцию в качестве аргумента и возвращает массив объекта стиля.

В вашем случае, это будет выглядеть следующим образом:

var lookup = { 
    "1": [new ol.style.Style({ 
    stroke: new ol.style.Stroke({ 
     color: "#46C7FA" 
    }) 
    })], 
    "2": [new ol.style.Style({ 
    stroke: new ol.style.Stroke({ 
     color: "#E81D1A" 
    }) 
    })] 
}; 

var vectorLayer = new ol.layer.Vector({ 
    // … 
    style: function(feature, resolution) { 
    return lookup[feature.get('number')]; 
    } 
}); 

См http://openlayers.org/en/master/examples/vector-layer.html для примера, который использует функцию стиля, чтобы добавить метки к полигонам.