リーフレットで徐々にズームする方法、javascript

Question

リーフレットとgeojson-vtもマップを使い、ベクトルタイルでいくつかの線を使用します。私はgeojson-vtでいくつかの修正を加えました。なぜなら、タイルをスライスするときに私の関数をいくつか追加する必要があるからです。 ズームは1からリーフレットを開始し、マウスホイールでズームを増やすなど、ズーム= 15にすると、すべてうまく動作します。私は例7用のズーム=と私の地図を起動したときしかし

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

ベクトルタイルは、0から7までのcalcuated beeingていませんので

が、唯一の7で、そう「私の機能」、問題があるだけでなく働いていけません。

私は解決策がズーム0でマップを開始し、次にループ7でズームを増やすことになると思います。しかし、私はどのように知っていますか。

が、私はこれを試みたが、それは、複数のズームで作業されていません...ここで

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

Answer 1

は徐々にズームインする方法を示す例です。あなたのコードの問題の一部は、同じ遅れで連続したsetTimeoutメソッドを呼び出したため、直ちに実行されます。ミリ秒を変更して（300、600、900、...）すると、実際にズームが表示されます。

これは、geojson-vtではなくOSMタイルを使用した簡単な例でした。そのため、ブラウザがタイルをキャッシュするまで、ちょっとしたように見えます。しかし、geojson-vtでは独自のローカルベクトルタイルを作成しているので、少しスムーズになります。

ただし、geojson-vtで変更したコードを表示していないため、これで問題が解決するかどうかはわかりません。 setZoom()があなたの関数をトリガしていないかもしれませんが、それらのカスタム関数を表示するまで、あなたの質問に適切な答えを得るのは難しいでしょう。

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/leaflet@0.7.7/dist/leaflet.css" rel="stylesheet" /> 
 
<script src="https://npmcdn.com/leaflet@0.7.7/dist/leaflet.js"></script> 
 
<input type='button' onclick='slowZoom()' value='Start slow zoom' /> 
 
<div id="map"></div>