ashatora/openlayers
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

example - layer-extent uses country bboxes

Browse Source
This commit is contained in:
Ian Schneider
2016-06-15 21:13:49 -06:00
parent 44a4fbdda2
commit 265068e782
2 changed files with 11 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
examples/layer-extent.html
View File

@@ -4,14 +4,12 @@ title: Limited Layer Extent
shortdesc: Restricting layer rendering to a limited extent.
docs: >
This example uses the <code>layer.setExtent()</code> method to
modify the extent of the overlay layer. Use the controls below
to limit rendering based on an extent.
modify the extent of the overlay layer. Use the controls above
to limit rendering based on an extent (approximate country bounds).
tags: "extent, tilejson"
---
<div id="map" class="map"></div>
<button type="button" class="btn btn-default" id="northwest">northwest</button>
<button type="button" class="btn btn-default" id="northeast">northeast</button>
<button type="button" class="btn btn-default" id="southeast">southeast</button>
<button type="button" class="btn btn-default" id="southwest">southwest</button>
<button type="button" class="btn btn-default" id="world">world</button>
<button type="button" class="btn btn-default" id="draw">draw</button>
<button type="button" class="btn btn-default" id="India">India</button>
<button type="button" class="btn btn-default" id="Argentina">Argentina</button>
<button type="button" class="btn btn-default" id="Nigeria">Nigeria</button>
<button type="button" class="btn btn-default" id="Sweden">Sweden</button>

41
examples/layer-extent.js
View File

@@ -3,7 +3,6 @@ goog.require('ol.View');
goog.require('ol.layer.Tile');
goog.require('ol.proj');
goog.require('ol.source.TileJSON');
goog.require('ol.interaction.Draw');
goog.require('ol.interaction.DragRotateAndZoom');
function transform(extent) {
@@ -11,11 +10,10 @@ function transform(extent) {
}
var extents = {
northwest: transform([-180, 0, 0, 85]),
northeast: transform([0, 0, 180, 85]),
southeast: transform([0, -85, 180, 0]),
southwest: transform([-180, -85, 0, 0]),
world: transform([-180, -85, 180, 85])
India: transform([68.17665, 7.96553, 97.40256, 35.49401]),
Argentina: transform([-73.41544, -55.25, -53.62835, -21.83231]),
Nigeria: transform([2.6917, 4.24059, 14.57718, 13.86592]),
Sweden: transform([11.02737, 55.36174, 23.90338, 69.10625])
};
var base = new ol.layer.Tile({
@@ -27,7 +25,7 @@ var base = new ol.layer.Tile({
});
var overlay = new ol.layer.Tile({
extent: extents.northwest,
extent: extents.India,
source: new ol.source.TileJSON({
url: 'http://api.tiles.mapbox.com/v3/' +
'mapbox.world-glass.json',
@@ -45,37 +43,8 @@ var map = new ol.Map({
})
});
function box(coordinates, geometry) {
if (!geometry) {
geometry = new ol.geom.Polygon(null);
}
var start = coordinates[0];
var end = coordinates[1];
geometry.setCoordinates([
[start, [start[0], end[1]], end, [end[0], start[1]], start]
]);
return geometry;
}
var draw = new ol.interaction.Draw({
type: /** @type {ol.geom.GeometryType} */ ('LineString'),
geometryFunction: box,
maxPoints: 2
});
draw.on('drawend', function(ev) {
var extent = ev.feature.getGeometry().getExtent();
overlay.setExtent(extent);
});
map.addInteraction(new ol.interaction.DragRotateAndZoom());
document.getElementById('draw').onclick = function() {
map.addInteraction(draw);
};
for (var key in extents) {
document.getElementById(key).onclick = function(event) {
overlay.setExtent(extents[event.target.id]);