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

— マリノア
ソース

あなたのアプリケーションに適用したい例を提供してください。線の始点と終点を手動で定義しますか、それとも接続するための定義済みの座標をいくつか持っていますか？

— 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()メソッドを使用してそれらを追加したくない場合は、配列に1つの要素を指定する必要があります。

geometry機能のプロパティは、機能のタイプを処理します。この場合、必要なのは1行だけなので、ol.geom.LineStringタイプは適切です。多次元クラス（ライン、ポリゴン）の場合、座標の配列、または多機能の2次元配列を提供する必要があります。この'XY'プロパティは、レイアウトと呼ばれるオプションのプロパティです。このプロパティを使用すると、Z座標またはメジャー（M）座標が配列で提供されるかどうかを定義できます。nameプロパティには、あまりにも、任意です。

最後のトリックは、AddMarkers()関数の座標変換です。適切な線を作成するには、変換された座標の配列を配列で渡す必要がありますmarker。

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

— ガボール・ファルカス
ソース

ありがとう、これは魅力のように機能します。また、説明に感謝し、ドキュメンテーションと例を挙げましたが、これを理解できませんでした。乾杯

— マリノア2014年