How to get the Pixel from coordinates of a polygon/point on openlayers4

var geometry = Feature.getGeometry();
var coordinate = geometry.getCoordinates();
var pixel = map.getPixelFromCoordinate(coordinate);

i want to get the Pixel from coordinate,since i tried for point

on openlayers4,i got the coordinate values as expected

output:7.129808 ,50.617804

but map.getPixelFromCoordinate(coordinate);

console.log(pixel1);

From this i am trying to get the pixel value but i am getting

output:null

can any suggest me how to get the pixel value? below i am providing the entire code

<!doctype html>
<head>
<title> Hello OpenStreetMap </title>
</head>
    <link rel="stylesheet" href="https://openlayers.org/en/v4.4.1/css/ol.css" type="text/css">
    <style>
    body {
     height: 100%;
     width: 100%;
     margin: 0px;
     padding: 0px
     }
      .map {
        height: 100%;
        width: 100%;
      }
    </style>
<body>
<div id="map" class="map"></div>
<div id="log"></div>
 <script src="https://openlayers.org/en/v4.4.1/build/ol.js" type="text/javascript"></script>
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</script>
<script>

    var polyFeature = new ol.Feature({
        geometry: new ol.geom.Point([7.129808, 50.618671]),
        projection: 'EPSG:4326'
    }); 

    //Layers
    var vectorLayer = new ol.layer.Vector({
        source: new ol.source.Vector({
            features: [polyFeature]
        })
    });
    var osmLayer = new ol.layer.Tile({
    source: new ol.source.OSM()
    });

    // view
    //var centerPoint = ol.proj.transform([7.128499, 50.617803],'EPSG:4326','EPSG:3857');
    var view = new ol.View({
    projection: 'EPSG:4326',
    zoom: 18
    });
    view.setCenter([7.128499, 50.617803]);


    var map = new ol.Map({
    target: 'map',
    view:view,
    layers: [ osmLayer,vectorLayer]
    });

    var geometry = polyFeature.getGeometry();
    var coordinate = geometry.getCoordinates();
      var pixel1 = map.getPixelFromCoordinate(coordinate);
    map.setView(view);

    </script>
    </body>
    </html>

Solution 1:

Wait for the map to be rendered before calling getPixelFromCoordinate:

map.once('postrender', function(event) {
    var geometry = polyFeature.getGeometry();
    var coordinate = geometry.getCoordinates();
    var pixel1 = map.getPixelFromCoordinate(coordinate);

    var element = document.getElementById("log");
    element.innerText = pixel1;
});

proof of concept fiddle

code snippet:

var polyFeature = new ol.Feature({
  geometry: new ol.geom.Point([7.129808, 50.618671]),
  projection: 'EPSG:4326'
});

//Layers
var vectorLayer = new ol.layer.Vector({
  source: new ol.source.Vector({
    features: [polyFeature]
  })
});
var osmLayer = new ol.layer.Tile({
  source: new ol.source.OSM()
});

var view = new ol.View({
  projection: 'EPSG:4326',
  zoom: 18
});
view.setCenter([7.128499, 50.617803]);


var map = new ol.Map({
  target: 'map',
  view: view,
  layers: [osmLayer, vectorLayer]
});
map.once('postrender', function(event) {
  var geometry = polyFeature.getGeometry();
  var coordinate = geometry.getCoordinates();
  var pixel1 = map.getPixelFromCoordinate(coordinate);

  var element = document.getElementById("log");
  element.innerText = pixel1;
});
map.setView(view);

html,
body {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

.map {
  height: 90%;
  width: 100%;
}

<link rel="stylesheet" href="https://openlayers.org/en/v4.6.5/css/ol.css" type="text/css">
<script src="https://openlayers.org/en/v4.6.5/build/ol.js" type="text/javascript"></script>
<div id="map" class="map"></div>
<div id="log"></div>

How to get the Pixel from coordinates of a polygon/point on openlayers4

Solution 1:

Related

Recent Posts