天空、雾和地形
展示带有天空、雾和地形的地图;
<!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%; }
.panel {
position: absolute;
top: 10px;
right: 10px;
background: rgba(255, 255, 255, 0.9);
padding: 15px;
border-radius: 6px;
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.15);
width: 300px;
font-family: 'Arial', sans-serif;
z-index: 1;
}
.panel h3 {
margin: 0 0 10px 0;
font-size: 16px;
font-weight: 600;
border-bottom: 1px solid #ddd;
padding-bottom: 6px;
}
.control-group {
margin-bottom: 15px;
}
.control-group h4 {
margin: 0 0 8px 0;
font-size: 14px;
}
label {
display: flex;
align-items: center;
margin-bottom: 8px;
cursor: pointer;
}
input[type="checkbox"] {
margin-right: 8px;
}
input[type="range"] {
width: 100%;
margin: 5px 0;
}
.slider-container {
margin-bottom: 10px;
}
.slider-container label {
margin-bottom: 3px;
font-size: 13px;
}
.slider-value {
font-size: 12px;
font-weight: 600;
color: #3887be;
text-align: right;
}
.preset-buttons {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 10px;
}
button {
background: #3887be;
color: white;
border: none;
padding: 6px 10px;
border-radius: 4px;
font-size: 12px;
cursor: pointer;
}
button:hover {
background: #2d6a94;
}
.info-text {
font-size: 12px;
color: #777;
margin-top: 10px;
}
</style>
</head>
<body>
<div id="map"></div>
<div class="panel">
<h3>天空、雾和地形设置</h3>
<div class="control-group">
<h4>可见性控制</h4>
<label>
<input type="checkbox" id="toggle-sky" checked />
显示天空
</label>
<label>
<input type="checkbox" id="toggle-fog" checked />
显示雾
</label>
<label>
<input type="checkbox" id="toggle-terrain" checked />
显示地形
</label>
</div>
<div class="control-group">
<h4>雾设置</h4>
<div class="slider-container">
<label>雾密度</label>
<input type="range" id="fog-density" min="0" max="1" step="0.01" value="0.3" />
<div class="slider-value"><span id="fog-density-value">0.3</span></div>
</div>
<div class="slider-container">
<label>雾近处距离</label>
<input type="range" id="fog-range-near" min="0" max="10" step="0.1" value="2" />
<div class="slider-value"><span id="fog-range-near-value">2.0</span></div>
</div>
<div class="slider-container">
<label>雾远处距离</label>
<input type="range" id="fog-range-far" min="1" max="20" step="0.1" value="10" />
<div class="slider-value"><span id="fog-range-far-value">10.0</span></div>
</div>
</div>
<div class="control-group">
<h4>场景预设</h4>
<div class="preset-buttons">
<button id="preset-sunrise">日出</button>
<button id="preset-daytime">白天</button>
<button id="preset-sunset">日落</button>
<button id="preset-foggy">多雾</button>
<button id="preset-night">夜晚</button>
</div>
</div>
<div class="info-text">
此示例展示了如何组合使用天空、雾和地形效果，创建逼真的场景。
</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: [-119.6, 37.5],
zoom: 7.5,
pitch: 60,
bearing: 0
});
// 添加导航控件
map.addControl(new maplibregl.NavigationControl());
map.on('load', () => {
// 添加地形源
map.addSource('terrain', {
'type': 'raster-dem',
'url': 'https://api.maptiler.com/tiles/terrain-rgb-v2/tiles.json?key=get_your_own_OpIi9ZULNHzrESv6T2vL',
'tileSize': 256
});
// 添加天空图层
map.addLayer({
'id': 'sky',
'type': 'sky',
'paint': {
'sky-type': 'atmosphere',
'sky-atmosphere-sun': [0.0, 90.0],
'sky-atmosphere-sun-intensity': 20
}
});
// 设置地形
map.setTerrain({
'source': 'terrain',
'exaggeration': 1.5
});
// 设置雾
map.setFog({
'color': 'white',
'horizon-blend': 0.1,
'range': [2, 10],
'density': 0.3
});
// 获取UI控件
const toggleSky = document.getElementById('toggle-sky');
const toggleFog = document.getElementById('toggle-fog');
const toggleTerrain = document.getElementById('toggle-terrain');
const fogDensity = document.getElementById('fog-density');
const fogRangeNear = document.getElementById('fog-range-near');
const fogRangeFar = document.getElementById('fog-range-far');
const fogDensityValue = document.getElementById('fog-density-value');
const fogRangeNearValue = document.getElementById('fog-range-near-value');
const fogRangeFarValue = document.getElementById('fog-range-far-value');
// 预设按钮
const presetSunrise = document.getElementById('preset-sunrise');
const presetDaytime = document.getElementById('preset-daytime');
const presetSunset = document.getElementById('preset-sunset');
const presetFoggy = document.getElementById('preset-foggy');
const presetNight = document.getElementById('preset-night');
// 更新雾设置的函数
function updateFog() {
const density = parseFloat(fogDensity.value);
const rangeNear = parseFloat(fogRangeNear.value);
const rangeFar = parseFloat(fogRangeFar.value);
// 更新显示值
fogDensityValue.textContent = density.toFixed(2);
fogRangeNearValue.textContent = rangeNear.toFixed(1);
fogRangeFarValue.textContent = rangeFar.toFixed(1);
// 确保近处距离小于远处距离
if (rangeNear >= rangeFar) {
fogRangeFar.value = rangeNear + 1;
fogRangeFarValue.textContent = (rangeNear + 1).toFixed(1);
}
map.setFog({
'color': 'white',
'horizon-blend': 0.1,
'range': [rangeNear, rangeFar],
'density': density
});
}
// 切换显示/隐藏功能
toggleSky.addEventListener('change', (e) => {
if (e.target.checked) {
map.setLayoutProperty('sky', 'visibility', 'visible');
} else {
map.setLayoutProperty('sky', 'visibility', 'none');
}
});
toggleFog.addEventListener('change', (e) => {
if (e.target.checked) {
map.setFog({
'color': 'white',
'horizon-blend': 0.1,
'range': [parseFloat(fogRangeNear.value), parseFloat(fogRangeFar.value)],
'density': parseFloat(fogDensity.value)
});
} else {
map.setFog(null);
}
});
toggleTerrain.addEventListener('change', (e) => {
if (e.target.checked) {
map.setTerrain({
'source': 'terrain',
'exaggeration': 1.5
});
} else {
map.setTerrain(null);
}
});
// 滑块事件
fogDensity.addEventListener('input', updateFog);
fogRangeNear.addEventListener('input', updateFog);
fogRangeFar.addEventListener('input', updateFog);
// 预设按钮事件
presetSunrise.addEventListener('click', () => {
// 日出设置
map.setPaintProperty('sky', 'sky-atmosphere-sun', [90.0, 15.0]);
map.setPaintProperty('sky', 'sky-atmosphere-sun-intensity', 5);
map.setPaintProperty('sky', 'sky-atmosphere-color', '#ffa64d');
fogDensity.value = 0.1;
fogRangeNear.value = 1;
fogRangeFar.value = 15;
updateFog();
map.setFog({
'color': '#ffd1b3',
'horizon-blend': 0.2,
'range': [1, 15],
'density': 0.1
});
toggleSky.checked = true;
toggleFog.checked = true;
toggleTerrain.checked = true;
map.setLayoutProperty('sky', 'visibility', 'visible');
});
presetDaytime.addEventListener('click', () => {
// 白天设置
map.setPaintProperty('sky', 'sky-atmosphere-sun', [0.0, 90.0]);
map.setPaintProperty('sky', 'sky-atmosphere-sun-intensity', 20);
map.setPaintProperty('sky', 'sky-atmosphere-color', '#7ec0ee');
fogDensity.value = 0.2;
fogRangeNear.value = 2;
fogRangeFar.value = 12;
updateFog();
map.setFog({
'color': 'white',
'horizon-blend': 0.1,
'range': [2, 12],
'density': 0.2
});
toggleSky.checked = true;
toggleFog.checked = true;
toggleTerrain.checked = true;
map.setLayoutProperty('sky', 'visibility', 'visible');
});
presetSunset.addEventListener('click', () => {
// 日落设置
map.setPaintProperty('sky', 'sky-atmosphere-sun', [-90.0, 15.0]);
map.setPaintProperty('sky', 'sky-atmosphere-sun-intensity', 10);
map.setPaintProperty('sky', 'sky-atmosphere-color', '#ff9933');
fogDensity.value = 0.2;
fogRangeNear.value = 1.5;
fogRangeFar.value = 10;
updateFog();
map.setFog({
'color': '#ffccb3',
'horizon-blend': 0.3,
'range': [1.5, 10],
'density': 0.2
});
toggleSky.checked = true;
toggleFog.checked = true;
toggleTerrain.checked = true;
map.setLayoutProperty('sky', 'visibility', 'visible');
});
presetFoggy.addEventListener('click', () => {
// 多雾设置
map.setPaintProperty('sky', 'sky-atmosphere-sun', [0.0, 90.0]);
map.setPaintProperty('sky', 'sky-atmosphere-sun-intensity', 15);
fogDensity.value = 0.8;
fogRangeNear.value = 0.5;
fogRangeFar.value = 4;
updateFog();
map.setFog({
'color': '#e6e6e6',
'horizon-blend': 0.1,
'range': [0.5, 4],
'density': 0.8
});
toggleSky.checked = true;
toggleFog.checked = true;
toggleTerrain.checked = true;
map.setLayoutProperty('sky', 'visibility', 'visible');
});
presetNight.addEventListener('click', () => {
// 夜晚设置
map.setPaintProperty('sky', 'sky-type', 'atmosphere');
map.setPaintProperty('sky', 'sky-atmosphere-sun', [0.0, -90.0]);
map.setPaintProperty('sky', 'sky-atmosphere-sun-intensity', 2);
map.setPaintProperty('sky', 'sky-atmosphere-color', '#000066');
fogDensity.value = 0.3;
fogRangeNear.value = 1;
fogRangeFar.value = 6;
updateFog();
map.setFog({
'color': '#000033',
'horizon-blend': 0.2,
'range': [1, 6],
'density': 0.3
});
toggleSky.checked = true;
toggleFog.checked = true;
toggleTerrain.checked = true;
map.setLayoutProperty('sky', 'visibility', 'visible');
});
});
</script>
</body>
</html>