OpenLayers 3 - dessinez plusieurs lignes / chemins en fonction des coordonnées

J'essaie de tracer une ligne (s) basée sur donner des coordonnées (point de départ et d'arrivée).

Googlé, trouvé quelques exemples mais aucun d'entre eux ne semble fonctionner probablement parce qu'ils sont pour OL2, c'est donc mon dernier recours.

Les coordonnées sont situées dans le tableau des marqueurs

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

Lien violon:

http://jsfiddle.net/tr8691ev/

openlayers Malinois
la source

Veuillez fournir les exemples que vous souhaitez appliquer dans votre candidature. Souhaitez-vous définir manuellement les points de début et de fin des lignes ou avoir des coordonnées prédéfinies à connecter?

Gabor Farkas du

Pour cet exemple, je voudrais connecter les points aléatoires qui sont stockés dans le tableau markres.

Malinois

Réponses:

La création de fonctionnalités peut être assez délicate dans OpenLayers 3. Il n'y a pas d'exemples officiels pour les ol.source.Vectorcouches, la plupart d'entre elles fonctionnent avec GeoJSON ou un autre format d'échange de données.

J'ai réussi à créer un violon fonctionnel .

Permettez-moi d'expliquer certains des aspects clés de la réalisation de votre tâche.

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

La couche vectorielle prend une source vectorielle, ce qui est habituel. La propriété features de la source prend cependant un tableau de fonctionnalités, donc si vous ne voulez pas les ajouter avec la addFeature()méthode, vous devez fournir un tableau avec un élément.

La geometrypropriété de l'entité gère le type de l'entité. Dans ce cas, vous n'avez besoin que d'une seule ligne, donc le ol.geom.LineStringtype est le bon. Pour les classes multidimensionnelles (lignes, polygones), vous devez fournir un tableau de coordonnées ou des tableaux bidimensionnels pour les entités multiples. La 'XY'propriété est facultative, appelée mise en page. Avec cette propriété, vous pouvez définir si une coordonnée Z ou une mesure (M) est fournie dans le tableau. La namepropriété est également facultative.

La dernière astuce est la transformation des coordonnées dans la AddMarkers()fonction. Pour créer des lignes correctes, vous devez passer un tableau de coordonnées transformé dans le markertableau.

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

Gabor Farkas
la source

Merci, cela fonctionne comme un charme. Aussi, un grand merci pour l'explication, j'ai parcouru la documentation et donné des exemples mais je n'ai pas pu comprendre cela. Santé

Malinois