10

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/

2
  • Please provide the examples, you would like to apply in your application. Would you like to define the start and end points of the lines manually or have some predefined coordinates to connect? Oct 30, 2014 at 9:27
  • For this example i would like to connect the random points that are stored in the markres array.
    – Malinois
    Oct 30, 2014 at 9:28

1 Answer 1

14

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');
2
  • 1
    Thank you , this works like a charm. Also, a big thanks for the explanation, i went trough the documentation and given examples but could not figure out this. Cheers
    – Malinois
    Oct 30, 2014 at 11:26
  • js fiddle jsfiddle.net/GFarkas/tr8691ev/1 not working can you fix this please
    – Yusuf Khan
    Mar 27, 2021 at 14:07

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.