如何在 Leaflet map 中添加标签范围

Question

我一直在关注传单教程，它指导如何构建交互式 Choropleth map。 并非所有东西都完全包括在内，有时我必须在线 go 试图调整一些东西以使其正常工作。 我得到了这一点，我在标记各州的人口密度，而我的图例没有像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 循环存在问题，但我无法确定确切的位置。 我将不胜感激。

Answer 1

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

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

info styles 用于显示国家名称的右上角面板。 您拥有的代码的 rest 似乎与示例相同。

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

如何在 Leaflet map 中添加标签范围

问题描述

1 个解决方案

解决方案1
1 已采纳 2021-06-14 13:29:36

如何在 Leaflet map 中添加标签范围

问题描述

1 个解决方案

解决方案1 1 已采纳 2021-06-14 13:29:36

解决方案1
1 已采纳 2021-06-14 13:29:36