[GIS] OpenLayers 3 – draw multiple lines/paths based on coordinates

openlayers

I am trying to draw a line(s) based on give coordinates (starting and ending point).

Googled , found few examples but non of them seem to work probably because they are for OL2, so this is my last resort.

The coordinates are located in markers array

<!doctype html>
<html lang="en">
<head>
    <link rel="stylesheet" href="css/ol.css" type="text/css">
    <style>
        .map {
            height: 100%;
            width: 100%;
        }
    </style>
    <script src="build/ol.js" type="text/javascript"></script>

</head>
<body>

<div id="map" class="map"></div>
<script type="text/javascript">


    // inicijalizacija mape
    var map = new ol.Map({
        target: 'map',
        layers: [
            new ol.layer.Tile({
                source: new ol.source.MapQuest({layer: 'osm'}) // Street mapa -> osm
            })
        ],
        // pozicioniranje mape
        view: new ol.View({
            center: ol.proj.transform([17.813988, 43.342019], 'EPSG:4326', 'EPSG:3857'), //koordinate -> obrnuto od google-a
            zoom: 3
        })
    });




    var vectorSource = new ol.source.Vector({
        //create empty vector
    });

    var markers = [];

    function AddMarkers() {
        //create a bunch of icons and add to source vector
        for (var i=0;i<50;i++){
            var x= Math.random()*360-180;
            var y= Math.random()*180-90;

            var iconFeature = new ol.Feature({
                geometry: new ol.geom.Point(ol.proj.transform([x,y], 'EPSG:4326',   'EPSG:3857')),
                name: 'Marker ' + i
            });
            markers[i]= [x,y];
            vectorSource.addFeature(iconFeature);
        }

        //create the style
        var iconStyle = new ol.style.Style({
            image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({
                anchor: [0.5, 46],
                anchorXUnits: 'fraction',
                anchorYUnits: 'pixels',
                opacity: 0.75,
                src: 'http://upload.wikimedia.org/wikipedia/commons/a/ab/Warning_icon.png'
            }))
        });



        //add the feature vector to the layer vector, and apply a style to whole layer
        var vectorLayer = new ol.layer.Vector({
            source: vectorSource,
            style: iconStyle
        });
        return vectorLayer;
    }

    var layerMarkers = AddMarkers();
    map.addLayer(layerMarkers);
    console.log(markers);



</script>
</body>
</html>

Fiddle link:

http://jsfiddle.net/tr8691ev/

Best Answer

Feature creation can be kind of tricky in OpenLayers 3. There aren't any official examples for ol.source.Vector layers, most of them are working with GeoJSON, or some other data exchange format.

I have managed to create a working fiddle.

Let me explain some of the key aspects of achieving your task.

var layerLines = new ol.layer.Vector({
    source: new ol.source.Vector({
        features: [new ol.Feature({
            geometry: new ol.geom.LineString(markers, 'XY'),
            name: 'Line'
        })]
    })
});

The vector layer takes a vector source, that is usual. The features property of the source, however takes an array of features, so if you don't want to add them with the addFeature() method, you have to provide an array with one element.

The geometry property of the feature handles the type of the feature. In this case, you only need one single line, so the ol.geom.LineString type is the proper one. For multidimensional classes (lines, polygons), you have to provide an array of coordinates, or two-dimensional arrays for multi-features. The 'XY' property is an optional one, called layout. With this property, you can define if a Z or a measure (M) coordinate is provided in the array. The name property is optional, too.

The last trick is the coordinate transformation in the AddMarkers() function. To create proper lines, you have to pass a transformed array of coordinates in the marker array.

markers[i]= ol.proj.transform([x,y], 'EPSG:4326',   'EPSG:3857');
Related Question