如何从 openlayers4 上的 polygon/point 的坐标获取像素

Question

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

我想从坐标中获取像素，因为我尝试了 point

在openlayers4上，我得到了预期的坐标值

output:7.129808 ,50.617804

但 map.getPixelFromCoordinate（坐标）；

console.log(pixel1);

由此我试图获取像素值，但我得到

output:null

可以建议我如何获取像素值吗？下面我提供了完整的代码

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

Answer 1

我认为原因是调用getPixelFromCoordinate时地图或视图没有完全初始化。

我在这里创建了一个按钮，它有一个调用您的代码的点击事件处理程序并且它有效：

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

Answer 2

等待地图渲染完成后再调用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

代码片段：

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>

Answer 3

这里我通过多边形的坐标将一张图片放在多边形的中心

HTML:

这是图像映射

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

此图像将按其坐标放置在多边形的中心

<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;">

这些是多边形的面积

<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;
}

如何从 openlayers4 上的 polygon/point 的坐标获取像素

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

javascript

point

openlayers

getpixel