Comment placer des carrés le long de la ligne? (Geojson + mapbox)

Question

J'ai un rectangle et j'ai besoin de le remplir de carrés. Je trouve la ligne centrale et je veux placer les carrés le long de cette ligne. Mais existe-t-il une méthode simple pour dessiner un carré dans mapboxgl avec d'autres libs comme des turfjs? Comme définir le centre du carré et une longueur de côté et obtenir une coordonnées du carré? Des idées? Comme placer des cercles avec geojson n'est pas un problème, mais cela me pose un problème avec des carrés, car je dois calculer 4 coordonnées.

Answer 1

Avec le gazon que vous avez obtenu l'outil à portée de main pour résoudre cette tâche.

Une façon de le faire serait quelque chose comme ceci:

1. obtenir la distance de ligne

2. Diviser la distance en ligne avec la quantité de rectangles que vous souhaitez

3. gazon utilisation. long() pour obtenir un point le long de votre ligne

4. Utilisez turf.buffer, turf.bbox et turf.bboxPolygon pour obtenir un rectangle sur le point emplacement

5. Dessiner tout sur la carte via MapBox-gl-js

Voici un exemple de code. Vous pouvez cliquer sur "Exécuter un extrait de code" pour afficher le résultat.

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>