Openlayers示例20 | Shared Views(共享视图)
两张地图（一张公路，一张影像）共享相同的中心、分辨率和旋转。
需要申请Key
<!DOCTYPE html>
<html lang="zn">
<head>
<meta charset="UTF-8">
<!-- 引入OpenLayers CSS样式 -->
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.13.0/css/ol.css">
<!-- 引入OpenLayers JS库 -->
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.13.0/build/ol.js"></script>
<!-- css代码 -->
<style>
.map {
width: 100%;
height: 400px;
}
@media (min-width: 800px) {
.wrapper {
display: flex;
}
.half {
padding: 0 10px;
width: 50%;
float: left;
}
}
</style>
<title>Shared Views</title>
</head>
<body>
<div class="wrapper">
<div class="half">
<h4>Road</h4>
<div id="roadMap" class="map"></div>
</div>
<div class="half">
<h4>Aerial</h4>
<div id="aerialMap" class="map"></div>
</div>
</div>
</body>
<script>
const key = 'Get your own API key at https://www.maptiler.com/cloud/';
const attributions =
'<a href="https://www.maptiler.com/copyright/" target="_blank">© MapTiler</a> ' +
'<a href="https://www.openstreetmap.org/copyright" target="_blank">© OpenStreetMap contributors</a>';
const roadLayer = new ol.layer.Tile({
source: new ol.source.XYZ({
attributions: attributions,
url: 'https://api.maptiler.com/maps/streets/{z}/{x}/{y}.png?key=' + key,
tileSize: 512,
maxZoom: 22,
}),
});
const aerialLayer = new ol.layer.Tile({
source: new ol.source.XYZ({
attributions: attributions,
url: 'https://api.maptiler.com/tiles/satellite/{z}/{x}/{y}.jpg?key=' + key,
maxZoom: 20,
}),
});
const view = new ol.View({
center: [-6655.5402445057125, 6709968.258934638],
zoom: 13,
});
const map1 = new ol.Map({
target: 'roadMap',
layers: [roadLayer],
view: view,
});
const map2 = new ol.Map({
target: 'aerialMap',
layers: [aerialLayer],
view: view,
});
</script>
</html>
