Как использовать разные цвета для объектов topojson с помощью openlayers 3

У меня есть топожсон с набором объектов, таких как level1, level2, level3:

{
    "type": "Topology",
    "transform": …,
    "objects": {
        "level1": {
            "id":"level1",
            "type":"GeometryCollection",
            "geometries":[
                {"type":"Polygon","arcs":[[0]]}
            ]
         },
        "level2": …,
        "level3": …,
    },
    "arcs": …
}

и я хотел бы определить другой цвет для другого объекта. Я использую его в openlayers 3 как векторный слой:

new ol.layer.Vector({
    source: new ol.source.TopoJSON({
        projection: 'EPSG:3857',
        url: "url to my topojson"
    }),
    style: function(feature) {
        return new ol.style.Style({
            stroke: new ol.style.Stroke({
                color: '#09a7ee',
                width: 1
            })
        });
    }
})

Моя идея состоит в том, чтобы получить идентификатор объекта (level1) и выбрать цвет по нему или что-то в этом роде. Но я не знаю, как получить идентификатор свойства в функции стиля.

...
style: function(feature) {
    var id = feature.get('id'); //This is not working
    var colors = {
        'level1': '#09a7ee',
        'level2': '#aaa7ee',
        ...
    }

    return new ol.style.Style({
        stroke: new ol.style.Stroke({
            color: colors[id],
            width: 1
        })
    });
}

topojson openlayers-3
person machaj    schedule 19.04.2015    source источник

Ответы (1)


arrow_upward
2
arrow_downward

ol.format.TopoJSON не хранит групповые ключи, поэтому вам придется построить индекс из TopoJSON:

var geometries, geometry;
for (var key in response.objects) {
    geometries = response.objects[key].geometries || [];
    for (var i = 0, ii = geometries.length; i < ii; ++i) {
        geometry = geometries[i];
        objectsByKey[geometry.id] = key;
    }
}
var features = new ol.format.TopoJSON()
    .readFeatures(response, {featureProjection: 'EPSG:3857'});

Вышеприведенное предполагает, что response — это объект JSON, содержащий ваш TopoJSON, и что вы собираетесь создать векторный источник с features.

Получив это, вы можете сделать что-то подобное в своем styleFunction:

...
style: (function(feature) {
    var colors = {
        'level1': '#09a7ee',
        'level2': '#aaa7ee',
        ...
    };
    var style = new ol.style.Style({
      stroke: new ol.style.Stroke({
        width: 1
      })
    });
    var styles = [style];

    return function(feature) {
      var group = objectsByKey[feature.getId()];
      style.getStroke().setColor(colors[group]);
      return styles;
    });
})()
person ahocevar    schedule 20.04.2015