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

— Malinois
แหล่งที่มา

โปรดระบุตัวอย่างคุณต้องการสมัครในใบสมัครของคุณ คุณต้องการกำหนดจุดเริ่มต้นและจุดสิ้นสุดของบรรทัดด้วยตนเองหรือมีพิกัดที่กำหนดไว้ล่วงหน้าเพื่อเชื่อมต่อหรือไม่

— 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'
        })]
    })
});

เลเยอร์เวกเตอร์ใช้แหล่งที่มาของเวกเตอร์ซึ่งเป็นเรื่องปกติ คุณสมบัติคุณสมบัติของแหล่งที่มา แต่ใช้อาร์เรย์ของคุณสมบัติดังนั้นหากคุณไม่ต้องการที่จะเพิ่มพวกเขาด้วยaddFeature()วิธีการที่คุณจะต้องให้อาร์เรย์ที่มีองค์ประกอบหนึ่ง

geometryทรัพย์สินของคุณลักษณะที่จับประเภทของคุณลักษณะ ในกรณีนี้คุณต้องการเพียงหนึ่งบรรทัดเท่านั้นดังนั้นol.geom.LineStringประเภทจึงเป็นประเภทที่เหมาะสม สำหรับคลาสหลายมิติ (เส้น, รูปหลายเหลี่ยม) คุณจะต้องระบุอาเรย์ของพิกัดหรืออาร์เรย์สองมิติสำหรับคุณสมบัติหลายอย่าง 'XY'คุณสมบัติเป็นตัวเลือกหนึ่งที่เรียกว่ารูปแบบ ด้วยคุณสมบัตินี้คุณสามารถกำหนดว่าพิกัด Z หรือการวัด (M) ให้ไว้ในอาร์เรย์หรือไม่ nameคุณสมบัติเป็นตัวเลือกมากเกินไป

เคล็ดลับสุดท้ายคือการแปลงพิกัดในAddMarkers()ฟังก์ชั่น ในการสร้างเส้นที่เหมาะสมคุณจะต้องผ่านอาร์เรย์ที่แปลงค่าพิกัดในmarkerอาร์เรย์

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

— Gabor Farkas
แหล่งที่มา

ขอบคุณมันใช้งานได้เหมือนมีเสน่ห์ นอกจากนี้ขอขอบคุณอย่างยิ่งสำหรับคำอธิบายที่ฉันได้รับเอกสารและตัวอย่าง แต่ไม่สามารถเข้าใจได้ ไชโย

— Malinois