Dynamische Einstellung der Zoomstufe basierend auf einem Begrenzungsrahmen

12

Ich habe eine Faltblattkarte, deren Größe von der Größe des Browserfensters abhängt. Ich möchte, dass die Zoomstufe dynamisch so gewählt wird, dass sie so vergrößert wie möglich ist und gleichzeitig den gesamten Begrenzungsrahmen anzeigt.

Im Moment habe ich nur die Zoomstufe fest codiert und den Mittelpunkt basierend auf einem Durchschnitt von Punkten.

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

Stattdessen möchte ich ihm einen Begrenzungsrahmen (zwei Inseln) geben und die Zoomstufe basierend auf der Größe des Fensters auswählen lassen.

leaflet

— Mike McKay
quelle

24

Sie könnten einfach verwenden:

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

map.fitBounds(group.getBounds());

— Farhat Abbas
quelle

1

Nützliche Antwort - das ist eine bessere Möglichkeit zum Zentrieren und Zoomen - bevor ich nur mit einer manuellen Berechnung zentrierte. FitBounds war die Antwort, die ich brauche, aber ich fand heraus, dass Sie einfach zwei Koordinaten an fitBounds übergeben und fertig sein können.

— Mike McKay

2

Verwenden Sie auf jeden Fall die nächste Antwort, es sei denn, Sie haben bereits Markierungen erstellt.

— Andy

11

Mit der Antwort von @ Farhat fand ich heraus, dass ich nur ein Array von Arrays übergeben musste:

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

— Mike McKay
quelle

1

Hier fehlt offensichtlich eine rechte eckige Klammer am Ende. Ich bin mir nicht sicher, warum Sie meine Bearbeitung zurückgesetzt haben.

— Jan Kyu Peblik

1

Sie haben Recht mit der Klammer - danke. Ich werde das beheben. Ihre Bearbeitung hatte jedoch auch ein zusätzliches Komma.

— Mike McKay

4

developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… Code, der tatsächlich auch mit einem nachgestellten Komma getestet wurde. (Weil das Leben zu kurz ist, um sich mit Zeilen zu beschäftigen, deren Format sich sinnlos erheblich unterscheidet.)

— Jan Kyu Peblik

0

map.fitBounds() funktioniert auch hervorragend, wenn Sie mit Google Map-Polylinien arbeiten:

<!-- 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
quelle

Warum wurde diese Antwort abgelehnt?

— LeeGee

0

So habe ich es dank @Mike McKay gemacht! ;)

Beachten Sie, dass ich den Koordinaten ein paar zusätzliche Elemente als innere Polsterung hinzugefügt habe, sodass die Markierungen nicht direkt neben der Karte angezeigt werden. Dieser Weg sieht schöner aus.


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

map.fitBounds([ ...coordinates ])

VUE.JS WEG:

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
quelle