行に沿って四角形を配置する方法は？ （Geojson + mapbox）

Question

私は長方形で四角で塗りつぶす必要があります。 私は中心線を見つけ、その線に沿って四角形を配置したいと思います。 しかし、turfjsのような他のライブラリと一緒にmapboxglの四角形を描く簡単な方法はありますか？ 四角形の中心と辺の長さを設定し、四角形の座標を取得するようにしますか？ アイデア geojsonでサークルを配置することは問題ではありませんが、4つの座標を計算する必要があるため、四角形では問題があります。芝で

Answer 1

あなたは、このタスクを解決するために手元に適切なツールを得ました。

1. は長方形の量との直線距離は、あなたが

2. 使用縄張りをしたいの直線距離

3. デバイドを取得します。それを行うの

   一つの方法は、このようなものになるだろう。行に沿ってポイントを取得するには（）を使用してください。

4. turf.buffer、turf.bbox、およびturf.bboxPolygonを使用して点の位置に矩形

5. ここmapbox-GL-JS介し

を地図上にすべてを描画は、コード例です。結果を表示するには、 "run code snippet"を押すことができます。

https://jsfiddle.net/andi_lo/3rc6vca3/

mapboxgl.accessToken = 'pk.eyJ1IjoiZmFyYWRheTIiLCJhIjoiTUVHbDl5OCJ9.buFaqIdaIM3iXr1BOYKpsQ'; 
 

 
var map = new mapboxgl.Map({ 
 
    container: 'map', 
 
    style: 'mapbox://styles/mapbox/streets-v9', 
 
    center: [-74.10931699675322, 4.61336863727521], 
 
    zoom: 11, 
 
}); 
 

 
map.on('load',() => { 
 
    map.addSource('line', { 
 
    'type': 'geojson', 
 
    'data': { 
 
     'type': 'FeatureCollection', 
 
     'features': [], 
 
    }, 
 
    }); 
 

 
    map.addSource('rect', { 
 
    'type': 'geojson', 
 
    'data': { 
 
     'type': 'FeatureCollection', 
 
     'features': [], 
 
    }, 
 
    }); 
 

 
    map.addLayer({ 
 
    id: 'line_layer', 
 
    source: 'line', 
 
    type: 'line', 
 
    paint: { 
 
     'line-width': 3, 
 
     'line-color': '#333', 
 
    }, 
 
    }); 
 

 
    map.addLayer({ 
 
    id: 'rect_layer', 
 
    source: 'rect', 
 
    type: 'fill', 
 
    paint: { 
 
     'fill-color': '#00b7bf', 
 
    }, 
 
    }); 
 

 
    const line = turf.lineString([[-74.07, 4.66], [-74.17, 4.56]]); 
 
    const lineCollection = turf.featureCollection([line]); 
 
    const lineDistance = turf.lineDistance(line); 
 
    const rectCollection = turf.featureCollection([]); 
 

 
    const RECT_COUNT = 7; 
 
    const RECT_SIZE = 0.6; 
 
    const BUFFER_STEPS = 32; 
 
    const SEGMENTS = lineDistance/RECT_COUNT; 
 
    const UNITS = 'kilometers'; 
 
    for(let i = 0; i <= RECT_COUNT; i++) { 
 
    const point = turf.along(line, (SEGMENTS * i), UNITS); 
 
    const buffered = turf.buffer(point, RECT_SIZE, UNITS, BUFFER_STEPS); 
 
    const bbox = turf.bbox(buffered); 
 
    const bboxPolygon = turf.bboxPolygon(bbox); 
 
    rectCollection.features.push(bboxPolygon); 
 
    } 
 

 
    map.getSource('line').setData(lineCollection); 
 
    map.getSource('rect').setData(rectCollection); 
 
});

#map { 
 
    height: 500px; 
 
}

<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.38.0/mapbox-gl.css" rel="stylesheet"/> 
 
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.38.0/mapbox-gl.js"></script> 
 
<script src="https://npmcdn.com/@turf/turf@4.7.3/turf.min.js"></script> 
 

 
<div id="map"></div>