OpenLayers 3 - vẽ nhiều đường / đường dẫn dựa trên tọa độ

Tôi đang cố gắng vẽ một dòng dựa trên tọa độ cho (điểm bắt đầu và điểm kết thúc).

Googled, tìm thấy một vài ví dụ nhưng không phải trong số chúng dường như hoạt động có lẽ vì chúng dành cho OL2, vì vậy đây là phương án cuối cùng của tôi.

Các tọa độ được đặt trong mảng đánh dấu

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

Liên kết Fiddle:

http://jsfiddle.net/tr8691ev/

openlayers

— Malinois
nguồn

Vui lòng cung cấp các ví dụ, bạn muốn áp dụng trong ứng dụng của bạn. Bạn có muốn xác định điểm bắt đầu và điểm kết thúc của các dòng theo cách thủ công hoặc có một số tọa độ được xác định trước để kết nối không?

— Gabor Farkas

Trong ví dụ này tôi muốn kết nối các điểm ngẫu nhiên được lưu trữ trong mảng markres.

— Malinois

Tạo tính năng có thể khó khăn trong OpenLayers 3. Không có bất kỳ ví dụ chính thức nào cho ol.source.Vectorcác lớp, hầu hết chúng đều hoạt động với GeoJSON hoặc một số định dạng trao đổi dữ liệu khác.

Tôi đã quản lý để tạo ra một fiddle làm việc .

Hãy để tôi giải thích một số khía cạnh quan trọng để đạt được nhiệm vụ của bạn.

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

Lớp vector lấy một nguồn vector, đó là bình thường. Tuy nhiên, thuộc tính tính năng của nguồn có một mảng các tính năng, vì vậy nếu bạn không muốn thêm chúng với addFeature()phương thức, bạn phải cung cấp một mảng với một phần tử.

Các geometrytài sản của tính năng xử lý các loại đối tượng. Trong trường hợp này, bạn chỉ cần một dòng duy nhất, vì vậy ol.geom.LineStringloại là dòng thích hợp. Đối với các lớp đa chiều (đường, đa giác), bạn phải cung cấp một mảng tọa độ hoặc mảng hai chiều cho đa tính năng. Tài 'XY'sản là một tùy chọn, được gọi là bố trí. Với thuộc tính này, bạn có thể xác định nếu tọa độ Z hoặc số đo (M) được cung cấp trong mảng. Các nametài sản là tùy chọn, quá.

Thủ thuật cuối cùng là chuyển đổi tọa độ trong AddMarkers()hàm. Để tạo các dòng thích hợp, bạn phải truyền một mảng tọa độ được chuyển đổi trong markermảng.

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

— Gabor Farkas
nguồn

Cảm ơn bạn, điều này làm việc như một nét duyên dáng. Ngoài ra, một lời cảm ơn lớn cho lời giải thích, tôi đã đi qua tài liệu và đưa ra các ví dụ nhưng không thể tìm ra điều này. Chúc mừng

— Malinois