CODEWITHSUNDEEP
javascriptopenlayersgeospatial
akiortagem
akiortagem

Reputation: 135

Open Layers 3 - How to prevent LineString from drawing from starting coordinate again?

I'm trying to draw a LineString geometry by clicking several points Feature on the map. The idea is to create a continuous line from a starting point to the next point and so on.

First, I load possible coordinates to that can be clicked to make the lines by loading a geoJSON file like this :

//define a geoJSON file as a source of features
geoJsonVectorSource = new ol.source.Vector({
    url: 'geojson-file',
    format: new ol.format.GeoJSON({
        defaultDataProjection: 'EPSG:4326',
        projection: 'EPSG:3857'
    })
});

The source is then loaded into a layer with a style, standard stuff.

Now, since the line works like routes of some sort, it has departure point and destination, so the script has to read both points from the geojson source, and then the clicking can start.

fixesLayer.getSource().on('change', function (evt) {
    var fixesSource = evt.target;
    if (fixesSource.getState() === 'ready') {
        map.on('singleclick', function (evt) {
            var feature = map.forEachFeatureAtPixel(evt.pixel,

            function (feature, layer) {
                return feature;
            });
            if (feature) {
                // alert('from inside');
                tempCoordinates = getRoutesCoordinates(coordinates, fixesSource, feature.getGeometry().getCoordinates());
                for (var i = tempCoordinates.length - 1; i >= 0; i--) {
                    coordinates.push(tempCoordinates[i]);
                };
                console.log('coordinates is ' + coordinates);
                console.log('coordinate length is ' + coordinates.length);
                lineSource = getLineSource(coordinates);
                routeLayer.setSource(lineSource);
            }
        });
    }
});

fixesSource is esentially the geoJsonVectorSource. getRouteCoordinates function works to populate the coordinate array which is used in creating a new LineString. getLineSource function works to create a new source with an updated line. When the source is ready, I update the routeLayer (which contains the LineString feature) with the new source. This way everytime I click a designated point in map, a line will draw between them, kinda like this:

Line Routing

[EDIT: above picture was actually two separate lines from Jakarta on top of each other.]

I designated the departure point to be the one in Jakarta, so when I click points other than that one the map will draw a line from Jakarta point to the clicked one.

But for some reason, for several groups of coordinates, the LineString restart the drawing from Jakarta again rather than from the last point I clicked. Kinda like this :

Weird Line

Is there any way to prevent this? I'm using Open Layer 3.11.1 at the moment. If you need to look at the code, here's a fiddle

Update 20/11/2015 : I've tried creating new layer each time a point is clicked to draw line, instead of setting a new source for the same layer. So instead of using

routeLayer.setSource(newSource)

I use

map.addLayer(initRouteLayer(newSource))

It still doesn't work and still does the same thing

Update 11/12/2015 : I've just got back to this problem again and I just found out that the problem happens when I clicked a point for the second time, every time. So the first picture I posted there was actually two separate lines from Jakarta, on top of each other so it appears as one line.

Upvotes: 0

Views: 922

Answers (1)

akiortagem
akiortagem

Reputation: 135

So it turns out there's a reversed for loop in my code that lists the coordinate in a wrong way, that's why the line went back to Jakarta. The problem is because I use Sublime Text 2 and the code completion for javascript for loop suggested :

for(var i = Things.length; i <= 0; i--){
    //block of code
};

instead of the one that used to. Like so :

for(var i = 0; i < Things.length; i++){
    //block of code
};

So it screws up the rest of my code. I guess I have to be more careful.

Anyway, if anyone ever have the same problem, I hope this helps. Also here's the fixed fiddle

Upvotes: 0

Related Questions