使用 OpenLayers 和 GeoJSON 创建一条锥形线

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

从自然地球数据下载数据
将形状文件转换为地理JSON
将 GeoJSON 文件添加为 OpenLayers3 中的图层

我正在努力使河流正确，我可以显示它们，但只能显示为具有固定宽度的线。但是，当查看我从自然地球数据创建的文件时，我看到实际上有许多短线，并且每条线都指定了宽度（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 属性中指定的行？
和缩小时如何处理此值？

谢谢亨德里克

您可以在此处找到一个非常接近您需求的示例 http://openlayersbook.github.io/ch06-styling-vector-layers/example-07.html。
没有内置解决方案。我至少可以想象两种方法：不是为整个河流要素集合创建一个图层，而是为每个"scalerank"创建一个图层，并相应地设置其最小/最大分辨率。否则，您可以收听 MapView 更改：分辨率事件，并相应地添加/删除或显示/隐藏功能。

下面的代码片段确实符合我的需求：

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

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

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

非常感谢弗朗切斯科的帮助!!!!

相关内容

最新更新

热门标签：