Example demonstrating view.setMinZoom()
This commit is contained in:
12
examples/min-zoom.html
Normal file
12
examples/min-zoom.html
Normal 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
36
examples/min-zoom.js
Normal 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);
|
||||||
|
}
|
||||||
|
});
|
||||||
Reference in New Issue
Block a user