2012-09-06 54 views
7

我希望能夠以米爲單位有效指定點的半徑。配置API以使radius屬性對像素保持不變,因此放大會導致熱圖腐蝕(我知道你可以使熱圖不會被dissipating屬性侵蝕,但是這會引發其他問題,例如,有與半徑手動爛攤子讓我的熱圖,以正確顯示。這裏是熱圖reference谷歌地圖熱圖層點半徑

具體來說,我想在地圖上顯示一個概率分佈。我在圖像的形式分佈,並希望0-1權重映射到一個熱圖層。(我就可以了,不想,重疊顯示圖像)。

有什麼建議?

+1

我想你會需要使用一個事實,即在每個縮放級別,距離每像素雙,然後重新繪製每個縮放級別的熱圖? –

回答

12

好的,我嘗試了一些東西:

使用Mercator Projection example (check the source)從latLng中提取任意點的x,y像素座標,以便稍後使用geometry library, specifically the computeOffset function獲得另一個latLng距離「DM」(以米爲單位)前一個,獲得差異(以像素爲單位)作爲絕對值「DP」,並從那裏獲得您的「pixelsPerMeter」比率DP/DM。

那麼,如果你希望你的半徑爲100米,您只需設置屬性{radius:Math.floor(desiredRadiusPerPointInMeters*pixelsPerMeter)}

以及處理變焦的變化只是使用偵聽

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

我上傳了small example(嘗試縮放),您可以使用底部的按鈕檢查距離是否正確。

+1

我認爲我幾乎可以工作,但是,TILE_SIZE參數會讓我失望。爲什麼它設置爲'256',這是任意的?默認情況下,地圖的平鋪尺寸是(256x256)嗎?我如何獲得正確的瓷磚尺寸? – eqzx

+1

謝謝。有一點需要注意的是,當你縮小太遠時,每個點不再適合像素,半徑被設置爲零。在getNewRadius()方法中添加此代碼使得它的點呈現爲不散開(不準確),但至少它們被呈現(初始化時爲'dissipating = false') if(totalPixelSize == 0 &&消散== true){heatmap.setOptions({dissipating:false}); totalPixelSize =。01;如果(totalPixelSize> 0 && dissipate == false){heatmap.setOptions({dissipating:true});其他if(totalPixelSize == 0){totalPixelSize = .01;}' – eqzx

+1

@ nrhine1數字256來自'因爲基本墨卡託Google地圖貼圖是256 x 256像素,所以可用的世界座標空間是{0-256},{0-256}'[在此文檔頁面](https://developers.google.com/maps/documentation/javascript/maptypes?hl=en#WorldCoordinates),感謝您提供關於耗散:) – lccarrasco

1

對於任何想要擁有@ lccarrasco的jsbin示例的精美打包的coffeescript版本的人,您可以查看我使用他的代碼創建的MercatorProjection coffeescript class的要點。

一旦你已經加載的類,你可以用下面的使用它:

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」是米,你可以玩或者通過其他方式得到你的熱圖編程設置半徑看起來像你想要的。

+0

一定要包含幾何庫,即: