Raggio del punto di livello heatmap di Google Maps

Question

Desidero essere in grado di specificare il raggio dei punti in modo efficace in metri. L'API è configurata in modo che la proprietà radius sia mantenuta costante per i pixel, in modo che l'ingrandimento causi l'erosione della mappa di calore (so che è possibile rendere la heatmap non eroda con la proprietà dissipating, ma ciò solleva altri problemi, ad es. per fare in modo che la heatmap venga visualizzata correttamente. Ecco le heatmap reference.

In particolare, sto provando a visualizzare una distribuzione di probabilità su una mappa, ho la distribuzione in forma di immagine e voglio mappare i 0-1 pesi ad uno strato heatmap. (posso, e non voglio, sovrapporre le immagini).

Qualche suggerimento?

Answer 1

Ok, ho provato alcune cose:

Uso Mercator Projection example (check the source) per estrarre il coordinate x, y di pixel di qualsiasi punto da un LatLng, utilizzare al più tardi il geometry library, specifically the computeOffset function ottiene un altro LatLng distanza "DM" (in metri) alla destra il precedente, ottieni la differenza (in pixel) come valore assoluto "DP" e da lì ottieni il rapporto "pixelPerMeter" DP/DM.

Allora, se volete che il vostro raggio di essere a 100 metri è sufficiente impostare le proprietà per {radius:Math.floor(desiredRadiusPerPointInMeters*pixelsPerMeter)}

e manipolare il cambio di zoom basta usare un ascoltatore

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

Ho caricato un small example (prova a zoomare), puoi controllare se la distanza sembra giusta con il pulsante in basso.

Answer 2

Per chi desidera avere una versione coffeescript ben confezionata dell'esempio jsbin di @ lccarrasco, è possibile visualizzare l'essenza dello MercatorProjection coffeescript class che ho creato utilizzando il suo codice.

volta la classe caricata, è possibile utilizzarlo con il seguente:

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

Dove '15' è il raggio in metri che si può giocare con o impostare a livello di codice con altri mezzi per ottenere il vostro heatmap per sembrare come tu lo vuoi