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>

在這里插入圖片描述

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/209787.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/209787.shtml
英文地址，請注明出處：http://en.pswp.cn/news/209787.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！