尝试在 mapbox 中绘制 turf.js 缓冲区但收到 'invalid unit' 错误

Question

我有一个 multiLineString geojson 文件，我正在尝试使用 turf.js 在 mapbox 中绘制一个缓冲区，但我一直收到以下错误。

Invalid Unit (line 36)

阅读 turf.js 文档后，我似乎需要将坐标从 geojson 文件传递到 turf 中，然后传递 turf.buffer，我在这里尝试这样做。

var rr_crds = []

for(i=0; i<railRoad.features.length; i++){
    rr_crds.push(railRoad.features[i].geometry.coordinates);
}

var rr_coords = turf.multiLineString(rr_crds)
var mileBuffer = turf.buffer(rr_coords, 1, {units: 'miles'})

geojson 示例：

var railRoad = {
"type": "FeatureCollection",
"features": [
{ "type": "Feature", "properties": { "OBJECTID": 61, "USERID": 0, "NAME": "Union Pacific Railroad", "CLASSIFICA": "Mainline", "DATASRC": null, "DATAMETH": null, "DATAACC": 0, "CFCC": "B11", "UPDATEDATE": "20080206", "SHAPE_LEN": null }, "geometry": { "type": "MultiLineString", "coordinates": [ [ [ -105.04335, 40.53787 ], [ -105.04336, 40.53747 ], [ -105.04337, 40.5369 ], [ -105.04337, 40.536 ], [ -105.04336, 40.53526 ], [ -105.04337, 40.53465 ], [ -105.04337, 40.5336 ], [ -105.04337, 40.53292 ], [ -105.04339, 40.53198 ], [ -105.04339, 40.53125 ], [ -105.0434, 40.53065 ], [ -105.0434, 40.53002 ], [ -105.0434, 40.52929 ], [ -105.04341, 40.52871 ] ] ] } },
{ "type": "Feature", "properties": { "OBJECTID": 62, "USERID": 0, "NAME": "Burlington Northern Railroad", "CLASSIFICA": "Mainline", "DATASRC": null, "DATAMETH": null, "DATAACC": 0, "CFCC": "B11", "UPDATEDATE": "20080206", "SHAPE_LEN": null }, "geometry": { "type": "MultiLineString", "coordinates": [ [ [ -105.08077, 40.52883 ], [ -105.08078, 40.52862 ] ] ] } },
{ "type": "Feature", "properties": { "OBJECTID": 63, "USERID": 0, "NAME": "Burlington Northern Railroad", "CLASSIFICA": "Mainline", "DATASRC": null, "DATAMETH": null, "DATAACC": 0, "CFCC": "B11", "UPDATEDATE": "20080206", "SHAPE_LEN": null }, "geometry": { "type": "MultiLineString", "coordinates": [ [ [ -105.08078, 40.52862 ], [ -105.08078, 40.52847 ], [ -105.0808, 40.52761 ], [ -105.08082, 40.52681 ], [ -105.08083, 40.52603 ], [ -105.08083, 40.52568 ], [ -105.08085, 40.52528 ] ] ] } },
{ "type": "Feature", "properties": { "OBJECTID": 64, "USERID": 0, "NAME": "Union Pacific Railroad", "CLASSIFICA": "Mainline", "DATASRC": null, "DATAMETH": null, "DATAACC": 0, "CFCC": "B11", "UPDATEDATE": "20080206", "SHAPE_LEN": null }, "geometry": { "type": "MultiLineString", "coordinates": [ [ [ -105.04341, 40.52871 ], [ -105.04341, 40.52861 ], [ -105.04341, 40.52809 ], [ -105.04342, 40.5275 ], [ -105.04342, 40.52697 ], [ -105.04342, 40.52644 ], [ -105.04343, 40.5257 ], [ -105.04343, 40.52515 ], [ -105.04343, 40.52473 ] ] ] } },
{ "type": "Feature", "properties": { "OBJECTID": 65, "USERID": 0, "NAME": "Union Pacific Railroad", "CLASSIFICA": "Mainline", "DATASRC": null, "DATAMETH": null, "DATAACC": 0, "CFCC": "B11", "UPDATEDATE": "20080206", "SHAPE_LEN": null }, "geometry": { "type": "MultiLineString", "coordinates": [ [ [ -105.04343, 40.52473 ], [ -105.04345, 40.52439 ], [ -105.04349, 40.52398 ] ] ] } },
{ "type": "Feature", "properties": { "OBJECTID": 66, "USERID": 0, "NAME": "Union Pacific Railroad", "CLASSIFICA": "Mainline", "DATASRC": null, "DATAMETH": null, "DATAACC": 0, "CFCC": "B11", "UPDATEDATE": "20080206", "SHAPE_LEN": null }, "geometry": { "type": "MultiLineString", "coordinates": [ [ [ -105.04349, 40.52398 ], [ -105.04354, 40.52364 ] ] ] } },

mapbox代码：

var map = new mapboxgl.Map({
container: 'map', // container id
style: 'mapbox://styles/mapbox/light-v10', // stylesheet location
center: [-105.077, 40.55], // starting position [lng, lat]
zoom: 10 // starting zoom
});

map.on('load', function() {
    // layer - rail road
    map.addLayer({
        'id': 'Railroad',
        'type': 'line',
        'source': {
            'type': 'geojson',
            'data': railRoad,
            }
        });

        map.addSource('buffer-1mi', {
        'type': 'geojson',
        'data': {
            'type': 'FeatureCollection',
            'features': []
        }
    });

    var rr_crds = []

    for(i=0; i<railRoad.features.length; i++){
        rr_crds.push(railRoad.features[i].geometry.coordinates);
    }

    var rr_coords = turf.multiLineString(rr_crds)
    var mileBuffer = turf.buffer(rr_coords, 1, {units: 'miles'})

    map.getSource('buffer-1mi').setData({
        'type': 'FeatureCollection',
        features: [mileBuffer]
    });

    map.addLayer({
        'id': 'buffer-1mi',
        'type': 'line',
        'source': 'buffer-1mi',
    })
});

Answer 1

可能你的错误是你传递给 multiLineString() 的只是一个坐标数组，而它应该是一个 LineStrings 数组。

因此，替换为：

    rr_crds.push(railRoad.features[i].geometry.coordinates);

和

    rr_crds.push(railRoad.features[i]);

尝试在 mapbox 中绘制 turf.js 缓冲区但收到 'invalid unit' 错误

Trying to plot a turf.js buffer in mapbox but receive 'invalid unit' error

javascript

mapbox-gl-js

turfjs