OpenLayers 3 - menggambar beberapa garis / jalur berdasarkan koordinat

Saya mencoba menggambar garis berdasarkan koordinat beri (titik awal dan akhir).

Googled, menemukan beberapa contoh tetapi bukan dari mereka yang tampaknya bekerja mungkin karena mereka untuk OL2, jadi ini adalah pilihan terakhir saya.

Koordinat terletak di larik penanda

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

Tautan biola:

http://jsfiddle.net/tr8691ev/

openlayers Malinois
sumber

Harap berikan contoh, Anda ingin mendaftar dalam aplikasi Anda. Apakah Anda ingin menentukan titik awal dan akhir garis secara manual atau memiliki beberapa koordinat yang telah ditentukan untuk dihubungkan?

Gabor Farkas

Untuk contoh ini saya ingin menghubungkan titik-titik acak yang disimpan dalam array markres.

Malinois

Jawaban:

Pembuatan fitur bisa agak rumit di OpenLayers 3. Tidak ada contoh resmi untuk ol.source.Vectorlapisan, kebanyakan dari mereka bekerja dengan GeoJSON, atau beberapa format pertukaran data lainnya.

Saya telah berhasil membuat biola yang berfungsi .

Izinkan saya menjelaskan beberapa aspek kunci untuk mencapai tugas Anda.

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

Lapisan vektor mengambil sumber vektor, itu biasa. Properti fitur-fitur dari sumber, tetapi membutuhkan array fitur, jadi jika Anda tidak ingin menambahkannya dengan addFeature()metode ini, Anda harus menyediakan array dengan satu elemen.

The geometryproperti fitur menangani jenis fitur. Dalam hal ini, Anda hanya perlu satu baris, jadi ol.geom.LineStringjenisnya adalah yang tepat. Untuk kelas multidimensi (garis, poligon), Anda harus menyediakan array koordinat, atau array dua dimensi untuk multi-fitur. The 'XY'properti adalah salah satu opsional, disebut tata letak. Dengan properti ini, Anda dapat menentukan apakah koordinat Z atau ukuran (M) disediakan dalam larik. The nameproperti adalah opsional, juga.

Trik terakhir adalah transformasi koordinat dalam AddMarkers()fungsi. Untuk membuat garis yang tepat, Anda harus melewati array koordinat yang diubah dalam markerarray.

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

Gabor Farkas
sumber

Terima kasih, ini berfungsi seperti pesona. Juga, terima kasih banyak atas penjelasannya, saya membaca dokumentasi dan memberikan contoh tetapi tidak bisa mengetahuinya. Cheers

Malinois