时间戳

首页 > 解决方案 > 如何在我的传单地图中添加范围标签

javascript - 如何在我的传单地图中添加范围标签

问题描述

我一直在关注传单教程，它指导如何构建交互式 Choropleth 地图。并非所有东西都完全包括在内，有时我不得不上网尝试调整一些东西以使其正常工作。我得到了这一点，我在标记各州的人口密度，而我的图例并没有像这张地图那样在标签中显示一个范围，而是看起来像这样（在下面的照片中）。

我正在构建的传单地图显示标签的方式。 他们不显示范围

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

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 循环存在问题，但我无法确定确切的位置。我将不胜感激。

标签： javascriptleaflet

解决方案

在该页面中，您需要从自定义图例控件以及添加某些颜色及其样式的getColor功能开始的代码。您缺少相关的样式。

.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>

推荐阅读