Hallo Forum,
ich versuche mich gerade (kläglich) darin eine Funktion dynamisch nachzubauen. Zum Hintergrund: Ich habe eine OpenLayers 3 Anwendung geschraubt, bei der Objekte beliebig angezeigt werden können, je nach Einsatz müssen aber unterschiedliche Styles verwendet werden. Wenn ich die Styles alle vorher definiere dann klappt das - ich hätte es aber gerne dynamisch.
Meine Ausgangsfunktion (die funktioniert). schaut dabei so aus:
und setzen kann ich den Style dann:
Die style Funktion möchte ich nun dynamisch erzeugen, dafür lade ich mit Ajax eine JSON-Date nach in der die Styles definiert sind:
Das große Problem ist die Erzeugung in der Done-Funktion.
Ein JSON-File schaut dann in etwa so aus:
Über Hilfe und Denkanstösse würde ich mich sehr freuen.
besten Dank
Balli
- - - Aktualisiert - - -
Hier meine Lösung, die auf jeden Fall schon einmal funktioniert (vielleicht gibt es etwas eleganteres aber nicht bei der Temperatur):
Ein schönes Wochenende wünschend
Balli
ich versuche mich gerade (kläglich) darin eine Funktion dynamisch nachzubauen. Zum Hintergrund: Ich habe eine OpenLayers 3 Anwendung geschraubt, bei der Objekte beliebig angezeigt werden können, je nach Einsatz müssen aber unterschiedliche Styles verwendet werden. Wenn ich die Styles alle vorher definiere dann klappt das - ich hätte es aber gerne dynamisch.
Meine Ausgangsfunktion (die funktioniert). schaut dabei so aus:
Code:
var style = (function() {
var someStyle = [new ol.style.Style(
{
image:new ol.style.Circle(
{
radius: 5,
fill: new ol.style.Fill(
{
color: 'red',
}),
stroke: new ol.style.Stroke(
{
color: 'red',
})
})
})];
var otherStyle = [new ol.style.Style(
{
image:new ol.style.Circle(
{
radius: 20,
fill: new ol.style.Fill(
{
color: 'green',
}),
stroke: new ol.style.Stroke(
{
color: 'green',
})
})
)];
return function(feature, resolution) {
if (feature.get('object') === "Auto") {
return someStyle;
} else {
return otherStyle;
}
};
}());
und setzen kann ich den Style dann:
Code:
vectorlayer.setStyle(style);
Die style Funktion möchte ich nun dynamisch erzeugen, dafür lade ich mit Ajax eine JSON-Date nach in der die Styles definiert sind:
Code:
$.ajax({
type:'GET',
dataType: 'json',
url: 'localhost/php/style/getstyle_json.php',
data: {styleset:$(this).attr('stylesetid')},
})
.done(function(response)
{
newstyle = function(feature, resolution, response)
{
for(i = 0;i<response.length;++i)
{
console.log(response[i].object);
console.log(response[i].fillcolor);
console.log(response[i].radius);
console.log(response[i].strokecolor);
console.log(response[i].strokewidth);
if(feature.get('object') === response[i].object)
{
return buildStyle(response[i]);
}
};
};
})
.fail(function()
{
});
Ein JSON-File schaut dann in etwa so aus:
Code:
[
{
"oid": 39749,
"object": "Berg",
"radius": 5,
"fillcolor": "rgba(24,139,222,1)",
"strokecolor": "rgba(189,217,21,1)",
"strokewidth": 5
},
{
"oid": 39750,
"object": "Giraffe",
"radius": 20,
"fillcolor": "rgba(42,90,125,1)",
"strokecolor": "rgba(54,59,25,1)",
"strokewidth": 5
},
{
"oid": 39751,
"object": "Auto",
"radius": 20,
"fillcolor": "rgba(237,21,34,1)",
"strokecolor": "rgba(205,235,23,1)",
"strokewidth": 4
}
]
Über Hilfe und Denkanstösse würde ich mich sehr freuen.
besten Dank
Balli
- - - Aktualisiert - - -
Hier meine Lösung, die auf jeden Fall schon einmal funktioniert (vielleicht gibt es etwas eleganteres aber nicht bei der Temperatur):
Code:
.done(function(response)
{
newstyleinformation = response;
objectitems = [];
for(i = 0;i < newstyleinformation.length;++i)
{
objectitems.push(newstyleinformation[i].object);
};
newstyle = function(feature, resolution)
{
if(objectitems.indexOf(feature.get('object')) >= 0)
{
return buildStyle(newstyleinformation[objectitems.indexOf(feature.get('object'))]);
}
else
{
return defaultStyle;
}
};
vectorlayer.setStyle(newstyle);
})
Balli