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

2023-12-13 16:45:01
  1. 创建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);
      }
    }
    
  2. 使用

    <!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>
    

    在这里插入图片描述
    在这里插入图片描述

文章来源:https://blog.csdn.net/Beloved_Jodie/article/details/134896894
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。