渲染世界副本
显示多个世界副本;
<!DOCTYPE html>
<html lang="en">
<head>
<title>渲染世界副本</title>
<meta property="og:description" content="显示多个世界副本" />
<meta charset='utf-8'>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel='stylesheet' href='https://unpkg.com/maplibre-gl@5.5.0/dist/maplibre-gl.css' />
<script src='https://unpkg.com/maplibre-gl@5.5.0/dist/maplibre-gl.js'></script>
<style>
body { margin: 0; padding: 0; }
html, body, #map { height: 100%; }
.control-panel {
position: absolute;
top: 10px;
left: 10px;
background: rgba(255, 255, 255, 0.9);
border-radius: 4px;
padding: 10px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
font-family: 'Arial', sans-serif;
font-size: 14px;
line-height: 1.5;
max-width: 300px;
z-index: 1;
}
.control-panel h3 {
margin: 0 0 10px 0;
font-size: 16px;
border-bottom: 1px solid #ddd;
padding-bottom: 5px;
}
.control-section {
margin-bottom: 15px;
}
.toggle-section {
display: flex;
align-items: center;
margin-bottom: 10px;
}
.toggle-label {
margin-left: 10px;
font-weight: bold;
}
.toggle-description {
margin-top: 3px;
margin-left: 32px;
font-size: 12px;
color: #666;
}
/* 开关样式 */
.switch {
position: relative;
display: inline-block;
width: 44px;
height: 22px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
transition: .4s;
border-radius: 22px;
}
.slider:before {
position: absolute;
content: "";
height: 18px;
width: 18px;
left: 2px;
bottom: 2px;
background-color: white;
transition: .4s;
border-radius: 50%;
}
input:checked + .slider {
background-color: #4285F4;
}
input:focus + .slider {
box-shadow: 0 0 1px #4285F4;
}
input:checked + .slider:before {
transform: translateX(22px);
}
button {
background-color: #4285F4;
color: white;
border: none;
padding: 5px 10px;
border-radius: 4px;
font-weight: bold;
cursor: pointer;
font-size: 14px;
margin-right: 10px;
}
button:hover {
background-color: #3367D6;
}
.button-section {
display: flex;
justify-content: flex-start;
}
</style>
</head>
<body>
<div id="map"></div>
<div class="control-panel">
<h3>渲染世界副本设置</h3>
<div class="control-section">
<div class="toggle-section">
<label class="switch">
<input type="checkbox" id="toggle-render-world-copies" checked>
<span class="slider"></span>
</label>
<div class="toggle-label">渲染世界副本</div>
</div>
<div class="toggle-description">
启用或禁用渲染地图的多个副本
</div>
</div>
<div class="control-section">
<div class="button-section">
<button id="zoom-out-button">缩小</button>
<button id="add-marker-button">添加标记</button>
</div>
</div>
<div class="control-section">
<p>世界地图副本是指在缩小视图时显示的重复的世界地图。这对于在低缩放级别观察跨越日期变更线的数据很有用。</p>
<p>缩小并向左或向右平移地图，观察副本的显示效果。使用开关可以控制是否显示这些副本。</p>
</div>
</div>
<script>
const map = new maplibregl.Map({
container: 'map',
style: 'https://api.maptiler.com/maps/streets/style.json?key=get_your_own_OpIi9ZULNHzrESv6T2vL',
center: [0, 0],
zoom: 1.5,
renderWorldCopies: true // 默认启用世界副本
});
// 添加导航控件
map.addControl(new maplibregl.NavigationControl());
// 获取DOM元素
const renderWorldCopiesToggle = document.getElementById('toggle-render-world-copies');
const zoomOutButton = document.getElementById('zoom-out-button');
const addMarkerButton = document.getElementById('add-marker-button');
// 监听渲染世界副本开关变化
renderWorldCopiesToggle.addEventListener('change', function() {
map.setRenderWorldCopies(this.checked);
});
// 缩小按钮
zoomOutButton.addEventListener('click', function() {
// 缩小到能看到多个世界的级别
if (map.getZoom() > 0.5) {
map.easeTo({
zoom: Math.max(0, map.getZoom() - 0.5),
duration: 500
});
}
});
// 用于跟踪添加的标记
let markers = [];
// 添加标记按钮
addMarkerButton.addEventListener('click', function() {
// 在地图的中心添加一个标记
const marker = new maplibregl.Marker({
color: '#F44336',
draggable: true
})
.setLngLat(map.getCenter())
.addTo(map);
// 将标记添加到数组中
markers.push(marker);
});
// 添加一个穿越日期变更线的GeoJSON线条
map.on('load', function() {
map.addSource('dateline-crossing', {
'type': 'geojson',
'data': {
'type': 'Feature',
'properties': {},
'geometry': {
'type': 'LineString',
'coordinates': [
[150, 40],
[170, 30],
[-170, 20],
[-150, 10]
]
}
}
});
map.addLayer({
'id': 'dateline-line',
'type': 'line',
'source': 'dateline-crossing',
'layout': {
'line-join': 'round',
'line-cap': 'round'
},
'paint': {
'line-color': '#FF9800',
'line-width': 5,
'line-dasharray': [2, 1]
}
});
// 在线条的端点添加点
map.addLayer({
'id': 'dateline-points',
'type': 'circle',
'source': 'dateline-crossing',
'paint': {
'circle-radius': 6,
'circle-color': '#FF9800',
'circle-stroke-width': 2,
'circle-stroke-color': '#fff'
}
});
});
</script>
</body>
</html>