请考虑以下代码:
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字符串中的所有键,似乎没有办法更改缩放变量。
答案 0 :(得分:2)
想出来......我没有在文档中或我可以找到的互联网上的任何地方做广告..但是,这里是你如何控制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();
我希望这有助于某人因为它让我疯狂!