Imposta dinamicamente il livello di zoom in base a un rettangolo di selezione

13

Ho una mappa di volantini le cui dimensioni dipendono dalle dimensioni della finestra del browser. Vorrei che il livello di zoom fosse scelto dinamicamente in modo che fosse il più ingrandito possibile mentre mostrava l'intero riquadro di selezione.

Al momento, ho solo il livello di zoom hardcoded e il punto centrale basato su una media di punti.

map = new L.Map('map', {
  center: new L.LatLng(
    latitudeSum/locations.length,
    longitudeSum/locations.length
  )
  zoom: 9
})

Invece, vorrei dargli un riquadro di delimitazione (due isole) e scegliere il livello di zoom in base alla dimensione della finestra.

leaflet

— Mike McKay
fonte

26

Puoi semplicemente usare:

var group = new L.featureGroup([marker1, marker2, marker3]);

map.fitBounds(group.getBounds());

— Farhat Abbas
fonte

1

Risposta utile - questo è un modo migliore per centrare e ingrandire - prima di centrare un calcolo manuale. FitBounds era la risposta di cui avevo bisogno, ma ho capito che potevi semplicemente passare in due coordinate per adattarlo e farlo.

— Mike McKay,

2

Usa sicuramente la risposta successiva a meno che tu non abbia già creato dei marker.

— Andy,

12

Usando la risposta di @ Farhat , ho capito che tutto ciò di cui avevo bisogno era passare una serie di array:

map.fitBounds([
  [-4.8587000, 39.8772333],
  [-6.4917667, 39.0945000]
])

— Mike McKay
fonte

1

Questo ovviamente manca di una parentesi quadra destra verso la fine. Non so perché hai ripristinato la mia modifica.

— Jan Kyu Peblik,

1

Hai ragione sulla staffa - grazie. Lo aggiusterò. La tua modifica aveva anche una virgola aggiuntiva.

— Mike McKay,

4

developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… Codice effettivamente testato anche con virgola finale. (Perché la vita è troppo breve per disturbare con linee che differiscono notevolmente in modo significativo nel formato.)

— Jan Kyu Peblik,

0

map.fitBounds() funziona benissimo anche se lavori con le polilinee di Google Map:

<!-- required for Leaflet Polyline support -->
<script type="text/javascript" src="https://cdn.rawgit.com/jieter/Leaflet.encoded/68e78190/Polyline.encoded.js"
crossorigin=""></script>

// polylines require backslashes to be escaped (Jinja example)
let encodedRoute = '{{ activity.strava_data['map']['polyline']|replace("\\", "\\\\")|safe }}';
let coordinates = L.Polyline.fromEncoded(encodedRoute).getLatLngs();
let map = L.map('map').fitBounds(coordinates);

— Naaman
fonte

Perché questa risposta è stata sottovalutata?

— LeeGee,

0

È così che l'ho fatto grazie a @Mike McKay! ;)

Nota che ho aggiunto un paio di extra ai coords come Padding interno, quindi i marker non si trovano proprio sul lato della mappa. In questo modo sembra più bello.


const [ ...coordinates ] = locations.map(marker => [ marker.coordinates.latitude + 
0.055, marker.coordinates.longitude + 0.055 ])

map.fitBounds([ ...coordinates ])

VUE.JS WAY:

mounted () {
   this.$nextTick(() => {
        this.initialZoom()
   })
}


methods: {
   initialZoom () {
       const map = this.$refs.myMap.mapObject
       const [ ...coordinates ] = this.locations.map(marker => [                                  
                                          marker.coordinates.latitude + 0.055,
                                          marker.coordinates.longitude + 0.055 
                                   ]) 

map.fitBounds([ ...coordinates ])

— Despertaweb
fonte