JavaScript 求助生成点密度图的方法

lang1pal · 2013年11月28日 · 最后由 cqcn1991 回复于 2013年11月30日 · 4002 次阅读

现在项目的要求需要在网页上生成类似于以下的图

现在的情况是

  • 点的坐标数据
  • 地图的图片

现在根据点的密度在地图上找色,密度高的就是颜色深。 不知道这样表述还不好,就是像这样的图

现在的想法

  • 是否可以把点计算出不同密度的区域,在地图上描绘。关于计算的方式,没有头绪
  • 找现成的 jquery 图表的库,没有找到类似的
  • 在后台生成图直接在前台显示,也没有头绪

不知道有没有人做过类似的东西,求大家指点😫

这么复杂的图要找 http://d3js.org/

#1 楼 @Rei 看来还是得想个办法把点的 rate 给计算出来

d3+1 虽然不太明白 点的坐标数据 是指什么…… 不过这种似乎都是分块然后上色吧……

echarts 貌似可以满足这种需求,我关注它很久了,但一直还没在项目中实际运用。

首先你要计算出最大值和最小值,然后最大值和最小值之间拆分出几个梯度,均匀分或者不均匀分。每个坐标计算独立的颜色,叠加到图上。

#1 楼 @Rei 借地问一下,如果是最简单的 X-Y 图呢?

是否需要交互操作地图的? 是否与地理信息绑定? 是否会依据更新动态重绘?

如果是,前台 canvas 画会很慢。

复杂方式自己后台渲染

  1. http://tilestache.org/doc. 自己 serve map tile
  2. http://mapnik.org/ 依据你的数据自己画出数据 tile 层

简单方式: http://cartodb.com/ 收费服务

#3 楼 @Kabie 就是有很多个坐标,然后更具坐标的密度着色。 现在想法也是这样通过点得到不同 rate 的块,然后着色

地理信息系统上这个好像叫做专题图,你拿专题图这个关键字搜索搜索看,可能会有新发现

非广告!呵~,我也在做地图。上图不是点密度专题图,是分段的,只是按照城市分的段。给你看看这个,http://www.dituhui.com/maps/11761

只有点的位置的话,判断是否在一个省份里最好预先用其它东西算好,然后做一个省份对应人数的键值对,最后拿 D3 弄下就好了。纯用 JS 做这个很费劲。

需要 登录 后方可回复, 如果你还没有账号请 注册新账号