var iconsSave = [], iconsSaveCircle;
function save(){
localStorage.setItem("iconsSave", icons);
localStorage.setItem("iconsCircle", iconsCircle);
};
//mein checkRefresh Funktion basiert auf den Marker und Circle. Die nach einer x und y Koordinaten sowie Radiuseingabe zusammen hängen.
var iconsCircle=[], icons=[], vectorLayerC, vectorLayerI, vectorLayer, chRadius, chIcon, vectorSourceC, vectorSourceI, xCoo, yCoo, rad;
function checkRefresh(){
xCoo = document.getElementById("coordinate-x").value;
yCoo = document.getElementById("coordinate-y").value;
rad = document.getElementById("rad").value;
if( xCoo == "" || yCoo == "" || xCoo == "" && yCoo == ""){
alert("Bitte geben Sie die fehlenden Koordinate an!");
}else{
if(xCoo != "" && yCoo != "" && rad != ""){
vectorSourceC = new ol.source.Vector();
vectorSourceI = new ol.source.Vector();
vectorLayerC = new ol.layer.Vector({
source: vectorSourceC
});
vectorLayerI = new ol.layer.Vector({
source: vectorSourceI
});
//Kreis wird mit entsprechenden Eingabewerte hinzugefügt
var iconFeatureC = new ol.Feature({
geometry: new ol.geom.Circle([xCoo, yCoo], rad)
});
//Kreisgestaltung
var iconStyleC = new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'red',
width: 2
}),
fill: new ol.style.Fill({
color: 'rgba(255,0,0,0.2)'
})
});
iconFeatureC.setStyle(iconStyleC);
vectorSourceC.addFeature(iconFeatureC);
//Icon wird an der eingegebenen Position hinzugefügt
var coords = [xCoo, yCoo];
var iconFeatureI = new ol.Feature({
geometry: new ol.geom.Point(coords),
name: 'hi',
population: 4000,
rainfall: 500
});
var iconStyleI = new ol.style.Style({
image: new ol.style.Icon(/** @type {olx.style.IconOptions} */({
anchor: [15, 48],
anchorXUnits: 'm',
anchorYUnits: 'm',
opacity: 0.75,
src: 'data/icon.png'
}))
});
iconFeatureI.setStyle(iconStyleI);
vectorSourceI.addFeature(iconFeatureI);
////////////////////////////////////////////////
iconsCircle.push(vectorLayerC);
icons.push(vectorLayerI);
map.addLayer(vectorLayerC);
map.addLayer(vectorLayerI);
//circles und icons werden an die checkboxen gebunden
chRadius = new ol.dom.Input(document.getElementById("visibleRadius"));
for(var j = 0; j<iconsCircle.length; j++){
chRadius.bindTo('checked', iconsCircle[j], 'visible');
}
chIcon = new ol.dom.Input(document.getElementById("visibleIcon"));
for(var i = 0; i<icons.length; i++){
chIcon.bindTo('checked', icons[i], 'visible');
}
}else
if(xCoo != "" && yCoo != "" && rad == ""){
var iconFeature = new ol.Feature({
geometry: new ol.geom.Point([xCoo, yCoo]),
name: 'hi',
population: 4000,
rainfall: 500
});
var iconStyle = new ol.style.Style({
image: new ol.style.Icon(/** @type {olx.style.IconOptions} */({
anchor: [15, 48],
anchorXUnits: 'm',
anchorYUnits: 'm',
opacity: 0.75,
src: 'data/icon.png'
}))
});
iconFeature.setStyle(iconStyle);
var vectorSource = new ol.source.Vector({
features: [iconFeature]
});
vectorLayer = new ol.layer.Vector({
source: vectorSource
});
icons.push(vectorLayer);
map.addLayer(vectorLayer);
//icons werden an das checkbox gebunden
chIcon = new ol.dom.Input(document.getElementById("visibleIcon"));
for(var i = 0; i<icons.length; i++){
chIcon.bindTo('checked', icons[i], 'visible');
}
}
}
};
//hier switche ich zwischen zig Bildern
function checkedRadioBtn(url, size, extProj){
var allLayers = map.getLayers().getArray()[0];
map.removeLayer(allLayers);
var newSizeProjection = new ol.proj.Projection({
code: 'metrics',//'EPSG:4326', //'pixel',
units: 'm', //als Meter //'pixels', es gibt degrees und ft
extent: [extProj[0], extProj[1], extProj[2], extProj[3]] //Xmin, Ymin, Xmax, Ymax
});
newL = new ol.layer.Image({
source: new ol.source.ImageStatic({
url: url,
imageSize: size,
projection: newSizeProjection,
imageExtent: newSizeProjection.getExtent()
})
});
map.addLayer(newL);
localStorage.getItem('iconsSave ');
localStorage.getItem('iconsSaveCircle');
};
