Листовка с тепловой картой: как построить точки с точечным радиусом, который масштабируется с увеличением?

Question

Я использую leaflet и leaflet-heatmap, чтобы сделать следующее. У меня есть несколько точек, показывающих места, представляющие интерес, и каждая из них связана с определенным радиусом, который соответствует тому, насколько проходимо каждое место (например, 3 мили, 5 миль и т. Д.). Я хотел бы:

1). Окружите каждую точку каким-нибудь «шариком», соответствующим радиусу этой точки, в идеале, чтобы он становился слабее, когда вы удалялись от центра точки

2). Масштабируйте радиус соответствующим образом по мере увеличения и уменьшения масштаба карты.

Вот мой JavaScript:

 //just some sample single location
text = "lat;long;walk\n39.1101;-84.5758;3";

var lines = text.split("\n");
var heatData = [];
for (var i=1; i<lines.length; i++) {
    var parts = lines[i].split(",");
    heatData.push( [ parts[0], parts[1], 1. ]  )
}

var heat = L.heatLayer(heatData, {radius: 20, blur: 10, scaleRadius: true, max: 0.1, max_zoom: 20 }).addTo(map);

Для вопроса 1: будет ли «радиус» правильной величиной для передачи радиуса проходимости (heatData [2])? Если да, то как мне это сделать?

Для вопроса 2: ниже приведены изображения точки, увеличенной и уменьшенной, вы видите, что радиус шарика, окружающего точку, не масштабируется должным образом

Увеличено:

Уменьшено - радиус остается постоянным, но я хочу, чтобы он был меньше, чтобы отражать фактическую площадь проходимости относительно нового масштаба:

Большое спасибо!

Answer 1

Я бы сделал растровые слои тепловой карты для каждого значения радиуса (3 мили, 5 миль и т. Д.) И добавил бы их в качестве слоев на карту. Тогда на всех уровнях масштабирования они будут на правильном расстоянии от точки, и вам не придется использовать сложную функцию для изменения кластеризации тепловой карты.