<OpenLayers3> 使用 GeoJson 制作等值线图答案

【问题标题】：<OpenLayers3> Make choropleth map with GeoJson<OpenLayers3> 使用 GeoJson 制作等值线图
【发布时间】：2016-04-22 22:57:18
【问题描述】：

我尝试用 OpenLayers3 和 GeoJson 在 javascript 中生成一个 choropleth 地图。 p>

我想使用我的 GeoJson 的属性来制作这张地图。

例如，如果我有一个属性为["name"='1'] 的城市和一个属性为["name"='2'] 的城市，我希望“1”为蓝色，“2”为红色。

我在互联网上找到了如何使用 OpenLayers2 制作此地图（[使用 OL2][1]) 制作 choropleth 地图的示例，但我在 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 等效项是什么，或此问题的另一种解决方案？

【问题讨论】：

这是否涉及谷歌地图？
我不这么认为。 google-maps 和 gwt-openlayers 标签可能应该被删除。
抱歉，我删除了标签 google-maps 和 gwt-openlayers

标签： javascript openlayers-3

【解决方案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。

【讨论】：

完美！非常感谢您的帮助