선을 따라 사각형을 배치하는 방법은 무엇입니까? (Geojson + mapbox)

Question

나는 사각형이있어서 사각형으로 채울 필요가있다. 나는 가운데 선을 찾고 그 선을 따라 정사각형을 배치하고 싶다. 그러나 turfjs와 같은 다른 라이브러리와 함께 mapboxgl에 사각형을 그리는 간단한 방법이 있습니까? 사각형의 중심과 한 변의 길이를 설정하고 사각형의 좌표를 얻으시겠습니까? 아이디어가 있으십니까? geojson으로 원을 배치하는 것은 문제가되지 않지만 4 개의 좌표를 계산해야하므로 사각형이있는 경우 문제가됩니다. 잔디와

Answer 1

는이 작업을 해결하기 위해 손에 적절한 도구를 얻었다.

1. 는 사각형의 양 라인의 거리가 당신이

2. 사용 잔디를 원하는 라인 거리

3. 나누기를 가져옵니다 : 그 일의

   한 가지 방법은 다음과 같이 될 것이다. along()을 사용하여 라인을 따라 점을 얻으십시오.

4. turf.buffer, turf.bbox 및 turf.bboxPolygon을 사용하여 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>