Punkt aus Linestring entfernen und Linie neu zeichnen

crazyiven · 2011-03-02 10:23:56

Hallo zusammen

Ich habe ein wenig mit OSM & Openlayer gespielt und mir folgendes Beispiel als Grundlage genommen:
http://openlayers.org/dev/examples/marker-shadow.html

Nun wollte ich es so abändern, dass man über einen Klick auf die Karte neue Marker setzt (beliebig viele) was auch sofort super klappte. Und dann habe ich es nach einem anderen Beispiel (finde den Link gerade nicht mehr) so erweitert, dass man auch eine Linie zwischen den Punkten ziehen konnte.

Das klappte alles super ... ich konnte wunderbar die Linie ziehen durch Klicken auf die Karte und alles ist super. Nun würde ich im ersten Schritt gerne einfach durch das Drücken eines Buttons (der die Funktion RemoveLastPoint aufrufen soll) den jeweils letzten Punkt rausnehmen.

Für die Marker klappt das super, die verschwinden im Array und auch auf der Karte. Nur bei der Linie habe ich noch Probleme.

Die Linie bleibt auf der Karte stehen, obwohl das Array effektiv wirklich gelöscht wird. Weil wenn ich nach der Löschung wieder auf die Karte klicke wird der "Vorletzte" Punkt als Grundlage genommen und eine neue Linie gezogen. Nur ist halt die "alte" Linie auch noch in der Karte die eigentlich weg sollte / muss. Hier der Quellcode der kompletten Testdatei.

Meine Fragen sind nun:
1) Wie kann ich das falsche Linienfragment von der Karte verschwinden lassen?
2) Wie könnte ich eventuell auch Punkte durch Klick auf den Marker verschwinden lassen?

Wäre nett wenn man mir ein paar Denkanstöße oder Beispiele geben könnte um das zu realisieren

<html>
<head>
<title>OpenLayers Demo</title>
<style type="text/css">
html, body, #basicMap { width: 600px; height: 600px; margin: 0; }
</style>
<script src="http://www.openlayers.org/api/OpenLayers.js"></script>
<script>
var SHADOW_Z_INDEX = 10;
var MARKER_Z_INDEX = 11;

var DIAMETER = 200;
var NUMBER_OF_FEATURES = 15;

var map, layer, layer2, style_green;
var points = [];

function init() {
map = new OpenLayers.Map("basicMap");
layer = new OpenLayers.Layer.Vector(
"Marker Drop Shadows",
{
styleMap: new OpenLayers.StyleMap({
externalGraphic: "http://www.openlayers.org/dev/img/marker-gold.png",
backgroundGraphic: "http://www.openlayers.org/dev/img/marker_shadow.png",
backgroundXOffset: 0,
backgroundYOffset: -7,
graphicZIndex: MARKER_Z_INDEX,
backgroundGraphicZIndex: SHADOW_Z_INDEX,
pointRadius: 10
}),
isBaseLayer: false,
rendererOptions: {yOrdering: true}
}
);
layer2 = new OpenLayers.Layer.Vector(
"Vector Layer",
{
isBaseLayer: true,
rendererOptions: {yOrdering: true}
});
style_green = {strokeColor: "#00FF00", strokeOpacity: 1, strokeWidth: 6};
map.addLayers([layer]);
map.addLayers([layer2]);
map.zoomToMaxExtent();

map.events.register("click", map, function(e){
AddPoint(map.getLonLatFromViewPortPx(e.xy));
});
}

function AddPoint(lonlat) {
var newfeatures = layer.features;
newfeatures.push(
new OpenLayers.Feature.Vector(
new OpenLayers.Geometry.Point(lonlat.lon, lonlat.lat)
)
);
layer.removeFeatures(layer.features);
layer.addFeatures(newfeatures);
points.push(new OpenLayers.Geometry.Point(lonlat.lon, lonlat.lat));
drawline();
}
function drawline() {
var lineString = new OpenLayers.Geometry.LineString(points);
var lineFeature = new OpenLayers.Feature.Vector(lineString, null, style_green);
layer2.addFeatures(lineFeature);
}
function RemoveLastPoint() {
var newfeatures = layer.features;
newfeatures.pop();
layer.removeFeatures(layer.features);
layer.addFeatures(newfeatures);
points.pop();
drawline();
}
</script>
</head>
<body onload="init();">
<div id="basicMap" style="border: 1px solid #000000;"></div>
<button onclick="RemoveLastPoint()">Remove Last Point</button>
</body>
</html>

crazyiven · 2011-03-03 09:23:26

Für die die es interessiert, hier nun meine eigene Lösung:

<html><head><title>OpenLayers Demo</title><style type="text/css"> html, body, #basicMap { width: 600px; height: 600px; margin: 0; } </style>
<script src="http://www.openlayers.org/api/OpenLayers.js"></script>
<script>
var map, layer1;
var points = [];
function init() {
map = new OpenLayers.Map("basicMap");
layer1 = new OpenLayers.Layer.Vector("Marker Drop Shadows",{
styleMap: new OpenLayers.StyleMap({
externalGraphic: "http://www.openlayers.org/dev/img/marker-gold.png",
backgroundGraphic: "http://www.openlayers.org/dev/img/marker_shadow.png",
backgroundXOffset: 0,
backgroundYOffset: -7,
graphicZIndex: 11,
backgroundGraphicZIndex: 10,
pointRadius: 10
}),
isBaseLayer: false,
rendererOptions: {yOrdering: true}
});
layer2 = new OpenLayers.Layer.Vector("Vector Layer",{
styleMap: new OpenLayers.StyleMap({
graphicZIndex: 12,
}),
isBaseLayer: true,
rendererOptions: {yOrdering: true}
});
map.addLayers([layer1]);
map.addLayers([layer2]);
map.zoomToMaxExtent();
map.events.register("click", map, function(e){
AddPoint(map.getLonLatFromViewPortPx(e.xy));
});
}
function AddPoint(lonlat) {
points.push(new OpenLayers.LonLat(lonlat.lon, lonlat.lat));
DrawMarker();
DrawLine();
}
function RemoveLastPoint() {
points.pop();
DrawMarker();
DrawLine();
}
function DrawMarker() {
var newfeatures = [];
for(var index = 0; index < points.length; index++) {
newfeatures.push(new OpenLayers.Feature.Vector(new OpenLayers.Geometry.Point(points[index].lon,points[index].lat)));
}
layer1.removeFeatures(layer1.features);
layer1.addFeatures(newfeatures);
}
function DrawLine() {
var newfeatures = [];
var newpoints = [];
var style_green = {strokeColor: "#00FF00", strokeOpacity: 1, strokeWidth: 6};
for(var index = 0; index < points.length; index++) {
newpoints.push(new OpenLayers.Geometry.Point(points[index].lon,points[index].lat));
}
newfeatures.push(new OpenLayers.Feature.Vector(new OpenLayers.Geometry.LineString(newpoints),null,style_green));
layer2.removeFeatures(layer2.features);
layer2.addFeatures(newfeatures);
}
</script>
</head>
<body onload="init();">
<div id="basicMap" style="border: 1px solid #000000;"></div>
<button onclick="RemoveLastPoint()">remove Last Point</button>
</body>
</html>

Jetzt werde ich weiter basteln und es ermöglichen einzelne Punkte zu verschieben (Drag) oder per Klick zu löschen ... statt nur den letzten zu löschen

Hobby Navigator · 2011-03-03 09:31:44

Hallo crazyiven und herzlich willkommen im Forum.

Ich finde deine Überlegungen und Lösungen sehr interessant und denke viele andere, die selbst nicht die Profiprogrammierer sind, ebenfalls. Würde mich freuen wenn du uns auch weiterhin mit deinen Lösungen (und dem dazugehörigen Code) auf dem Laufenden hältst.
Georg

Announcement

#1 2011-03-02 10:23:56

Punkt aus Linestring entfernen und Linie neu zeichnen

#2 2011-03-03 09:23:26

Re: Punkt aus Linestring entfernen und Linie neu zeichnen

#3 2011-03-03 09:31:44

Re: Punkt aus Linestring entfernen und Linie neu zeichnen

Board footer