OpenLayers 3 - narysuj wiele linii / ścieżek na podstawie współrzędnych

Próbuję narysować linię (linie) na podstawie podanych współrzędnych (punkt początkowy i końcowy).

Znalazłem kilka przykładów, ale żaden z nich nie działa prawdopodobnie dlatego, że są dla OL2, więc to moja ostatnia deska ratunku.

Współrzędne znajdują się w tablicy znaczników

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

http://jsfiddle.net/tr8691ev/

openlayers Malinois
źródło

Podaj przykłady, które chcesz zastosować w swojej aplikacji. Czy chcesz ręcznie zdefiniować punkt początkowy i końcowy linii, czy masz jakieś predefiniowane współrzędne do połączenia?

Gabor Farkas

W tym przykładzie chciałbym połączyć losowe punkty przechowywane w tablicy Markres.

Malinois

Odpowiedzi:

Tworzenie funkcji może być dość trudne w OpenLayers 3. Nie ma żadnych oficjalnych przykładów ol.source.Vectorwarstw, większość z nich pracuje z GeoJSON lub innym formatem wymiany danych.

Udało mi się stworzyć działające skrzypce .

Pozwól, że wyjaśnię kilka kluczowych aspektów realizacji twojego zadania.

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

Warstwa wektorowa pobiera źródło wektora, co jest normalne. Właściwość features źródła zawiera jednak szereg funkcji, więc jeśli nie chcesz ich dodawać za pomocą addFeature()metody, musisz dostarczyć tablicę z jednym elementem.

geometryWłasność funkcji obsługuje typ funkcji. W takim przypadku potrzebujesz tylko jednej linii, więc ol.geom.LineStringtyp jest właściwy. W przypadku klas wielowymiarowych (linie, wielokąty) musisz podać tablicę współrzędnych lub tablice dwuwymiarowe dla wielu obiektów. 'XY'Nieruchomość jest opcjonalny, zwany układ. Za pomocą tej właściwości można określić, czy w tablicy ma znajdować się współrzędna Z lub miara (M). Ta namewłaściwość jest również opcjonalna.

Ostatnią sztuczką jest transformacja współrzędnych w AddMarkers()funkcji. Aby utworzyć odpowiednie linie, musisz przekazać w tablicy przekształconą tablicę współrzędnych marker.

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

Gabor Farkas
źródło

Dziękuję, to działa jak urok. Wielkie dzięki za wyjaśnienie, przejrzałem dokumentację i podałem przykłady, ale nie mogłem tego zrozumieć. Na zdrowie

Malinois