OpenLayers 3 - намалюйте кілька ліній / контурів на основі координат

Я намагаюся намалювати лінію (и) на основі координат дати (початкова і кінцева точка).

Google, знайшов мало прикладів, але не з них, здається, працює, ймовірно, тому, що вони є для OL2, тому це моя остання інстанція.

Координати розташовані в масиві маркерів

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

Посилання на скрипку:

http://jsfiddle.net/tr8691ev/

openlayers

— Малінойс
джерело

Надайте приклади, які ви хочете застосувати у своїй заяві. Чи хотіли б ви визначити початкову та кінцеву точки рядків вручну або мати деякі попередньо визначені координати для підключення?

— Габор Фаркас

У цьому прикладі я хотів би з'єднати випадкові точки, які зберігаються в масиві markres.

— Малінойс

Створення функцій може бути дуже складним у OpenLayers 3. Офіційних прикладів ol.source.Vectorшарів немає. Більшість з них працює з GeoJSON або іншим форматом обміну даними.

Мені вдалося створити робочу загадку .

Дозвольте мені пояснити деякі ключові аспекти досягнення вашого завдання.

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

Векторний шар бере векторне джерело, що зазвичай. Властивість функцій джерела, однак, має масив функцій, тому якщо ви не хочете додавати їх addFeature()методом, ви повинні надати масив з одним елементом.

geometryВластивість функції обробляє тип об'єкта. У цьому випадку вам потрібен лише один єдиний рядок, тому ol.geom.LineStringтип є правильним. Для багатовимірних класів (ліній, багатокутників) ви повинні надати масив координат або двовимірні масиви для багатофункціональних функцій. 'XY'Властивість є необов'язковим один, званий макет. За допомогою цього властивості ви можете визначити, чи є в масиві координата Z або міра (M). nameВластивість є необов'язковим, теж.

Останній трюк - перетворення координат у AddMarkers()функції. Щоб створити правильні лінії, вам потрібно передати перетворений масив координат у markerмасиві.

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

— Габор Фаркас
джерело

Дякую, це працює як шарм. Крім того, велике спасибі за пояснення, я переглянув документацію та наводив приклади, але не міг цього зрозуміти. Ура

— Малінойс