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

How to dynamically adjust zoom in Heatmap.js in OpenLayers

本文关键字：动态 调整 缩放 js Heatmap OpenLayers 中的      更新时间：2023-09-26

考虑以下代码：

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中成功过吗？？

附带说明：我已经浏览了heatmap JSON字符串中的所有键，似乎没有办法更改缩放变量。

想好了。。。这在我能找到的文件或互联网上的任何地方都没有广告。。然而，以下是您如何在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);

因此，例如，创建一个缩放事件，以便半径根据半径函数进行更改。对我来说，这就像根据屏幕宽度（像素）/屏幕宽度（米）的比例缩放半径一样简单。所以现在在您的点击事件中：

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();

我希望这能帮助到别人，因为它让我发疯了！

相关文章：