stackoom
  简体   繁体   中英

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

 原文  2018-06-14 15:04:19  6   3    javascript/ openlayers/ point/ getpixel

Question

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>

3 answers

solution1
 2 ACCPTED  2018-06-16 18:07:34

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>

solution2
 0  2018-06-15 17:07:28

I think the reason is that the map or view is not fully initialized when you call getPixelFromCoordinate .

Here I have created a button that has a click eventhandler that calls your code and it works: 

  <!doctype html>
<head>
<title> Hello OpenStreetMap </title>
</head>
    <link rel="stylesheet" href="https://openlayers.org/en/v4.6.5/css/ol.css" type="text/css">
    <style>
      .map {
        height: 100%;
        width: 100%;
      }
    </style>
<body>
<div id="map" class="map"></div>
 <script src="https://openlayers.org/en/v4.6.5/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]
});
map.setView(view);

var geometry = polyFeature.getGeometry();
var coordinate = geometry.getCoordinates();

// Click event handler for our button.
function test() {
    var element = document.getElementById("log");
    var pixel1 = map.getPixelFromCoordinate(coordinate);
    element.innerText = pixel1;
}

</script>
<!-- This button activates the test function. -->
<button onclick="test()">Click to get pixels.</button>
<!-- This div will contain the pixels. -->
<div id="log"></div>
</body>
</html>

solution3
 0  2022-01-17 09:44:45

Here I'm placing one image to center of polygon by polygon's coordinates

HTML:

this is image map

<img src="/templates/floorplan/cw/picture2.png" usemap="#image-map" class="map" id="beatles">

this image will place to center of polygon by its coordinates

<img src="/templates/floorplan/cw/location.png" class="location" id="locationimg1" style="height:50px;width:50px;" >
<img src="/templates/floorplan/cw/location.png" class="location" id="locationimg2" style="height:50px;width:50px;">

these are area of polygon

<area id="3id" class="areaId" alt="Air Conditioning" title="Air Conditioning" href="#" coords="64,309,364,403,69,510,363,404,65,512,63,417,65,309" shape="poly">
<area id="4id" class="areaId" alt="Collaboration Point 1" title="Collaboration Point 1" href="#" coords="282,67,63,80,68,282,343,106" shape="poly" >
<area id="5id" class="areaId" alt="Collaboration point 2" title="Collaboration point 2" href="#" coords="357,66,518,63,355,222" shape="poly" >
<area id="6id" class="areaId" alt="Contact Center" title="Contact Center" href="#" coords="520,251,564,357,594,410,729,408,776,372,759,269,670,139" shape="poly">
 <area id="7id" class="areaId" alt="Collaboration Point 4" title="Collaboration Point 4" href="#" coords="710,107,874,114,810,350,768,255,730,181,649,70,649,70,650,70" shape="poly" >

JAVASCRIPT: 

  function generatepixelfromcoords(id) {
    console.log('generatepixelfromcoords');
    var i, x = [], y = [];
    var c = document.getElementById(id).getAttribute('coords').split(',');
  
    for (i = 0; i < c.length; i++) {
        x.push(c[i++]);
        y.push(c[i]);
    }


    var t = medianofArr(y);
    var l = medianofArr(x);

    let letter = id.charAt(0);

    document.getElementById('locationimg' + letter).style.left = l + "px";
    document.getElementById('locationimg' + letter).style.top = t + "px";
    document.getElementById('locationimg' + letter).style.display = 'block';

}
  function medianofArr(arr1) {
    var concat = arr1;
    concat = concat.sort(
        function (a, b) { return a - b });

    console.log(concat);
    var length = concat.length;

  
        var total = 0;
        var avg = 0;
        for (var i = 0; i < concat.length; i++) {
            var total = total + parseInt(concat[i]);
          
        }
        avg = total / length;
        return avg;
}

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question How to get the geojson parameter in the openlayers4? How to get polygon's point after drawin a polygon using OpenLayers 3? OpenLayers 2 - How to get coordinates for selected feature (point) Openlayers - coordinates from pixel incorrect OpenLayers4: Point is located in different location on map How to get the coordinates of a dynamically drawn polygon in OpenLayers. How can I get the point coordinates from a vector layer in openlayers3? How to convert OpenLayers polygon coordinates into latitude and longitude? How to return/get coordinates from my Polygon? Get the pixel from coordinates
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM