1
I have a page that has a map of Openlayers (version 3). On this map, I have inserted some interactions, such as: Create and change polygons. Well, so far, so good.
I create the polygons, which are saved in an array variable and at the same time are saved in the database for later consultation or change. Still on the same page, without closing it or making any refresh from the page, I select the polygon I want to change, and it is redrawn on the map and I can change it and save it again without problems.
However, the problem is here, when closing the page and accessing it again, the system looks for the polygons that have already been saved in the bank, and when selecting to do the editing, it redesigns the polygon on the map, but I can’t modify it.
I wanted help to know why I can’t change.
Map code:
var vectorSource = new ol.source.Vector();
// create a vector layer used for editing
var vector_layer = new ol.layer.Vector({
title: 'Vetores',
visible: false,
name: 'my_vectorlayer',
source: vectorSource,
style: new ol.style.Style({
fill: new ol.style.Fill({
color: 'rgba(255, 255, 255, 0.2)'
}),
stroke: new ol.style.Stroke({
color: '#ffcc33',
width: 2
}),
image: new ol.style.Circle({
radius: 7,
fill: new ol.style.Fill({
color: '#ffcc33'
})
})
})
});
var overlayGroup = new ol.layer.Group({
title: 'Layers',
layers: []
});
mapPrincipal = new ol.Map({
target: 'map',
renderer: 'canvas',
//renderer: 'webgl',
layers: [
new ol.layer.Group({
'title': 'Mapas',
layers: [
new ol.layer.Tile({
title: 'Water color',
type: 'base',
visible: false,
source: new ol.source.Stamen({
layer: 'watercolor'
})
}),
new ol.layer.Tile({
title: 'OSM',
type: 'base',
visible: true,
source: new ol.source.OSM()
}),
new ol.layer.Group({
title: 'Satellite and roads',
type: 'base',
combine: true,
visible: false,
layers: [
new ol.layer.Tile({
source: new ol.source.MapQuest({layer: 'sat'})
}),
new ol.layer.Tile({
source: new ol.source.MapQuest({layer: 'hyb'})
})
]
}),
new ol.layer.Tile({
title: 'Satellite',
type: 'base',
visible: false,
source: new ol.source.MapQuest({layer: 'sat'})
})
]
}),
overlayGroup,
new ol.layer.Group({
title: 'Dimensionamento',
layers: [vector_layer]
})
],
view: new ol.View({
zoom: 12,
center: ol.proj.transform([-49.086656570434556, -26.486168960979036], 'EPSG:4326', 'EPSG:3857')
})
});
Code for creation and modification:
var Modify = {
coords: '',
init: function() {
this.select = new ol.interaction.Select();
mapPrincipal.addInteraction(this.select);
this.modify = new ol.interaction.Modify({
features: this.select.getFeatures()
});
mapPrincipal.addInteraction(this.modify);
this.setEvents();
},
setEvents: function() {
var selectedFeatures = this.select.getFeatures();
this.select.on('change:active', function() {
console.log('Feature ativa!');
console.log(selectedFeatures);
selectedFeatures.forEach(selectedFeatures.remove, selectedFeatures);
});
this.modify.on('modifyend',function(e){
//Draw.setCoord(e.features.getArray()[0].getGeometry().getCoordinates());
elevatorias[chave].coords = e.features.getArray()[0].getGeometry().getCoordinates();
});
$(document).on('keyup', function(event) {
if (event.keyCode == 46) {
// remove all selected features from select_interaction and my_vectorlayer
selectedFeatures.forEach(function(selected_feature) {
var selected_feature_id = selected_feature.getId();
// remove from select_interaction
selectedFeatures.remove(selected_feature);
// features aus vectorlayer entfernen
var vectorlayer_features = vector_layer.getSource().getFeatures();
vectorlayer_features.forEach(function(source_feature) {
var source_feature_id = source_feature.getId();
if (source_feature_id === selected_feature_id) {
// remove from my_vectorlayer
vector_layer.getSource().removeFeature(source_feature);
}
});
});
}
});
},
setActive: function(active) {
this.select.setActive(active);
this.modify.setActive(active);
},
setStyle: function(hex) {
/*
vector_layer.setStyle(new ol.style.Style({
stroke: new ol.style.Stroke({ color: '#000' }),
text: new ol.style.Text({
font: '12px Calibri,sans-serif',
fill: new ol.style.Fill({ color: '#000' }),
stroke: new ol.style.Stroke({
color: '#fff', width: 2
})
})
}));
*/
var hexToRBAColor = ol.color.asArray(hex);
vector_layer.getSource().forEachFeature(function(feature){
feature.setStyle(new ol.style.Style({
fill: new ol.style.Fill({
color: 'rgba(' + hexToRBAColor[0] + ', ' + hexToRBAColor[1] + ', ' + hexToRBAColor[2] + ', 0.2)'
}),
stroke: new ol.style.Stroke({
color: hex,
width: 2
}),
image: new ol.style.Circle({
radius: 7,
fill: new ol.style.Fill({
color: hex
})
})
}));
});
},
clearMap: function() {
vector_layer.getSource().clear();
if (this.select.getFeatures()) {
this.select.getFeatures().clear();
}
}
};
Modify.init();
var Draw = {
coords: '',
lineString: '',
kmRedeTotal: 0,
color: '',
wgs84Sphere: '',
init: function() {
/* Declaração de variáveis */
coords = new Array();
lineString = new Array();
kmRedeTotal = 0;
wgs84Sphere = new ol.Sphere(6378137);
mapPrincipal.addInteraction(this.Polygon);
this.Polygon.setActive(false);
mapPrincipal.addInteraction(this.LineString);
this.LineString.setActive(false);
this.Polygon.on('drawend', function(event) {
//coords[coords.length] = event.feature.getGeometry().getCoordinates()[0];
elevatorias[chave].coords = event.feature.getGeometry().getCoordinates();
marker_layer.getSource().forEachFeature(function(e) {
if (ol.extent.containsCoordinate(event.feature.getGeometry().getExtent(), e.getGeometry().getCoordinates())) {
clientes.push({nome: e.get('name'), id: e.get('id'), consumo: e.get('consumo')});
}
});
});
this.LineString.on('drawend', function(event) {
lineString[lineString.length] = event.feature.getGeometry().getCoordinates();
console.log(lineString);
for(var i = 1; i <= (lineString[(lineString.length-1)].length-1); i++){
kmRedeTotal += Draw.CalculateDistance(lineString[(lineString.length-1)][(i-1)][0], lineString[(lineString.length-1)][(i-1)][1], lineString[(lineString.length-1)][i][0], lineString[(lineString.length-1)][i][1]);
};
console.log(kmRedeTotal);
});
var button = document.createElement('button');
button.innerHTML = '<i class="glyphicon glyphicon-ok" style="font-size: 0.6em;"></i>';
button.setAttribute("title", "Desenhar Polígono");
var button2 = document.createElement('button');
button2.innerHTML = '<i class="glyphicon glyphicon-pencil" style="font-size: 0.6em;"></i>';
button2.setAttribute("title", "Alterar Polígono");
var button3 = document.createElement('button');
button3.innerHTML = '<i class="glyphicon glyphicon-remove" style="font-size: 0.6em;"></i>';
button3.setAttribute("title", "Deletar Polígono");
var button4 = document.createElement('button');
button4.innerHTML = '<i class="glyphicon glyphicon-tint" style="font-size: 0.6em;"></i>';
button4.setAttribute("title", "Mudar a cor");
button4.setAttribute("id", "btnChangeColor");
var button5 = document.createElement('button');
button5.innerHTML = '<i class="glyphicon glyphicon-cog" style="font-size: 0.6em;"></i>';
button5.setAttribute("title", "Calcular Kilômetro de Rede");
button5.setAttribute("id", "btnCalcKmRede");
button.addEventListener('click', function(e) {
Draw.setActive(true, 'Polygon');
Modify.setActive(false);
}, false);
button2.addEventListener('click', function(e) {
Draw.setActive(false, 'Polygon');
Modify.setActive(true);
}, false);
button3.addEventListener('click', function(e) {
Modify.clearMap();
}, false);
button4.addEventListener('click', function(e) {
$(this).ColorPicker({
onSubmit: function(hsb, hex, rgb, el) {
color = '#' + hex;
$(el).ColorPickerHide();
Modify.setStyle(color);
}});
}, false);
button5.addEventListener('click', function(e) {
Draw.getActive() && Draw.setActive(true, 'LineString');
}, false);
var element = document.createElement('div');
element.className = 'rotate-north ol-unselectable ol-control';
element.setAttribute("style", "display:none;");
element.appendChild(button);
element.appendChild(button2);
element.appendChild(button3);
element.appendChild(button4);
element.appendChild(button5);
mapPrincipal.addControl(new ol.control.Control({
element: element
}));
},
setCoord: function(value) {
coords = value;
},
getColor: function() {
return color;
},
getCoord: function() {
return coords;
},
getKmTotalRede: function() {
return kmRedeTotal;
},
getLineString: function() {
return lineString;
},
LineString: new ol.interaction.Draw({
source: vector_layer.getSource(),
type: /** @type {ol.geom.GeometryType} */ ('LineString')
}),
Polygon: new ol.interaction.Draw({
source: vector_layer.getSource(),
type: /** @type {ol.geom.GeometryType} */ ('Polygon')
}),
getActive: function() {
return this.activeType ? this[this.activeType].getActive() : false;
},
setActive: function(active, type) {
if (active) {
this.activeType && this[this.activeType].setActive(false);
this[type].setActive(true);
this.activeType = type; //'Polygon';
} else {
this.activeType && this[this.activeType].setActive(false);
this.activeType = null;
}
},
CalculateDistance: function(lng1, lat1, lng2, lat2) {
return wgs84Sphere.haversineDistance(Draw.Transform(lng1,lat1),Draw.Transform(lng2,lat2));
},
Transform: function(lng, lat) {
return ol.proj.transform([lng, lat], 'EPSG:3857', 'EPSG:4326');
}
};
Draw.init();
// The snap interaction must be added after the Modify and Draw interactions
// in order for its map browser event handlers to be fired first. Its handlers
// are responsible of doing the snapping.
var snap = new ol.interaction.Snap({
source: vector_layer.getSource()
});
mapPrincipal.addInteraction(snap);
Here is the code that is on the button that creates the polygon:
Draw.setActive(true, 'Polygon');
Modify.setActive(false);
Here is the code that is on the button that changes the polygon that is already saved in the bank:
Modify.setActive(true);
Modify.setStyle(elevatorias[chave].color);
vectorSource.addFeature(new ol.Feature({
name: 'my_vectorlayer',
geometry: new ol.geom.Polygon(elevatorias[chave].coords)
}));
elevatorias is the array variable that received the polygons in the database.
So that’s it, gentlemen.