The three maps, one WebGL, one Canvas, one DOM, share the same center, resolution, rotation and layers.
The three maps, one WebGL, one Canvas, one DOM, share the same center, resolution, rotation and layers.
<!DOCTYPE html>
<html>
<head>
<title>Shared Views</title>
<link rel="stylesheet" href="http://openlayers.org/en/v3.16.0/css/ol.css" type="text/css">
<script src="http://openlayers.org/en/v3.16.0/build/ol.js"></script>
</head>
<body>
<h4>Canvas</h4>
<div id="canvasMap" class="map"></div>
<h4>WebGL</h4>
<div id="webglMap" class="map"></div>
<div id="no-webgl" class="alert alert-danger" style="display: none">
This map requires a browser that supports <a href="http://get.webgl.org/">WebGL</a>.
</div>
<h4>DOM</h4>
<div id="domMap" class="map"></div>
<script>
var map1 = new ol.Map({
layers: [
new ol.layer.Tile({
source: new ol.source.MapQuest({layer: 'sat'})
})
],
renderer: 'dom',
target: 'domMap',
view: new ol.View({
center: [0, 0],
zoom: 1
})
});
var map2 = new ol.Map({
target: 'canvasMap',
layers: map1.getLayers(),
view: map1.getView()
});
if (ol.has.WEBGL) {
var map3 = new ol.Map({
renderer: 'webgl',
target: 'webglMap',
layers: map1.getLayers(),
view: map1.getView()
});
} else {
var info = document.getElementById('no-webgl');
/**
* display error message
*/
info.style.display = '';
}
</script>
</body>
</html>