javascript - 根据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

你可以看到每个圆圈的半径是静态的，那是因为当我将其设置为感染人数时，圆圈变得非常大，因为每个国家/省可以有一千+感染者。

有没有办法根据该数据计算出合适的半径大小？

示例

1. 中国 2,503
2. 菲律宾3
3. 美国6

Answer 1

我不是统计学家，但当前数字的对数比例看起来很合理。您可以使用 min 和 Factor 来获得最佳表示。

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>

<小时/>

半径缩放的缩放系数

我的看法是，缩小 map 时，对数比例尺的效果不太好。

调整它的一种方法是使用缩放系数(从 map 返回)来调整比例。

缩放范围从 1 到 18，从 5 开始。圆圈在 5 及以上看起来不错，因此按比例缩小到 5 以下似乎是正确的方法。

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