OpenLayers 3 - koordinatlara göre birden çok çizgi / yol çizme

Ben vermek koordinatları (başlangıç ve bitiş noktası) dayalı bir çizgi (ler) çizmek çalışıyorum.

Googled, birkaç örnek buldu ancak OL2 için oldukları için muhtemelen çalışmıyor gibi görünüyor, bu yüzden bu benim son çare.

Koordinatlar işaretler dizisinde bulunur

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

Keman linki:

http://jsfiddle.net/tr8691ev/

openlayers

— Malinois
kaynak

Lütfen başvurunuzda uygulamak istediğiniz örnekleri veriniz. Hatların başlangıç ve bitiş noktalarını manuel olarak tanımlamak veya bağlanmak için önceden tanımlanmış bazı koordinatlara sahip olmak ister misiniz?

— Gabor Farkas

Bu örnek için markres dizisinde saklanan rastgele noktaları bağlamak istiyorum.

— Malinois

Özellik oluşturma OpenLayers 3'te biraz zor olabilir. ol.source.VectorKatmanlar için resmi bir örnek yok , çoğu GeoJSON veya başka bir veri alışverişi formatıyla çalışıyor.

Çalışan bir keman yaratmayı başardım .

Görevinizi gerçekleştirmenin bazı kilit yönlerini açıklayayım.

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

Vektör katmanı, normal olan bir vektör kaynağı alır. Kaynağın features özelliği, bir dizi özelliği alır, bu nedenle bunları addFeature()yöntemle eklemek istemiyorsanız , bir öğeye sahip bir dizi sağlamanız gerekir.

Özelliğin geometryözelliği, özelliğin türünü işler. Bu durumda, yalnızca tek bir satıra ihtiyacınız vardır, bu nedenle ol.geom.LineStringtür uygun olanıdır. Çok boyutlu sınıflar (çizgiler, çokgenler) için, çoklu özellikler için bir dizi koordinat veya iki boyutlu diziler sağlamanız gerekir. 'XY'Mülkiyet düzeni adlı isteğe bağlı biridir. Bu özellik ile, dizide bir Z veya bir hesaplama (M) koordinatının sağlanıp sağlanmadığını tanımlayabilirsiniz. nameMülkiyet de isteğe bağlıdır.

Son hile AddMarkers()fonksiyondaki koordinat dönüşümüdür . Doğru çizgiler oluşturmak için dizide dönüştürülmüş bir koordinat markerdizisi iletmeniz gerekir.

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

— Gabor Farkas
kaynak

Teşekkür ederim, bu bir cazibe gibi çalışıyor. Ayrıca, açıklama için büyük bir teşekkür, ben belgeleri yalak gitti ve örnekler verdi ama bu anlayamadık. Şerefe

— Malinois