#javascript #html #css
#javascript #HTML #css
Вопрос:
Я добавил на карту легенду / ключ, который подходит для квадратов, но в кругах они не выровнены по тексту, есть ли какой-нибудь способ правильно выровнять текст и круги. Изображение
Вот код
function getsizeLabel(d)
{
return d > 90 ? 18 :
d > 60 ? 14 :
d > 30 ? 9 :
5 ;
}
function AddLDLegend() {
legendLD = L.control({position: 'bottomright'});
legendLD.onAdd = function (map) {
var div = L.DomUtil.create('div', 'info legend');
labels = ['<strong>Lockdown Days</strong>'],
grades = [0, 30, 60, 90],
categories = ['1-30','31-60','61-90'];
for (var i = 0; i < grades.length; i ) {
div.innerHTML =
labels.push(
'<i style="border-radius: 50%; border: 1px solid #8A2BE2; width:' getsizeLabel(grades[i] 1) 'px; height:' getsizeLabel(grades[i] 1) 'px;"></i> '
(grades[i] grades[i 1] ? categories[i] : '91-100'));
}
div.innerHTML = labels.join('<br>');
return div;
};
legendLD.addTo(map);
}
Карта map листовки is Я просто вызываю эту функцию, чтобы добавить легенду из другой функции, но дизайн и все, что связано с небольшим разделом легенды, находится в этой функции.
предпочтение для выравнивания текста и окружности находится на этом изображении
Комментарии:
1. Где вы хотите, чтобы круг был относительно его текста? например, с центром круга на базовой линии или нижней частью круга на базовой линии или…
2. Большое вам спасибо за ваше время, чтобы ответить на ваш вопрос, я отредактировал свой вопрос и добавил еще одно изображение в конце.
3. Какой-либо конкретный шрифт? А также размер шрифта? Грани разных типов будут иметь разную высоту при одинаковом размере шрифта. Выравнивание, вероятно, будет немного приблизительным, но на практике это может не иметь значения, посмотрим.
4. В настоящее время я использую это (шрифт: 14px / 16px Arial, Helvetica, без засечек;) Но если они выровнены, любой без засечек будет работать с размером 10-16
5. Спасибо за разъяснение. Я думаю, что ответ от @ErnestoStifano довольно хорош для Ariel в браузерах, которые я пробовал. Для шрифта с засечками он может выглядеть немного смещенным (хотя технически это не так). Я думаю, потому что мой глаз чувствовал, что дефис должен быть выровнен с центром круга — он как бы доминирует больше, чем, скажем, горизонталь буквы «е» (как на вашем изображении).
Ответ №1:
Я думаю, это то, чего вы пытались достичь. Пожалуйста, дайте мне знать, если у вас есть какие-либо сомнения.
const grades = [0, 30, 60, 90];
const categories = ['1-30', '31-60', '61-90'];
function getSize(g) {
return (
g > 90 ? 18 :
g > 60 ? 14 :
g > 30 ? 9 : 5
);
}
function getLabel(i) {
const size = getSize(grades[i] 1);
const grade = (grades[i] grades[i 1] ? categories[i] : '91-100');
const bulletStyle = [
'display: inline-block;',
'vertical-align: middle;',
'border-radius: 50%;',
'border: 1px solid #8A2BE2;',
`height: ${size}px;`,
`width: ${size}px;`
];
const valueStyle = [
'display: inline-block;',
'vertical-align: middle;'
];
const bullet = `<i style="${bulletStyle.join(' ')}"></i>`;
const value = `<span style="${valueStyle.join(' ')}">${grade}</span>`
return bullet ' ' value;
}
function getDiv() {
const div = L.DomUtil.create('div', 'info legend');
const labels = ['<strong>Lockdown Days</strong>'];
for (var i = 0; i < grades.length; i ) {
div.innerHTML = labels.push(getLabel(i));
}
div.innerHTML = labels.join('<br>');
return div;
};
document.getElementsByTagName('BODY')[0].appendChild(getDiv()); <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script> Комментарии:
1. Большое вам спасибо за ваше время и усилия, я действительно ценю это. Но, как я упоминал ранее, я добавляю легенду на веб-карту, и я тоже не эксперт. используя этот метод, я не могу добавить легенду, моей полной функцией было добавление легенды карты следующим образом, я прошу прощения за плохое форматирование
2.
legendLD = L.control({position: 'bottomright'}); legendLD.onAdd = function (map) { var div = L.DomUtil.create('div', 'info legend'); labels = ['<strong>Lockdown Days</strong>'], grades = [0, 30, 60, 90], categories = ['1-30','31-60','61-90'];3.
for (var i = 0; i < grades.length; i ) { div.innerHTML = labels.push( '<i style="border-radius: 50%; border: 1px solid #8A2BE2; width:' getsizeLabel(grades[i] 1) 'px; height:' getsizeLabel(grades[i] 1) 'px;"></i> ' (grades[i] grades[i 1] ? categories[i] : '91-100')); } div.innerHTML = labels.join('<br>'); return div; }; legendLD.addTo(map);4. @HassamAli ты не можешь просто сделать
legendLD.onAdd = getDiv?5. В этом случае он добавляет легенду, но без форматирования, а во-вторых, консоль показывает ошибку
getDiv is not definedв последней строке