Example demonstrating view.setMinZoom()

This commit is contained in:
Tim Schaub
2017-03-27 14:24:31 -06:00
parent e9c340b957
commit b1f4e14281
2 changed files with 48 additions and 0 deletions

12
examples/min-zoom.html Normal file
View File

@@ -0,0 +1,12 @@
---
layout: example.html
title: View Min-Zoom
shortdesc: Demonstrates how the view's minimum zoom level can be changed.
docs: >
The <code>minZoom</code> option for a view limits how far out you can
zoom. This property can be updated by calling <code>view.setMinZoom(newMinZoom)</code>.
In this example, the minimum zoom level is set so that you only see one
world at a time. Resize your browser window to change the threshold.
tags: "min, zoom"
---
<div id="map" class="map"></div>

36
examples/min-zoom.js Normal file
View File

@@ -0,0 +1,36 @@
goog.require('ol.Map');
goog.require('ol.View');
goog.require('ol.layer.Tile');
goog.require('ol.source.OSM');
var viewport = document.getElementById('map');
function getMinZoom() {
var width = viewport.clientWidth;
return Math.ceil(Math.LOG2E * Math.log(width / 256));
}
var initialZoom = getMinZoom();
var view = new ol.View({
center: [0, 0],
minZoom: initialZoom,
zoom: initialZoom
});
var map = new ol.Map({
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
target: 'map',
view: view
});
window.addEventListener('resize', function() {
var minZoom = getMinZoom();
if (minZoom !== view.getMinZoom()) {
view.setMinZoom(minZoom);
}
});