OpenLayers示例代码：共享视图
OpenLayers示例代码：共享视图
<!DOCTYPE html>
<html>
<head>
<title>Shared Views</title>
<link rel="stylesheet" href="https://openlayers.org/en/v4.0.1/css/ol.css" type="text/css">
<!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
<script src="https://openlayers.org/en/v4.0.1/build/ol.js"></script>
<style>
@media (min-width: 800px) {
.half {
padding: 0 10px;
width: 50%;
float: left;
}
}
</style>
</head>
<body>
<div class="half">
<h4>Canvas</h4>
<div id="canvasMap" class="map"></div>
</div>
<div class="half">
<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>
</div>
<script>
var layer = new ol.layer.Tile({
source: new ol.source.OSM()
});
var view = new ol.View({
center: [0, 0],
zoom: 1
});
var map1 = new ol.Map({
target: 'canvasMap',
layers: [layer],
view: view
});
if (ol.has.WEBGL) {
var map2 = new ol.Map({
target: 'webglMap',
renderer: /** @type {ol.renderer.Type} */ ('webgl'),
layers: [layer],
view: view
});
} else {
var info = document.getElementById('no-webgl');
/**
* display error message
*/
info.style.display = '';
}
</script>
</body>
</html>
说明：
OpenLayers示例代码：共享视图
