Рассчитать радиус на основе заданного количества в LeafletJS

Question

Скажем, у вас есть этот пример

<script>
  var mymap = L.map('mapid').setView([51.505, -0.09], 13);

  L.tileLayer('', {
    maxZoom: 18,
  }).addTo(mymap);

  L.circle([51.508, -0.11], 500, {
    color: 'red',
    fillColor: '#f03',
    fillOpacity: 0.5,
    radius: 20,
  }).addTo(mymap);
</script>

Как видите, радиус круга равен 20, что выглядит хорошо. Но что, если у вас есть большие данные?

Я пытаюсь показать радиус, основываясь на данном количестве зараженных людей здесь https://the2019ncov.com

Вы можете видеть, что радиус для каждого круга равен stati c, потому что, когда я устанавливаю его для числа зараженных людей, круг становится действительно очень большим, потому что в каждой стране / провинции может быть более тысячи инфицированных людей.

Is Есть ли способ рассчитать хороший размер радиуса на основе этих данных?

Пример

1. Китай 2,503
2. Филиппины 3
3. США 6

Answer 1

Я не статистика, но логарифмическая шкала с текущими числами выглядит разумно. Вы можете играть с минимальным и фактором, чтобы получить лучшее представление.

min должно быть ненулевым, начиная с log(1) = 0, что не будет показывать кружок для стран с 1 человеком.

console.clear();

var mymap = L.map('mapid').setView([51.505, -0.09], 13);

L.tileLayer('', {
  maxZoom: 18,
}).addTo(mymap);

const data = [1, 6, 11, 16, 25, 24290]

const min = 10;
const factor = 50;
const scale = (d) => Math.floor(Math.log(d) * factor) + min;

const points = data.map(d => {
  return { d, r: scale(d) };
});

points.forEach(({d, r}, i) => {
  
  console.log(d, r);
  
  const lat = 51.508;
  const lng = -0.11 + i/100;

  L.circle([lat, lng], {
    color: 'red',
    fillColor: '#f03',
    fillOpacity: 0.5,
    radius: r,
  }).addTo(mymap);
  
  var myIcon = L.divIcon({html: `<p>${d}, ${r}</p>`});
  L.marker([lat-0.006, lng], { opacity: 0.3, icon: myIcon}).addTo(mymap);
});

#mapid { height: 180px; }

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"
   integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
   crossorigin=""/>
 
 <script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"
   integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
   crossorigin=""></script>

<div id="mapid"></div>

---

Коэффициент масштабирования для масштабирования радиуса

Я считаю, что масштаб журнала не Это очень хорошо работает при уменьшении масштаба на карте.

Одним из способов его настройки является использование коэффициента масштабирования (возвращенного с карты) для настройки масштаба.

Масштаб варьируется от 1 до 18, начиная с 5. Круги выглядят хорошо при 5 и выше, поэтому пропорциональное сжатие ниже 5 кажется подходящим для go.

scale(d) {
  const min = 1;
  const factor = 5;
  /*
    Scale down as you zoom out.
    Problem: at zoom level 2 the circles look a bit too large and crowded,
             because the map shrinks underneath, the circles should also scale down.
             Higher zooms are ok, so zoomFactor is 1 for those.
  */
  const zoomFactor = this.zoom >= 5 ? 1 : this.zoom / 10;  // adjust divisor for best optics
  return Math.floor(Math.log(d) * factor * zoomFactor) + min;
},