Как динамически изменять масштаб в Heatmap.js в OpenLayers

Question

Рассмотрим следующий код:

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 для управления радиусом моих точек. Вместо этого я хочу динамически обновлять радиус на основе пользовательской функции масштабирования, которую я создал, без необходимости разрушать тепловую карту и воссоздавать ее каждый раз, когда изменяется масштаб. Теперь это возможно, если вы добавляете Heatmap к DIV следующим образом:

var config = { 
    element: document.getElementById("heatmapArea"), 
    radius: 30, 
    opacity: 50 
}; 

//creates and initializes the heatmap 
var heatmap = h337.create(config); 

В этом примере, это так просто, как обновление объекта JSON и обновление экрана. Однако это только в статическом отображении, назначаемом div, и поэтому делает векторный слой бесполезным. Кто-нибудь имел успех с этим в OpenLayers ??

На боковой ноте: я просмотрел все ключи в строке JSL-панели Heatmap и, похоже, не существует способа изменить масштабную переменную.

Answer 1

Выяснено это ... это не рекламируется в документации или в любом месте в Интернете, что я мог бы найти .. однако, вот как вы управляете радиусом в 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(); 

Я надеюсь, что это поможет кому-то, потому что это сбило меня с ума!