如何在OpenLayers中动态调整Heatmap.js的缩放

How to dynamically adjust zoom in Heatmap.js in OpenLayers(如何在OpenLayers中动态调整Heatmap.js的缩放)

本文介绍了如何在OpenLayers中动态调整Heatmap.js的缩放的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

考虑以下代码:

heatmap = new OpenLayers.Layer.Heatmap( "Heatmap Layer", map, osm,
{visible: true, radius: radiusForScale[zoom], legend: {position: 'br',title: 'title'}}, 
{isBaseLayer: false, opacity: 0.3, projection: new OpenLayers.Projection("EPSG:4326")}
);
背景:heatmap.js非常适合显示人口密度等信息。但是,我不希望heatmap.js控制我的点的半径。相反,我希望基于我创建的自定义缩放功能动态更新半径,而不必销毁热图并在每次缩放更改时重新创建它。现在,如果您将热图添加到div中,这是可能的,如下所示:
var config = {
    element: document.getElementById("heatmapArea"),
    radius: 30,
    opacity: 50
};

//creates and initializes the heatmap
var heatmap = h337.create(config);
在本例中,只需更新JSON对象和更新显示即可。但是,这仅在分配给div的静态显示中使用,因此使向量层变得毫无用处。有没有人在OpenLayers中成功地做到了这一点?

附注:我已经浏览了热点图JSON字符串中的所有键,但似乎没有方法更改Zoom变量。

推荐答案

想通了...这并没有在文档或我能在互联网上找到的任何地方做广告。然而,以下是您如何控制OpenLayers中的半径,供需要它的人使用。让我们简单一点吧..

// create our heatmap layer
var heatmap = new OpenLayers.Layer.Heatmap( 
"Heatmap Layer", map, osm, {visible: true, radius:50}, 
{isBaseLayer: false, opacity: 0.3, projection: new OpenLayers.Projection("EPSG:4326")}
);
map.addLayers([heatmap]);

现在添加数据:

heatmap.setDataSet(data);

这是钥匙。您几乎可以使用以下命令列表执行任何操作:

this.set("radius",value); //****this one solved my problem
this.set("element",value);
this.set("visible",value); //deceiving! You have to access the canvas subclass to get it to work
this.set("max",value);
this.set("gradient",value);
this.set("opacity",value);
this.set("width",value);
this.set("height",value);
this.set("debug",value);
例如,创建一个缩放事件,使半径根据您的半径函数进行更改。对我来说,这就像根据屏幕宽度(像素)/屏幕宽度(米)的比率调整半径一样简单。现在,在您的Click事件中:

on zoom change: //pseudocode
canvas = heatmap.heatmap.get('canvas'); //this is the subclass I spoke of above
if the zoom is above a certain value //pseudocode
then
canvas.style.display = 'block'; //show the heatmap... you can also use heatmap.toggle() but this gives you more control
heatmap.heatmap.set('radius',zoomfunction[map.zoom]); //this dynamically updates the radius!!
heatmap.updateLayer();
else
canvas.style.display = 'none';
heatmap.updateLayer();

我希望这对某人有帮助,因为它快把我逼疯了!

这篇关于如何在OpenLayers中动态调整Heatmap.js的缩放的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!

本文标题为:如何在OpenLayers中动态调整Heatmap.js的缩放

基础教程推荐