使用 OpenLayers 和 GeoJSON 创建锥形线答案

【问题标题】：Create a tapered line with OpenLayers and GeoJSON使用 OpenLayers 和 GeoJSON 创建锥形线
【发布时间】：2016-05-03 01:26:21
【问题描述】：

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

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

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

{
"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 属性中指定宽度的线？
放大和缩小时如何处理这个值？

谢谢，亨德里克

【问题讨论】：

如何将0.149999991 转换为像素？

标签： javascript geospatial openlayers-3 geojson

【解决方案1】：

您可以在http://openlayersbook.github.io/ch06-styling-vector-layers/example-07.html 找到一个非常符合您需求的示例。
没有内置解决方案。我可以想象至少有两种方法：不是为整个河流特征集合创建一个图层，而是为每个“scalerank”创建一个图层，并相应地设置它们的 min/maxResolution。否则，您可以监听 MapView change:resolution 事件，并相应地添加/删除或显示/隐藏功能。

【讨论】：

第一名确实是我需要的，我在你发帖之前发现了一个类似的资源。关于 2，我最终做的略有不同，因为我发现该函数在每个缩放事件上再次运行，并且每次的分辨率值都不同。我将在下面发布答案。非常感谢！！！！
正如我在下面的答案中所说，进一步检查您的建议 2 会很有用。我以后会调查的。

【解决方案2】：

下面的代码 sn-p 符合我的要求：

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 的帮助！！！！！！

【讨论】：