如何使用 openlayers 3 为 topojson 对象使用不同的颜色

Question

我有 topojson 和一堆对象，比如 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）id 和 select 颜色。但是我不知道如何在样式函数中获取属性 id。

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

Answer 1

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 是包含您的 TopoJSON 的 JSON 对象，并且您将使用 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;
    });
})()

如何使用 openlayers 3 为 topojson 对象使用不同的颜色

How to use different color for topojson objects with openlayers 3

topojson

openlayers-3