Openlayers Linestring with points and Name

Question

Is it possible to create a linestring with points on the cordinates mentioned, as well as name of that linestring.

for (var i = 0; i < wp.length; i++) {
            wp[i] = ol.proj.transform(wp[i], 'EPSG:4326', 'EPSG:3857');
            //console.log(wp);

        }
        var wpfeatureLine = new ol.Feature({
            geometry: new ol.geom.LineString(wp)
        });

        var wpline = new ol.source.Vector({

        });
        wpline.addFeature(wpfeatureLine); //lined or a waypoint feature on map
        //wpline.addFeature(CircleFeature);


        var vectorLineLayer = new ol.layer.Vector({
            source: wpline,
            style: new ol.style.Style({
                fill: new ol.style.Fill({ color: '#000000', weight: 4 }),
                stroke: new ol.style.Stroke({ color: '#000000', width: 2 })
            })
        });

        map.addLayer(vectorLineLayer);

Amir · Answer 1 · 2018-03-22T23:02:58.357

You can add a point feature for every line coordinate.

    //Test points
    wp=[[-121.876043, 37.357398],[-121.875808, 37.357439],
        [-121.875631,37.357293]];

    //You dont have to convert points to EPSG:3857 as our view is EPSG:4326
    //for (var i = 0; i < wp.length; i++) {
    //wp[i] = ol.proj.transform(wp[i], 'EPSG:4326', 'EPSG:3857');
    //console.log(wp);
    // }

var wpfeatureLine = new ol.Feature({
    geometry: new ol.geom.LineString(wp),
    name:'ABC Line'
});

var wpline = new ol.source.Vector({

});

//Add point feature for every coordinate
for (var i = 0; i < wp.length; i++) {
    //wp[i] = ol.proj.transform(wp[i], 'EPSG:4326', 'EPSG:3857');

    var pointFeature = new ol.Feature({
            geometry: new ol.geom.Point(wp[i]),
            name: 'XYZ'
            });

    wpline.addFeature(pointFeature);
}
//wpfeatureLine.setStyle(); You can add your custom style definition here.

wpline.addFeature(wpfeatureLine); //lined or a way point feature on map



var vectorLineLayer = new ol.layer.Vector({
    source: wpline,
//Remove any style, Default style will be used
});

 var map = new ol.Map({
     layers : [raster,vectorLineLayer],
     target: document.getElementById('map'),
     view: new ol.View({
       center: [-121.876043, 37.357398],
       projection: projection,
       zoom: 20,
    })
});

Hey Amir, Thanks for the reply. But i am afraid this is not showing anylinestring or a point on map. — ash, Mar 21 '18 at 09:12
As you are using EPSG:4326 projection you don't have to convert the points to EPSG:3857 . I have edited the answer You should be able to see the line with points now. Also you can call the setStyle() with custom function to add line name and color of your choice. — Amir, Mar 22 '18 at 23:00

Openlayers Linestring with points and Name

1 Answers1