题意:Google Maps 热力图图层的点半径
问题背景:
I want to be able to specify the radius of points effectively in meters. The API is configured so that the radius
property is held to be constant for pixels, so that zooming in causes the heatmap to erode (I know you can make the heatmap not erode with the dissipating
property, but this raises other issues, i.e., having to manually mess with the radius to get my heatmap to display properly. Here is the heatmaps reference.
我希望能够有效地以米为单位指定点的半径。API 配置为将 radius
属性设置为像素为单位,这样缩放时热力图会被侵蚀(我知道你可以通过 dissipating
属性使热力图不被侵蚀,但这会引发其他问题,例如必须手动调整半径以使热力图正确显示。这里是热力图的参考文档
Specifically, I'm trying to display a probability distribution on a map. I have the distribution in image form, and want to map the 0-1 weights to a heatmap layer. (I can, and don't want to, overlay the images).
具体来说,我试图在地图上显示一个概率分布。我已经有了分布的图像形式,并且想将 0 到 1 的权重映射到热力图图层上。(我可以这样做,但我不想叠加这些图像)
Any suggestions? 有什么建议吗
问题解决:
Ok, I tried some things:
好的,我尝试了一些方法
Using the Mercator Projection example (check the source) to extract the x,y pixel coordinates of any point from a latLng, to later use the geometry library, specifically the computeOffset function get another latLng a distance "DM" (in meters) to the right of the previous one, get the difference (in pixels) as an absolute value "DP" and from there you get your "pixelsPerMeter" ratio DP/DM.
使用 Mercator 投影示例(查看源代码)从 latLng 提取任意点的 x,y 像素坐标,然后使用几何库,特别是 computeOffset
函数,获取一个距离前一个点 "DM" 米(米为单位)向右偏移的 latLng,获取像素差(以绝对值表示) "DP",然后从中计算出你的 "像素/米" 比率 DP/DM
So then, if you want your radius to be 100 meters you just set the properties to {radius:Math.floor(desiredRadiusPerPointInMeters*pixelsPerMeter)}
所以,如果你想要你的半径为 100 米,你只需将属性设置为 {radius: Math.floor(desiredRadiusPerPointInMeters * pixelsPerMeter)}
And to handle the change in zoom just use a listener
要处理缩放变化,只需使用监听器
google.maps.event.addListener(map, 'zoom_changed', function () {
heatmap.setOptions({radius:getNewRadius()});
});
I uploaded a small example (try zooming), you can check if the distance looks right with the button on the bottom.
我上传了一个小示例(试着缩放),你可以通过底部的按钮检查距离是否正确