原理
两个map共用一个view
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>分屏对比</title>
<script src="./v6.12.0-dist/ol.js"></script>
<link rel="stylesheet" href="./v6.12.0-dist/ol.css">
<style>
#mapContainer {
width: 50%;
height: 100%;
left: 0;
bottom: 0;
position: absolute;
}
#mapContainer2 {
width: 50%;
height: 100%;
right: 0;
bottom: 0;
position: absolute;
}
</style>
</head>
<body>
<div id="mapContainer" class="map"></div>
<div id="mapContainer2" class="map"></div>
<script>
const view = new ol.View({
center: [0, 0],
zoom: 2,
})
let map = new ol.Map({
target: "mapContainer",
layers: [
new ol.layer.Tile({
source: new ol.source.XYZ({
url: 'http://t4.tianditu.com/DataServer?T=img_w&tk={密钥}&x={x}&y={y}&l={z}',
maxZoom: 20,
}),
}),
],
view: view,
});
let map2 = new ol.Map({
target: "mapContainer2",
layers: [
new ol.layer.Tile({
source: new ol.source.XYZ({
url: 'http://t4.tianditu.com/DataServer?T=vec_w&tk={密钥}&x={x}&y={y}&l={z}',
maxZoom: 20,
}),
}),
],
view: view
});
</script>
</body>
评论区