个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我正在尝试将 heatmap.js 与 Google map 集成以进行一些可视化工作。我提到了这个:
http://www.patrick-wied.at/static/heatmapjs/example-heatmap-googlemaps.html
因此，我的本地示例中的代码看起来几乎相同:
<!DOCTYPE html>
<html lang="en">
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"> </script>
<div id="heatmapArea" style="width:1024px;padding:0;height:768px;cursor:pointer;position:relative;"></div>
<script type="text/javascript" src="js/jquery-1.8.2.js"></script>
<script type="text/javascript" src="js/heatmap.js"></script>
<script type="text/javascript" src="js/heatmap-gmaps.js"></script>
<script type="text/javascript">
window.onload = function(){
// standard gmaps initialization
var myLatlng = new google.maps.LatLng(48.3333, 16.35);
// define map properties
var myOptions = {
zoom: 3,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
disableDefaultUI: false,
scrollwheel: true,
draggable: true,
navigationControl: true,
mapTypeControl: false,
scaleControl: true,
disableDoubleClickZoom: false
};
// we'll use the heatmapArea
var map = new google.maps.Map($("#heatmapArea")[0], myOptions);
// let's create a heatmap-overlay
// with heatmap config properties
var heatmap = new HeatmapOverlay(map, {
"radius":20,
"visible":true,
"opacity":60
});
// here is our dataset
// important: a datapoint now contains lat, lng and count property!
var testData={
max: 46,
data: [{lat: 33.5363, lng:-117.044, count: 1},{lat: 33.5608, lng:-117.24, count: 1},{lat: 38, lng:-97, count: 1},{lat: 38.9358, lng:-77.1621, count: 1}]
};
// now we can set the data
google.maps.event.addListenerOnce(map, "idle", function(){
// this is important, because if you set the data set too early, the latlng/pixel projection doesn't work
heatmap.setDataSet(testData);
});
};
</script>
</html>
我按照预期在 div 中渲染了 google map ，但热图本身并未在 testData 提供的经纬度数据点上渲染。
浏览器控制台中没有错误......
有人看到我在这里做了一些愚蠢的事情吗？
最佳答案
作为 heatmap.js v1 现已 retired我还在此处提供了一个基于当前版本 v2 的示例:
http://jsfiddle.net/Fresh/pz4usuLe/
这是基于 Google Maps example found on the heatmap website .
我看了这个，这绝对令人困惑。我拿了你的代码并让它在这里工作:
http://jsfiddle.net/Fresh/nRQbd/
(请注意，上面的原始示例不再有效，因为 v1 已停用，要查看此示例与 v2 的配合，请参阅此 http://jsfiddle.net/Fresh/pz4usuLe/ )
请注意我如何修改 testData 中的数据点以获得在 map 上绘制的结果:
var testData = {
max: 3,
data: [{
lat: 48.3333,
lng: 16.35,
count: 100
}, {
lat: 51.465558,
lng: 0.010986,
count: 100
}, {
lat: 33.5363,
lng: -5.044,
count: 100
}]
};
我还增加了每个点的计数值；点值为 1 时不可见，但增加其值(例如增加到 100)会增加渲染点的颜色强度(从而使其可见!)。
当点绘制在可见 map 边界之外时，就会出现此问题。我通过调试推断出这一点:
heatmap.setDataSet(testData);
(取消注释“debugger;”在 fiddle 中调试网络控制台中的代码)
heatmap-gmaps.js 中导致数据点无法渲染的代码位于此处:
while(dlen--){
latlng = new google.maps.LatLng(d[dlen].lat, d[dlen].lng);
if(!currentBounds.contains(latlng)) {
continue;
}
me.latlngs.push({latlng: latlng, c: d[dlen].count});
point = me.pixelTransform(projection.fromLatLngToDivPixel(latlng));
mapdata.data.push({x: point.x, y: point.y, count: d[dlen].count});
}
示例中的数据点似乎都不包含在渲染 map 区域的当前边界内。因此，“!currentBounds.contains(latlng)”始终为 true，导致不会将任何点添加到 map 数据对象。
这个假设似乎是正确的，因为数据集中的第一个点(即 lat: 33.5363，lng:-117.044)实际上位于圣地亚哥(使用它来确认 http://itouchmap.com/latlong.html )，这在渲染中不可见 map 。
关于javascript - Heatmap.js 未渲染，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20384017/
25
4
0
我正在使用 Java 类 HeatMap(作者: http://www.mbeckler.org/heatMap/ )为我的矩阵生成热图。我想实现一个鼠标监听器，当鼠标位于图像(热图)上的某个位置时，
我正在绘制热图，我不希望行名和列名在 x 轴和 y 轴上可见。 所以我使用了下面的代码: heatmap.2(data, xlab="PROTEINS", ylab="DRUGS", labRow=F
很抱歉，如果这个问题已在其他地方得到解答，但我无法找到解决方案...... 我有scatterplot数据、x和y以及颜色数据c(所有这些都是向量)。 x = rand(100,1); y = ran
我想从我的数据表中过滤掉 FTE 值为 0 的行，但前提是从我的热图中选择了一个框。如果未选择任何框，则数据表应显示 FTE 值为 0 的行。 我找到了这个:https://groups.google
我有一个制表符分隔的数据文本文件 (Data.txt)，其中包含 13 列和 90 行。它有一个标题行(样本值)，第一列是样本名称。 当我将数据加载到数据矩阵时，我的第一列样本名称没有显示。它们都被
我正在尝试在 Holoviews 中为每个点生成一个具有自定义颜色值的热图，以便指定不同的 alpha 颜色值。 目前我正在生成两个具有不同 alpha 值的 Holoviews 图并像这样叠加它们:
这个问题在这里已经有了答案: How to create pre-annotated rowside column in heatmap.2 (2 个回答) 4年前关闭。 我有以下 MWE，我在其中制
我正在尝试使用 heatmap.2 在一定范围内绘制值矩阵。列是范围(例如，0 到 100)。列标签太多，无法清晰显示。有没有办法显示每第 N 个(0、10、20 等)？我希望显示所有值，但我不希望它
我正在绘制一个 759*12 双矩阵 twoway.expr.005使用 heatmap.2() library(gplots) dist2 <- function(x, ...){as.dist(1
我有关于包裹的问题 gplots .我想使用功能heatmap.2因此我想将颜色键中的对称点从 0 更改为 1。通常在 symkey=TRUE 时然后您使用 col=redgreen() ，创建一个颜
我正在尝试将 heatmap.js 与 Google map 集成以进行一些可视化工作。我提到了这个: http://www.patrick-wied.at/static/heatmapjs/exam
我生成了这样的热图: X 轴和 Y 轴标签未完全显示。我的代码在这里: heatmap.2(x,col=blueyelred,colsep=c(1:6),rowsep=(1:62),
我有以下代码来显示热图上方的颜色键。但是颜色键在热图的顶部(稍微向右移动)并不精确。有谁知道如何使颜色不改变？另外，如何删除热图右侧的空白？谢谢。 library(gplots) heatmap.2(
有谁知道为什么我的 heatmap.2 结果有奇怪的颜色——绿松石不属于我的红/黑/绿调色板？绿松石似乎是指基于样本聚类的信息(我“错误”编辑出的行树状图)，而不是基于特征聚类的信息。这是怎么回事？
我正在尝试使用 heatmap.2(下面的代码)生成一些对数转换的倍数变化数据图。 我想按照最后一列中的值(从大到小)对热图中的行进行排序。这些行正在自动排序(我不确定“幕后”使用的精确计算)，如图所
我正在使用 github 中 pa7 的 heatmap.js 库成功制作一些热图 http://www.patrick-wied.at/static/heatmapjs/example-heatma
所以我需要在 seaborn 中创建大量具有不同数据尺度的热图。一些范围从 0-100 和一些 +100 到 -100。我需要做的是在所有图表中保持相同的颜色分级。因此，例如，我希望任何低于 0 的东
我正在为我的应用程序尝试热图，但我认为我的代码中缺少一些东西，因为它不起作用。 JSFiddle 下面是我的代码: var domElement = document.getE
首先，我正在使用 ReactJS 和 heatmap.js 库。 用作 heatmap.js 入口点的 HTMLDivElement 应该是响应式的。在每次调整窗口大小时，它都会根据当前窗口大小进行调
我有一个简单的传单热图示例，其中包含数据(超过 10,000 行)。但它没有产生应有的梯度热图。 演示在 http://shafiqmustapa.my/test.html heatmap没有根据va
我是一名优秀的程序员,十分优秀！