如何在Leaflet地图中添加按钮以切换数据变量的可视化展示

第一步：添加切换按钮HTML #

在地图容器外添加控制按钮组，data-field属性值要和GeoJSON属性中的字段名完全匹配：

<div class="map-control">
  <button class="toggle-btn active" data-field="POPULATION">人口</button>
  <button class="toggle-btn" data-field="WATER_SOURCE">水源类型</button>
  <button class="toggle-btn" data-field="WATER_COST">用水成本</button>
</div>

可以给按钮加简单样式区分选中状态：

.toggle-btn.active {
  background: #2385bb;
  color: #fff;
}

第二步：改造现有JS逻辑 #

新增全局变量存储当前状态 #

// 初始默认展示的字段，可根据需求修改
let currentField = 'POPULATION'
// 存储当前字段的分级阈值
let currentBreaks = []
// 确保geojson_layer为全局变量，方便后续调用
let geojson_layer

封装图层更新函数 #

把原有分级计算、样式刷新、图例更新的逻辑封装为可复用函数：

function updateMap(field) {
  const values = []
  // 提取当前字段的所有属性值
  geojson_data.features.forEach(item => {
    values.push(item.properties[field])
  })
  // 重新计算分级
  brew.setSeries(values)
  brew.setNumClasses(5)
  brew.setColorCode('YlOrRd')
  brew.classify('quantiles')
  // 保存最新分级阈值
  currentBreaks = brew.getBreaks()
  // 批量更新图层样式
  geojson_layer.setStyle(getStyle)
  // 同步更新图例和信息面板（需同步改造这两个函数，读取currentField、currentBreaks生成内容）
  createLegend()
  createInfoPanel()
}

修改样式、取色函数，移除硬编码 #

function getStyle(feature){
  return {
    stroke: true,
    color: 'white',
    weight: 1,
    fill: true,
    // 动态读取当前选中字段的属性值
    fillColor: getColor(feature.properties[currentField]),
    fillOpacity: 0.8
  }
}

function getColor(d) {
  const colorList = ['#FFEDA0', '#FED976', '#FEB24C', '#FD8D3C', '#FC4E2A', '#E31A1C', '#BD0026', '#800026']
  // 根据当前分级阈值动态匹配颜色
  for (let i = currentBreaks.length - 1; i >= 0; i--) {
    if (d > currentBreaks[i]) return colorList[i + 1]
  }
  return colorList[0]
}

原有初始化逻辑调整 #

原有代码中创建完geojson_layer后，直接调用一次更新函数完成初始渲染即可：

// create the layer and add to map
geojson_layer = L.geoJson(geojson_data,{
  style: getStyle,
  onEachFeature: onEachFeature 
}).addTo(map);
map.fitBounds(geojson_layer.getBounds())
// 调用更新函数完成初始分级、图例生成
updateMap(currentField)

第三步：绑定按钮点击事件 #

document.querySelectorAll('.toggle-btn').forEach(btn => {
  btn.addEventListener('click', function() {
    // 切换按钮选中状态
    document.querySelectorAll('.toggle-btn').forEach(b => b.classList.remove('active'))
    this.classList.add('active')
    // 获取选中的字段，刷新地图
    const targetField = this.dataset.field
    currentField = targetField
    updateMap(targetField)
  })
})

内容的提问来源于stack exchange，提问作者prock