OpenLayers 3-基于坐标绘制多条线/路径

我试图根据给定坐标（起点和终点）绘制一条线。

Googled，发现了很少的示例，但似乎都不起作用，可能是因为它们适用于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

— 玛利诺犬
source

请提供示例，您想在您的应用程序中申请。您要手动定义线的起点和终点还是要连接一些预定义的坐标？

— Gabor Farkas 2014年

对于此示例，我想连接存储在markres数组中的随机点。

— 2014年

在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');

— 加博尔·法卡斯（Gabor Farkas）
source

谢谢，这很吸引人。另外，非常感谢您的解释，我仔细阅读了文档并给出了示例，但无法弄清楚。干杯

— Malinois 2014年