如何逐漸放大單張，javascript

我使用傳單和geojson-vt太地圖和一些矢量瓷磚線。我在geojson-vt中做了一些修改，因爲我需要在切片時添加一些我的功能。一切工作正常，當我從縮放1開始我的leafletMap，然後通過鼠標滾輪增加縮放，例如縮放= 15。但有一個問題，當我開始我的地圖與變焦=例如7，如何逐漸放大單張，javascript

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

因爲矢量磚不beeing從0 calcuated至7，但僅在7，所以「我的功能」不運作良好。

我認爲解決方案將在縮放0開始地圖，然後在循環增加縮放到7，但我不知道如何。

我試過，但它不與多個變焦的工作...

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

來源

2016-07-29 Maciej Wójcik

你能告訴你在以GeoJSON-VT改變了代碼，或者至少你的自定義功能和調用它們的代碼？我不確定簡單地使用縮放動畫會導致您的函數執行，因此可能無法在每個縮放級別繪製正確的矢量圖層。 – nothingisnecessary

下面是說明如何逐步放大的例子。你的代碼的部分問題是你調用連續的setTimeout方法具有相同的延遲，因此它們將被一個接一個地執行。如果您改變毫秒以增加（（300,600,900，...），那麼您實際上會看到動畫縮放。

這是使用OSM瓷磚而不是geojson-vt的快速示例，因此在您的瀏覽器緩存瓷磚之前它看起來有點笨重。但是，使用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/[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>

來源

2016-07-30 06:07:21 nothingisnecessary

如何逐漸放大單張，javascript

回答

相關問題