使用 OpenLayers 和 GeoJSON 创建锥形线

Question

我正在尝试通过以下步骤创建离线地图：

从 Natural Earth Data 下载数据
将形状文件转换为 GeoJSON
将 GeoJSON 文件添加为 OpenLayers3 中的图层

我正在努力让河流正确，我可以显示它们，但只能显示为固定宽度的线条。但是，当查看我从 Natural Earth Data 创建的文件时，我发现实际上有很多短行，并且每行都指定了宽度 (strokeweig)。请参阅下面的片段以了解说明。

{
"type": "FeatureCollection",

"features": [
{ "type": "Feature", "properties": { "strokeweig": 0.20000000300000001, "scalerank": 5, "featurecla": "River", "name": null, "dissolve": "River_untitled_77", "note": "_untitled_77" }, "geometry": { "type": "LineString", "coordinates": [ [ -72.991327277300684, 46.177440090512803 ], [ -73.078557095009359, 46.160128485695026 ], [ -73.146304897744017, 46.123541571632373 ], [ -73.177181566038399, 46.070624904965499 ], [ -73.163952399371681, 46.044166571632061 ] ] } },
{ "type": "Feature", "properties": { "strokeweig": 0.149999991, "scalerank": 5, "featurecla": "River", "name": "Ebro", "dissolve": "RiverEbro", "note": null }, "geometry": { "type": "LineString", "coordinates": [ [ -4.188860236009816, 43.011173407557422 ], [ -4.10225053548865, 43.001484076502706 ], [ -4.054759894212424, 42.952520656906145 ], [ -4.017449510097691, 42.861053371749534 ], [ -3.96267249186829, 42.825034898442098 ], [ -3.890377163091955, 42.844413560551544 ], [ -3.821957566737524, 42.841855577153098 ], [ -3.757387864588821, 42.81728343359832 ], [ -3.70925126790894, 42.832631333988999 ], [ -3.677521938481732, 42.887899278325165 ], [ -3.626775681971111, 42.89800202083822 ], [ -3.52213090658006, 42.845447089197393 ] ] } },
....
]

所以，我的问题是双重的：

首先如何处理此类数据以显示宽度在要素数组项的 strokeweig 属性中指定的线条？
放大和缩小时如何处理这个值？

谢谢，亨德里克

Answer 1

您可以在此处 http://openlayersbook.github.io/ch06-styling-vector-layers/example-07.html 找到与您的需求非常接近的示例。
没有built-in解决方案。我至少可以想象两种方法：不是为整个河流要素集合创建一层，而是为每个 "scalerank" 创建一层，并相应地设置它们的 min/maxResolution。否则，您可以监听 MapView change:resolution 事件，并相应地 add/remove 或 show/hide 特征。

Answer 2

下面的代码片段符合我的要求：

var layer = new ol.layer.Vector({
  source: new ol.source.Vector({
    url: 'maps/rivers.json',
    format: new ol.format.GeoJSON()
  }),
  style: function(feature, resolution) {
    var strokeWeight, scaleRank, width, style;
    strokeWeight = feature.get('strokeweig');
    scaleRank = feature.get('scalerank');
    // strokeWeight is multiplied by scaleRanks because I think this is why this property was included in the GeoJSON
    // This number is then corrected for different zoom levels, max-resolution~611.5 based on map.MaxZoom=18
    // The calculation with dividers represents the amount of times the current resolution is SMALLER than 
    // the max-resolution. Note that the value 611.5 will need to be changed when we decide the 
    // map.maxZoom needs to be increased
    width = strokeWeight * scaleRank * (611.5 / resolution));
    style = new ol.style.Style({
        stroke: new ol.style.Stroke({
            color: 'rgb(35, 51, 60)',
            width: width
        })
    });
    return [style];
  }
});

我对计算宽度的公式不是很满意。显然采用静态值并不理想，我不知道实际上应该如何组合这些属性以产生正确的线宽。

我想我会研究 Francesco 建议改进的解决方案。这仍然不是理想的，因为文件中的最大 scaleRank 是 6，我将允许缩放到 18（我知道这不会是一个非常详细的地图，但没关系）。

非常感谢 Francesco 的帮助！！！！

使用 OpenLayers 和 GeoJSON 创建锥形线

Create a tapered line with OpenLayers and GeoJSON

javascript

geospatial

geojson

openlayers-3