Merge pull request #1746 from sbrunner/fitcoordinates
Fit coordinates on visible map, Center coodinate on positions
This commit is contained in:
Tom Payne
135
examples/center.html
Normal file
135
examples/center.html
Normal file
@@ -0,0 +1,135 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="chrome=1">
|
||||
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
|
||||
<link rel="stylesheet" href="../css/ol.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/layout.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
|
||||
<style>
|
||||
.mapcontainer {
|
||||
position: relative;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.map {
|
||||
width: 1000px;
|
||||
height: 600px;
|
||||
}
|
||||
div.ol-zoom {
|
||||
top: 178px;
|
||||
left: 158px;
|
||||
}
|
||||
div.ol-logo {
|
||||
left: 150px;
|
||||
bottom: 30px;
|
||||
}
|
||||
div.ol-attribution {
|
||||
bottom: 30px;
|
||||
right: 50px;
|
||||
}
|
||||
.padding-top {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0px;
|
||||
width: 1000px;
|
||||
height: 170px;
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
.padding-left {
|
||||
position: absolute;
|
||||
top: 170px;
|
||||
left: 0;
|
||||
width: 150px;
|
||||
height: 400px;
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
.padding-right {
|
||||
position: absolute;
|
||||
top: 170px;
|
||||
left: 950px;
|
||||
width: 50px;
|
||||
height: 400px;
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
.padding-bottom {
|
||||
position: absolute;
|
||||
top: 570px;
|
||||
left: 0px;
|
||||
width: 1000px;
|
||||
height: 30px;
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
.center {
|
||||
position: absolute;
|
||||
border: solid 1px black;
|
||||
top: 490px;
|
||||
left: 560px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
</style>
|
||||
<title>Advanced View Positioning example</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="navbar navbar-inverse navbar-fixed-top">
|
||||
<div class="navbar-inner">
|
||||
<div class="container">
|
||||
<a class="brand" href="./"><img src="../resources/logo.png">OpenLayers 3 Examples</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container-fluid">
|
||||
|
||||
<div class="row-fluid">
|
||||
<div class="span12 mapcontainer">
|
||||
<div id="map" class="map"></div>
|
||||
<div class="padding-top"></div>
|
||||
<div class="padding-left"></div>
|
||||
<div class="padding-right"></div>
|
||||
<div class="padding-bottom"></div>
|
||||
<div class="center"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row-fluid">
|
||||
<div class="span12">
|
||||
<button id="zoomtoswitzerlandbest">Zoom to Switzerland</button> (best fit),<br/>
|
||||
<button id="zoomtoswitzerlandconstrained">Zoom to Switzerland</button> (respect resolution constraint).<br/>
|
||||
<button id="zoomtoswitzerlandnearest">Zoom to Switzerland</button> (nearest),<br/>
|
||||
<button id="zoomtolausanne">Zoom to Lausanne</button> (with min resolution),<br/>
|
||||
<button id="centerlausanne">Center on Lausanne</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row-fluid">
|
||||
|
||||
<div class="span12">
|
||||
<h4 id="title">Advanced View Positioning example</h4>
|
||||
<p id="shortdesc">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 <code>fitGeometry</code> method
|
||||
is used to fit a geometry in the view with the same padding. The
|
||||
view's <code>centerOn</code> method is used to position a coordinate (Lausanne)
|
||||
at a specific pixel location (the center of the black box).</p>
|
||||
<div id="docs">
|
||||
<p>Use <code>Alt</code>+<code>Shift</code>+drag to rotate the map.</p>
|
||||
<p>See the <a href="center.js" target="_blank">center.js source</a> to see how this is done.</p>
|
||||
</div>
|
||||
<div id="tags">center, rotation, openstreetmap</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script src="jquery.min.js" type="text/javascript"></script>
|
||||
<script src="loader.js?id=center" type="text/javascript"></script>
|
||||
<script src="../resources/example-behaviour.js" type="text/javascript"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
128
examples/center.js
Normal file
128
examples/center.js
Normal file
@@ -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);
|
||||
4
examples/data/geojson/switzerland.geojson
Normal file
4
examples/data/geojson/switzerland.geojson
Normal file
@@ -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]}}
|
||||
]}
|
||||
@@ -1074,3 +1074,12 @@
|
||||
* @property {!Array.<number>} resolutions Resolutions.
|
||||
* @todo stability experimental
|
||||
*/
|
||||
|
||||
/**
|
||||
* @typedef {Object} olx.View2D.fitGeometryOptions
|
||||
* @property {!Array.<number>} padding Padding (in pixels) to be cleared inside the view. Values in the array are top, right, bottom and left padding. Default is `[0, 0, 0, 0]`.
|
||||
* @property {boolean|undefined} constrainResolution Constrain the resolution. Default is `true`.
|
||||
* @property {boolean|undefined} nearest Get the nearest extent. Default is `false`.
|
||||
* @property {number|undefined} minResolution Minimum resolution that we zoom to. Default is `0`.
|
||||
* @todo stability experimental
|
||||
*/
|
||||
|
||||
@@ -3,6 +3,8 @@
|
||||
@exportProperty ol.View2D.prototype.constrainResolution
|
||||
@exportProperty ol.View2D.prototype.constrainRotation
|
||||
@exportProperty ol.View2D.prototype.fitExtent
|
||||
@exportProperty ol.View2D.prototype.fitGeometry
|
||||
@exportProperty ol.View2D.prototype.centerOn
|
||||
@exportProperty ol.View2D.prototype.getView2D
|
||||
@exportProperty ol.View2D.prototype.getZoom
|
||||
@exportProperty ol.View2D.prototype.setZoom
|
||||
|
||||
@@ -430,6 +430,101 @@ ol.View2D.prototype.fitExtent = function(extent, size) {
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Fit the given geometry based on the given map size and border.
|
||||
* Take care on the map angle.
|
||||
* @param {ol.geom.SimpleGeometry} geometry Geometry.
|
||||
* @param {ol.Size} size Box pixel size.
|
||||
* @param {olx.View2D.fitGeometryOptions=} opt_options Options.
|
||||
* @todo stability experimental
|
||||
*/
|
||||
ol.View2D.prototype.fitGeometry = function(geometry, size, opt_options) {
|
||||
var options = goog.isDef(opt_options) ? opt_options : {};
|
||||
|
||||
var padding = goog.isDef(options.padding) ? options.padding : [0, 0, 0, 0];
|
||||
var constrainResolution = goog.isDef(options.constrainResolution) ?
|
||||
options.constrainResolution : true;
|
||||
var nearest = goog.isDef(options.nearest) ? options.nearest : false;
|
||||
var minResolution = goog.isDef(options.minResolution) ?
|
||||
options.minResolution : 0;
|
||||
var coords = geometry.getFlatCoordinates();
|
||||
|
||||
// calculate rotated extent
|
||||
var rotation = this.getRotation();
|
||||
goog.asserts.assert(goog.isDef(rotation));
|
||||
var cosAngle = Math.cos(-rotation);
|
||||
var sinAngle = Math.sin(-rotation);
|
||||
var minRotX = +Infinity;
|
||||
var minRotY = +Infinity;
|
||||
var maxRotX = -Infinity;
|
||||
var maxRotY = -Infinity;
|
||||
var stride = geometry.getStride();
|
||||
for (var i = 0, ii = coords.length; i < ii; i += stride) {
|
||||
var rotX = coords[i] * cosAngle - coords[i + 1] * sinAngle;
|
||||
var rotY = coords[i] * sinAngle + coords[i + 1] * cosAngle;
|
||||
minRotX = Math.min(minRotX, rotX);
|
||||
minRotY = Math.min(minRotY, rotY);
|
||||
maxRotX = Math.max(maxRotX, rotX);
|
||||
maxRotY = Math.max(maxRotY, rotY);
|
||||
}
|
||||
|
||||
// calculate resolution
|
||||
var resolution = this.getResolutionForExtent(
|
||||
[minRotX, minRotY, maxRotX, maxRotY],
|
||||
[size[0] - padding[1] - padding[3], size[1] - padding[0] - padding[2]]);
|
||||
resolution = isNaN(resolution) ? minResolution :
|
||||
Math.max(resolution, minResolution);
|
||||
if (constrainResolution) {
|
||||
var constrainedResolution = this.constrainResolution(resolution, 0, 0);
|
||||
if (!nearest && constrainedResolution < resolution) {
|
||||
constrainedResolution = this.constrainResolution(
|
||||
constrainedResolution, -1, 0);
|
||||
}
|
||||
resolution = constrainedResolution;
|
||||
}
|
||||
this.setResolution(resolution);
|
||||
|
||||
// calculate center
|
||||
sinAngle = -sinAngle; // go back to original rotation
|
||||
var centerRotX = (minRotX + maxRotX) / 2;
|
||||
var centerRotY = (minRotY + maxRotY) / 2;
|
||||
centerRotX += (padding[1] - padding[3]) / 2 * resolution;
|
||||
centerRotY += (padding[0] - padding[2]) / 2 * resolution;
|
||||
var centerX = centerRotX * cosAngle - centerRotY * sinAngle;
|
||||
var centerY = centerRotY * cosAngle + centerRotX * sinAngle;
|
||||
|
||||
this.setCenter([centerX, centerY]);
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Center on coordinate and view position.
|
||||
* Take care on the map angle.
|
||||
* @param {ol.Coordinate} coordinate Coordinate.
|
||||
* @param {ol.Size} size Box pixel size.
|
||||
* @param {ol.Pixel} position Position on the view to center on.
|
||||
* @todo stability experimental
|
||||
*/
|
||||
ol.View2D.prototype.centerOn = function(coordinate, size, position) {
|
||||
// calculate rotated position
|
||||
var rotation = this.getRotation();
|
||||
var cosAngle = Math.cos(-rotation);
|
||||
var sinAngle = Math.sin(-rotation);
|
||||
var rotX = coordinate[0] * cosAngle - coordinate[1] * sinAngle;
|
||||
var rotY = coordinate[1] * cosAngle + coordinate[0] * sinAngle;
|
||||
var resolution = this.getResolution();
|
||||
rotX += (size[0] / 2 - position[0]) * resolution;
|
||||
rotY += (position[1] - size[1] / 2) * resolution;
|
||||
|
||||
// go back to original angle
|
||||
sinAngle = -sinAngle; // go back to original rotation
|
||||
var centerX = rotX * cosAngle - rotY * sinAngle;
|
||||
var centerY = rotY * cosAngle + rotX * sinAngle;
|
||||
|
||||
this.setCenter([centerX, centerY]);
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* @return {boolean} Is defined.
|
||||
*/
|
||||
|
||||
@@ -102,6 +102,106 @@ describe('ol.View2D', function() {
|
||||
expect(view.getZoom()).to.be(undefined);
|
||||
});
|
||||
});
|
||||
|
||||
describe('fitGeometry', function() {
|
||||
var view;
|
||||
beforeEach(function() {
|
||||
view = new ol.View2D({
|
||||
resolutions: [200, 100, 50, 20, 10, 5, 2, 1]
|
||||
});
|
||||
});
|
||||
it('fit correctly to the geometry', function() {
|
||||
view.fitGeometry(
|
||||
new ol.geom.LineString([[6000, 46000], [6000, 47100], [7000, 46000]]),
|
||||
[200, 200],
|
||||
{
|
||||
padding: [100, 0, 0, 100],
|
||||
constrainResolution: false
|
||||
}
|
||||
);
|
||||
expect(view.getResolution()).to.be(11);
|
||||
expect(view.getCenter()[0]).to.be(5950);
|
||||
expect(view.getCenter()[1]).to.be(47100);
|
||||
|
||||
view.fitGeometry(
|
||||
new ol.geom.LineString([[6000, 46000], [6000, 47100], [7000, 46000]]),
|
||||
[200, 200],
|
||||
{
|
||||
padding: [100, 0, 0, 100]
|
||||
}
|
||||
);
|
||||
expect(view.getResolution()).to.be(20);
|
||||
expect(view.getCenter()[0]).to.be(5500);
|
||||
expect(view.getCenter()[1]).to.be(47550);
|
||||
|
||||
view.fitGeometry(
|
||||
new ol.geom.LineString([[6000, 46000], [6000, 47100], [7000, 46000]]),
|
||||
[200, 200],
|
||||
{
|
||||
padding: [100, 0, 0, 100],
|
||||
nearest: true
|
||||
}
|
||||
);
|
||||
expect(view.getResolution()).to.be(10);
|
||||
expect(view.getCenter()[0]).to.be(6000);
|
||||
expect(view.getCenter()[1]).to.be(47050);
|
||||
|
||||
view.fitGeometry(
|
||||
new ol.geom.Point([6000, 46000]),
|
||||
[200, 200],
|
||||
{
|
||||
padding: [100, 0, 0, 100],
|
||||
minResolution: 2
|
||||
}
|
||||
);
|
||||
expect(view.getResolution()).to.be(2);
|
||||
expect(view.getCenter()[0]).to.be(5900);
|
||||
expect(view.getCenter()[1]).to.be(46100);
|
||||
|
||||
view.setRotation(Math.PI / 4);
|
||||
view.fitGeometry(
|
||||
new ol.geom.LineString([[6000, 46000], [6000, 47100], [7000, 46000]]),
|
||||
[200, 200],
|
||||
{
|
||||
padding: [100, 0, 0, 100],
|
||||
constrainResolution: false
|
||||
}
|
||||
);
|
||||
expect(view.getResolution()).to.be(14.849242404917458);
|
||||
expect(view.getCenter()[0]).to.be(5200.000000000011);
|
||||
expect(view.getCenter()[1]).to.be(46300);
|
||||
});
|
||||
});
|
||||
|
||||
describe('centerOn', function() {
|
||||
var view;
|
||||
beforeEach(function() {
|
||||
view = new ol.View2D({
|
||||
resolutions: [200, 100, 50, 20, 10, 5, 2, 1]
|
||||
});
|
||||
});
|
||||
it('fit correctly to the coordinates', function() {
|
||||
view.setResolution(10);
|
||||
view.centerOn(
|
||||
[6000, 46000],
|
||||
[400, 400],
|
||||
[300, 300]
|
||||
);
|
||||
expect(view.getCenter()[0]).to.be(5000);
|
||||
expect(view.getCenter()[1]).to.be(47000);
|
||||
|
||||
view.setRotation(Math.PI / 4);
|
||||
view.centerOn(
|
||||
[6000, 46000],
|
||||
[400, 400],
|
||||
[300, 300]
|
||||
);
|
||||
expect(view.getCenter()[0]).to.be(4585.78643762691);
|
||||
expect(view.getCenter()[1]).to.be(46000);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
goog.require('ol.View2D');
|
||||
goog.require('ol.geom.LineString');
|
||||
goog.require('ol.geom.Point');
|
||||
|
||||
Reference in New Issue
Block a user