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

Merge pull request #346 from twpayne/single-map-in-canvas-tiles-example

Browse Source 
Use a single map in the canvas tiles example
This commit is contained in:
Tom Payne
2013-03-11 09:29:32 -07:00
parent 8b5194da38 2a5d07d929
commit f9c080a67d
2 changed files with 20 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files
examples/canvas-tiles.html
+4 -11
View File
@@ -26,17 +26,8 @@
<div class="container-fluid"> <div class="container-fluid">
<div class="row-fluid"> <div class="row-fluid">
<div class="span4"> <div class="span12">
<h4>Canvas</h4> <div id="map" class="map"></div>
<div id="canvasMap" class="map"></div>
</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> </div>
</div> </div>
@@ -53,6 +44,8 @@
</div> </div>
</div>
<script src="loader.js?id=canvas-tiles" type="text/javascript"></script> <script src="loader.js?id=canvas-tiles" type="text/javascript"></script>
</body> </body>
examples/canvas-tiles.js
+16 -32
View File
@@ -1,6 +1,6 @@
goog.require('ol.Coordinate'); goog.require('ol.Coordinate');
goog.require('ol.Map'); goog.require('ol.Map');
goog.require('ol.RendererHint'); goog.require('ol.RendererHints');
goog.require('ol.View2D'); goog.require('ol.View2D');
goog.require('ol.layer.TileLayer'); goog.require('ol.layer.TileLayer');
goog.require('ol.projection'); goog.require('ol.projection');
@@ -9,41 +9,25 @@ goog.require('ol.source.OpenStreetMap');
goog.require('ol.tilegrid.XYZ'); goog.require('ol.tilegrid.XYZ');
var layers = [ var map = new ol.Map({
new ol.layer.TileLayer({ layers: [
source: new ol.source.OpenStreetMap() new ol.layer.TileLayer({
}), source: new ol.source.OpenStreetMap()
new ol.layer.TileLayer({ }),
source: new ol.source.DebugTileSource({ new ol.layer.TileLayer({
projection: 'EPSG:3857', source: new ol.source.DebugTileSource({
tileGrid: new ol.tilegrid.XYZ({ projection: 'EPSG:3857',
maxZoom: 22 tileGrid: new ol.tilegrid.XYZ({
maxZoom: 22
})
}) })
}) })
}) ],
]; renderers: ol.RendererHints.createFromQueryData(),
target: 'map',
var webglMap = new ol.Map({
view: new ol.View2D({ view: new ol.View2D({
center: ol.projection.transform( center: ol.projection.transform(
new ol.Coordinate(-0.1275, 51.507222), 'EPSG:4326', 'EPSG:3857'), new ol.Coordinate(-0.1275, 51.507222), 'EPSG:4326', 'EPSG:3857'),
zoom: 10 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);
var canvasMap = new ol.Map({
renderer: ol.RendererHint.CANVAS,
target: 'canvasMap'
});
canvasMap.bindTo('layers', webglMap);
canvasMap.bindTo('view', webglMap);