2012-09-06 121 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

一定要包含几何库,即:

  • 11. 谷歌地图半径转弯
  • 12. 通过网址无法显示谷歌地图热图图层
  • 13. 谷歌地图圆形半径适合地图
  • 14. 使用谷歌地图的半径内的绘制点
  • 15. 谷歌热图
  • 16. 导出谷歌地图的热图的层PDF
  • 17. 的OpenLayers层点菜谷歌地图ImageMapType
  • 18. 谷歌地图热图和标记
  • 19. 谷歌地图API(KML层)
  • 20. 谷歌地图KML层
  • 21. 谷歌地图覆盖层
  • 22. 试图让谷歌地图用户设置半径
  • 23. 谷歌地图图层的开放图层 - 点缩放地图之前?
  • 24. Android谷歌地图海图图层
  • 25. 谷歌地图谷歌地点类型
  • 26. 从谷歌地图api v3中删除地理位置半径
  • 27. 谷歌地图路径
  • 28. 定制路况图层谷歌地图
  • 29. Ionic2谷歌地图图像层
  • 30. 谷歌地图图层效果