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
स्रोत

कृपया उदाहरण प्रदान करें, आप अपने आवेदन में आवेदन करना चाहते हैं। क्या आप लाइनों के प्रारंभ और अंत बिंदुओं को मैन्युअल रूप से परिभाषित करना चाहते हैं या कनेक्ट करने के लिए कुछ पूर्वनिर्धारित निर्देशांक हैं?

— गाबोर फार्कस

इस उदाहरण के लिए मैं उन यादृच्छिक बिंदुओं को कनेक्ट करना चाहूंगा जो मार्कस सरणी में संग्रहीत हैं।

— मलिनोइस

ओपनलाइयर्स 3. में फीचर क्रिएशन एक तरह से मुश्किल हो सकता है। ol.source.Vectorलेयर्स के लिए कोई आधिकारिक उदाहरण नहीं हैं , उनमें से ज्यादातर जियोसन या कुछ अन्य डेटा एक्सचेंज प्रारूप के साथ काम कर रहे हैं।

मैं एक वर्किंग फील बनाने में कामयाब रहा हूं ।

मुझे अपने कार्य को प्राप्त करने के कुछ प्रमुख पहलुओं की व्याख्या करें।

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'संपत्ति एक वैकल्पिक एक, लेआउट कहा जाता है। इस संपत्ति के साथ, आप यह परिभाषित कर सकते हैं कि सरणी में जेड या माप (एम) समन्वय प्रदान किया गया है या नहीं। nameसंपत्ति वैकल्पिक, भी है।

अंतिम चाल AddMarkers()समारोह में समन्वय परिवर्तन है । उचित लाइनें बनाने के लिए, आपको सरणी में निर्देशांक का एक परिवर्तित सरणी पास करना होगा marker।

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

— गैबर फरकस
स्रोत

धन्यवाद, यह एक आकर्षण की तरह काम करता है। इसके अलावा, स्पष्टीकरण के लिए एक बड़ा धन्यवाद, मैं दस्तावेज को गर्त में गया और उदाहरण दिया लेकिन यह पता नहीं लगा सका। चीयर्स

— Malinois