Add custom fog to a map
This example uses setFog to add a custom atmosphere effect to a map. It transitions between night and day to change the mood of the environment.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Add custom fog to a map</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<link href="https://api.mapbox.com/mapbox-gl-js/v3.11.0/mapbox-gl.css" rel="stylesheet">
<script src="https://api.mapbox.com/mapbox-gl-js/v3.11.0/mapbox-gl.js"></script>
<style>
body { margin: 0; padding: 0; }
#map { position: absolute; top: 0; bottom: 0; width: 100%; }
</style>
</head>
<body>
<div id="map"></div>
<script>
// TO MAKE THE MAP APPEAR YOU MUST
// ADD YOUR ACCESS TOKEN FROM
// https://account.mapbox.com
mapboxgl.accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN';
(async () => {
const map = new mapboxgl.Map({
container: 'map',
zoom: 13,
center: [6.6301, 45.35625],
pitch: 80,
bearing: 160,
interactive: false,
// Choose from Mapbox's core styles, or make your own style with Mapbox Studio
style: 'mapbox://styles/mapbox/satellite-v9'
});
await map.once('style.load');
// Add daytime fog
map.setFog({
'range': [-1, 2],
'horizon-blend': 0.3,
'color': 'white',
'high-color': '#add8e6',
'space-color': '#d8f2ff',
'star-intensity': 0.0
});
// Add 3D terrain
map.addSource('mapbox-dem', {
'type': 'raster-dem',
'url': 'mapbox://mapbox.terrain-rgb',
'tileSize': 512,
'maxzoom': 14
});
map.setTerrain({
'source': 'mapbox-dem',
'exaggeration': 1.5
});
// Run a timing loop to switch between day and night
await map.once('idle');
let lastTime = 0.0;
let animationTime = 0.0;
let cycleTime = 0.0;
let night = true;
const initialBearing = map.getBearing();
function frame(time) {
const elapsedTime = (time - lastTime) / 1000.0;
animationTime += elapsedTime;
cycleTime += elapsedTime;
if (cycleTime >= 10.0) {
if (night) {
// night fog styling
map.setFog({
'range': [-1, 2],
'horizon-blend': 0.3,
'color': '#242B4B',
'high-color': '#161B36',
'space-color': '#0B1026',
'star-intensity': 0.8
});
} else {
// day fog styling
map.setFog({
'range': [-1, 2],
'horizon-blend': 0.3,
'color': 'white',
'high-color': '#add8e6',
'space-color': '#d8f2ff',
'star-intensity': 0.0
});
}
night = !night;
cycleTime = 0.0;
}
const rotation = initialBearing + animationTime * 2.0;
map.setBearing(rotation % 360);
lastTime = time;
window.requestAnimationFrame(frame);
}
window.requestAnimationFrame(frame);
})();
</script>
</body>
</html>
このコードスニペットは、
YOUR_MAPBOX_ACCESS_TOKENをあなたのMapboxアカウントのアクセストークンに置き換えるまで、期待通りに動作しません。import React, { useEffect, useRef } from 'react';
import mapboxgl from 'mapbox-gl';
import 'mapbox-gl/dist/mapbox-gl.css';
const MapboxExample = () => {
const mapContainerRef = useRef();
const mapRef = useRef();
useEffect(() => {
// TO MAKE THE MAP APPEAR YOU MUST
// ADD YOUR ACCESS TOKEN FROM
// https://account.mapbox.com
mapboxgl.accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN';
mapRef.current = new mapboxgl.Map({
container: 'map',
zoom: 13,
center: [6.6301, 45.35625],
pitch: 80,
bearing: 160,
interactive: false,
style: 'mapbox://styles/mapbox/satellite-v9'
});
mapRef.current.once('style.load').then(() => {
mapRef.current.setFog({
range: [-1, 2],
'horizon-blend': 0.3,
color: 'white',
'high-color': '#add8e6',
'space-color': '#d8f2ff',
'star-intensity': 0.0
});
mapRef.current.addSource('mapbox-dem', {
type: 'raster-dem',
url: 'mapbox://mapbox.terrain-rgb',
tileSize: 512,
maxzoom: 14
});
mapRef.current.setTerrain({
source: 'mapbox-dem',
exaggeration: 1.5
});
mapRef.current.once('idle').then(() => {
let lastTime = 0.0;
let animationTime = 0.0;
let cycleTime = 0.0;
let night = true;
const initialBearing = mapRef.current.getBearing();
function frame(time) {
const elapsedTime = (time - lastTime) / 1000.0;
animationTime += elapsedTime;
cycleTime += elapsedTime;
if (cycleTime >= 10.0) {
if (night) {
// night fog styling
mapRef.current.setFog({
range: [-1, 2],
'horizon-blend': 0.3,
color: '#242B4B',
'high-color': '#161B36',
'space-color': '#0B1026',
'star-intensity': 0.8
});
} else {
// day fog styling
mapRef.current.setFog({
range: [-1, 2],
'horizon-blend': 0.3,
color: 'white',
'high-color': '#add8e6',
'space-color': '#d8f2ff',
'star-intensity': 0.0
});
}
night = !night;
cycleTime = 0.0;
}
const rotation = initialBearing + animationTime * 2.0;
mapRef.current.setBearing(rotation % 360);
lastTime = time;
window.requestAnimationFrame(frame);
}
window.requestAnimationFrame(frame);
});
});
return () => mapRef.current.remove();
}, []);
return <div id="map" ref={mapContainerRef} style={{ height: '100%' }} />;
};
export default MapboxExample;
このコードスニペットは、
YOUR_MAPBOX_ACCESS_TOKENをあなたのMapboxアカウントのアクセストークンに置き換えるまで、期待通りに動作しません。More Examples
View some examples of our other style features here:
EXAMPLE
Rain Example Mapbox GL JS
This example adds a rain effect to the map by setting the style's rain property. You can adjust the intensity, direction, color, and more of the precipitation presented on screen.
EXAMPLE
Snow Example Mapbox GL JS
This example adds a snow effect to the map by setting the style's snow property. You can adjust the intensity, direction, color, and more of the precipitation presented on screen.
このexampleは役に立ちましたか？