切换deck.gl图层

使用MapLibre切换deck.gl图层;

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>切换deck.gl图层</title>
    <meta property="og:description" content="使用MapLibre切换deck.gl图层" />
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="https://unpkg.com/maplibre-gl@5.5.0/dist/maplibre-gl.css" />
    <script src="https://unpkg.com/maplibre-gl@5.5.0/dist/maplibre-gl.js"></script>
    <script src="https://unpkg.com/deck.gl@8.9.33/dist.min.js"></script>
    <style>
      body {
        margin: 0;
        padding: 0;
      }
      html,
      body,
      #map {
        height: 100%;
      }
      #toggle-button {
        position: fixed;
        top: 20px;
        left: 20px;
        background-color: rgb(130, 25, 191);
        color: #f0ead6;
        font-size: 1.2rem;
        min-width: 70px;
        border-radius: 5px;
        border: none;
        padding: 5px 10px;
        transition: 0.3s;
      }
      #toggle-button:hover {
        scale: 1.1;
        box-shadow: 0 0 4px 4px gray;
      }
      /* Deck.gl图层被添加为叠加层，弹出窗口需要显示在其上方 */
      .maplibregl-popup {
        z-index: 2;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <button id="toggle-button">隐藏</button>
    <script>
      const url = 'https://maps.clockworkmicro.com/streets/v1/style?x-api-key=';
      const apiKey = 'Dr4eW3s233rRkk8I_public';

      let overlay;

      const map = new maplibregl.Map({
          container: 'map',
          style: url + apiKey,
          center: [2.345885, 48.860412],
          zoom: 12,
      });
      map.addControl(new maplibregl.NavigationControl(), 'top-right');

      // 巴黎5个美丽的花园
      const sampleData = {
          type: 'FeatureCollection',
          name: 'Jardins Des Paris',
          crs: {
              type: 'name',
              properties: {name: 'urn:ogc:def:crs:OGC:1.3:CRS84'},
          },
          features: [
              {
                  type: 'Feature',
                  properties: {
                      name: '特罗卡德罗花园',
                      district: 16,
                  },
                  geometry: {
                      type: 'Point',
                      coordinates: [2.289207, 48.861561],
                  },
              },
              {
                  type: 'Feature',
                  properties: {
                      name: '植物园',
                      district: 5,
                  },
                  geometry: {
                      type: 'Point',
                      coordinates: [2.359823, 48.843995],
                  },
              },
              {
                  type: 'Feature',
                  properties: {
                      name: '杜伊勒里花园',
                      district: 1,
                  },
                  geometry: {
                      type: 'Point',
                      coordinates: [2.327092, 48.863608],
                  },
              },
              {
                  type: 'Feature',
                  properties: {
                      name: '贝尔西公园',
                      district: 12,
                  },
                  geometry: {
                      type: 'Point',
                      coordinates: [2.382094, 48.835962],
                  },
              },
              {
                  type: 'Feature',
                  properties: {
                      name: '卢森堡花园',
                      district: 6,
                  },
                  geometry: {
                      type: 'Point',
                      coordinates: [2.336975, 48.846421],
                  },
              },
          ],
      };

      // 将图层作为控件添加
      function initializeOverlay() {
          const layer = new deck.ScatterplotLayer({
              id: 'scatterplot-layer',
              data: sampleData.features,
              pickable: true,
              opacity: 0.8,
              stroked: true,
              filled: true,
              radiusScale: 6,
              radiusMinPixels: 20,
              radiusMaxPixels: 100,
              lineWidthMinPixels: 5,
              getPosition: (d) => d.geometry.coordinates,
              getFillColor: (d) => [49, 130, 206],
              getLineColor: (d) => [175, 0, 32],
              onClick: (info) => {
                  const {coordinate, object} = info;
                  const description = `<div>
            <p>
              <strong>名称: </strong>${object.properties['name']}
            </p>
              <strong>区域: </strong>${object.properties['district']}
            </p>
          </div>`;

                  new maplibregl.Popup()
                      .setLngLat(coordinate)
                      .setHTML(description)
                      .addTo(map);
              },
          });

          // 创建叠加层
          overlay = new deck.MapboxOverlay({
              layers: [layer],
          });

          map.addControl(overlay);
      }

      let show = true; // 默认显示图层

      map.on('load', () => {
          // 添加图层
          initializeOverlay();

          const toggleButton = document.querySelector('#toggle-button');
          toggleButton.addEventListener('click', () => {
              if (show) {
                  map.removeControl(overlay);
                  toggleButton.innerText = '显示';
                  show = false;
              } else {
                  initializeOverlay();
                  toggleButton.innerText = '隐藏';
                  show = true;
              }
          });
      });
    </script>
  </body>
</html>