OpenLayers 3: disegna più linee / percorsi in base alle coordinate

Sto cercando di disegnare una linea (e) sulla base di dare coordinate (punto iniziale e finale).

Googled, ho trovato alcuni esempi, ma nessuno di loro sembra funzionare probabilmente perché sono per OL2, quindi questa è la mia ultima risorsa.

Le coordinate si trovano nella matrice degli indicatori

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

openlayers

— Malinois
fonte

Fornisci gli esempi che desideri applicare nella tua domanda. Desideri definire manualmente i punti iniziale e finale delle linee o disporre di alcune coordinate predefinite per la connessione?

— Gabor Farkas,

Per questo esempio, vorrei collegare i punti casuali memorizzati nell'array markres.

— Malinois,

La creazione di feature può essere un po 'complicata in OpenLayers 3. Non ci sono esempi ufficiali per i ol.source.Vectorlayer, la maggior parte di essi funziona con GeoJSON o altri formati di scambio di dati.

Sono riuscito a creare un violino funzionante .

Lasciami spiegare alcuni degli aspetti chiave del raggiungimento del tuo compito.

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

Il livello vettoriale prende una fonte vettoriale, questo è normale. La proprietà features della sorgente, tuttavia, accetta una serie di funzionalità, quindi se non si desidera aggiungerle con il addFeature()metodo, è necessario fornire una matrice con un elemento.

La geometryproprietà della funzione gestisce il tipo di funzione. In questo caso, hai solo bisogno di una sola riga, quindi il ol.geom.LineStringtipo è quello giusto. Per le classi multidimensionali (linee, poligoni), è necessario fornire una matrice di coordinate o matrici bidimensionali per multi-feature. La 'XY'proprietà è facoltativa, denominata layout. Con questa proprietà, è possibile definire se nell'array viene fornita una coordinata Z o misura (M). Anche la nameproprietà è facoltativa.

L'ultimo trucco è la trasformazione delle coordinate nella AddMarkers()funzione. Per creare linee appropriate, devi passare un array trasformato di coordinate markernell'array.

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

— Gabor Farkas
fonte

Grazie, funziona come un fascino. Inoltre, un grande ringraziamento per la spiegazione, ho analizzato la documentazione e fornito esempi ma non sono riuscito a capirlo. Saluti

— Malinois,