Merge pull request #295 from openlayers/refactor-examples
Refactor examples
This commit is contained in:
Tom Payne
60
examples/animation.html
Normal file
60
examples/animation.html
Normal file
@@ -0,0 +1,60 @@
|
||||
<!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="bootstrap/css/bootstrap.min.css" type="text/css">
|
||||
<link rel="stylesheet" href="examples.css" type="text/css">
|
||||
<link rel="stylesheet" href="bootstrap/css/bootstrap-responsive.min.css" type="text/css">
|
||||
<title>Animation example</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="navbar navbar-inverse navbar-fixed-top">
|
||||
<div class="navbar-inner">
|
||||
<div class="container">
|
||||
<a class="brand" href="example-list.html">OpenLayers 3 Examples</a>
|
||||
<ul class="nav pull-right">
|
||||
<li><a href="https://github.com/openlayers/ol3"><i class="icon-github"></i></a></li>
|
||||
<li><a href="https://twitter.com/openlayers"><i class="icon-twitter"></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container-fluid">
|
||||
|
||||
<div class="row-fluid">
|
||||
<div class="span12">
|
||||
<div id="map" class="map"></div>
|
||||
<button id="rotate-left"><i class="icon-arrow-left"></i></button>
|
||||
<button>Rotate</button>
|
||||
<button id="rotate-right"><i class="icon-arrow-right"></i></button>
|
||||
</div>
|
||||
<button id="pan-to-london">Pan to London</button>
|
||||
<button id="elastic-to-moscow">Elastic to Moscow</button>
|
||||
<button id="bounce-to-instanbul">Bounce to Instanbul</button>
|
||||
<button id="spin-to-rome">Spin to Rome</button>
|
||||
<button id="fly-to-bern">Fly to Bern</button>
|
||||
</div>
|
||||
|
||||
<div class="row-fluid">
|
||||
|
||||
<div class="span4">
|
||||
<h4 id="title">Animation example</h4>
|
||||
<p id="shortdesc">Example animations.</p>
|
||||
<div id="docs">
|
||||
<p>See the <a href="animation.js" target="_blank">animation.js source</a> to see how this is done.</p>
|
||||
</div>
|
||||
<div id="tags">animation</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script src="loader.js?id=animation" type="text/javascript"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
122
examples/animation.js
Normal file
122
examples/animation.js
Normal file
@@ -0,0 +1,122 @@
|
||||
goog.require('ol.Coordinate');
|
||||
goog.require('ol.Map');
|
||||
goog.require('ol.RendererHints');
|
||||
goog.require('ol.View2D');
|
||||
goog.require('ol.animation');
|
||||
goog.require('ol.easing');
|
||||
goog.require('ol.layer.TileLayer');
|
||||
goog.require('ol.projection');
|
||||
goog.require('ol.source.OpenStreetMap');
|
||||
|
||||
|
||||
var london = ol.projection.transformWithCodes(
|
||||
new ol.Coordinate(-0.12755, 51.507222), 'EPSG:4326', 'EPSG:3857');
|
||||
var moscow = ol.projection.transformWithCodes(
|
||||
new ol.Coordinate(37.6178, 55.7517), 'EPSG:4326', 'EPSG:3857');
|
||||
var instanbul = ol.projection.transformWithCodes(
|
||||
new ol.Coordinate(28.9744, 41.0128), 'EPSG:4326', 'EPSG:3857');
|
||||
var rome = ol.projection.transformWithCodes(
|
||||
new ol.Coordinate(12.5, 41.9), 'EPSG:4326', 'EPSG:3857');
|
||||
var bern = ol.projection.transformWithCodes(
|
||||
new ol.Coordinate(7.4458, 46.95), 'EPSG:4326', 'EPSG:3857');
|
||||
|
||||
var map = new ol.Map({
|
||||
layers: [
|
||||
new ol.layer.TileLayer({
|
||||
source: new ol.source.OpenStreetMap()
|
||||
})
|
||||
],
|
||||
renderers: ol.RendererHints.createFromQueryData(),
|
||||
target: 'map',
|
||||
view: new ol.View2D({
|
||||
center: instanbul,
|
||||
zoom: 6
|
||||
})
|
||||
});
|
||||
|
||||
|
||||
var rotateLeft = document.getElementById('rotate-left');
|
||||
rotateLeft.addEventListener('click', function() {
|
||||
var rotateLeft = ol.animation.rotate({
|
||||
duration: 2000,
|
||||
rotation: -4 * Math.PI
|
||||
});
|
||||
map.addPreRenderFunction(rotateLeft);
|
||||
}, false);
|
||||
var rotateRight = document.getElementById('rotate-right');
|
||||
rotateRight.addEventListener('click', function() {
|
||||
var rotateRight = ol.animation.rotate({
|
||||
duration: 2000,
|
||||
rotation: 4 * Math.PI
|
||||
});
|
||||
map.addPreRenderFunction(rotateRight);
|
||||
}, false);
|
||||
|
||||
|
||||
var panToLondon = document.getElementById('pan-to-london');
|
||||
panToLondon.addEventListener('click', function() {
|
||||
var pan = ol.animation.pan({
|
||||
source: map.getView().getView2D().getCenter(),
|
||||
duration: 2000
|
||||
});
|
||||
map.addPreRenderFunction(pan);
|
||||
map.getView().getView2D().setCenter(london);
|
||||
}, false);
|
||||
|
||||
var elasticToMoscow = document.getElementById('elastic-to-moscow');
|
||||
elasticToMoscow.addEventListener('click', function() {
|
||||
var pan = ol.animation.pan({
|
||||
source: map.getView().getView2D().getCenter(),
|
||||
duration: 2000,
|
||||
easing: ol.easing.elastic
|
||||
});
|
||||
map.addPreRenderFunction(pan);
|
||||
map.getView().getView2D().setCenter(moscow);
|
||||
}, false);
|
||||
|
||||
var bounceToInstanbul = document.getElementById('bounce-to-instanbul');
|
||||
bounceToInstanbul.addEventListener('click', function() {
|
||||
var pan = ol.animation.pan({
|
||||
source: map.getView().getView2D().getCenter(),
|
||||
duration: 2000,
|
||||
easing: ol.easing.bounce
|
||||
});
|
||||
map.addPreRenderFunction(pan);
|
||||
map.getView().getView2D().setCenter(instanbul);
|
||||
}, false);
|
||||
|
||||
var spinToRome = document.getElementById('spin-to-rome');
|
||||
spinToRome.addEventListener('click', function() {
|
||||
var duration = 2000;
|
||||
var start = +new Date();
|
||||
var pan = ol.animation.pan({
|
||||
duration: duration,
|
||||
source: map.getView().getView2D().getCenter(),
|
||||
start: start
|
||||
});
|
||||
var rotate = ol.animation.rotate({
|
||||
duration: duration,
|
||||
rotation: 2 * Math.PI,
|
||||
start: start
|
||||
});
|
||||
map.addPreRenderFunctions([pan, rotate]);
|
||||
map.getView().getView2D().setCenter(rome);
|
||||
}, false);
|
||||
|
||||
var flyToBern = document.getElementById('fly-to-bern');
|
||||
flyToBern.addEventListener('click', function() {
|
||||
var duration = 2000;
|
||||
var start = +new Date();
|
||||
var pan = ol.animation.pan({
|
||||
duration: duration,
|
||||
source: map.getView().getView2D().getCenter(),
|
||||
start: start
|
||||
});
|
||||
var bounce = ol.animation.bounce({
|
||||
duration: duration,
|
||||
resolution: 4 * map.getView().getView2D().getResolution(),
|
||||
start: start
|
||||
});
|
||||
map.addPreRenderFunctions([pan, bounce]);
|
||||
map.getView().getView2D().setCenter(bern);
|
||||
}, false);
|
||||
52
examples/bing-maps.html
Normal file
52
examples/bing-maps.html
Normal file
@@ -0,0 +1,52 @@
|
||||
<!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="bootstrap/css/bootstrap.min.css" type="text/css">
|
||||
<link rel="stylesheet" href="examples.css" type="text/css">
|
||||
<link rel="stylesheet" href="bootstrap/css/bootstrap-responsive.min.css" type="text/css">
|
||||
<title>Bing Maps example</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="navbar navbar-inverse navbar-fixed-top">
|
||||
<div class="navbar-inner">
|
||||
<div class="container">
|
||||
<a class="brand" href="example-list.html">OpenLayers 3 Examples</a>
|
||||
<ul class="nav pull-right">
|
||||
<li><a href="https://github.com/openlayers/ol3"><i class="icon-github"></i></a></li>
|
||||
<li><a href="https://twitter.com/openlayers"><i class="icon-twitter"></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container-fluid">
|
||||
|
||||
<div class="row-fluid">
|
||||
<div class="span12">
|
||||
<div id="map" class="map"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row-fluid">
|
||||
|
||||
<div class="span4">
|
||||
<h4 id="title">Bing Maps example</h4>
|
||||
<p id="shortdesc">Example of a Bing Maps layer.</p>
|
||||
<div id="docs">
|
||||
<p>See the <a href="bing-maps.js" target="_blank">bing-maps.js source</a> to see how this is done.</p>
|
||||
</div>
|
||||
<div id="tags">bing, bing-maps</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script src="loader.js?id=bing-maps" type="text/javascript"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
26
examples/bing-maps.js
Normal file
26
examples/bing-maps.js
Normal file
@@ -0,0 +1,26 @@
|
||||
goog.require('ol.Coordinate');
|
||||
goog.require('ol.Map');
|
||||
goog.require('ol.RendererHints');
|
||||
goog.require('ol.View2D');
|
||||
goog.require('ol.layer.TileLayer');
|
||||
goog.require('ol.projection');
|
||||
goog.require('ol.source.BingMaps');
|
||||
|
||||
|
||||
var map = new ol.Map({
|
||||
layers: [
|
||||
new ol.layer.TileLayer({
|
||||
source: new ol.source.BingMaps({
|
||||
key: 'AgtFlPYDnymLEe9zJ5PCkghbNiFZE9aAtTy3mPaEnEBXqLHtFuTcKoZ-miMC3w7R',
|
||||
style: 'AerialWithLabels'
|
||||
})
|
||||
})
|
||||
],
|
||||
renderers: ol.RendererHints.createFromQueryData(),
|
||||
target: 'map',
|
||||
view: new ol.View2D({
|
||||
center: ol.projection.transformWithCodes(
|
||||
new ol.Coordinate(-123.1, 49.25), 'EPSG:4326', 'EPSG:3857'),
|
||||
zoom: 8
|
||||
})
|
||||
});
|
||||
62
examples/brightness-contrast.html
Normal file
62
examples/brightness-contrast.html
Normal file
@@ -0,0 +1,62 @@
|
||||
<!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="bootstrap/css/bootstrap.min.css" type="text/css">
|
||||
<link rel="stylesheet" href="examples.css" type="text/css">
|
||||
<link rel="stylesheet" href="bootstrap/css/bootstrap-responsive.min.css" type="text/css">
|
||||
<title>Brightness/contrast example</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="navbar navbar-inverse navbar-fixed-top">
|
||||
<div class="navbar-inner">
|
||||
<div class="container">
|
||||
<a class="brand" href="example-list.html">OpenLayers 3 Examples</a>
|
||||
<ul class="nav pull-right">
|
||||
<li><a href="https://github.com/openlayers/ol3"><i class="icon-github"></i></a></li>
|
||||
<li><a href="https://twitter.com/openlayers"><i class="icon-twitter"></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container-fluid">
|
||||
|
||||
<div class="row-fluid">
|
||||
<div class="span12">
|
||||
<div id="map" class="map"></div>
|
||||
<div class="btn-group">
|
||||
<button id="increase-brightness"><i class="icon-plus"></i></button>
|
||||
<button id="reset-brightness">Brightness</button>
|
||||
<button id="decrease-brightness"><i class="icon-minus"></i></button>
|
||||
</div>
|
||||
<div class="btn-group">
|
||||
<button id="increase-contrast"><i class="icon-plus"></i></button>
|
||||
<button id="reset-contrast">Contrast</button>
|
||||
<button id="decrease-contrast"><i class="icon-minus"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row-fluid">
|
||||
|
||||
<div class="span4">
|
||||
<h4 id="title">Brightness/contrast example</h4>
|
||||
<p id="shortdesc">Example of brightness/contrast control on the client (WebGL only).</p>
|
||||
<div id="docs">
|
||||
<p>See the <a href="brightness-contrast.js" target="_blank">brightness-contrast.js source</a> to see how this is done.</p>
|
||||
</div>
|
||||
<div id="tags">brightness, contrast, webgl</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script src="loader.js?id=brightness-contrast" type="text/javascript"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
47
examples/brightness-contrast.js
Normal file
47
examples/brightness-contrast.js
Normal file
@@ -0,0 +1,47 @@
|
||||
goog.require('ol.Coordinate');
|
||||
goog.require('ol.Map');
|
||||
goog.require('ol.RendererHint');
|
||||
goog.require('ol.View2D');
|
||||
goog.require('ol.layer.TileLayer');
|
||||
goog.require('ol.source.MapQuestOpenAerial');
|
||||
|
||||
|
||||
var layer = new ol.layer.TileLayer({
|
||||
source: new ol.source.MapQuestOpenAerial()
|
||||
});
|
||||
|
||||
var map = new ol.Map({
|
||||
layers: [layer],
|
||||
renderer: ol.RendererHint.WEBGL,
|
||||
target: 'map',
|
||||
view: new ol.View2D({
|
||||
center: new ol.Coordinate(0, 0),
|
||||
zoom: 2
|
||||
})
|
||||
});
|
||||
|
||||
var increaseBrightness = document.getElementById('increase-brightness');
|
||||
increaseBrightness.addEventListener('click', function() {
|
||||
layer.setBrightness(layer.getBrightness() + 0.125);
|
||||
}, false);
|
||||
var resetBrightness = document.getElementById('reset-brightness');
|
||||
resetBrightness.addEventListener('click', function() {
|
||||
layer.setBrightness(0);
|
||||
}, false);
|
||||
var decreaseBrightness = document.getElementById('decrease-brightness');
|
||||
decreaseBrightness.addEventListener('click', function() {
|
||||
layer.setBrightness(layer.getBrightness() - 0.125);
|
||||
}, false);
|
||||
|
||||
var increaseContrast = document.getElementById('increase-contrast');
|
||||
increaseContrast.addEventListener('click', function() {
|
||||
layer.setContrast(layer.getContrast() + 0.125);
|
||||
}, false);
|
||||
var resetContrast = document.getElementById('reset-contrast');
|
||||
resetContrast.addEventListener('click', function() {
|
||||
layer.setContrast(1);
|
||||
}, false);
|
||||
var decreaseContrast = document.getElementById('decrease-contrast');
|
||||
decreaseContrast.addEventListener('click', function() {
|
||||
layer.setContrast(layer.getContrast() - 0.125);
|
||||
}, false);
|
||||
@@ -2,6 +2,7 @@ goog.require('ol.Coordinate');
|
||||
goog.require('ol.Map');
|
||||
goog.require('ol.RendererHint');
|
||||
goog.require('ol.View2D');
|
||||
goog.require('ol.control.ScaleLine');
|
||||
goog.require('ol.control.ScaleLineUnits');
|
||||
goog.require('ol.control.defaults');
|
||||
goog.require('ol.layer.TileLayer');
|
||||
@@ -24,13 +25,11 @@ var layers = [
|
||||
];
|
||||
|
||||
var map = new ol.Map({
|
||||
controls: ol.control.defaults({
|
||||
scaleLine: true,
|
||||
// FIXME The typecast here is only needed if the example is compiled
|
||||
scaleLineOptions: /** @type {ol.control.ScaleLineOptions} */ ({
|
||||
controls: ol.control.defaults({}, [
|
||||
new ol.control.ScaleLine({
|
||||
units: ol.control.ScaleLineUnits.DEGREES
|
||||
})
|
||||
}),
|
||||
]),
|
||||
layers: layers,
|
||||
// The OSgeo server does not set cross origin headers, so we cannot use WebGL
|
||||
renderers: [ol.RendererHint.CANVAS, ol.RendererHint.DOM],
|
||||
|
||||
53
examples/export-jpeg.html
Normal file
53
examples/export-jpeg.html
Normal file
@@ -0,0 +1,53 @@
|
||||
<!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="bootstrap/css/bootstrap.min.css" type="text/css">
|
||||
<link rel="stylesheet" href="examples.css" type="text/css">
|
||||
<link rel="stylesheet" href="bootstrap/css/bootstrap-responsive.min.css" type="text/css">
|
||||
<title>Export JPEG example</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="navbar navbar-inverse navbar-fixed-top">
|
||||
<div class="navbar-inner">
|
||||
<div class="container">
|
||||
<a class="brand" href="example-list.html">OpenLayers 3 Examples</a>
|
||||
<ul class="nav pull-right">
|
||||
<li><a href="https://github.com/openlayers/ol3"><i class="icon-github"></i></a></li>
|
||||
<li><a href="https://twitter.com/openlayers"><i class="icon-twitter"></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container-fluid">
|
||||
|
||||
<div class="row-fluid">
|
||||
<div class="span12">
|
||||
<div id="map" class="map"></div>
|
||||
<a id="export-jpeg" class="btn" download="map.jpeg"><i class="icon-download"></i> Export JPEG</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row-fluid">
|
||||
|
||||
<div class="span4">
|
||||
<h4 id="title">Export JPEG example</h4>
|
||||
<p id="shortdesc">Example of exporting a map as a JPEG image.</p>
|
||||
<div id="docs">
|
||||
<p>See the <a href="export-jpeg.js" target="_blank">export-jpeg.js source</a> to see how this is done.</p>
|
||||
</div>
|
||||
<div id="tags">export-jpeg, openstreetmap</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script src="loader.js?id=export-jpeg" type="text/javascript"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
26
examples/export-jpeg.js
Normal file
26
examples/export-jpeg.js
Normal file
@@ -0,0 +1,26 @@
|
||||
goog.require('ol.Coordinate');
|
||||
goog.require('ol.Map');
|
||||
goog.require('ol.RendererHint');
|
||||
goog.require('ol.View2D');
|
||||
goog.require('ol.layer.TileLayer');
|
||||
goog.require('ol.source.OpenStreetMap');
|
||||
|
||||
|
||||
var map = new ol.Map({
|
||||
layers: [
|
||||
new ol.layer.TileLayer({
|
||||
source: new ol.source.OpenStreetMap()
|
||||
})
|
||||
],
|
||||
renderer: ol.RendererHint.CANVAS,
|
||||
target: 'map',
|
||||
view: new ol.View2D({
|
||||
center: new ol.Coordinate(0, 0),
|
||||
zoom: 2
|
||||
})
|
||||
});
|
||||
|
||||
var exportJPEGElement = document.getElementById('export-jpeg');
|
||||
exportJPEGElement.addEventListener('click', function(e) {
|
||||
e.target.href = map.getRenderer().getCanvas().toDataURL('image/jpeg');
|
||||
}, false);
|
||||
@@ -11,9 +11,6 @@ var layer = new ol.layer.TileLayer({
|
||||
source: new ol.source.MapQuestOpenAerial()
|
||||
});
|
||||
var map = new ol.Map({
|
||||
controls: ol.control.defaults({
|
||||
scaleLine: true
|
||||
}),
|
||||
layers: [layer],
|
||||
renderers: ol.RendererHints.createFromQueryData(),
|
||||
target: 'map',
|
||||
|
||||
62
examples/hue-saturation.html
Normal file
62
examples/hue-saturation.html
Normal file
@@ -0,0 +1,62 @@
|
||||
<!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="bootstrap/css/bootstrap.min.css" type="text/css">
|
||||
<link rel="stylesheet" href="examples.css" type="text/css">
|
||||
<link rel="stylesheet" href="bootstrap/css/bootstrap-responsive.min.css" type="text/css">
|
||||
<title>Hue/saturation example</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="navbar navbar-inverse navbar-fixed-top">
|
||||
<div class="navbar-inner">
|
||||
<div class="container">
|
||||
<a class="brand" href="example-list.html">OpenLayers 3 Examples</a>
|
||||
<ul class="nav pull-right">
|
||||
<li><a href="https://github.com/openlayers/ol3"><i class="icon-github"></i></a></li>
|
||||
<li><a href="https://twitter.com/openlayers"><i class="icon-twitter"></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container-fluid">
|
||||
|
||||
<div class="row-fluid">
|
||||
<div class="span12">
|
||||
<div id="map" class="map"></div>
|
||||
<div class="btn-group">
|
||||
<button id="increase-hue"><i class="icon-plus"></i></button>
|
||||
<button id="reset-hue">Hue</button>
|
||||
<button id="decrease-hue"><i class="icon-minus"></i></button>
|
||||
</div>
|
||||
<div class="btn-group">
|
||||
<button id="increase-saturation"><i class="icon-plus"></i></button>
|
||||
<button id="reset-saturation">Saturation</button>
|
||||
<button id="decrease-saturation"><i class="icon-minus"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row-fluid">
|
||||
|
||||
<div class="span4">
|
||||
<h4 id="title">Hue/saturation example</h4>
|
||||
<p id="shortdesc">Example of hue/saturation control on the client (WebGL only).</p>
|
||||
<div id="docs">
|
||||
<p>See the <a href="hue-saturation.js" target="_blank">hue-saturation.js source</a> to see how this is done.</p>
|
||||
</div>
|
||||
<div id="tags">hue, saturation, webgl</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script src="loader.js?id=hue-saturation" type="text/javascript"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
47
examples/hue-saturation.js
Normal file
47
examples/hue-saturation.js
Normal file
@@ -0,0 +1,47 @@
|
||||
goog.require('ol.Coordinate');
|
||||
goog.require('ol.Map');
|
||||
goog.require('ol.RendererHint');
|
||||
goog.require('ol.View2D');
|
||||
goog.require('ol.layer.TileLayer');
|
||||
goog.require('ol.source.MapQuestOpenAerial');
|
||||
|
||||
|
||||
var layer = new ol.layer.TileLayer({
|
||||
source: new ol.source.MapQuestOpenAerial()
|
||||
});
|
||||
|
||||
var map = new ol.Map({
|
||||
layers: [layer],
|
||||
renderer: ol.RendererHint.WEBGL,
|
||||
target: 'map',
|
||||
view: new ol.View2D({
|
||||
center: new ol.Coordinate(0, 0),
|
||||
zoom: 2
|
||||
})
|
||||
});
|
||||
|
||||
var increaseHue = document.getElementById('increase-hue');
|
||||
increaseHue.addEventListener('click', function() {
|
||||
layer.setHue(layer.getHue() + 0.25);
|
||||
}, false);
|
||||
var resetHue = document.getElementById('reset-hue');
|
||||
resetHue.addEventListener('click', function() {
|
||||
layer.setHue(0);
|
||||
}, false);
|
||||
var decreaseHue = document.getElementById('decrease-hue');
|
||||
decreaseHue.addEventListener('click', function() {
|
||||
layer.setHue(layer.getHue() - 0.25);
|
||||
}, false);
|
||||
|
||||
var increaseSaturation = document.getElementById('increase-saturation');
|
||||
increaseSaturation.addEventListener('click', function() {
|
||||
layer.setSaturation(layer.getSaturation() + 0.25);
|
||||
}, false);
|
||||
var resetSaturation = document.getElementById('reset-saturation');
|
||||
resetSaturation.addEventListener('click', function() {
|
||||
layer.setSaturation(1);
|
||||
}, false);
|
||||
var decreaseSaturation = document.getElementById('decrease-saturation');
|
||||
decreaseSaturation.addEventListener('click', function() {
|
||||
layer.setSaturation(layer.getSaturation() - 0.25);
|
||||
}, false);
|
||||
52
examples/mapquest.html
Normal file
52
examples/mapquest.html
Normal file
@@ -0,0 +1,52 @@
|
||||
<!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="bootstrap/css/bootstrap.min.css" type="text/css">
|
||||
<link rel="stylesheet" href="examples.css" type="text/css">
|
||||
<link rel="stylesheet" href="bootstrap/css/bootstrap-responsive.min.css" type="text/css">
|
||||
<title>MapQuest example</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="navbar navbar-inverse navbar-fixed-top">
|
||||
<div class="navbar-inner">
|
||||
<div class="container">
|
||||
<a class="brand" href="example-list.html">OpenLayers 3 Examples</a>
|
||||
<ul class="nav pull-right">
|
||||
<li><a href="https://github.com/openlayers/ol3"><i class="icon-github"></i></a></li>
|
||||
<li><a href="https://twitter.com/openlayers"><i class="icon-twitter"></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container-fluid">
|
||||
|
||||
<div class="row-fluid">
|
||||
<div class="span12">
|
||||
<div id="map" class="map"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row-fluid">
|
||||
|
||||
<div class="span4">
|
||||
<h4 id="title">MapQuest example</h4>
|
||||
<p id="shortdesc">Example of a MapQuest map.</p>
|
||||
<div id="docs">
|
||||
<p>See the <a href="mapquest.js" target="_blank">mapquest.js source</a> to see how this is done.</p>
|
||||
</div>
|
||||
<div id="tags">mapquest</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script src="loader.js?id=mapquest" type="text/javascript"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
23
examples/mapquest.js
Normal file
23
examples/mapquest.js
Normal file
@@ -0,0 +1,23 @@
|
||||
goog.require('ol.Coordinate');
|
||||
goog.require('ol.Map');
|
||||
goog.require('ol.RendererHints');
|
||||
goog.require('ol.View2D');
|
||||
goog.require('ol.layer.TileLayer');
|
||||
goog.require('ol.projection');
|
||||
goog.require('ol.source.MapQuestOSM');
|
||||
|
||||
|
||||
var map = new ol.Map({
|
||||
layers: [
|
||||
new ol.layer.TileLayer({
|
||||
source: new ol.source.MapQuestOSM()
|
||||
})
|
||||
],
|
||||
renderers: ol.RendererHints.createFromQueryData(),
|
||||
target: 'map',
|
||||
view: new ol.View2D({
|
||||
center: ol.projection.transformWithCodes(
|
||||
new ol.Coordinate(139.6917, 35.689506), 'EPSG:4326', 'EPSG:3857'),
|
||||
zoom: 9
|
||||
})
|
||||
});
|
||||
53
examples/mouse-position.html
Normal file
53
examples/mouse-position.html
Normal file
@@ -0,0 +1,53 @@
|
||||
<!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="bootstrap/css/bootstrap.min.css" type="text/css">
|
||||
<link rel="stylesheet" href="examples.css" type="text/css">
|
||||
<link rel="stylesheet" href="bootstrap/css/bootstrap-responsive.min.css" type="text/css">
|
||||
<title>Mouse position example</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="navbar navbar-inverse navbar-fixed-top">
|
||||
<div class="navbar-inner">
|
||||
<div class="container">
|
||||
<a class="brand" href="example-list.html">OpenLayers 3 Examples</a>
|
||||
<ul class="nav pull-right">
|
||||
<li><a href="https://github.com/openlayers/ol3"><i class="icon-github"></i></a></li>
|
||||
<li><a href="https://twitter.com/openlayers"><i class="icon-twitter"></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container-fluid">
|
||||
|
||||
<div class="row-fluid">
|
||||
<div class="span12">
|
||||
<div id="map" class="map"></div>
|
||||
<small id="mouse-position"></small>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row-fluid">
|
||||
|
||||
<div class="span4">
|
||||
<h4 id="title">Mouse position example</h4>
|
||||
<p id="shortdesc">Example of a mouse position control, outside the map.</p>
|
||||
<div id="docs">
|
||||
<p>See the <a href="mouse-position.js" target="_blank">mouse-position.js source</a> to see how this is done.</p>
|
||||
</div>
|
||||
<div id="tags">mouse-position, openstreetmap</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script src="loader.js?id=mouse-position" type="text/javascript"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
32
examples/mouse-position.js
Normal file
32
examples/mouse-position.js
Normal file
@@ -0,0 +1,32 @@
|
||||
goog.require('ol.Coordinate');
|
||||
goog.require('ol.Map');
|
||||
goog.require('ol.RendererHints');
|
||||
goog.require('ol.View2D');
|
||||
goog.require('ol.control.MousePosition');
|
||||
goog.require('ol.control.defaults');
|
||||
goog.require('ol.layer.TileLayer');
|
||||
goog.require('ol.projection');
|
||||
goog.require('ol.source.OpenStreetMap');
|
||||
|
||||
|
||||
var map = new ol.Map({
|
||||
controls: ol.control.defaults({}, [
|
||||
new ol.control.MousePosition({
|
||||
coordinateFormat: ol.Coordinate.toStringHDMS,
|
||||
projection: ol.projection.getFromCode('EPSG:4326'),
|
||||
target: document.getElementById('mouse-position'),
|
||||
undefinedHTML: ' '
|
||||
})
|
||||
]),
|
||||
layers: [
|
||||
new ol.layer.TileLayer({
|
||||
source: new ol.source.OpenStreetMap()
|
||||
})
|
||||
],
|
||||
renderers: ol.RendererHints.createFromQueryData(),
|
||||
target: 'map',
|
||||
view: new ol.View2D({
|
||||
center: new ol.Coordinate(0, 0),
|
||||
zoom: 2
|
||||
})
|
||||
});
|
||||
@@ -7,7 +7,7 @@
|
||||
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" type="text/css">
|
||||
<link rel="stylesheet" href="examples.css" type="text/css">
|
||||
<link rel="stylesheet" href="bootstrap/css/bootstrap-responsive.min.css" type="text/css">
|
||||
<title>Two layers example</title>
|
||||
<title>Scale line example</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
@@ -26,37 +26,27 @@
|
||||
<div class="container-fluid">
|
||||
|
||||
<div class="row-fluid">
|
||||
<div class="span4">
|
||||
<h4>Canvas</h4>
|
||||
<div id="canvasMap" class="map"></div>
|
||||
<small><a id="canvas-export" href="#" download="map.jpeg">export map as jpeg</a></small>
|
||||
</div>
|
||||
<div class="span4">
|
||||
<h4>WebGL</h4>
|
||||
<div id="webglMap" class="map"></div>
|
||||
</div>
|
||||
<div class="span4">
|
||||
<h4>DOM</h4>
|
||||
<div id="domMap" class="map"></div>
|
||||
<div class="span12">
|
||||
<div id="map" class="map"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row-fluid">
|
||||
|
||||
<div class="span4">
|
||||
<h4 id="title">Two layers example</h4>
|
||||
<p id="shortdesc">Sync'ed DOM, WebGL and Canvas maps with a Bing Maps base layer and a semi-transparent TileJSON layer.</p>
|
||||
<h4 id="title">Scale line example</h4>
|
||||
<p id="shortdesc">Example of a scale line.</p>
|
||||
<div id="docs">
|
||||
<p>See the <a href="two-layers.js" target="_blank">two-layers.js source</a> to see how this is done.</p>
|
||||
<p>See the <a href="scale-line.js" target="_blank">scale-line.js source</a> to see how this is done.</p>
|
||||
</div>
|
||||
<div id="tags">layers, tilejson, bing, bingmaps</div>
|
||||
<div id="tags">scale-line, openstreetmap</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script src="loader.js?id=two-layers" type="text/javascript"></script>
|
||||
<script src="loader.js?id=scale-line" type="text/javascript"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
29
examples/scale-line.js
Normal file
29
examples/scale-line.js
Normal file
@@ -0,0 +1,29 @@
|
||||
goog.require('ol.Coordinate');
|
||||
goog.require('ol.Map');
|
||||
goog.require('ol.RendererHints');
|
||||
goog.require('ol.View2D');
|
||||
goog.require('ol.control.ScaleLine');
|
||||
goog.require('ol.control.ScaleLineUnits');
|
||||
goog.require('ol.control.defaults');
|
||||
goog.require('ol.layer.TileLayer');
|
||||
goog.require('ol.source.OpenStreetMap');
|
||||
|
||||
|
||||
var map = new ol.Map({
|
||||
controls: ol.control.defaults({}, [
|
||||
new ol.control.ScaleLine({
|
||||
units: ol.control.ScaleLineUnits.IMPERIAL
|
||||
})
|
||||
]),
|
||||
layers: [
|
||||
new ol.layer.TileLayer({
|
||||
source: new ol.source.OpenStreetMap()
|
||||
})
|
||||
],
|
||||
renderers: ol.RendererHints.createFromQueryData(),
|
||||
target: 'map',
|
||||
view: new ol.View2D({
|
||||
center: new ol.Coordinate(0, 0),
|
||||
zoom: 2
|
||||
})
|
||||
});
|
||||
@@ -29,17 +29,14 @@
|
||||
<div class="span4">
|
||||
<h4>Canvas</h4>
|
||||
<div id="canvasMap" class="map"></div>
|
||||
<small id="canvasMousePosition"></small>
|
||||
</div>
|
||||
<div class="span4">
|
||||
<h4>WebGL</h4>
|
||||
<div id="webglMap" class="map"></div>
|
||||
<small id="webglMousePosition"></small>
|
||||
</div>
|
||||
<div class="span4">
|
||||
<h4>DOM</h4>
|
||||
<div id="domMap" class="map"></div>
|
||||
<small id="domMousePosition"></small>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -47,11 +44,11 @@
|
||||
|
||||
<div class="span4">
|
||||
<h4 id="title">Side-by-side example</h4>
|
||||
<p id="shortdesc">The two maps share the same center, resolution, rotation and layers.</p>
|
||||
<p id="shortdesc">The three maps, one WebGL, one Canvas, one DOM, share the same center, resolution, rotation and layers.</p>
|
||||
<div id="docs">
|
||||
<p>See the <a href="side-by-side.js" target="_blank">side-by-side.js source</a> to see how this is done.</p>
|
||||
</div>
|
||||
<div id="tags">side-by-side, canvas, webgl, dom, sync, object</div>
|
||||
<div id="tags">side-by-side, canvas, webgl, dom, canvas, sync, object</div>
|
||||
</div>
|
||||
|
||||
<div class="span8">
|
||||
@@ -61,18 +58,10 @@
|
||||
<dd>drag, arrow keys</dd>
|
||||
<dt>Zoom</dt>
|
||||
<dd>double-click, <code>Shift</code>+double-click, mouse wheel, <code>+</code>/<code>-</code> keys; <code>Shift</code>+drag</dd>
|
||||
<dt>Rotate</dt>
|
||||
<dd><code>Alt+Shift</code>+drag, <code>r</code> to reset</dd>
|
||||
<dt>Brightness/contrast</dt>
|
||||
<dd><code>b</code>/<code>B</code>/<code>c</code>/<code>C</code> keys (WebGL only)</dd>
|
||||
<dt>Hue/saturation</dt>
|
||||
<dd><code>h</code>/<code>H</code>/<code>s</code>/<code>S</code> keys (WebGL only)</dd>
|
||||
<dt>Opacity</dt>
|
||||
<dd><code>o</code>/<code>O</code> keys</dd>
|
||||
<dt>Visibility</dt>
|
||||
<dd><code>v</code>/<code>V</code> keys</dd>
|
||||
<dt>Animations</dt>
|
||||
<dd><code>j</code>/<code>l</code>/<code>m</code>/<code>x</code>/<code>L</code>/<code>M</code>/<code>X</code> keys</dd>
|
||||
<dt>Reset</dt>
|
||||
<dd><code>0</code> key</dd>
|
||||
</dl>
|
||||
|
||||
@@ -4,8 +4,6 @@ goog.require('ol.Map');
|
||||
goog.require('ol.RendererHint');
|
||||
goog.require('ol.View2D');
|
||||
goog.require('ol.animation');
|
||||
goog.require('ol.control.MousePosition');
|
||||
goog.require('ol.control.defaults');
|
||||
goog.require('ol.easing');
|
||||
goog.require('ol.interaction.Keyboard');
|
||||
goog.require('ol.layer.TileLayer');
|
||||
@@ -27,28 +25,14 @@ var view = new ol.View2D({
|
||||
zoom: 1
|
||||
});
|
||||
|
||||
var domMousePosition = new ol.control.MousePosition({
|
||||
coordinateFormat: ol.Coordinate.toStringHDMS,
|
||||
projection: ol.projection.getFromCode('EPSG:4326'),
|
||||
target: document.getElementById('domMousePosition'),
|
||||
undefinedHTML: ' '
|
||||
});
|
||||
var domMap = new ol.Map({
|
||||
controls: ol.control.defaults({}, [domMousePosition]),
|
||||
layers: new ol.Collection([layer]),
|
||||
renderer: ol.RendererHint.DOM,
|
||||
target: 'domMap',
|
||||
view: view
|
||||
});
|
||||
|
||||
var webglMousePosition = new ol.control.MousePosition({
|
||||
coordinateFormat: ol.Coordinate.toStringHDMS,
|
||||
projection: ol.projection.getFromCode('EPSG:4326'),
|
||||
target: document.getElementById('webglMousePosition'),
|
||||
undefinedHTML: ' '
|
||||
});
|
||||
var webglMap = new ol.Map({
|
||||
controls: ol.control.defaults({}, [webglMousePosition]),
|
||||
renderer: ol.RendererHint.WEBGL,
|
||||
target: 'webglMap'
|
||||
});
|
||||
@@ -58,14 +42,7 @@ if (webglMap !== null) {
|
||||
}
|
||||
|
||||
|
||||
var canvasMousePosition = new ol.control.MousePosition({
|
||||
coordinateFormat: ol.Coordinate.toStringHDMS,
|
||||
projection: ol.projection.getFromCode('EPSG:4326'),
|
||||
target: document.getElementById('canvasMousePosition'),
|
||||
undefinedHtml: ' '
|
||||
});
|
||||
var canvasMap = new ol.Map({
|
||||
controls: ol.control.defaults({}, [canvasMousePosition]),
|
||||
renderer: ol.RendererHint.CANVAS,
|
||||
target: 'canvasMap'
|
||||
});
|
||||
@@ -76,144 +53,19 @@ if (canvasMap !== null) {
|
||||
|
||||
var keyboardInteraction = new ol.interaction.Keyboard();
|
||||
keyboardInteraction.addCallback('0', function() {
|
||||
layer.setBrightness(0);
|
||||
layer.setContrast(1);
|
||||
layer.setHue(0);
|
||||
layer.setSaturation(1);
|
||||
layer.setOpacity(1);
|
||||
layer.setVisible(true);
|
||||
});
|
||||
keyboardInteraction.addCallback('b', function() {
|
||||
layer.setBrightness(layer.getBrightness() - 0.1);
|
||||
});
|
||||
keyboardInteraction.addCallback('B', function() {
|
||||
layer.setBrightness(layer.getBrightness() + 0.1);
|
||||
});
|
||||
keyboardInteraction.addCallback('c', function() {
|
||||
layer.setContrast(layer.getContrast() - 0.1);
|
||||
});
|
||||
keyboardInteraction.addCallback('C', function() {
|
||||
// contrast is unbounded, but for this example we clamp to 3
|
||||
layer.setContrast(Math.min(3, layer.getContrast() + 0.1));
|
||||
});
|
||||
keyboardInteraction.addCallback('h', function() {
|
||||
layer.setHue(layer.getHue() - (Math.PI / 5));
|
||||
});
|
||||
keyboardInteraction.addCallback('H', function() {
|
||||
layer.setHue(layer.getHue() + (Math.PI / 5));
|
||||
});
|
||||
keyboardInteraction.addCallback('j', function() {
|
||||
var bounce = ol.animation.bounce({
|
||||
resolution: 2 * view.getResolution()
|
||||
});
|
||||
domMap.addPreRenderFunction(bounce);
|
||||
webglMap.addPreRenderFunction(bounce);
|
||||
canvasMap.addPreRenderFunction(bounce);
|
||||
});
|
||||
keyboardInteraction.addCallback('l', function() {
|
||||
var pan = ol.animation.pan({
|
||||
source: view.getCenter(),
|
||||
easing: ol.easing.elastic
|
||||
});
|
||||
domMap.addPreRenderFunction(pan);
|
||||
webglMap.addPreRenderFunction(pan);
|
||||
canvasMap.addPreRenderFunction(pan);
|
||||
view.setCenter(LONDON);
|
||||
});
|
||||
keyboardInteraction.addCallback('L', function() {
|
||||
var start = +new Date();
|
||||
var duration = 5000;
|
||||
var bounce = ol.animation.bounce({
|
||||
resolution: 2 * view.getResolution(),
|
||||
start: start,
|
||||
duration: duration
|
||||
});
|
||||
var pan = ol.animation.pan({
|
||||
source: view.getCenter(),
|
||||
start: start,
|
||||
duration: duration
|
||||
});
|
||||
var rotate = ol.animation.rotate({
|
||||
rotation: 4 * Math.PI,
|
||||
start: start,
|
||||
duration: duration
|
||||
});
|
||||
var preRenderFunctions = [bounce, pan, rotate];
|
||||
domMap.addPreRenderFunctions(preRenderFunctions);
|
||||
webglMap.addPreRenderFunctions(preRenderFunctions);
|
||||
canvasMap.addPreRenderFunctions(preRenderFunctions);
|
||||
view.setCenter(LONDON);
|
||||
});
|
||||
keyboardInteraction.addCallback('m', function() {
|
||||
var pan = ol.animation.pan({
|
||||
source: view.getCenter(),
|
||||
duration: 1000,
|
||||
easing: ol.easing.bounce
|
||||
});
|
||||
domMap.addPreRenderFunction(pan);
|
||||
webglMap.addPreRenderFunction(pan);
|
||||
canvasMap.addPreRenderFunction(pan);
|
||||
view.setCenter(MOSCOW);
|
||||
});
|
||||
keyboardInteraction.addCallback('M', function() {
|
||||
var start = +new Date();
|
||||
var duration = 5000;
|
||||
var bounce = ol.animation.bounce({
|
||||
resolution: 2 * view.getResolution(),
|
||||
start: start,
|
||||
duration: duration
|
||||
});
|
||||
var pan = ol.animation.pan({
|
||||
source: view.getCenter(),
|
||||
start: start,
|
||||
duration: duration
|
||||
});
|
||||
var rotate = ol.animation.rotate({
|
||||
rotation: -4 * Math.PI,
|
||||
start: start,
|
||||
duration: duration
|
||||
});
|
||||
var preRenderFunctions = [bounce, pan, rotate];
|
||||
domMap.addPreRenderFunctions(preRenderFunctions);
|
||||
webglMap.addPreRenderFunctions(preRenderFunctions);
|
||||
canvasMap.addPreRenderFunctions(preRenderFunctions);
|
||||
view.setCenter(MOSCOW);
|
||||
});
|
||||
keyboardInteraction.addCallback('o', function() {
|
||||
layer.setOpacity(layer.getOpacity() - 0.1);
|
||||
layer.setOpacity(layer.getOpacity() - 0.125);
|
||||
});
|
||||
keyboardInteraction.addCallback('O', function() {
|
||||
layer.setOpacity(layer.getOpacity() + 0.1);
|
||||
layer.setOpacity(layer.getOpacity() + 0.125);
|
||||
});
|
||||
keyboardInteraction.addCallback('r', function() {
|
||||
view.setRotation(0);
|
||||
});
|
||||
keyboardInteraction.addCallback('s', function() {
|
||||
layer.setSaturation(layer.getSaturation() - 0.1);
|
||||
});
|
||||
keyboardInteraction.addCallback('S', function() {
|
||||
// saturation is unbounded, but for this example we clamp to 3
|
||||
layer.setSaturation(Math.min(3, layer.getSaturation() + 0.1));
|
||||
});
|
||||
keyboardInteraction.addCallback('vV', function() {
|
||||
layer.setVisible(!layer.getVisible());
|
||||
});
|
||||
keyboardInteraction.addCallback('x', function() {
|
||||
var rotate = ol.animation.rotate({
|
||||
rotation: 4 * Math.PI,
|
||||
duration: 2000
|
||||
});
|
||||
domMap.addPreRenderFunction(rotate);
|
||||
webglMap.addPreRenderFunction(rotate);
|
||||
canvasMap.addPreRenderFunction(rotate);
|
||||
});
|
||||
keyboardInteraction.addCallback('X', function() {
|
||||
var rotate = ol.animation.rotate({
|
||||
rotation: -4 * Math.PI,
|
||||
duration: 2000
|
||||
});
|
||||
domMap.addPreRenderFunction(rotate);
|
||||
webglMap.addPreRenderFunction(rotate);
|
||||
canvasMap.addPreRenderFunction(rotate);
|
||||
});
|
||||
domMap.getInteractions().push(keyboardInteraction);
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
goog.require('ol.Collection');
|
||||
goog.require('ol.Coordinate');
|
||||
goog.require('ol.Map');
|
||||
goog.require('ol.RendererHints');
|
||||
@@ -8,11 +7,11 @@ goog.require('ol.source.OpenStreetMap');
|
||||
|
||||
|
||||
var map = new ol.Map({
|
||||
layers: new ol.Collection([
|
||||
layers: [
|
||||
new ol.layer.TileLayer({
|
||||
source: new ol.source.OpenStreetMap()
|
||||
})
|
||||
]),
|
||||
],
|
||||
renderers: ol.RendererHints.createFromQueryData(),
|
||||
target: 'map',
|
||||
view: new ol.View2D({
|
||||
|
||||
@@ -35,11 +35,11 @@
|
||||
|
||||
<div class="span4">
|
||||
<h4 id="title">Stamen example</h4>
|
||||
<p id="shortdesc">Example of a Stamen tile source.</p>
|
||||
<p id="shortdesc">Example of a Stamen tile source. Two layers are composed: the watercolor base layer with the terrain labels.</p>
|
||||
<div id="docs">
|
||||
<p>See the <a href="stamen.js" target="_blank">stamen.js source</a> to see how this is done.</p>
|
||||
</div>
|
||||
<div id="tags">stamen, watercolor</div>
|
||||
<div id="tags">stamen, watercolor, terrain-labels, two-layers</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
@@ -3,10 +3,12 @@ goog.require('ol.Map');
|
||||
goog.require('ol.RendererHints');
|
||||
goog.require('ol.View2D');
|
||||
goog.require('ol.layer.TileLayer');
|
||||
goog.require('ol.projection');
|
||||
goog.require('ol.source.Stamen');
|
||||
|
||||
|
||||
var layers = [
|
||||
var map = new ol.Map({
|
||||
layers: [
|
||||
new ol.layer.TileLayer({
|
||||
source: new ol.source.Stamen({
|
||||
layer: 'watercolor'
|
||||
@@ -17,13 +19,12 @@ var layers = [
|
||||
layer: 'terrain-labels'
|
||||
})
|
||||
})
|
||||
];
|
||||
var map = new ol.Map({
|
||||
layers: layers,
|
||||
],
|
||||
renderers: ol.RendererHints.createFromQueryData(),
|
||||
target: 'map',
|
||||
view: new ol.View2D({
|
||||
center: new ol.Coordinate(0, 0),
|
||||
zoom: 3
|
||||
center: ol.projection.transformWithCodes(
|
||||
new ol.Coordinate(-122.416667, 37.783333), 'EPSG:4326', 'EPSG:3857'),
|
||||
zoom: 12
|
||||
})
|
||||
});
|
||||
|
||||
52
examples/tilejson.html
Normal file
52
examples/tilejson.html
Normal file
@@ -0,0 +1,52 @@
|
||||
<!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="bootstrap/css/bootstrap.min.css" type="text/css">
|
||||
<link rel="stylesheet" href="examples.css" type="text/css">
|
||||
<link rel="stylesheet" href="bootstrap/css/bootstrap-responsive.min.css" type="text/css">
|
||||
<title>TileJSON example</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="navbar navbar-inverse navbar-fixed-top">
|
||||
<div class="navbar-inner">
|
||||
<div class="container">
|
||||
<a class="brand" href="example-list.html">OpenLayers 3 Examples</a>
|
||||
<ul class="nav pull-right">
|
||||
<li><a href="https://github.com/openlayers/ol3"><i class="icon-github"></i></a></li>
|
||||
<li><a href="https://twitter.com/openlayers"><i class="icon-twitter"></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container-fluid">
|
||||
|
||||
<div class="row-fluid">
|
||||
<div class="span12">
|
||||
<div id="map" class="map"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row-fluid">
|
||||
|
||||
<div class="span4">
|
||||
<h4 id="title">TileJSON example</h4>
|
||||
<p id="shortdesc">Example of a TileJSON layer.</p>
|
||||
<div id="docs">
|
||||
<p>See the <a href="tilejson.js" target="_blank">tilejson.js source</a> to see how this is done.</p>
|
||||
</div>
|
||||
<div id="tags">tilejson</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script src="loader.js?id=tilejson" type="text/javascript"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
23
examples/tilejson.js
Normal file
23
examples/tilejson.js
Normal file
@@ -0,0 +1,23 @@
|
||||
goog.require('ol.Coordinate');
|
||||
goog.require('ol.Map');
|
||||
goog.require('ol.RendererHints');
|
||||
goog.require('ol.View2D');
|
||||
goog.require('ol.layer.TileLayer');
|
||||
goog.require('ol.source.TileJSON');
|
||||
|
||||
|
||||
var map = new ol.Map({
|
||||
layers: [
|
||||
new ol.layer.TileLayer({
|
||||
source: new ol.source.TileJSON({
|
||||
uri: 'http://api.tiles.mapbox.com/v3/mapbox.geography-class.jsonp'
|
||||
})
|
||||
})
|
||||
],
|
||||
renderers: ol.RendererHints.createFromQueryData(),
|
||||
target: 'map',
|
||||
view: new ol.View2D({
|
||||
center: new ol.Coordinate(0, 0),
|
||||
zoom: 2
|
||||
})
|
||||
});
|
||||
@@ -1,55 +0,0 @@
|
||||
goog.require('ol.Coordinate');
|
||||
goog.require('ol.Map');
|
||||
goog.require('ol.RendererHint');
|
||||
goog.require('ol.View2D');
|
||||
goog.require('ol.layer.TileLayer');
|
||||
goog.require('ol.projection');
|
||||
goog.require('ol.source.BingMaps');
|
||||
goog.require('ol.source.TileJSON');
|
||||
|
||||
|
||||
var layers = [
|
||||
new ol.layer.TileLayer({
|
||||
source: new ol.source.BingMaps({
|
||||
key: 'AgtFlPYDnymLEe9zJ5PCkghbNiFZE9aAtTy3mPaEnEBXqLHtFuTcKoZ-miMC3w7R',
|
||||
style: 'Aerial'
|
||||
})
|
||||
}),
|
||||
new ol.layer.TileLayer({
|
||||
source: new ol.source.TileJSON({
|
||||
uri: 'http://api.tiles.mapbox.com/v3/mapbox.va-quake-aug.jsonp'
|
||||
})
|
||||
})
|
||||
];
|
||||
|
||||
var webglMap = new ol.Map({
|
||||
layers: layers,
|
||||
renderer: ol.RendererHint.WEBGL,
|
||||
target: 'webglMap',
|
||||
view: new ol.View2D({
|
||||
center: ol.projection.transformWithCodes(
|
||||
new ol.Coordinate(-77.93255, 37.9555), 'EPSG:4326', 'EPSG:3857'),
|
||||
zoom: 5
|
||||
})
|
||||
});
|
||||
|
||||
var domMap = new ol.Map({
|
||||
renderer: ol.RendererHint.DOM,
|
||||
target: 'domMap'
|
||||
});
|
||||
domMap.bindTo('layers', webglMap);
|
||||
domMap.bindTo('view', webglMap);
|
||||
|
||||
|
||||
var canvasMap = new ol.Map({
|
||||
renderer: ol.RendererHint.CANVAS,
|
||||
target: 'canvasMap'
|
||||
});
|
||||
canvasMap.bindTo('layers', webglMap);
|
||||
canvasMap.bindTo('view', webglMap);
|
||||
|
||||
// Handle clicks on the "canvas-export" element.
|
||||
var element = document.getElementById('canvas-export');
|
||||
element.addEventListener('click', function(e) {
|
||||
e.target.href = canvasMap.getRenderer().getCanvas().toDataURL('image/jpeg');
|
||||
}, false);
|
||||
@@ -6,10 +6,8 @@ goog.require('ol.Projection');
|
||||
goog.require('ol.ProjectionUnits');
|
||||
goog.require('ol.RendererHints');
|
||||
goog.require('ol.View2D');
|
||||
goog.require('ol.layer.ImageLayer');
|
||||
goog.require('ol.layer.TileLayer');
|
||||
goog.require('ol.projection');
|
||||
goog.require('ol.source.SingleImageWMS');
|
||||
goog.require('ol.source.TiledWMS');
|
||||
|
||||
|
||||
@@ -37,14 +35,15 @@ var layers = [
|
||||
extent: extent
|
||||
})
|
||||
}),
|
||||
new ol.layer.ImageLayer({
|
||||
source: new ol.source.SingleImageWMS({
|
||||
new ol.layer.TileLayer({
|
||||
source: new ol.source.TiledWMS({
|
||||
url: 'http://wms.geo.admin.ch/',
|
||||
attributions: [new ol.Attribution(
|
||||
'© ' +
|
||||
'<a href="http://www.geo.admin.ch/internet/geoportal/en/home.html">' +
|
||||
'National parks / geo.admin.ch</a>')],
|
||||
params: {'LAYERS': 'ch.bafu.schutzgebiete-paerke_nationaler_bedeutung'}
|
||||
params: {'LAYERS': 'ch.bafu.schutzgebiete-paerke_nationaler_bedeutung'},
|
||||
extent: extent
|
||||
})
|
||||
})
|
||||
];
|
||||
|
||||
52
examples/wms-single-image.html
Normal file
52
examples/wms-single-image.html
Normal file
@@ -0,0 +1,52 @@
|
||||
<!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="bootstrap/css/bootstrap.min.css" type="text/css">
|
||||
<link rel="stylesheet" href="examples.css" type="text/css">
|
||||
<link rel="stylesheet" href="bootstrap/css/bootstrap-responsive.min.css" type="text/css">
|
||||
<title>Single image WMS example</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="navbar navbar-inverse navbar-fixed-top">
|
||||
<div class="navbar-inner">
|
||||
<div class="container">
|
||||
<a class="brand" href="example-list.html">OpenLayers 3 Examples</a>
|
||||
<ul class="nav pull-right">
|
||||
<li><a href="https://github.com/openlayers/ol3"><i class="icon-github"></i></a></li>
|
||||
<li><a href="https://twitter.com/openlayers"><i class="icon-twitter"></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container-fluid">
|
||||
|
||||
<div class="row-fluid">
|
||||
<div class="span12">
|
||||
<div id="map" class="map"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row-fluid">
|
||||
|
||||
<div class="span4">
|
||||
<h4 id="title">Single image WMS example</h4>
|
||||
<p id="shortdesc">Example of a single image WMS layer.</p>
|
||||
<div id="docs">
|
||||
<p>See the <a href="wms-single-image.js" target="_blank">wms-single-image.js source</a> to see how this is done.</p>
|
||||
</div>
|
||||
<div id="tags">wms, image</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script src="loader.js?id=wms-single-image" type="text/javascript"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
33
examples/wms-single-image.js
Normal file
33
examples/wms-single-image.js
Normal file
@@ -0,0 +1,33 @@
|
||||
goog.require('ol.Coordinate');
|
||||
goog.require('ol.Extent');
|
||||
goog.require('ol.Map');
|
||||
goog.require('ol.RendererHint');
|
||||
goog.require('ol.View2D');
|
||||
goog.require('ol.layer.ImageLayer');
|
||||
goog.require('ol.layer.TileLayer');
|
||||
goog.require('ol.source.MapQuestOpenAerial');
|
||||
goog.require('ol.source.SingleImageWMS');
|
||||
|
||||
|
||||
var layers = [
|
||||
new ol.layer.TileLayer({
|
||||
source: new ol.source.MapQuestOpenAerial()
|
||||
}),
|
||||
new ol.layer.ImageLayer({
|
||||
source: new ol.source.SingleImageWMS({
|
||||
url: 'http://demo.opengeo.org/geoserver/wms',
|
||||
crossOrigin: null,
|
||||
params: {'LAYERS': 'topp:states'},
|
||||
extent: new ol.Extent(-13884991, 2870341, -7455066, 6338219)
|
||||
})
|
||||
})
|
||||
];
|
||||
var map = new ol.Map({
|
||||
renderer: ol.RendererHint.CANVAS,
|
||||
layers: layers,
|
||||
target: 'map',
|
||||
view: new ol.View2D({
|
||||
center: new ol.Coordinate(-10997148, 4569099),
|
||||
zoom: 4
|
||||
})
|
||||
});
|
||||
@@ -37,7 +37,7 @@
|
||||
<h4 id="title">Tiled WMS example</h4>
|
||||
<p id="shortdesc">Example of a tiled WMS layer.</p>
|
||||
<div id="docs">
|
||||
<p>See the <a href="wms.js" target="_blank">wms.js source</a> to see how this is done.</p>
|
||||
<p>See the <a href="wms-tiled.js" target="_blank">wms-tiled.js source</a> to see how this is done.</p>
|
||||
</div>
|
||||
<div id="tags">wms, tile, tilelayer</div>
|
||||
</div>
|
||||
@@ -46,7 +46,7 @@
|
||||
|
||||
</div>
|
||||
|
||||
<script src="loader.js?id=wms" type="text/javascript"></script>
|
||||
<script src="loader.js?id=wms-tiled" type="text/javascript"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -49,8 +49,6 @@
|
||||
@exportObjectLiteral ol.control.DefaultsOptions
|
||||
@exportObjectLiteralProperty ol.control.DefaultsOptions.attribution boolean|undefined
|
||||
@exportObjectLiteralProperty ol.control.DefaultsOptions.attributionOptions ol.control.AttributionOptions|undefined
|
||||
@exportObjectLiteralProperty ol.control.DefaultsOptions.scaleLine boolean|undefined
|
||||
@exportObjectLiteralProperty ol.control.DefaultsOptions.scaleLineOptions ol.control.ScaleLineOptions|undefined
|
||||
@exportObjectLiteralProperty ol.control.DefaultsOptions.zoom boolean|undefined
|
||||
@exportObjectLiteralProperty ol.control.DefaultsOptions.zoomOptions ol.control.ZoomOptions|undefined
|
||||
|
||||
|
||||
@@ -2,7 +2,6 @@ goog.provide('ol.control.defaults');
|
||||
|
||||
goog.require('goog.array');
|
||||
goog.require('ol.control.Attribution');
|
||||
goog.require('ol.control.ScaleLine');
|
||||
goog.require('ol.control.Zoom');
|
||||
|
||||
|
||||
@@ -26,14 +25,6 @@ ol.control.defaults = function(opt_options, opt_controls) {
|
||||
controls.push(new ol.control.Attribution(attributionControlOptions));
|
||||
}
|
||||
|
||||
var scaleLineControl = goog.isDef(options.scaleLine) ?
|
||||
options.scaleLine : false;
|
||||
if (scaleLineControl) {
|
||||
var scaleLineOptions = goog.isDef(options.scaleLineOptions) ?
|
||||
options.scaleLineOptions : undefined;
|
||||
controls.push(new ol.control.ScaleLine(scaleLineOptions));
|
||||
}
|
||||
|
||||
var zoomControl = goog.isDef(options.zoom) ?
|
||||
options.zoom : true;
|
||||
if (zoomControl) {
|
||||
|
||||
Reference in New Issue
Block a user