如何在leaflet的调色板中放置标签而不是数值

// 自定义调色板函数
function getColor(value) {
  switch (value) {
    case 1:
      return 'red';
    case 2:
      return 'blue';
    case 3:
      return 'green';
    default:
      return 'gray';
  }
}

// 创建Leaflet地图
var map = L.map('map').setView([51.505, -0.09], 13);

// 添加地图图层
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors',
  maxZoom: 18,
}).addTo(map);

// 创建一个图层
var layer = L.geoJSON(data, {
  style: function(feature) {
    return {
      fillColor: getColor(feature.properties.value), // 使用调色板函数将数值映射为颜色
      weight: 2,
      opacity: 1,
      color: 'white',
      dashArray: '3',
      fillOpacity: 0.7
    };
  },
  onEachFeature: function(feature, layer) {
    layer.bindPopup(feature.properties.label); // 在每个区域上显示标签
  }
}).addTo(map);

// 创建图例
var legend = L.control({ position: 'bottomright' });
legend.onAdd = function(map) {
  var div = L.DomUtil.create('div', 'info legend');
  var labels = ['Label 1', 'Label 2', 'Label 3']; // 自定义标签
  var colors = ['red', 'blue', 'green']; // 自定义颜色

  // 循环添加标签和颜色
  for (var i = 0; i < labels.length; i++) {
    div.innerHTML +=
      '<i style="background:' + colors[i] + '"></i> ' + labels[i] + '<br>';
  }
  return div;
};
legend.addTo(map);