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

Я пытаюсь нарисовать линию (ы) на основе дать координаты (начальная и конечная точка).

Погуглил, нашел несколько примеров, но ни один из них, кажется, не работает, вероятно, потому что они для 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'
        })]
    })
});

Векторный слой берет векторный источник, что обычно. Однако свойство features источника принимает массив функций, поэтому, если вы не хотите добавлять их с помощью addFeature()метода, вы должны предоставить массив с одним элементом.

geometryСвойство функции обрабатывает тип объекта. В этом случае вам нужна только одна строка, поэтому ol.geom.LineStringтип является правильным. Для многомерных классов (линий, многоугольников) вы должны предоставить массив координат или двумерные массивы для многофункциональных объектов. 'XY'Свойство является необязательным один, называемый макет. С помощью этого свойства вы можете определить, предоставляется ли в массиве координата Z или меры (M). nameСвойство является необязательным, тоже.

Последний трюк - это преобразование координат в AddMarkers()функции. Чтобы создать правильные линии, вы должны передать преобразованный массив координат в markerмассиве.

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

— Габор Фаркас
источник

Спасибо, это работает как шарм. Кроме того, большое спасибо за объяснение, я просмотрел документацию и привел примеры, но не смог понять это. Приветствия

— Малинуа