javascript - 试图在 mapbox 中绘制一个 turf.js 缓冲区但收到“无效单元”错误
问题描述
我有一个 multiLineString geojson 文件,我正在尝试使用 turf.js 在 mapbox 中绘制一个缓冲区,但我一直收到以下错误。
无效单位(第 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 ] ] ] } },
地图框代码:
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',
})
});
解决方案
可能你的错误是你传递multiLineString()
的只是一个坐标数组的数组,而它应该是一个 LineStrings 的数组。
所以,替换这个:
rr_crds.push(railRoad.features[i].geometry.coordinates);
和
rr_crds.push(railRoad.features[i]);
推荐阅读
- python - Spark Dataframe 中“float”与“np.nan”的比较
- android - 数据已添加到 Sqlite 但不会显示在 recyclerView
- javascript - 使用 JavaScript 创建 MDL 复选框
- logstash - logstash:文件输入不起作用,标准输出根本不显示任何内容(Windows)
- javascript - 如何在 Typescript 中将 import 语句与 import all 语句结合起来?
- ruby-on-rails - 收藏选择类别和子类别 | 没有按预期工作
- angular - NgIf 和 @Input Angular 2
- c# - 动态 GroupBy LINQ
- python - Python Discord 机器人故障排除
- python - pandas DataFrame中条件成对行操作的最有效方法