Радиус точки слоя тепловой карты Google Maps

Хорошо, я попробовал некоторые вещи:

Используя пример проекции Меркатора (проверьте источник) для извлечения x ,y пиксельные координаты любой точки от latLng, чтобы позже использовать библиотеку геометрии, в частности функцию calculateOffset получите еще одну широту на расстоянии «DM» (в метрах) справа от предыдущей, получите разницу (в пикселях) как абсолютное значение «DP», и оттуда вы получите соотношение «пикселей на метр» DP / DM.

Итак, если вы хотите, чтобы ваш радиус был 100 метров, вы просто устанавливаете свойства на {radius:Math.floor(desiredRadiusPerPointInMeters*pixelsPerMeter)}

И чтобы обработать изменение масштаба, просто используйте слушателя

 google.maps.event.addListener(map, 'zoom_changed', function () {
          heatmap.setOptions({radius:getNewRadius()});
      });

Я загрузил небольшой пример (попробуйте увеличить масштаб), вы можете проверить правильность расстояния с помощью кнопки внизу.

Для тех, кто хотел бы иметь хорошо упакованную версию jsbin-файла @lccarrasco для кофескрипта, вы можете просмотреть суть Класс кофейного скрипта MercatorProjection, который я создал, используя его код.

После того, как вы загрузили класс, вы можете использовать его со следующим:

map = new google.maps.Map(...)
heatmap = new google.maps.visualization.HeatmapLayer({map: map})
google.maps.event.addListener(map, 'zoom_changed', () ->
  projection = new MercatorProjection()
  heatmap.setOptions(radius: projection.getNewRadius(map, 15))
)

Где «15» — это радиус в метрах, с которым вы можете поиграть или установить программно другими способами, чтобы ваша тепловая карта выглядела так, как вы этого хотите.

Я решил это, используя прослушиватель, который использовал @lccarrasco, но в моей функции getNewRadius() я сделал изменение радиуса относительно увеличения.

т.е. var radius = (somemultiplicationfactor)/(Math.pow(2,(20-zoom)));

Это работает, поскольку коэффициент масштабирования составляет 2: 1 для каждого масштабирования.

На основе сообщения на форуме группы Google и этой ГИС post, я придумал простое, но полное решение в том же духе.

Во-первых, определите функцию для получения радиуса в метрах для данного уровня масштабирования: поскольку существуют различия в масштабировании для разных широт, вам нужно ввести someLatValue, например, центр карты, которую вы планируете использовать. Хотя это приближение, этого будет достаточно для получения точных результатов вплоть до размера небольшой страны. Вам также необходимо указать размер желаемого радиуса в метрах.

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

var someLatValue = 35.726332;
var desiredRadiusInMeters = 1500;

function getHeatmapRadius(zoomLevel){
  metersPerPx = 156543.03392 * Math.cos(someLatValue * Math.PI / 180) / Math.pow(2,theMap.getZoom());
  return desiredRadiusInMeters / metersPerPx;
};

Это возвращает (приблизительный) радиус в пикселях для желаемого количества метров и уровня масштабирования вокруг определенной широты. Значение 156543.03392 основано на приблизительном радиусе Земли, который Google фактически использует для Карт Google.

Итак, скажем, у вас есть такая тепловая карта:

fixedRadiusHeatmap = new google.maps.visualization.HeatmapLayer({
  data: myCoords,
  map: theMap
});

Чтобы установить начальный вид, просто вызовите функцию перед добавлением тепловой карты на карту.

fixedRadiusHeatmap.setOptions({radius: getHeatmapRadius(theMap.getZoom())});
fixedRadiusHeatmap.setMap(theMap);

Затем нужно сбрасывать радиус каждый раз при масштабировании карты, что можно сделать так:

google.maps.event.addListener(theMap, 'zoom_changed', function () {
  fixedRadiusHeatmap.setOptions({radius: getHeatmapRadius(theMap.getZoom())});
});

В моем случае он немного отстает, поэтому показывает (тупо агрегированную и плохо продуманную) тепловую карту по умолчанию до того, как появится карта с фиксированным радиусом. Возможно, есть способ отложить рендеринг, чтобы сделать переход более плавным, но это другая проблема.