如何在 Leaflet map 中添加标签范围
[英]How can i add labels in terms of range to my Leaflet map
问题描述
I have been following the leaflets tutorial where it is guiding on how to build an Interactive Choropleth map.
我一直在关注传单教程，它指导如何构建交互式 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.并非所有东西都完全包括在内，有时我必须在线 go 试图调整一些东西以使其正常工作。 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 and instead looks like this (in photo below).我得到了这一点，我在标记各州的人口密度，而我的图例没有像map那样在标签中显示一个范围，而是看起来像这样（如下图所示）。
Below is my code that gives the legend above下面是我的代码，给出了上面的图例
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]? '–' + 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; }
I do think there is a problem with the for loop but I can't figure out exactly where.我确实认为for 循环存在问题，但我无法确定确切的位置。 I will appreciate any help.我将不胜感激。
1 个解决方案
解决方案1
1 已采纳 2021-06-14 13:29:36
From that page you need to have the code starting from Custom Legend Control plus getColor function from Adding Some Color and its style.在该页面中，您需要从自定义图例控件加上getColor function 从添加一些颜色及其样式开始的代码。 You are missing the relevant styles.您缺少相关的 styles。
.legend {
line-height: 18px;
color: #555;
}
.legend i {
width: 18px;
height: 18px;
float: left;
margin-right: 8px;
opacity: 0.7;
}
info styles are for the top right corner panel showing the country name. info styles 用于显示国家名称的右上角面板。 The rest of the code that you have seems identical with the example.您拥有的代码的 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 ©: <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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.