mapbox使用v3版本，v2的样式切换不同时间段

创建DayAndNight.js

/*** 使用方式* const dayNight = new DayAndNight({ map: map // map 地图对象}) * 修改类型* dayNight.setConfigProperty(value)*/
class DayAndNight {constructor (sdMap) {this.map = sdMap.mapthis.initStyle()}// 初始化时添加必要样式initStyle () {const map = this.map// 添加一个方向灯map.setLights([{"id": "ambient","type": "ambient","properties": {"color": ["match",["config","lightPreset"],"dawn","hsl(28, 98%, 93%)","day","hsl(0, 0%, 100%)","dusk","hsl(228, 27%, 29%)","night","hsl(217, 100%, 11%)","hsl(0, 0%, 100%)"],"intensity": ["match",["config","lightPreset"],"dawn",0.75,"day",0.8,"dusk",0.8,"night",0.5,0.8]}},{"id": "directional","type": "directional","properties": {"direction": ["match",["config","lightPreset"],"dawn",["literal",[120,50]],"day",["literal",[180,20]],"dusk",["literal",[240,80]],"night",["literal",[270,20]],["literal",[180,20]]],"color": ["match",["config","lightPreset"],"dawn","hsl(33, 98%, 77%)","day","hsl(0, 0%, 100%)","dusk","hsl(30, 98%, 76%)","night","hsl(0, 0%, 29%)","hsl(0, 0%, 100%)"],"intensity": ["interpolate",["linear"],["zoom"],12,["match",["config","lightPreset"],"dawn",0.5,"day",0.2,"dusk",0,"night",0,0.2],14,["match",["config","lightPreset"],"dawn",0.5,"day",0.2,"dusk",0.2,"night",0.5,0.2]],"cast-shadows": true,"shadow-intensity": ["match",["config","lightPreset"],"night",0.5,1]}}]);// 添加雾map.setFog({"vertical-range": [30,120],"range": ["interpolate",["linear"],["zoom"],13,["literal",[1,10]],15,["literal",[1,4]]],"color": ["interpolate",["exponential",1.2],["zoom"],5,["interpolate",["linear"],["measure-light","brightness"],0.1,"hsla(240, 9%, 55%, 1)",0.4,"hsla(0, 0%, 100%, 1)"],7,["interpolate",["linear"],["measure-light","brightness"],0.02,"hsla(213, 63%, 20%, 0.9)",0.03,"hsla(30, 65%, 60%, 0.5)",0.4,"hsla(10, 79%, 88%, 0.95)",0.45,"hsla(200, 60%, 98%, 0.9)"]],"high-color": ["interpolate",["exponential",1.2],["zoom"],5,["interpolate",["linear"],["measure-light","brightness"],0.1,"hsla(215, 100%, 20%, 1)",0.4,"hsla(215, 100%, 51%, 1)"],7,["interpolate",["linear"],["measure-light","brightness"],0,"hsla(228, 38%, 20%, 1)",0.05,"hsla(360, 100%, 85%, 1)",0.2,"hsla(205, 88%, 86%, 1)",0.4,"hsla(270, 65%, 85%, 1)",0.45,"hsla(0, 0%, 100%, 1)"]],"space-color": ["interpolate",["exponential",1.2],["zoom"],5,"hsl(211, 84%, 9%)",7,["interpolate",["linear"],["measure-light","brightness"],0,"hsl(211, 84%, 17%)",0.2,"hsl(210, 40%, 30%)",0.4,"hsl(270, 45%, 98%)",0.45,"hsl(210, 100%, 80%)"]],"horizon-blend": ["interpolate",["exponential",1.2],["zoom"],5,0.01,7,["interpolate",["exponential",1.2],["measure-light","brightness"],0.35,0.03,0.4,0.1,0.45,0.03]],"star-intensity": ["interpolate",["exponential",1.2],["zoom"],5,0.4,7,["interpolate",["exponential",1.2],["measure-light","brightness"],0.1,0.2,0.3,0]]});// 修改相机类型map.setCamera({"camera-projection": "orthographic", // perspective 默认});// 默认白天map.setConfigProperty('', 'lightPreset', "day")}/*** 修改* @param {*} value * day    白天* night  夜晚* dawn   破晓* dusk   黄昏*/setConfigProperty(value){const map = this.mapmap.setConfigProperty('', 'lightPreset', value);}
}

使用

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src='https://api.mapbox.com/mapbox-gl-js/v3.0.0/mapbox-gl.js'></script><link href='https://api.mapbox.com/mapbox-gl-js/v3.0.0/mapbox-gl.css' rel='stylesheet' /><style>body {margin: 0;padding: 0;}#map {position: absolute;top: 0;bottom: 0;width: 100%;}#menu {position: absolute;background: #efefef;padding: 10px;font-family: 'Open Sans', sans-serif;top: 10px;left: 10px;}.map-ctrl-zoom {color: #a4a4a4;font-weight: bold;padding: 4px 8px;user-select: none;background: rgb(28, 31, 36);margin: 10px 10px 0 0;}.mapboxgl-ctrl-logo {display: none !important;}#custom-scale {position: absolute;bottom: 10px;left: 10px;background-color: rgba(255, 255, 255, 0.8);padding: 5px 10px;border-radius: 3px;font-size: 12px;font-family: Arial, sans-serif;}</style>
</head><body><div id='map'></div><div id="menu"><input id="day" type="radio" name="rtoggle" value="day" checked="checked"><label for="day">白天</label><input id="night" type="radio" name="rtoggle" value="night"><label for="night">夜晚</label><input id="dawn" type="radio" name="rtoggle" value="dawn"><label for="dawn">破晓</label><input id="dusk" type="radio" name="rtoggle" value="dusk"><label for="dusk">黄昏</label></div><div id='custom-scale'></div>
</body><script src="./js/DayAndNight.js"></script>
<script>mapboxgl.accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN';const map = new mapboxgl.Map({container: 'map', // container IDcenter: [106.1813231568759, 29.556810823148066],zoom: 17,pitch: 60,attributionControl: false,style: `http://`});map.on('style.load', () => {const dayNight = new DayAndNight({map: map,})const itemList = document.getElementById('menu');const inputs = itemList.getElementsByTagName('input');for (const input of inputs) {input.onclick = (layer) => {const value = layer.target.value;dayNight.setConfigProperty(value)};}});
</script></html>