OpenLayers 3 - Zeichnen Sie mehrere Linien / Pfade basierend auf Koordinaten

Ich versuche, eine Linie basierend auf den angegebenen Koordinaten (Start- und Endpunkt) zu zeichnen.

Googelte, fand nur wenige Beispiele, aber keines davon scheint zu funktionieren, wahrscheinlich weil sie für OL2 sind, also ist dies mein letzter Ausweg.

Die Koordinaten befinden sich im Markierungsarray

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

Geigenlink:

http://jsfiddle.net/tr8691ev/

openlayers Malinois
quelle

Bitte geben Sie die Beispiele an, die Sie in Ihrer Bewerbung anwenden möchten. Möchten Sie den Start- und Endpunkt der Linien manuell definieren oder einige vordefinierte Koordinaten zum Verbinden haben?

Gabor Farkas

In diesem Beispiel möchte ich die zufälligen Punkte verbinden, die im markres-Array gespeichert sind.

Malinois

Antworten:

Die Erstellung von Features kann in OpenLayers 3 etwas schwierig sein. Es gibt keine offiziellen Beispiele für ol.source.VectorLayer, die meisten arbeiten mit GeoJSON oder einem anderen Datenaustauschformat.

Ich habe es geschafft, eine funktionierende Geige zu schaffen .

Lassen Sie mich einige der wichtigsten Aspekte zur Erreichung Ihrer Aufgabe erläutern.

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

Die Vektorschicht nimmt eine übliche Vektorquelle auf. Die Features-Eigenschaft der Quelle verwendet jedoch ein Array von Features. Wenn Sie sie also nicht mit der addFeature()Methode hinzufügen möchten , müssen Sie ein Array mit einem Element bereitstellen.

Die geometryEigenschaft des Features behandelt den Typ des Features. In diesem Fall benötigen Sie nur eine einzige Zeile, sodass der ol.geom.LineStringTyp der richtige ist. Für mehrdimensionale Klassen (Linien, Polygone) müssen Sie ein Koordinatenarray oder zweidimensionale Arrays für mehrere Features bereitstellen. Die 'XY'Eigenschaft ist optional und wird als Layout bezeichnet. Mit dieser Eigenschaft können Sie definieren, ob das Array eine Z- oder eine Maßkoordinate (M) enthält. Die nameEigenschaft ist auch optional.

Der letzte Trick ist die Koordinatentransformation in der AddMarkers()Funktion. Um richtige Linien zu erstellen, müssen Sie ein transformiertes Array von Koordinaten im markerArray übergeben.

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

Gabor Farkas
quelle

Danke, das funktioniert wie ein Zauber. Ein großes Dankeschön für die Erklärung, ich ging die Dokumentation durch und gab Beispiele, konnte dies aber nicht herausfinden. Prost

Malinois