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

— 말리 노이
소스

신청서에 적용하고자하는 예를 제공해주십시오. 선의 시작점과 끝점을 수동으로 정의하거나 미리 정의 된 좌표를 연결 하시겠습니까?

— Gabor Farkas

이 예제에서는 markres 배열에 저장된 임의의 점을 연결하고 싶습니다.

— Malinois

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유형이 올바른 것입니다. 다차원 클래스 (선, 다각형)의 경우 좌표 배열 또는 다 기능에 대한 2 차원 배열을 제공해야합니다. 이 'XY'속성은 레이아웃이라고하는 선택 사항입니다. 이 속성을 사용하면 배열에 Z 또는 측정 값 (M) 좌표가 제공되는지 여부를 정의 할 수 있습니다. 이 name속성도 선택 사항입니다.

마지막 트릭은 AddMarkers()함수 의 좌표 변환입니다 . 올바른 선을 만들려면 배열에 변환 된 좌표 배열을 전달해야합니다 marker.

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

— 가버 파 카스
소스

감사합니다, 이것은 매력처럼 작동합니다. 또한 설명에 큰 감사를 전하며 문서를 통해 예제를 보았지만 예제를 볼 수는 없었습니다. 건배

— Malinois