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

最新推荐文章于 2024-05-30 11:27:58 发布

三155

最新推荐文章于 2024-05-30 11:27:58 发布

阅读量423

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/Beloved_Jodie/article/details/134896894

版权

创建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>