使用OpenLayers和GeoJSON创建锥形线

Question

I am trying to create an offline map through the following steps:

• Download data from Natural Earth Data
• Convert the shape files to GeoJSON
• Add the GeoJSON files as layers in OpenLayers3

I am struggling to get the rivers right, I can display them, but only as a line with a fixed width. However, when looking at the file I created from Natural Earth Data I see that there are in fact many short lines, and each has a width ( strokeweig ) specified. See snippet below for illustration.

{
"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 ] ] } },
....
]

So, my question is twofold:

1. How do I work with this types of data in the first place to display a line with a width as specified in the strokeweig property of a features array item?
2. How do I deal with this value when zooming in and out?

Thanks, Hendrik

Answer 1

1. You can find an example here http://openlayersbook.github.io/ch06-styling-vector-layers/example-07.html that is very near to your needs.

2. There is not a built-in solution. I can imagine at least two ways: Instead of creating one layer for the whole rivers featurecollection, create one layer for each "scalerank", and set their min/maxResolution accordingly. Otherwise, you can listen to the MapView change:resolution event, and add/remove or show/hide the features accordingly.

Answer 2

The code snippet below does sort of what I wanted:

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

I am not super happy with the formula that computes the width. Obviously taking a static value is not ideal and I don't know how the properties actually should have been combined to produce the correct line width.

I think I will be looking into the solution that Francesco suggested to improve it. This still won't be ideal because the max scaleRank in the file is 6 and I will be allowing zoom up to 18 (I know it won't be a very detailed map but that's OK).

Many thanks to Francesco for his help!!!!!