আমি প্রদত্ত স্থানাঙ্কের ভিত্তিতে একটি লাইন (গুলি) আঁকতে চেষ্টা করছি (শুরু এবং শেষের পয়েন্ট)।
গুগলড, কয়েকটি উদাহরণ পাওয়া গেছে তবে এগুলির মধ্যে সম্ভবত এটি ওএল 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>
ফিডাল লিঙ্ক: