Question

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

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

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

输出：7.129808,50.617804

但是map.getPixelFromCoordinate（坐标）;

的console.log（PIXEL1）;

从此我想要获得像素值，但我正在

输出：空

可以建议我如何获得像素值吗？下面我提供整个代码

<!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之前等待地图呈现：

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 2

我认为原因是当您致电getPixelFromCoordinate时地图或视图未完全初始化。

这里我创建了一个按钮，它有一个click事件处理程序，可以调用你的代码并且它可以工作：

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

如何从openlayers4上的多边形/点的坐标获取像素

2 个答案: