使用 DeckGL 和 CARTO v3 实现动态地图层控制与交互

<!-- MapLibre GL JS -->
<script src="https://unpkg.com/maplibre-gl@latest/dist/maplibre-gl.js"></script>
<link href="https://unpkg.com/maplibre-gl@latest/dist/maplibre-gl.css" rel="stylesheet"/>

<!-- DeckGL 和 CARTO 模块 -->
<script src="https://unpkg.com/deck.gl@latest/dist.min.js"></script>
<script src="https://unpkg.com/@deck.gl/carto@latest/dist.min.js"></script>

deck.carto.setDefaultCredentials({
  apiBaseUrl: "https://gcp-australia-southeast1.api.carto.com", // 您的 CARTO API 基础 URL
  accessToken: "YOUR_CARTO_ACCESS_TOKEN" // 您的 CARTO 访问令牌
});

const mydeckgl = new deck.DeckGL({
  container: "map", // 地图容器的 DOM ID
  map: maplibregl, // 底图库实例
  mapStyle: deck.carto.BASEMAP.DARK_MATTER, // CARTO 提供的底图样式

  initialViewState: {
    latitude: -33.85,
    longitude: 151.20,
    zoom: 12
  },
  controller: true, // 启用地图控制器（平移、缩放等）
  // 初始图层可以在这里定义，但为了动态控制，我们通常在外部管理
  // layers: []
});

const initialHeatmapLayer = new deck.carto.CartoLayer({
  id: 'heatmaps',
  connection: "carto_dw", // CARTO 连接 ID
  type: deck.carto.MAP_TYPES.QUERY,
  data: "select geom, Postcode, Md_H22_num, Md_H22_txt, Ct_H22_num, Suburbs from carto-dw-ac-p76tk8ou.shared.2023FEB28_Postcode where Md_H22_num is not null",
  getFillColor: deck.carto.colorContinuous({
                  attr: "Md_H22_num",
                  domain: [0, 5000000],
                  colors: "PinkYl"
                }),
  getLineColor:[255,255,255],
  lineWidthMinPixels: 1,
  pickable: true, // 允许图层被拾取（用于交互）
  getLineWidth: 2,
  opacity: 0.7,
  visible: true // 初始可见性
});

<div id="map" style="width: 100vw; height: 50vh;"></div>
<label>
  可见性: <input type="checkbox" id="showhide" checked />
</label>

<script type="text/javascript">
  // ... (DeckGL 和 CARTO 模块引入，setDefaultCredentials 设置) ...

  const mydeckgl = new deck.DeckGL({
    container: "map",
    map: maplibregl,
    mapStyle: deck.carto.BASEMAP.DARK_MATTER,
    initialViewState: {
      latitude: -33.85,
      longitude: 151.20,
      zoom: 12
    },
    controller: true
  });

  // 维护图层可见性的状态
  let currentLayerVisibility = {
    heatmapLayer: true, // 初始时热力图可见
    // 可以添加更多图层状态
  };

  // 渲染函数：根据当前状态构建图层数组并更新 DeckGL
  function renderLayers() {
    const layers = [];

    if (currentLayerVisibility.heatmapLayer) {
      layers.push(
        new deck.carto.CartoLayer({
          id: 'heatmaps',
          connection: "carto_dw",
          type: deck.carto.MAP_TYPES.QUERY,
          data: "select geom, Postcode, Md_H22_num, Md_H22_txt, Ct_H22_num, Suburbs from carto-dw-XXX",
          getFillColor: deck.carto.colorContinuous({
                          attr: "Md_H22_num",
                          domain: [0, 5000000],
                          colors: "PinkYl"
                        }),
          getLineColor:[255,255,255],
          lineWidthMinPixels: 1,
          pickable: true,
          getLineWidth: 2,
          opacity: 0.7,
          visible: true // 此处设置为 true，因为外部逻辑已经决定了是否将其加入到 layers 数组
        })
      );
    }
    // 如果有其他图层，也可以在这里根据其状态添加
    // if (currentLayerVisibility.anotherLayer) {
    //   layers.push(new deck.carto.CartoLayer({...}));
    // }

    mydeckgl.setProps({ layers }); // 更新 DeckGL 实例的图层
  }

  // 监听复选框变化事件
  document.getElementById('showhide').addEventListener('change', (event) => {
    currentLayerVisibility.heatmapLayer = event.target.checked;
    renderLayers(); // 重新渲染图层
  });

  // 首次渲染
  renderLayers();
</script>

const mydeckgl = new deck.DeckGL({
  // ... 其他配置 ...
  getTooltip: ({ object }) => {
    if (!object) return false; // 如果没有对象被拾取，则不显示提示

    // 自定义提示框样式
    return {
      className: `vptooltip`, // 可以通过 CSS 定义样式
      html: `<div style='width:250px'>
      <span class='vptooltip-title'>邮政编码:</span>            <p class='vptooltip-value'>${object.properties.Postcode}</p>
      <span class='vptooltip-title'>城区:</span>             <p class='vptooltip-value'>${object.properties.Suburbs}</p>
      <span class='vptooltip-title'>房屋中位数价格:</span>  <p class='vptooltip-value'>${object.properties.Md_H22_txt}</p>
      <span class='vptooltip-title'>售出房屋数量:</span>         <p class='vptooltip-value'>${object.properties.Ct_H22_num}</p>
      </div>`,
    };
  }
});

.vptooltip {
  color: #fff !important;
  font: 400 11px "Helvetica Neue",Helvetica,Arial !important;
  background: rgba(0,0,0,.75) !important;
  padding: 10px !important;
  border-radius: 3px !important;
}
.vptooltip-title {
  color: #999;
  margin: 0 0 1px;
  font-weight: 600;
}
.vptooltip-value {
  padding: 0 0 7px;
  margin: 0 0 1px;
}

new deck.carto.CartoLayer({
  id: 'heatmaps',
  // ... 其他属性 ...
  pickable: true, // 必须设置为 true 才能触发点击事件
  onClick: info => {
    if (info.object) {
      // 当点击一个多边形时，info.object 包含该多边形的数据
      console.log('点击了多边形:', info.object.properties);
      // 在这里可以触发更新图表、显示详细信息等操作
      // 例如：updateCharts(info.object.properties.Postcode);
    }
  }
});