Establecer dinámicamente el nivel de zoom en función de un cuadro delimitador

12

Tengo un mapa de folleto cuyo tamaño depende del tamaño de la ventana del navegador. Me gustaría que el nivel de zoom se elija dinámicamente para que esté lo más ampliado posible mientras se muestra la totalidad del cuadro delimitador.

En este momento, solo tengo el nivel de zoom codificado y el punto central basado en un promedio de puntos. 

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

En cambio, me gustaría darle un cuadro delimitador (dos islas) y elegir el nivel de zoom en función del tamaño de la ventana.

leaflet Mike McKay
fuente

Respuestas:

25

Simplemente podrías usar:

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

map.fitBounds(group.getBounds());
Farhat Abbas
fuente
1
Respuesta útil, esa es una mejor manera de centrar y hacer zoom, antes de centrarme con un cálculo manual. FitBounds fue la respuesta que necesitaba, pero me di cuenta de que simplemente podías pasar a dos coordenadas para encajarBoots y listo.
Mike McKay el
2
Definitivamente use la siguiente respuesta a menos que ya tenga marcadores creados.
Andy
11

Utilizando la respuesta de @ Farhat , descubrí que todo lo que necesitaba era pasar una serie de matrices:

map.fitBounds([
  [-4.8587000, 39.8772333],
  [-6.4917667, 39.0945000]
])
Mike McKay
fuente
1
Obviamente, le falta un corchete derecho cerca del final. No estoy seguro de por qué revertiste mi edición.
Jan Kyu Peblik
1
Tienes razón sobre el soporte, gracias. Lo arreglaré Sin embargo, su edición también tenía una coma adicional.
Mike McKay
44
developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… El código también se probó con una coma final. (Debido a que la vida es demasiado corta para molestarse con líneas que difieren significativamente en el formato.)
Jan Kyu Peblik
0

map.fitBounds() También funciona muy bien si está trabajando con Google Map Polylines:

<!-- 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);
naamán
fuente
¿Por qué se rechazó esta respuesta?
LeeGee
0

¡Así lo hice gracias a @Mike McKay! ;)

Tenga en cuenta que he agregado un par de extras a los coords como un relleno interno, por lo que los marcadores no están justo en el lado del mapa. De esta manera se ve más bonito.


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
fuente