【问题标题】:How to create a heatmap with numbers using Leaflet map?如何使用传单地图创建带有数字的热图?
【发布时间】:2016-07-10 06:24:01
【问题描述】:

我希望创建一个如下所示的热图,数字会在不同的缩放级别发生变化 - 数字可以出现在鼠标悬停窗口中,而不是直接显示在地图上:

    http://www.trulia.com/local/san-francisco-ca/tiles:1|points:1_crime

知道如何使用 Leaflet 地图制作这个吗?

编辑:

我尝试了 heatmap.js。但它无法在地图上显示数字。

编辑2:

我有一个包含三列的 csv 文件:

    lat  lng  count

任何提示如何轻松加载它 Leaflet.markercluster?

【问题讨论】:

标签: javascript d3.js leaflet heatmap leaflet.draw


【解决方案1】:

要显示点聚类层,请使用 k-mean 聚类,对于热图,请使用 heatmap.js

这两个模块都可以在任何映射库中轻松使用。

【讨论】:

  • 我试过heatmap.js,它确实显示颜色,但它不能像OP中提到的网页那样显示相应的数字。还有什么提示吗?
  • @Osiris heatmap.js 使用 canvas 'createRadialGradient' 函数来渲染热图。我不知道我们是否可以从这个模块(heammap.js)中获得插值。如果您想在鼠标悬停时显示值,则应该使用某种逻辑,即某种类型的插值(如克里金法)。请详细说明您的项目要求或疑问,以便提出合适的方法。
  • 我已经更新了这个问题。我们可以在 heatmap.js 层之上添加一个额外的数字/标记层。 :)
  • 是的,leaflet 的 markerCluster 很容易实现。关于鼠标悬停,您想显示颜色或点的值吗?
  • 显示颜色的价值会很棒,但如果有任何明显的性能损失,我不希望它。我只需要问题截图中显示的数字。 trulia.com/local/san-francisco-ca/tiles:1|points:1_crime
猜你喜欢
  • 2022-01-13
  • 2021-09-26
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2021-08-04
  • 2019-04-10
  • 2015-10-15
相关资源
最近更新 更多