diff --git a/examples/center.html b/examples/center.html new file mode 100644 index 0000000000..20eff037c4 --- /dev/null +++ b/examples/center.html @@ -0,0 +1,135 @@ + + + + + + + + + + + + Advanced View Positioning example + + + +
+
+
+ OpenLayers 3 Examples +
+
+
+ +
+ +
+
+
+
+
+
+
+
+
+
+ +
+
+ (best fit),
+ (respect resolution constraint).
+ (nearest),
+ (with min resolution),
+ +
+
+ +
+ +
+

Advanced View Positioning example

+

This example demonstrates how a map's view can be + adjusted so a geometry or coordinate is positioned at a specific + pixel location. The map above has top, right, bottom, and left + padding applied inside the viewport. The view's fitGeometry method + is used to fit a geometry in the view with the same padding. The + view's centerOn method is used to position a coordinate (Lausanne) + at a specific pixel location (the center of the black box).

+
+

Use Alt+Shift+drag to rotate the map.

+

See the center.js source to see how this is done.

+
+
center, rotation, openstreetmap
+
+ +
+ +
+ + + + + + + diff --git a/examples/center.js b/examples/center.js new file mode 100644 index 0000000000..23c2770885 --- /dev/null +++ b/examples/center.js @@ -0,0 +1,128 @@ +goog.require('ol.Map'); +goog.require('ol.View2D'); +goog.require('ol.geom.Point'); +goog.require('ol.geom.SimpleGeometry'); +goog.require('ol.layer.Tile'); +goog.require('ol.layer.Vector'); +goog.require('ol.source.GeoJSON'); +goog.require('ol.source.OSM'); +goog.require('ol.style.Circle'); +goog.require('ol.style.Fill'); +goog.require('ol.style.Stroke'); +goog.require('ol.style.Style'); + +var source = new ol.source.GeoJSON({ + projection: 'EPSG:3857', + url: 'data/geojson/switzerland.geojson' +}); +var style = new ol.style.Style({ + fill: new ol.style.Fill({ + color: 'rgba(255, 255, 255, 0.6)' + }), + stroke: new ol.style.Stroke({ + color: '#319FD3', + width: 1 + }), + image: new ol.style.Circle({ + radius: 5, + fill: new ol.style.Fill({ + color: 'rgba(255, 255, 255, 0.6)' + }), + stroke: new ol.style.Stroke({ + color: '#319FD3', + width: 1 + }) + }) +}); +var vectorLayer = new ol.layer.Vector({ + source: source, + style: style +}); +var view = new ol.View2D({ + center: [0, 0], + zoom: 1 +}); +var map = new ol.Map({ + layers: [ + new ol.layer.Tile({ + source: new ol.source.OSM() + }), + vectorLayer + ], + renderer: 'canvas', + target: 'map', + view: view +}); + +var zoomtoswitzerlandbest = document.getElementById('zoomtoswitzerlandbest'); +zoomtoswitzerlandbest.addEventListener('click', function() { + var feature = source.getFeatures()[0]; + var polygon = /** @type {ol.geom.SimpleGeometry} */ (feature.getGeometry()); + var size = /** @type {ol.Size} */ (map.getSize()); + view.fitGeometry( + polygon, + size, + { + padding: [170, 50, 30, 150], + constrainResolution: false + } + ); +}, false); + +var zoomtoswitzerlandconstrained = + document.getElementById('zoomtoswitzerlandconstrained'); +zoomtoswitzerlandconstrained.addEventListener('click', function() { + var feature = source.getFeatures()[0]; + var polygon = /** @type {ol.geom.SimpleGeometry} */ (feature.getGeometry()); + var size = /** @type {ol.Size} */ (map.getSize()); + view.fitGeometry( + polygon, + size, + { + padding: [170, 50, 30, 150] + } + ); +}, false); + +var zoomtoswitzerlandnearest = + document.getElementById('zoomtoswitzerlandnearest'); +zoomtoswitzerlandnearest.addEventListener('click', function() { + var feature = source.getFeatures()[0]; + var polygon = /** @type {ol.geom.SimpleGeometry} */ (feature.getGeometry()); + var size = /** @type {ol.Size} */ (map.getSize()); + view.fitGeometry( + polygon, + size, + { + padding: [170, 50, 30, 150], + nearest: true + } + ); +}, false); + +var zoomtolausanne = document.getElementById('zoomtolausanne'); +zoomtolausanne.addEventListener('click', function() { + var feature = source.getFeatures()[1]; + var point = /** @type {ol.geom.SimpleGeometry} */ (feature.getGeometry()); + var size = /** @type {ol.Size} */ (map.getSize()); + view.fitGeometry( + point, + size, + { + padding: [170, 50, 30, 150], + minResolution: 50 + } + ); +}, false); + +var centerlausanne = document.getElementById('centerlausanne'); +centerlausanne.addEventListener('click', function() { + var feature = source.getFeatures()[1]; + var point = /** @type {ol.geom.Point} */ (feature.getGeometry()); + var size = /** @type {ol.Size} */ (map.getSize()); + view.centerOn( + point.getCoordinates(), + size, + [570, 500] + ); +}, false); diff --git a/examples/data/geojson/switzerland.geojson b/examples/data/geojson/switzerland.geojson new file mode 100644 index 0000000000..eea0851bfd --- /dev/null +++ b/examples/data/geojson/switzerland.geojson @@ -0,0 +1,4 @@ +{"type":"FeatureCollection","features":[ +{"type":"Feature","id":"CHE","properties":{"name":"Switzerland"},"geometry":{"type":"Polygon","coordinates":[[[9.594226,47.525058],[9.632932,47.347601],[9.47997,47.10281],[9.932448,46.920728],[10.442701,46.893546],[10.363378,46.483571],[9.922837,46.314899],[9.182882,46.440215],[8.966306,46.036932],[8.489952,46.005151],[8.31663,46.163642],[7.755992,45.82449],[7.273851,45.776948],[6.843593,45.991147],[6.5001,46.429673],[6.022609,46.27299],[6.037389,46.725779],[6.768714,47.287708],[6.736571,47.541801],[7.192202,47.449766],[7.466759,47.620582],[8.317301,47.61358],[8.522612,47.830828],[9.594226,47.525058]]]}}, +{"type":"Feature","id":"LSNE","properties":{"name":"Lausanne"},"geometry":{"type":"Point","coordinates":[6.6339863,46.5193823]}} +]}