ওপেন লেয়ারস 3 - স্থানাঙ্কের ভিত্তিতে একাধিক লাইন / পাথ আঁকুন


10

আমি প্রদত্ত স্থানাঙ্কের ভিত্তিতে একটি লাইন (গুলি) আঁকতে চেষ্টা করছি (শুরু এবং শেষের পয়েন্ট)।

গুগলড, কয়েকটি উদাহরণ পাওয়া গেছে তবে এগুলির মধ্যে সম্ভবত এটি ওএল 2 এর জন্য কাজ করে বলে মনে হচ্ছে না, সুতরাং এটি আমার শেষ অবলম্বন।

স্থানাঙ্কগুলি চিহ্নিতকারী অ্যারেতে অবস্থিত

<!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/


দয়া করে উদাহরণগুলি সরবরাহ করুন, আপনি আপনার অ্যাপ্লিকেশনটিতে প্রয়োগ করতে চান। আপনি নিজেই লাইনগুলির শুরু এবং শেষ পয়েন্টগুলি সংজ্ঞায়িত করতে চান বা সংযোগের জন্য কিছু পূর্বনির্ধারিত স্থানাঙ্ক রাখতে চান?
গ্যাবর ফারকাস

এই উদাহরণের জন্য আমি এলোমেলো পয়েন্টগুলি চিহ্নিত করতে চাই যা মার্ক্রেস অ্যারেতে সঞ্চিত রয়েছে।
ম্যালিনয়েস

উত্তর:


14

বৈশিষ্ট্য তৈরি ওপেনলায়ার্সে এক ধরণের জটিল হতে পারে la. 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');

1
আপনাকে ধন্যবাদ, এটি একটি কবজির মতো কাজ করে। এছাড়াও, ব্যাখ্যার জন্য একটি বড় ধন্যবাদ, আমি ডকুমেন্টেশনটি ট্রাটে গিয়েছিলাম এবং উদাহরণ দিয়েছি তবে এটি বের করতে পারিনি। চিয়ার্স
ম্যালিনোইস
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.