我如何根据范围向我的传单地图添加标签

How can i add labels in terms of range to my Leaflet map

我一直在关注传单tutorial where it is guiding on how to build an Interactive Choropleth map. Not all things are entirely included and once in a while I have to go online in an attempt to tweak things to get the to work. I got this point where I was labeling the population density of the states and my legend does not show a range in the labels like in this map，结果看起来像这样（在下面的照片中）。

下面是我给出上面图例的代码

function getColor(d){
            return d > 1000 ? '#800026' :
                    d > 500  ? '#BD0026' :
                    d > 200  ? '#E31A1C' :
                    d > 100  ? '#FC4E2A' :
                    d > 50   ? '#FD8D3C' :
                    d > 20   ? '#FEB24C' :
                    d > 10   ? '#FED976' :
                                '#FFEDA0';
                    
        }

// Creating a legend
    var legend = L.control({position: 'bottomright'});

    legend.onAdd = function (mymap) {
        var div = L.DomUtil.create('div', 'info-legend'), grades = [ 0, 10, 20, 50, 100, 200, 500, 1000], labels = [];

        // Loop through our density intervals and generate a label with a coloured square for each interval
        for (var i = 0; i < grades.length; i++) {
            div.innerHTML += '<i style="background:' + getColor(grades[i] + 1) + '"></i> ' + (grades[i] + grades[i + 1] ? '&ndash;' + grades[i + 1] + '<br>' : '+');
        }

        return div;
    };
    legend.addTo(mymap)

.info-legend {
    line-height: 18px;
    color: #555;
}
.info-legend i {
    width: 24px;
    height: 18px;
    float: left;
    margin-right: 8px;
    opacity: 0.7;
}

我确实认为 for 循环 存在问题，但我无法确定具体位置。我将不胜感激任何帮助。

从那个 page 开始，您需要从 Custom Legend Control 开始的代码加上来自 Adding Some Color[ 的 getColor 函数=26=] 及其样式。您缺少相关样式。

.legend {
    line-height: 18px;
    color: #555;
}
.legend i {
    width: 18px;
    height: 18px;
    float: left;
    margin-right: 8px;
    opacity: 0.7;
}

信息样式用于显示国家/地区名称的右上角面板。 您拥有的其余代码似乎与示例相同。

<!DOCTYPE html>
<html>

<head>

  <title>Choropleth Tutorial - Leaflet</title>

  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico" />

  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin="" />
  <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script>


  <style>
    html,
    body {
      height: 100%;
      margin: 0;
    }
    
    #map {
      width: 600px;
      height: 400px;
    }
  </style>

  <style>
    #map {
      width: 800px;
      height: 500px;
    }
    
    .info {
      padding: 6px 8px;
      font: 14px/16px Arial, Helvetica, sans-serif;
      background: white;
      background: rgba(255, 255, 255, 0.8);
      box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
      border-radius: 5px;
    }
    
    .info h4 {
      margin: 0 0 5px;
      color: #777;
    }
    
    .legend {
      text-align: left;
      line-height: 18px;
      color: #555;
    }
    
    .legend i {
      width: 18px;
      height: 18px;
      float: left;
      margin-right: 8px;
      opacity: 0.7;
    }
  </style>
</head>

<body>

  <div id='map'></div>

  <script type="text/javascript" src="https://leafletjs.com/examples/choropleth/us-states.js"></script>

  <script type="text/javascript">
    var map = L.map('map').setView([37.8, -96], 4);

    L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
      maxZoom: 18,
      attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, ' +
        'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
      id: 'mapbox/light-v9',
      tileSize: 512,
      zoomOffset: -1
    }).addTo(map);




    // get color depending on population density value
    function getColor(d) {
      return d > 1000 ? '#800026' :
        d > 500 ? '#BD0026' :
        d > 200 ? '#E31A1C' :
        d > 100 ? '#FC4E2A' :
        d > 50 ? '#FD8D3C' :
        d > 20 ? '#FEB24C' :
        d > 10 ? '#FED976' :
        '#FFEDA0';
    }


    var legend = L.control({
      position: 'bottomright'
    });

    legend.onAdd = function(map) {

      var div = L.DomUtil.create('div', 'info legend'),
        grades = [0, 10, 20, 50, 100, 200, 500, 1000],
        labels = [],
        from, to;

      for (var i = 0; i < grades.length; i++) {
        from = grades[i];
        to = grades[i + 1];

        labels.push(
          '<i style="background:' + getColor(from + 1) + '"></i> ' +
          from + (to ? '&ndash;' + to : '+'));
      }

      div.innerHTML = labels.join('<br>');
      return div;
    };

    legend.addTo(map);
  </script>



</body>

</html>