OpenLayers 3 - desenhe várias linhas / caminhos com base em coordenadas

Eu estou tentando desenhar uma linha (s) com base em coordenadas (ponto inicial e final).

Pesquisei no Google, encontrei alguns exemplos, mas nenhum deles parece funcionar provavelmente porque é para OL2, então esse é meu último recurso.

As coordenadas estão localizadas na matriz de marcadores

<!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>

Link do violino:

http://jsfiddle.net/tr8691ev/

openlayers

— Malinois
fonte

Forneça os exemplos que você gostaria de aplicar em sua inscrição. Deseja definir manualmente os pontos inicial e final das linhas ou tem algumas coordenadas predefinidas para conectar?

— Gabor Farkas

Neste exemplo, eu gostaria de conectar os pontos aleatórios armazenados na matriz markres.

— Malinois

A criação de recursos pode ser meio complicada no OpenLayers 3. Não há exemplos oficiais para ol.source.Vectorcamadas, a maioria deles está trabalhando com GeoJSON ou algum outro formato de troca de dados.

Eu consegui criar um violino de trabalho .

Deixe-me explicar alguns dos principais aspectos da realização de sua tarefa.

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

A camada vetorial pega uma fonte vetorial, isso é normal. A propriedade features da fonte, no entanto, possui uma variedade de recursos; portanto, se você não quiser adicioná-los ao addFeature()método, precisará fornecer uma matriz com um elemento.

A geometrypropriedade do recurso lida com o tipo do recurso. Nesse caso, você só precisa de uma única linha, portanto o ol.geom.LineStringtipo é o correto. Para classes multidimensionais (linhas, polígonos), é necessário fornecer uma matriz de coordenadas ou matrizes bidimensionais para multi-recursos. A 'XY'propriedade é opcional, chamada de layout. Com essa propriedade, você pode definir se uma coordenada Z ou uma medida (M) é fornecida na matriz. A namepropriedade também é opcional.

O último truque é a transformação de coordenadas na AddMarkers()função. Para criar linhas adequadas, você deve passar uma matriz transformada de coordenadas na markermatriz.

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

— Gabor Farkas
fonte

Obrigado, isso funciona como um encanto. Além disso, muito obrigado pela explicação, consultei a documentação e dei exemplos, mas não consegui descobrir isso. Cheers

— Malinois