mapbox使用v3版本，v2的样式切换不同时间段
-
创建DayAndNight.js
/** * 使用方式 * const dayNight = new DayAndNight({ map: map // map 地图对象}) * 修改类型 * dayNight.setConfigProperty(value) */ class DayAndNight { constructor (sdMap) { this.map = sdMap.map this.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.map map.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 ID center: [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>
