Google Maps heatmap couche de point de rayon

Je veux être en mesure de spécifier le rayon de points efficacement en mètres. L'API est configuré de sorte que le radius propriété est d'être constante pour les pixels, de sorte que le zoom dans les causes de la heatmap à s'éroder (je sais que vous pouvez faire de la heatmap pas éroder avec le dissipating bien, mais cela soulève d'autres questions, c'est à dire, avoir à manuellement mess avec le rayon pour obtenir mon heatmap pour les afficher correctement. Voici les cartes de chaleur référence.

Plus précisément, je suis en train d'afficher une distribution de probabilité sur une carte. J'ai de la distribution dans la forme d'une image, et que vous voulez la carte de la 0-1 poids pour une heatmap couche. (Je ne peux, et ne veux pas, superposition d'images).

Des suggestions?

  • Je pense que vous aurez besoin d'utiliser le fait que, à chaque niveau de zoom, les distances par pixel double, puis redessiner une heatmap pour chaque niveau de zoom?
InformationsquelleAutor eqzx | 2012-09-06
  1. 13

    Ok, j'ai essayé certaines choses:

    À l'aide de la Projection de Mercator exemple (vérifiez la source) pour extraire les x,y les coordonnées des pixels de n'importe quel point d'un latLng, à l'utilisation ultérieure de l' la géométrie de la bibliothèque, plus précisément le computeOffset fonction obtenir un autre latLng distance "DM" (en mètres) à droite de la précédente, obtenez la différence (en pixels) d'une valeur absolue "DP" et à partir de là, vous obtenez votre "pixelsPerMeter" rapport DP/DM.

    Alors, si vous voulez que votre rayon de 100 mètres, vous venez de définir les propriétés de {radius:Math.floor(desiredRadiusPerPointInMeters*pixelsPerMeter)}

    Et à gérer le changement de zoom il suffit d'utiliser un écouteur 

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

    J'ai téléchargé un petit exemple (essayez de zoom), vous pouvez vérifier si la distance ressemble à droite avec le bouton sur le bas.

    • Je crois que je l'ai presque de travail, cependant, le TILE_SIZE paramètre est en me jetant à off. Pourquoi est-il mis à 256, cela est-il arbitraire? La carte, par défaut, une taille de tuile de (256x256)? Comment puis-je obtenir la bonne taille de la tuile?
    • merci. une chose à noter est que lorsque vous zoomez trop loin, chaque point ne peut pas tenir dans un pixel plus et les rayons sont fixés à zéro. l'ajout de ce code dans le getNewRadius() méthode rend donc les points sont rendus comme nondissipating (inexact), mais au moins ils sont rendus(dissipating=false à l'initialisation) if(totalPixelSize == 0 && dissipating == true) { heatmap.setOptions({dissipating: false}); totalPixelSize=.01; dissipate=false;} else if(totalPixelSize > 0 && dissipate==false) {heatmap.setOptions({dissipating: true}); dissipate=true;} else if(totalPixelSize == 0) { totalPixelSize=.01;}
    • Le nombre 256 vient de Because the basic Mercator Google Maps tile is 256 x 256 pixels, the usable world coordinate space is {0-256}, {0-256} dans cette page de documentation, merci pour les commentaires concernant la dissipation 🙂
    InformationsquelleAutor lccarrasco
  2. 1

    Pour tous ceux qui aimerais avoir une, joliment emballé, coffeescript version de @lccarrasco de jsbin exemple, vous pouvez voir l'essentiel de la MercatorProjection coffeescript classe j'ai créé à l'aide de son code.

    Une fois que vous avez la classe chargée, vous pouvez l'utiliser avec les éléments suivants:

    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))
)

    Où '15' est le rayon en mètres lequel vous pouvez jouer avec ou défini par programmation par d'autres moyens pour obtenir vos heatmap à regarder comme vous voulez.

    • Assurez-vous d'inclure la géométrie de la bibliothèque, c'est à dire: <script src='maps.googleapis.com/maps/api/... " > . Merci @schenkman pour la classe! fonctionne très bien
    InformationsquelleAutor schenkman
  3. 1

    J'ai résolu ce problème en utilisant l'écouteur @lccarrasco utilisé, mais dans mon getNewRadius() fonction que j'ai faite le rayon change en fonction du zoom.

    ie.
    var rayon = (somemultiplicationfactor)/(Math.pow(2,(20-zoom)));

    Cela fonctionne comme le rapport de zoom est de 2:1 pour chaque zoom

    • qu'en est return multiplicator * Math.pow(2,zoom); ?
    InformationsquelleAutor junlop
  4. 0

    Basé sur un groupe Google post sur le forum et ce SIG post, je suis venu avec un simple, mais complète de la solution le long de ces mêmes lignes.

    Tout d'abord, de définir une fonction pour obtenir le rayon en mètres, pour un niveau de zoom: Parce qu'il y a de mise à l'échelle des différences pour différentes latitudes, vous avez besoin de nourrir en someLatValue, par exemple le centre de la carte de votre plan d'aide. Bien qu'une approximation, il sera assez bon pour obtenir des résultats précis, jusqu'à la taille d'un petit pays. Vous devez également spécifier la taille du rayon vous voulez en mètres.

    Vous pouvez changer la fonction de lecture de ces valeurs en paramètres si vous préférez (par exemple, l'obtention de la lat du centre de la carte et/ou un rayon basé sur la propriété des données), mais si elles sont statiques, ce qui en fait des variables globales est plus facile.

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

    Renvoie le (approximative) de rayon en pixels pour un nombre désiré de mètres et le niveau de zoom autour d'un point particulier de la latitude. La valeur 156543.03392 est basée sur le rayon moyen de la Terre que google utilise pour Google Maps.

    Donc, disons que vous avez un heatmap comme ceci:

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

    Afin de définir le point de vue initial, il suffit d'appeler la fonction avant d'ajouter la heatmap à votre carte.

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

    Ensuite, vous devez réinitialiser le rayon à chaque fois que la carte est agrandie, ce qui peut être fait comme ceci:

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

    Dans mon cas, il traîne un peu, donc ça montre (bêtement agrégées et mal pensée) par défaut heatmap avant le fixe de rayon apparaît. Peut-être il ya un moyen de retarder le rendu afin de rendre la transition plus lisse, mais c'est un autre problème.

    InformationsquelleAutor Aaron Bramson