<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Swipe between maps</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<link href="https://api.mapbox.com/mapbox-gl-js/v3.4.0/mapbox-gl.css" rel="stylesheet">
<script src="https://api.mapbox.com/mapbox-gl-js/v3.4.0/mapbox-gl.js"></script>
<style>
body {
margin: 0;
padding: 0;
}
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
</style>
</head>
<body>
<style>
body {
overflow: hidden;
}
body * {
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
</style>
<script src="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-compare/v0.4.0/mapbox-gl-compare.js"></script>
<link rel="stylesheet"
href="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-compare/v0.4.0/mapbox-gl-compare.css"
type="text/css">
<div id="comparison-container">
<div id="before" class="map"></div>
<div id="after" class="map"></div>
</div>
<div id="info"
style="position: absolute; top: 10px; left: 10px; background: white; padding: 10px; border-radius: 3px; z-index: 1000;">
</div>
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoiY29yb3MiLCJhIjoiY2s0d2gwMGwyMDAwYTNnbzEybm5qaG1lNSJ9.pT1Zjghw0ZwuCojMbrkQ4Q';
const beforeMap = new mapboxgl.Map({
container: 'before',
// Choose from Mapbox's core styles, or make your own style with Mapbox Studio
//style: 'https://api.maptiler.com/maps/outdoor-v2/style.json?key=ZnF4omtvcg8gLSGWRuwx',
//style: 'mapbox://styles/coros/cly4bo88c00bq01r4gkay3qly',
//style: 'mapbox://styles/coros/clm0db7ba00pw01qyfacjecs0',
//style: 'mapbox://styles/mapbox/outdoors-v12',
//style: 'mapbox://styles/coros/cl6dboonj000w14pg79z3xo65',
//style: 'mapbox://styles/coros/clyyifhhr00ap01px9xdv68q5',
//style: 'mapbox://styles/coros/clm0db7ba00pw01qyfacjecs0',
//style: 'mapbox://styles/coros/clm0db7ba00pw01qyfacjecs0',
style: 'mapbox://styles/mapbox/satellite-v9', // 卫星地图样式
//center: [-105.19127077,39.93133266],
//center: [-105.17149658, 39.95397608],
//center: [114.25750801,16.82079085],
// center: [113.8783, 22.9565],
center: [-81.41416974, 27.81994290],
zoom: 14
});
beforeMap.on('load', () => {
beforeMap.addLayer({
id: 'quadkey-raster-layer-bg',
type: 'raster',
source: {
type: 'raster',
tiles: [
'https://s3-nox-prd-processing-soc-tli-v2-use1.s3.amazonaws.com/img/b_{quadkey}.png'
],
tileSize: 256
},
paint: {
'raster-opacity': 1 // 可以根据需要调整透明度
}
});
beforeMap.addLayer({
id: 'quadkey-raster-layer',
type: 'raster',
source: {
type: 'raster',
tiles: [
'https://s3-nox-prd-processing-soc-tli-v2-use1.s3.amazonaws.com/img/t_{quadkey}.png'
],
tileSize: 256
},
paint: {
'raster-opacity': 1 // 可以根据需要调整透明度
}
});
});
const afterMap = new mapboxgl.Map({
container: 'after',
//style: 'mapbox://styles/mapbox/dark-v11',
//style: 'mapbox://styles/coros/cl6dboonj000w14pg79z3xo65',
//style: 'mapbox://styles/coros/cl6dboonj000w14pg79z3xo65',
// style: 'mapbox://styles/coros/clyyifhhr00ap01px9xdv68q5',
// style: 'mapbox://styles/coros/clyyifhhr00ap01px9xdv68q5/draft',
//style: 'mapbox://styles/coros/clyyifhhr00ap01px9xdv68q5/draft',
// style: 'mapbox://styles/coros/clyyifhhr00ap01px9xdv68q5/draft',
//style: 'mapbox://styles/coros/clyyifhhr00ap01px9xdv68q5',
//style: 'mapbox://styles/coros/clyyifhhr00ap01px9xdv68q5',
//style: 'mapbox://styles/coros/clm0db7ba00pw01qyfacjecs0',
style: 'mapbox://styles/mapbox/satellite-v9', // 卫星地图样式
//center: [-105.19127077,39.93133266],
//center: [114.25750801,16.82079085],
//center: [-105.17149658, 39.95397608],
// center: [113.8783, 22.9565],
center: [-81.41416974, 27.81994290],
zoom: 14
});
afterMap.on('load', () => {
// afterMap.addLayer({
// id: 'quadkey-raster-layer-bg',
// type: 'raster',
// source: {
// type: 'raster',
// tiles: [
// 'https://s3-nox-prd-processing-soc-tli-v2-use1.s3.amazonaws.com/img/b_{quadkey}.png'
// ],
// tileSize: 256
// },
// paint: {
// 'raster-opacity': 0.2 // 可以根据需要调整透明度
// }
// });
afterMap.addLayer({
id: 'quadkey-raster-layer',
type: 'raster',
source: {
type: 'raster',
tiles: [
'https://s3-nox-prd-processing-soc-tli-v2-use1.s3.amazonaws.com/img/t_{quadkey}.png'
],
tileSize: 256
},
paint: {
//'raster-opacity': 1, // 可以根据需要调整透明度
//'raster-contrast': 0.1,
// 'raster-brightness': 0.1
}
});
afterMap.setPaintProperty('quadkey-raster-layer', 'raster-color', [
'interpolate',
['linear'],
['raster-value'],
0, 'rgba(255, 255, 255, 1)',
1, 'rgba(0, 0, 0, 1)'
]);
// afterMap.setPaintProperty('quadkey-raster-layer', 'raster-color', [
// 'interpolate',
// ['linear'],
// ['raster-value'],
// 0, 'rgba(255, 255, 255, 1)',
// 1, 'rgba(255, 255, 255, 0)'
// ]);
});
// A selector or reference to HTML element
const container = '#comparison-container';
const map = new mapboxgl.Compare(beforeMap, afterMap, container, {
// Set this to enable comparing two maps by mouse movement:
// mousemove: true
});
const info = document.getElementById('info');
function updateInfo() {
const zoom = afterMap.getZoom().toFixed(2);
const bounds = afterMap.getBounds();
const bbox = [
bounds.getWest().toFixed(4),
bounds.getSouth().toFixed(4),
bounds.getEast().toFixed(4),
bounds.getNorth().toFixed(4)
].join(', ');
info.innerHTML = `<strong>Zoom Level:</strong> ${zoom}<br><strong>BBox:</strong> ${bbox}`;
}
// afterMap.on('moveend', updateInfo);
afterMap.on('zoomend', updateInfo);
beforeMap.on('zoomend', updateInfo);
afterMap.showTileBoundaries = true;
beforeMap.showTileBoundaries = true;
// Initial update
updateInfo();
</script>
</body>
</html>