Wie schrittweise in Prospekt, Javascript

zoomen Ich benutze Flugblatt und Geojson-vt auch Karte, und einige Linien in Vektor Fliesen. Ich habe einige Änderungen in geojson-vt vorgenommen, weil ich einige meiner Funktionen hinzufügen muss, wenn die Kacheln geschnitten werden. Alles funktioniert gut, wenn ich meine LeafletMap aus Zoom 1 starte, und dann Zoomen mit dem Mausrad, zum Beispiel Zoom = 15. Aber es gibt ein Problem, wenn ich meine Karte beginnen mit Zoom = zum Beispiel 7,Wie schrittweise in Prospekt, Javascript

var leafletMap = L.map('map').setView([52.00, 19.64], 7);

weil die Vektor-Fliesen sind nicht 0-7 calcuated beeing, aber nur an der 7, so „meine Funktion“ nicht gut funktioniert .

Ich denke, dass die Lösung sein wird, Karte auf Zoom 0 zu starten, und dann in Schleife Zoom auf 7 erhöhen. Aber ich weiß nicht wie.

habe ich versucht, dies ist aber nicht mit mehreren zoomt arbeiten ...

setTimeout(function() { 
    leafletMap.setZoom(2);  
}, 300); 
... 
setTimeout(function() { 
    leafletMap.setZoom(7);  
}, 300);

Quelle

2016-07-29 Maciej Wójcik

Können zeigen Sie den Code in GeoJSON-vt geändert oder zumindest Ihre benutzerdefinierten Funktionen und den Code, den sie nennt? Ich bin mir nicht sicher, ob das Animieren des Zooms dazu führt, dass Ihre Funktionen ausgeführt werden, und daher möglicherweise nicht die richtigen Vektorebenen bei jeder Zoomstufe zeichnen. – nothingisnecessary

Hier ist ein Beispiel, das zeigt, wie sich allmählich vergrößern. Ein Teil des Problems mit Ihrem Code ist, dass Sie sequenzielle Methoden mit der gleichen Verzögerung aufgerufen haben, so dass sie nacheinander ausgeführt werden. Wenn Sie die Millisekunden so ändern, dass sie zunehmen (300, 600, 900, ...), dann sehen Sie tatsächlich den animierten Zoom.

Dies war ein schnelles Beispiel mit OSM-Kacheln und nicht geojson-vt, so dass es ein wenig klobig aussieht, bis Ihr Browser die Kacheln zwischenspeichert. Mit geojson-vt erstellen Sie jedoch Ihre eigenen lokalen Vektorkacheln und sollten daher etwas glatter sein.

Ich bin mir jedoch nicht sicher, dass dies Ihr Problem lösen wird, weil Sie den Code, den Sie in geojson-vt geändert haben, nicht angezeigt haben. Es kann sein, dass Ihre Funktionen nicht auslöst, aber bis Sie diese benutzerdefinierten Funktionen zeigen, wird es schwierig, eine richtige Antwort auf Ihre Frage zu bekommen.

var zoomDelayMs = 600; // milliseconds for animation delay 
 
var maxZoom = 18; 
 
var initialZoom = 7; 
 

 
// Create the map 
 
var map = L.map('map').setView([39.5, -0.5], initialZoom); 
 

 
// Set up the OSM layer 
 
var baseLayer = L.tileLayer(
 
    'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { 
 
    maxZoom: maxZoom 
 
    }).addTo(map); 
 

 
// function to zoom in gradually from initialZoom to maxZoom 
 
slowZoom = function() { 
 
    // reset zoom to default 
 
    var zoom = initialZoom; 
 
    map.setZoom(zoom); 
 

 
    // if already in middle of slow zoom, stop it 
 
    if (map.zoomtimer) clearInterval(map.zoomtimer); 
 

 
    // zoom in one level every zoomDelayMs 
 
    map.zoomtimer = setInterval(function() { 
 
    if (zoom < maxZoom) 
 
     map.setZoom(++zoom); 
 
    else { 
 
     clearInterval(map.zoomtimer); 
 
     map.zoomtimer = 0; 
 
    } 
 
    }, zoomDelayMs); 
 
}

#map { 
 
    height: 400px; 
 
} 
 
input { 
 
    font-size: 1.6em; 
 
}

<link href="https://npmcdn.com/[email protected]/dist/leaflet.css" rel="stylesheet" /> 
 
<script src="https://npmcdn.com/[email protected]/dist/leaflet.js"></script> 
 
<input type='button' onclick='slowZoom()' value='Start slow zoom' /> 
 
<div id="map"></div>

Quelle

2016-07-30 06:07:21 nothingisnecessary

Wie schrittweise in Prospekt, Javascript

Antwort

Verwandte Themen