Updated
This commit is contained in:
Tom Payne
38
master/examples/canvas-tiles.html
Normal file
38
master/examples/canvas-tiles.html
Normal file
@@ -0,0 +1,38 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="chrome=1">
|
||||
<link rel="stylesheet" href="style.css" type="text/css">
|
||||
<style type="text/css">
|
||||
.map {
|
||||
width: 400px;
|
||||
height: 400px;
|
||||
border: thin solid #cccccc;
|
||||
margin: 1em;
|
||||
}
|
||||
</style>
|
||||
<title>ol3 canvas tiles demo</title>
|
||||
</head>
|
||||
<body>
|
||||
<h1 id="title">Canvas tiles example</h1>
|
||||
<div id="shortdesc">The black grid tiles are generated on the client with an HTML5 canvas. Note that the tile coordinates are ol3 normalized tile coordinates (origin bottom left), not OSM tile coordinates (origin top left).</div>
|
||||
<table>
|
||||
<tr>
|
||||
<th>DOM</th>
|
||||
<th>WebGL</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><div id="domMap" class="map"></div></td>
|
||||
<td><div id="webglMap" class="map"></div></td>
|
||||
</tr>
|
||||
</table>
|
||||
<div id="docs">
|
||||
<p>See the
|
||||
<a href="canvas-tiles.js" target="_blank">canvas-tiles.js source</a>
|
||||
to see how this is done.</p>
|
||||
</div>
|
||||
<div id="tags">layers, stamen, canvas</div>
|
||||
<script src="loader.js?id=canvas-tiles" type="text/javascript"></script>
|
||||
</body>
|
||||
</html>
|
||||
43
master/examples/canvas-tiles.js
Normal file
43
master/examples/canvas-tiles.js
Normal file
@@ -0,0 +1,43 @@
|
||||
goog.require('ol.Collection');
|
||||
goog.require('ol.Coordinate');
|
||||
goog.require('ol.Map');
|
||||
goog.require('ol.Projection');
|
||||
goog.require('ol.RendererHint');
|
||||
goog.require('ol.layer.TileLayer');
|
||||
goog.require('ol.source.DebugTileSource');
|
||||
goog.require('ol.source.Stamen');
|
||||
|
||||
|
||||
var layers = new ol.Collection([
|
||||
new ol.layer.TileLayer({
|
||||
source: new ol.source.Stamen({
|
||||
provider: ol.source.StamenProvider.WATERCOLOR
|
||||
})
|
||||
}),
|
||||
new ol.layer.TileLayer({
|
||||
source: new ol.source.DebugTileSource({
|
||||
projection: ol.Projection.getFromCode('EPSG:3857'),
|
||||
tileGrid: new ol.tilegrid.XYZ({
|
||||
maxZoom: 22
|
||||
})
|
||||
})
|
||||
})
|
||||
]);
|
||||
|
||||
var webglMap = new ol.Map({
|
||||
view: new ol.View2D({
|
||||
center: ol.Projection.transformWithCodes(
|
||||
new ol.Coordinate(-0.1275, 51.507222), 'EPSG:4326', 'EPSG:3857'),
|
||||
zoom: 10
|
||||
}),
|
||||
layers: layers,
|
||||
renderer: ol.RendererHint.WEBGL,
|
||||
target: 'webglMap'
|
||||
});
|
||||
|
||||
var domMap = new ol.Map({
|
||||
renderer: ol.RendererHint.DOM,
|
||||
target: 'domMap'
|
||||
});
|
||||
domMap.bindTo('layers', webglMap);
|
||||
domMap.bindTo('view', webglMap);
|
||||
@@ -1 +1 @@
|
||||
var info={"index": {"and": {"2": 1, "3": 1, "4": 1}, "layer": {"3": 1, "5": 1}, "projection": {"4": 3}, "ed": {"2": 1, "3": 1}, "national": {"4": 1}, "sync": {"2": 2, "3": 1}, "21781": {"4": 1}, "openaerial": {"0": 1, "1": 1}, "tilelayer": {"0": 1, "4": 1, "5": 1}, "popup": {"1": 1}, "mapquest": {"0": 1, "1": 1}, "overlays": {"1": 1}, "layers": {"3": 2, "4": 1}, "fullscreen": {"0": 1}, "overlay": {"1": 2}, "wms": {"4": 3, "5": 3}, "demonstrates": {"1": 1}, "webgl": {"2": 2, "3": 1}, "two": {"3": 2, "4": 1}, "parks": {"4": 1}, "custom": {"4": 1}, "1": {"4": 2}, "maps": {"2": 1, "3": 1}, "pixelmap": {"4": 1}, "tile": {"0": 1, "4": 1, "5": 1}, "map": {"0": 1}, "full": {"0": 2}, "screen": {"0": 2}, "object": {"2": 1}, "000": {"4": 2}, "tiled": {"4": 2, "5": 2}, "using": {"4": 1}, "tilejson": {"3": 1}, "with": {"3": 1, "4": 1}, "by": {"2": 3}, "bingmaps": {"3": 1}, "a": {"0": 1, "5": 1}, "dom": {"2": 2, "3": 1}, "of": {"0": 1, "4": 1, "5": 1}, "bing": {"3": 1}, "example": {"0": 2, "1": 1, "2": 1, "3": 1, "4": 2, "5": 2}, "epsg": {"4": 1}, "the": {"4": 1}, "side": {"2": 6}}, "examples": [{"author": "\u00c9ric Lemoine", "tags": "fullscreen, mapquest, openaerial, tile, tilelayer", "modified": "2012-10-21T21:11:27+0200", "classes": [], "link": "full-screen.html", "shortdesc": "Example of a full-screen map.", "title": "Full-screen example", "example": "full-screen.html"}, {"author": "\u00c9ric Lemoine", "tags": "overlay, popup, mapquest, openaerial", "modified": "2012-10-21T21:11:27+0200", "classes": [], "link": "overlay-and-popup.html", "shortdesc": "Demonstrates Overlays.", "title": "Overlay example", "example": "overlay-and-popup.html"}, {"author": "\u00c9ric Lemoine", "tags": "side-by-side, webgl, dom, sync, object", "modified": "2012-10-20T21:43:34+0200", "classes": [], "link": "side-by-side.html", "shortdesc": "Side-by-side DOM and WebGL sync'ed maps.", "title": "Side-by-side example", "example": "side-by-side.html"}, {"author": "\u00c9ric Lemoine", "tags": "layers, tilejson, bing, bingmaps", "modified": "2012-10-20T21:43:34+0200", "classes": [], "link": "two-layers.html", "shortdesc": "Sync'ed DOM and WebGL maps with two layers.", "title": "Two-layer example", "example": "two-layers.html"}, {"author": "ahocevar", "tags": "wms, tile, tilelayer, projection", "modified": "2012-10-29T09:33:00+0100", "classes": [], "link": "wms-custom-proj.html", "shortdesc": "Example of two tiled WMS layers (Pixelmap 1:1'000'000 and national parks) using the projection EPSG:21781.", "title": "Tiled WMS with custom projection example", "example": "wms-custom-proj.html"}, {"author": "ahocevar", "tags": "wms, tile, tilelayer", "modified": "2012-10-26T21:36:30+0200", "classes": [], "link": "wms.html", "shortdesc": "Example of a tiled WMS layer.", "title": "Tiled WMS example", "example": "wms.html"}]}
|
||||
var info={"index": {"origin": {"0": 2}, "and": {"3": 1, "4": 1, "5": 1}, "layer": {"4": 1, "6": 1}, "projection": {"5": 3}, "ed": {"3": 1, "4": 1}, "national": {"5": 1}, "sync": {"3": 2, "4": 1}, "21781": {"5": 1}, "an": {"0": 1}, "openaerial": {"1": 1, "2": 1}, "tilelayer": {"1": 1, "5": 1, "6": 1}, "popup": {"2": 1}, "osm": {"0": 1}, "are": {"0": 2}, "mapquest": {"1": 1, "2": 1}, "1": {"5": 2}, "overlays": {"2": 1}, "tiled": {"5": 2, "6": 2}, "webgl": {"3": 2, "4": 1}, "layers": {"0": 1, "4": 2, "5": 1}, "fullscreen": {"1": 1}, "canvas": {"0": 3, "3": 1, "4": 1}, "html5": {"0": 1}, "bottom": {"0": 1}, "wms": {"5": 3, "6": 3}, "demonstrates": {"2": 1}, "top": {"0": 1}, "two": {"4": 2, "5": 1}, "coordinates": {"0": 3}, "custom": {"5": 1}, "note": {"0": 1}, "maps": {"3": 1, "4": 1}, "pixelmap": {"5": 1}, "black": {"0": 1}, "tile": {"0": 3, "1": 1, "5": 1, "6": 1}, "parks": {"5": 1}, "stamen": {"0": 1}, "map": {"1": 1}, "tiles": {"0": 2}, "full": {"1": 2}, "that": {"0": 1}, "screen": {"1": 2}, "object": {"3": 1}, "generated": {"0": 1}, "ol3": {"0": 1}, "grid": {"0": 1}, "normalized": {"0": 1}, "not": {"0": 1}, "using": {"5": 1}, "tilejson": {"4": 1}, "with": {"0": 1, "4": 1, "5": 1}, "by": {"3": 3}, "bingmaps": {"4": 1}, "a": {"1": 1, "6": 1}, "on": {"0": 1}, "dom": {"3": 2, "4": 1}, "of": {"1": 1, "5": 1, "6": 1}, "bing": {"4": 1}, "overlay": {"2": 2}, "000": {"5": 2}, "side": {"3": 6}, "client": {"0": 1}, "epsg": {"5": 1}, "the": {"0": 3, "5": 1}, "example": {"0": 1, "1": 2, "2": 1, "3": 1, "4": 1, "5": 2, "6": 2}, "left": {"0": 2}}, "examples": [{"author": "Tom Payne", "tags": "layers, stamen, canvas", "modified": "2013-01-05T18:33:37+0100", "classes": [], "link": "canvas-tiles.html", "shortdesc": "The black grid tiles are generated on the client with an HTML5 canvas. Note that the tile coordinates are ol3 normalized tile coordinates (origin bottom left), not OSM tile coordinates (origin top left).", "title": "Canvas tiles example", "example": "canvas-tiles.html"}, {"author": "\u00c9ric Lemoine", "tags": "fullscreen, mapquest, openaerial, tile, tilelayer", "modified": "2012-10-21T21:11:27+0200", "classes": [], "link": "full-screen.html", "shortdesc": "Example of a full-screen map.", "title": "Full-screen example", "example": "full-screen.html"}, {"author": "\u00c9ric Lemoine", "tags": "overlay, popup, mapquest, openaerial", "modified": "2012-10-21T21:11:27+0200", "classes": [], "link": "overlay-and-popup.html", "shortdesc": "Demonstrates Overlays.", "title": "Overlay example", "example": "overlay-and-popup.html"}, {"author": "Tom Payne", "tags": "side-by-side, webgl, dom, sync, object", "modified": "2013-01-14T21:48:22+0100", "classes": [], "link": "side-by-side.html", "shortdesc": "Side-by-side DOM, WebGL and Canvas sync'ed maps.", "title": "Side-by-side example", "example": "side-by-side.html"}, {"author": "Tom Payne", "tags": "layers, tilejson, bing, bingmaps", "modified": "2013-01-14T21:48:55+0100", "classes": [], "link": "two-layers.html", "shortdesc": "Sync'ed DOM, WebGL and Canvas maps with two layers.", "title": "Two-layer example", "example": "two-layers.html"}, {"author": "ahocevar", "tags": "wms, tile, tilelayer, projection", "modified": "2012-10-29T09:33:00+0100", "classes": [], "link": "wms-custom-proj.html", "shortdesc": "Example of two tiled WMS layers (Pixelmap 1:1'000'000 and national parks) using the projection EPSG:21781.", "title": "Tiled WMS with custom projection example", "example": "wms-custom-proj.html"}, {"author": "ahocevar", "tags": "wms, tile, tilelayer", "modified": "2012-10-26T21:36:30+0200", "classes": [], "link": "wms.html", "shortdesc": "Example of a tiled WMS layer.", "title": "Tiled WMS example", "example": "wms.html"}]};
|
||||
@@ -1 +1 @@
|
||||
<?xml version="1.0" ?><feed xmlns="http://www.w3.org/2005/Atom"><title>OpenLayers Examples</title><id>http://openlayers.github.com/ol3/master/examples/example-list.xml#2012-11-11T08:21:31Z</id><updated>2012-11-11T08:21:31Z</updated><entry><title>Tiled WMS with custom projection example</title><tags>wms, tile, tilelayer, projection</tags><link href="http://openlayers.github.com/ol3/master/examples/wms-custom-proj.html"/><summary>Example of two tiled WMS layers (Pixelmap 1:1'000'000 and national parks) using the projection EPSG:21781.</summary><updated>2012-10-29T09:33:00+0100</updated><author><name>ahocevar</name></author><id>http://openlayers.github.com/ol3/master/examples/wms-custom-proj.html#2012-10-29T09:33:00+0100</id></entry><entry><title>Tiled WMS example</title><tags>wms, tile, tilelayer</tags><link href="http://openlayers.github.com/ol3/master/examples/wms.html"/><summary>Example of a tiled WMS layer.</summary><updated>2012-10-26T21:36:30+0200</updated><author><name>ahocevar</name></author><id>http://openlayers.github.com/ol3/master/examples/wms.html#2012-10-26T21:36:30+0200</id></entry><entry><title>Full-screen example</title><tags>fullscreen, mapquest, openaerial, tile, tilelayer</tags><link href="http://openlayers.github.com/ol3/master/examples/full-screen.html"/><summary>Example of a full-screen map.</summary><updated>2012-10-21T21:11:27+0200</updated><author><name>Éric Lemoine</name></author><id>http://openlayers.github.com/ol3/master/examples/full-screen.html#2012-10-21T21:11:27+0200</id></entry><entry><title>Overlay example</title><tags>overlay, popup, mapquest, openaerial</tags><link href="http://openlayers.github.com/ol3/master/examples/overlay-and-popup.html"/><summary>Demonstrates Overlays.</summary><updated>2012-10-21T21:11:27+0200</updated><author><name>Éric Lemoine</name></author><id>http://openlayers.github.com/ol3/master/examples/overlay-and-popup.html#2012-10-21T21:11:27+0200</id></entry><entry><title>Side-by-side example</title><tags>side-by-side, webgl, dom, sync, object</tags><link href="http://openlayers.github.com/ol3/master/examples/side-by-side.html"/><summary>Side-by-side DOM and WebGL sync'ed maps.</summary><updated>2012-10-20T21:43:34+0200</updated><author><name>Éric Lemoine</name></author><id>http://openlayers.github.com/ol3/master/examples/side-by-side.html#2012-10-20T21:43:34+0200</id></entry><entry><title>Two-layer example</title><tags>layers, tilejson, bing, bingmaps</tags><link href="http://openlayers.github.com/ol3/master/examples/two-layers.html"/><summary>Sync'ed DOM and WebGL maps with two layers.</summary><updated>2012-10-20T21:43:34+0200</updated><author><name>Éric Lemoine</name></author><id>http://openlayers.github.com/ol3/master/examples/two-layers.html#2012-10-20T21:43:34+0200</id></entry></feed>
|
||||
<?xml version="1.0" ?><feed xmlns="http://www.w3.org/2005/Atom"><title>OpenLayers Examples</title><id>http://openlayers.github.com/ol3/master/examples/example-list.xml#2013-01-17T08:55:25Z</id><updated>2013-01-17T08:55:25Z</updated><entry><title>Two-layer example</title><tags>layers, tilejson, bing, bingmaps</tags><link href="http://openlayers.github.com/ol3/master/examples/two-layers.html"/><summary>Sync'ed DOM, WebGL and Canvas maps with two layers.</summary><updated>2013-01-14T21:48:55+0100</updated><author><name>Tom Payne</name></author><id>http://openlayers.github.com/ol3/master/examples/two-layers.html#2013-01-14T21:48:55+0100</id></entry><entry><title>Side-by-side example</title><tags>side-by-side, webgl, dom, sync, object</tags><link href="http://openlayers.github.com/ol3/master/examples/side-by-side.html"/><summary>Side-by-side DOM, WebGL and Canvas sync'ed maps.</summary><updated>2013-01-14T21:48:22+0100</updated><author><name>Tom Payne</name></author><id>http://openlayers.github.com/ol3/master/examples/side-by-side.html#2013-01-14T21:48:22+0100</id></entry><entry><title>Canvas tiles example</title><tags>layers, stamen, canvas</tags><link href="http://openlayers.github.com/ol3/master/examples/canvas-tiles.html"/><summary>The black grid tiles are generated on the client with an HTML5 canvas. Note that the tile coordinates are ol3 normalized tile coordinates (origin bottom left), not OSM tile coordinates (origin top left).</summary><updated>2013-01-05T18:33:37+0100</updated><author><name>Tom Payne</name></author><id>http://openlayers.github.com/ol3/master/examples/canvas-tiles.html#2013-01-05T18:33:37+0100</id></entry><entry><title>Tiled WMS with custom projection example</title><tags>wms, tile, tilelayer, projection</tags><link href="http://openlayers.github.com/ol3/master/examples/wms-custom-proj.html"/><summary>Example of two tiled WMS layers (Pixelmap 1:1'000'000 and national parks) using the projection EPSG:21781.</summary><updated>2012-10-29T09:33:00+0100</updated><author><name>ahocevar</name></author><id>http://openlayers.github.com/ol3/master/examples/wms-custom-proj.html#2012-10-29T09:33:00+0100</id></entry><entry><title>Tiled WMS example</title><tags>wms, tile, tilelayer</tags><link href="http://openlayers.github.com/ol3/master/examples/wms.html"/><summary>Example of a tiled WMS layer.</summary><updated>2012-10-26T21:36:30+0200</updated><author><name>ahocevar</name></author><id>http://openlayers.github.com/ol3/master/examples/wms.html#2012-10-26T21:36:30+0200</id></entry><entry><title>Full-screen example</title><tags>fullscreen, mapquest, openaerial, tile, tilelayer</tags><link href="http://openlayers.github.com/ol3/master/examples/full-screen.html"/><summary>Example of a full-screen map.</summary><updated>2012-10-21T21:11:27+0200</updated><author><name>Éric Lemoine</name></author><id>http://openlayers.github.com/ol3/master/examples/full-screen.html#2012-10-21T21:11:27+0200</id></entry><entry><title>Overlay example</title><tags>overlay, popup, mapquest, openaerial</tags><link href="http://openlayers.github.com/ol3/master/examples/overlay-and-popup.html"/><summary>Demonstrates Overlays.</summary><updated>2012-10-21T21:11:27+0200</updated><author><name>Éric Lemoine</name></author><id>http://openlayers.github.com/ol3/master/examples/overlay-and-popup.html#2012-10-21T21:11:27+0200</id></entry></feed>
|
||||
@@ -4,6 +4,8 @@ goog.require('goog.debug.Logger.Level');
|
||||
goog.require('ol.Collection');
|
||||
goog.require('ol.Coordinate');
|
||||
goog.require('ol.Map');
|
||||
goog.require('ol.RendererHints');
|
||||
goog.require('ol.View2D');
|
||||
goog.require('ol.source.MapQuestOpenAerial');
|
||||
|
||||
|
||||
@@ -17,8 +19,11 @@ var layer = new ol.layer.TileLayer({
|
||||
source: new ol.source.MapQuestOpenAerial()
|
||||
});
|
||||
var map = new ol.Map({
|
||||
center: new ol.Coordinate(0, 0),
|
||||
layers: new ol.Collection([layer]),
|
||||
renderers: ol.RendererHints.createFromQueryData(),
|
||||
target: 'map',
|
||||
zoom: 2
|
||||
view: new ol.View2D({
|
||||
center: new ol.Coordinate(0, 0),
|
||||
zoom: 0
|
||||
})
|
||||
});
|
||||
|
||||
@@ -247,6 +247,9 @@
|
||||
}
|
||||
}
|
||||
window.onload = function() {
|
||||
for(var i=0; i<info.examples.length; ++i) {
|
||||
info.examples[i].link += window.location.search;
|
||||
}
|
||||
//document.getElementById('keywords').focus();
|
||||
template = new jugl.Template("template");
|
||||
target = document.getElementById("examples");
|
||||
|
||||
@@ -4,6 +4,8 @@ goog.require('goog.debug.Logger.Level');
|
||||
goog.require('ol.Collection');
|
||||
goog.require('ol.Coordinate');
|
||||
goog.require('ol.Map');
|
||||
goog.require('ol.RendererHints');
|
||||
goog.require('ol.View2D');
|
||||
goog.require('ol.overlay.Overlay');
|
||||
goog.require('ol.source.MapQuestOpenAerial');
|
||||
|
||||
@@ -17,11 +19,15 @@ if (goog.DEBUG) {
|
||||
var layer = new ol.layer.TileLayer({
|
||||
source: new ol.source.MapQuestOpenAerial()
|
||||
});
|
||||
|
||||
var map = new ol.Map({
|
||||
center: new ol.Coordinate(0, 0),
|
||||
layers: new ol.Collection([layer]),
|
||||
renderers: ol.RendererHints.createFromQueryData(),
|
||||
target: 'map',
|
||||
zoom: 2
|
||||
view: new ol.View2D({
|
||||
center: new ol.Coordinate(0, 0),
|
||||
zoom: 2
|
||||
})
|
||||
});
|
||||
|
||||
// Vienna label
|
||||
|
||||
@@ -16,19 +16,22 @@
|
||||
</head>
|
||||
<body>
|
||||
<h1 id="title">Side-by-side example</h1>
|
||||
<div id="shortdesc">Side-by-side DOM and WebGL sync'ed maps.</div>
|
||||
<div id="shortdesc">Side-by-side DOM, WebGL and Canvas sync'ed maps.</div>
|
||||
<table>
|
||||
<tr>
|
||||
<th>DOM</th>
|
||||
<th>WebGL</th>
|
||||
<th>Canvas</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><div id="domMap" class="map"></div></td>
|
||||
<td><div id="webglMap" class="map"></div></td>
|
||||
<td><div id="canvasMap" class="map"></div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><div id="domMousePosition" class="mouseposition"></div></td>
|
||||
<td><div id="webglMousePosition" class="mouseposition"></div></td>
|
||||
<td><div id="canvasMousePosition" class="mouseposition"></div></td>
|
||||
</tr>
|
||||
</table>
|
||||
<table>
|
||||
@@ -60,6 +63,10 @@
|
||||
<td>Visibility:</td>
|
||||
<td><code>v</code>/<code>V</code> keys</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Animations:</td>
|
||||
<td><code>j</code>/<code>l</code>/<code>m</code>/<code>x</code>/<code>L</code>/<code>M</code>/<code>X</code> keys</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Reset</td>
|
||||
<td><code>0</code> key</td>
|
||||
|
||||
@@ -4,6 +4,8 @@ goog.require('goog.debug.Logger.Level');
|
||||
goog.require('ol.Coordinate');
|
||||
goog.require('ol.Map');
|
||||
goog.require('ol.RendererHint');
|
||||
goog.require('ol.View2D');
|
||||
goog.require('ol.animation');
|
||||
goog.require('ol.control.MousePosition');
|
||||
goog.require('ol.interaction.Keyboard');
|
||||
goog.require('ol.layer.TileLayer');
|
||||
@@ -16,23 +18,32 @@ if (goog.DEBUG) {
|
||||
}
|
||||
|
||||
|
||||
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 layer = new ol.layer.TileLayer({
|
||||
source: new ol.source.MapQuestOpenAerial()
|
||||
});
|
||||
|
||||
var domMap = new ol.Map({
|
||||
var view = new ol.View2D({
|
||||
center: new ol.Coordinate(0, 0),
|
||||
zoom: 1
|
||||
});
|
||||
|
||||
var domMap = new ol.Map({
|
||||
layers: new ol.Collection([layer]),
|
||||
renderer: ol.RendererHint.DOM,
|
||||
target: 'domMap',
|
||||
zoom: 1
|
||||
view: view
|
||||
});
|
||||
|
||||
domMap.getControls().push(new ol.control.MousePosition({
|
||||
coordinateFormat: ol.Coordinate.toStringHDMS,
|
||||
projection: ol.Projection.getFromCode('EPSG:4326'),
|
||||
target: document.getElementById('domMousePosition'),
|
||||
undefinedHtml: ' '
|
||||
undefinedHTML: ' '
|
||||
}));
|
||||
|
||||
var webglMap = new ol.Map({
|
||||
@@ -40,25 +51,39 @@ var webglMap = new ol.Map({
|
||||
target: 'webglMap'
|
||||
});
|
||||
if (webglMap !== null) {
|
||||
webglMap.bindTo('center', domMap);
|
||||
webglMap.bindTo('layers', domMap);
|
||||
webglMap.bindTo('resolution', domMap);
|
||||
webglMap.bindTo('rotation', domMap);
|
||||
webglMap.bindTo('view', domMap);
|
||||
}
|
||||
|
||||
webglMap.getControls().push(new ol.control.MousePosition({
|
||||
coordinateFormat: ol.Coordinate.toStringHDMS,
|
||||
projection: ol.Projection.getFromCode('EPSG:4326'),
|
||||
target: document.getElementById('webglMousePosition'),
|
||||
undefinedHTML: ' '
|
||||
}));
|
||||
|
||||
var canvasMap = new ol.Map({
|
||||
renderer: ol.RendererHint.CANVAS,
|
||||
target: 'canvasMap'
|
||||
});
|
||||
if (canvasMap !== null) {
|
||||
canvasMap.bindTo('layers', domMap);
|
||||
canvasMap.bindTo('view', domMap);
|
||||
}
|
||||
|
||||
canvasMap.getControls().push(new ol.control.MousePosition({
|
||||
coordinateFormat: ol.Coordinate.toStringHDMS,
|
||||
projection: ol.Projection.getFromCode('EPSG:4326'),
|
||||
target: document.getElementById('canvasMousePosition'),
|
||||
undefinedHtml: ' '
|
||||
}));
|
||||
|
||||
var keyboardInteraction = new ol.interaction.Keyboard();
|
||||
keyboardInteraction.addCallback('0', function() {
|
||||
layer.setBrightness(0);
|
||||
layer.setContrast(0);
|
||||
layer.setContrast(1);
|
||||
layer.setHue(0);
|
||||
layer.setSaturation(0);
|
||||
layer.setSaturation(1);
|
||||
layer.setOpacity(1);
|
||||
layer.setVisible(true);
|
||||
});
|
||||
@@ -72,13 +97,60 @@ keyboardInteraction.addCallback('c', function() {
|
||||
layer.setContrast(layer.getContrast() - 0.1);
|
||||
});
|
||||
keyboardInteraction.addCallback('C', function() {
|
||||
layer.setContrast(layer.getContrast() + 0.1);
|
||||
// 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() - 0.1);
|
||||
layer.setHue(layer.getHue() - (Math.PI / 5));
|
||||
});
|
||||
keyboardInteraction.addCallback('H', function() {
|
||||
layer.setHue(layer.getHue() + 0.1);
|
||||
layer.setHue(layer.getHue() + (Math.PI / 5));
|
||||
});
|
||||
keyboardInteraction.addCallback('j', function() {
|
||||
var bounce = ol.animation.createBounce(2 * view.getResolution());
|
||||
domMap.addPreRenderFunction(bounce);
|
||||
webglMap.addPreRenderFunction(bounce);
|
||||
canvasMap.addPreRenderFunction(bounce);
|
||||
});
|
||||
keyboardInteraction.addCallback('l', function() {
|
||||
var panFrom = ol.animation.createPanFrom(view.getCenter());
|
||||
domMap.addPreRenderFunction(panFrom);
|
||||
webglMap.addPreRenderFunction(panFrom);
|
||||
canvasMap.addPreRenderFunction(panFrom);
|
||||
view.setCenter(LONDON);
|
||||
});
|
||||
keyboardInteraction.addCallback('L', function() {
|
||||
var start = Date.now();
|
||||
var duration = 5000;
|
||||
var bounce = ol.animation.createBounce(
|
||||
2 * view.getResolution(), duration, start);
|
||||
var panFrom = ol.animation.createPanFrom(view.getCenter(), duration, start);
|
||||
var spin = ol.animation.createSpin(duration, 2, start);
|
||||
var preRenderFunctions = [bounce, panFrom, spin];
|
||||
domMap.addPreRenderFunctions(preRenderFunctions);
|
||||
webglMap.addPreRenderFunctions(preRenderFunctions);
|
||||
canvasMap.addPreRenderFunctions(preRenderFunctions);
|
||||
view.setCenter(LONDON);
|
||||
});
|
||||
keyboardInteraction.addCallback('m', function() {
|
||||
var panFrom = ol.animation.createPanFrom(view.getCenter(), 1000);
|
||||
domMap.addPreRenderFunction(panFrom);
|
||||
webglMap.addPreRenderFunction(panFrom);
|
||||
canvasMap.addPreRenderFunction(panFrom);
|
||||
view.setCenter(MOSCOW);
|
||||
});
|
||||
keyboardInteraction.addCallback('M', function() {
|
||||
var start = Date.now();
|
||||
var duration = 5000;
|
||||
var bounce = ol.animation.createBounce(
|
||||
2 * view.getResolution(), duration, start);
|
||||
var panFrom = ol.animation.createPanFrom(view.getCenter(), duration, start);
|
||||
var spin = ol.animation.createSpin(duration, -2, start);
|
||||
var preRenderFunctions = [bounce, panFrom, spin];
|
||||
domMap.addPreRenderFunctions(preRenderFunctions);
|
||||
webglMap.addPreRenderFunctions(preRenderFunctions);
|
||||
canvasMap.addPreRenderFunctions(preRenderFunctions);
|
||||
view.setCenter(MOSCOW);
|
||||
});
|
||||
keyboardInteraction.addCallback('o', function() {
|
||||
layer.setOpacity(layer.getOpacity() - 0.1);
|
||||
@@ -87,15 +159,28 @@ keyboardInteraction.addCallback('O', function() {
|
||||
layer.setOpacity(layer.getOpacity() + 0.1);
|
||||
});
|
||||
keyboardInteraction.addCallback('r', function() {
|
||||
webglMap.setRotation(0);
|
||||
view.setRotation(0);
|
||||
});
|
||||
keyboardInteraction.addCallback('s', function() {
|
||||
layer.setSaturation(layer.getSaturation() - 0.1);
|
||||
});
|
||||
keyboardInteraction.addCallback('S', function() {
|
||||
layer.setSaturation(layer.getSaturation() + 0.1);
|
||||
// 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 spin = ol.animation.createSpin(2000, 2);
|
||||
domMap.addPreRenderFunction(spin);
|
||||
webglMap.addPreRenderFunction(spin);
|
||||
canvasMap.addPreRenderFunction(spin);
|
||||
});
|
||||
keyboardInteraction.addCallback('X', function() {
|
||||
var spin = ol.animation.createSpin(2000, -2);
|
||||
domMap.addPreRenderFunction(spin);
|
||||
webglMap.addPreRenderFunction(spin);
|
||||
canvasMap.addPreRenderFunction(spin);
|
||||
});
|
||||
domMap.getInteractions().push(keyboardInteraction);
|
||||
|
||||
@@ -16,15 +16,17 @@
|
||||
</head>
|
||||
<body>
|
||||
<h1 id="title">Two-layer example</h1>
|
||||
<div id="shortdesc">Sync'ed DOM and WebGL maps with two layers.</div>
|
||||
<div id="shortdesc">Sync'ed DOM, WebGL and Canvas maps with two layers.</div>
|
||||
<table>
|
||||
<tr>
|
||||
<th>DOM</th>
|
||||
<th>WebGL</th>
|
||||
<th>Canvas</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><div id="domMap" class="map"></div></td>
|
||||
<td><div id="webglMap" class="map"></div></td>
|
||||
<td><div id="canvasMap" class="map"></div></td>
|
||||
</tr>
|
||||
</table>
|
||||
<div id="docs">
|
||||
|
||||
@@ -3,6 +3,7 @@ goog.require('ol.Coordinate');
|
||||
goog.require('ol.Map');
|
||||
goog.require('ol.Projection');
|
||||
goog.require('ol.RendererHint');
|
||||
goog.require('ol.View2D');
|
||||
goog.require('ol.layer.TileLayer');
|
||||
goog.require('ol.source.BingMaps');
|
||||
goog.require('ol.source.TileJSON');
|
||||
@@ -11,7 +12,7 @@ goog.require('ol.source.TileJSON');
|
||||
var layers = new ol.Collection([
|
||||
new ol.layer.TileLayer({
|
||||
source: new ol.source.BingMaps({
|
||||
key: 'Ak0kFwyFsvMr0dVwuaURTqKAXytSSN47KOdj4uVpaWBhK-DT6Zo-FeHCiJUL0tYL',
|
||||
key: 'AgtFlPYDnymLEe9zJ5PCkghbNiFZE9aAtTy3mPaEnEBXqLHtFuTcKoZ-miMC3w7R',
|
||||
style: ol.BingMapsStyle.AERIAL
|
||||
})
|
||||
}),
|
||||
@@ -23,19 +24,27 @@ var layers = new ol.Collection([
|
||||
]);
|
||||
|
||||
var webglMap = new ol.Map({
|
||||
center: ol.Projection.transformWithCodes(
|
||||
new ol.Coordinate(-77.93255, 37.9555), 'EPSG:4326', 'EPSG:3857'),
|
||||
layers: layers,
|
||||
renderer: ol.RendererHint.WEBGL,
|
||||
target: 'webglMap',
|
||||
zoom: 5
|
||||
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('center', webglMap);
|
||||
domMap.bindTo('layers', webglMap);
|
||||
domMap.bindTo('resolution', webglMap);
|
||||
domMap.bindTo('rotation', webglMap);
|
||||
domMap.bindTo('view', webglMap);
|
||||
|
||||
|
||||
var canvasMap = new ol.Map({
|
||||
renderer: ol.RendererHint.CANVAS,
|
||||
target: 'canvasMap'
|
||||
});
|
||||
canvasMap.bindTo('layers', webglMap);
|
||||
canvasMap.bindTo('view', webglMap);
|
||||
|
||||
@@ -5,6 +5,8 @@ goog.require('ol.Collection');
|
||||
goog.require('ol.Coordinate');
|
||||
goog.require('ol.Map');
|
||||
goog.require('ol.Projection');
|
||||
goog.require('ol.RendererHints');
|
||||
goog.require('ol.View2D');
|
||||
goog.require('ol.source.TiledWMS');
|
||||
|
||||
|
||||
@@ -50,12 +52,15 @@ var layers = new ol.Collection([
|
||||
]);
|
||||
|
||||
var map = new ol.Map({
|
||||
center: new ol.Coordinate(660000, 190000),
|
||||
projection: epsg21781,
|
||||
// By setting userProjection to the same as projection, we do not need
|
||||
// proj4js because we do not need any transforms.
|
||||
userProjection: epsg21781,
|
||||
layers: layers,
|
||||
renderers: ol.RendererHints.createFromQueryData(),
|
||||
target: 'map',
|
||||
zoom: 9
|
||||
view: new ol.View2D({
|
||||
projection: epsg21781,
|
||||
center: new ol.Coordinate(660000, 190000),
|
||||
zoom: 2
|
||||
})
|
||||
});
|
||||
|
||||
@@ -4,6 +4,7 @@ goog.require('goog.debug.Logger.Level');
|
||||
goog.require('ol.Collection');
|
||||
goog.require('ol.Coordinate');
|
||||
goog.require('ol.Map');
|
||||
goog.require('ol.View2D');
|
||||
goog.require('ol.source.MapQuestOpenAerial');
|
||||
goog.require('ol.source.TiledWMS');
|
||||
|
||||
@@ -31,6 +32,8 @@ var map = new ol.Map({
|
||||
renderer: ol.RendererHint.DOM,
|
||||
layers: layers,
|
||||
target: 'map',
|
||||
center: new ol.Coordinate(-10997148, 4569099),
|
||||
zoom: 4
|
||||
view: new ol.View2D({
|
||||
center: new ol.Coordinate(-10997148, 4569099),
|
||||
zoom: 4
|
||||
})
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user