Wie platziere man Quadrate entlang der Linie? (Geojson + mapbox)

Question

Ich habe ein Rechteck und muss es mit Quadraten füllen. Ich finde die Mittellinie und möchte die Quadrate entlang dieser Linie platzieren. Aber gibt es eine einfache Methode, ein Quadrat in mapboxgl mit anderen Bibliotheken wie turfjs zu zeichnen? Wie setzen Sie die Mitte des Platzes und eine Seitenlänge und erhalten Sie eine Koordinaten des Platzes? Irgendwelche Ideen? Das Platzieren von Kreisen mit Geojson ist kein Problem, sieht aber für mich mit Quadraten wie ein Problem aus, da ich 4 Koordinaten berechnen muss.

Answer 1

Mit Rasen bekam man das richtige Werkzeug zur Hand, diese Aufgabe zu lösen.

Eine Möglichkeit, es zu tun wäre so etwas wie diese:

1. Holen Sie sich den Zeilenabstand

2. Teilen Sie den Zeilenabstand mit der Menge der Rechtecke Sie wollen

3. Verwenden Rasen. entlang(), um einen Punkt entlang Ihrer Linie zu erhalten

4. Verwenden Sie torf.buffer, turf.bbox und torf.bboxPolygon, um eine Rechteck auf dem Punkt Standort

5. alles auf die Karte zeichnen über MapBox-gl-js

Hier ein Codebeispiel ist. Sie können "run code snippet" drücken, um das Ergebnis anzuzeigen.

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>