leaflet加载高德地图，暗黑模式

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>Dynamic Image Filters</title>
  <!-- 引入 Leaflet CSS -->
  <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/leaflet/1.9.4/leaflet.css"/>
  <!-- 引入 Leaflet JS -->
  <script src="https://cdn.bootcdn.net/ajax/libs/leaflet/1.9.4/leaflet.js"></script>

</head>
<body>
  <!-- 创建地图容器 -->
  <div id="map" style="width: 100%; height: 500px;"></div>

  <button onclick="applyFilter()">应用</button>
  <button onclick="removeFilter()">移除</button>

  <script>
    // 初始化 Leaflet 地图
    var map = L.map('map').setView([39.90923, 116.397428], 13);

    // 创建高德地图图层
    var amapLayer = L.tileLayer(
      'http://webst0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}', {
        maxZoom: 18,
        minZoom: 3,
        attribution: '© <a href="http://weibo.com/amap" target="_blank">@高德地图</a>',
        subdomains: ['1', '2', '3', '4']
      }
    );

    // 将高德地图图层添加到 Leaflet 地图
    amapLayer.addTo(map);

    function applyFilter() {
      // 获取所有地图图层中的图像元素
      var images = document.querySelectorAll('.leaflet-layer');

       images.forEach(item=>{
           console.log(item.classList)
           item.classList.add('leaflet-layer2');
      })
 
     
    }

    function removeFilter() {
      var images = document.querySelectorAll('.leaflet-layer');

       images.forEach(item=>{
           console.log(item.classList)
           item.classList.remove('leaflet-tile-container2');
      })
    }
  </script>
      <style>
   .leaflet-layer2 img {
            -webkit-filter: invert(50%) grayscale(0) saturate(0.5) brightness(1.6) opacity(1) hue-rotate(334deg) sepia(10%) !important;
            -ms-filter: invert(1) grayscale(0) saturate(0.5) brightness(1.6) opacity(1) hue-rotate(334deg) sepia(10%) !important;
            -moz-filter: invert(1) grayscale(0) saturate(0.5) brightness(1.6) opacity(1) hue-rotate(334deg) sepia(10%) !important;
            filter: invert(1) grayscale(0) saturate(0.5) brightness(1.6) opacity(1) hue-rotate(334deg) sepia(1%) !important;
    }
  </style>
</body>
</html>
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容