Question

在“开放层地图”中，三个位置以三角形连接。我试图在OpenLayers和React JS的帮助下获得所有三个位置（纬度和经度）。但不幸的是，我能够获得可见视图的纬度和经度，而不是标记的层。

当我使用以下代码时，它没有获取预期的long和lat，而是导致可见的map long和lat。

var glbox = map.getView().calculateExtent(map.getSize()); 
var box = proj.transformExtent(glbox,'EPSG:3857','EPSG:4326'); 
console.log("Latitude and longitude :",box);

因此，我也尝试了以下选项，但这并不会导致预期的多头和空头。

console.log("Long and Lat :",map.getFeaturesAtPixel());  //--> null
console.log("Long and Lat :",map.getLayers());  
console.log("Long and Lat :",map.getFeaturesAtPixel());  //--> null

如何获取图像中显示的所有三个位置的纬度和经度？

Answer 1

它将永远无法以您当前的方式工作。我什么意思我的意思是，通过map.getFeaturesAtPixel是一种可行的方法，但是您没有阅读API docs。您至少需要为该功能提供像素（x，y屏幕坐标）。

您可以使用以下内容获取像素

map.on('click', evt => {
  console.log(evt.pixel);
})

我已经做了一个简单的演示来说明。转到http://openlayers.org/en/latest/examples/gpx.html，然后将以下代码粘贴到浏览器调试器控制台中。单击点，然后在控制台中观察行为。

map.on('click', evt => {
  var features = map.getFeaturesAtPixel(evt.pixel);
  if (features) {
    // Get name (but it depends of your data attributes)
    console.log(features
      .filter(feature => feature.getGeometry().getType() == 'Point')
      .map(feature => feature.get('name')));
    // Get the features, filter to only get Point, then get geometry
    // and coordinates, change projection to lon lat
    console.log(features
      .filter(feature => feature.getGeometry().getType() == 'Point')
      .map(feature => `Longitude, latitude: ${ol.proj.toLonLat(feature.getGeometry().getCoordinates()).join(', ')}`));
  }
})

根据反馈进行编辑。

要从LineString获取点，只需执行

var featuresLinestringPointsCoordinates = vector.getSource().getFeatures()
  .map(feature => {
    return feature
      .getGeometry()
      .clone()
      .transform('EPSG:3857','EPSG:4326')
     .getCoordinates();
});
console.log(featuresLinestringPointsCoordinates);
// More readable and we only get the first linestring
console.table(featuresLinestringPointsCoordinates[0])

在绘制LineString之后在the official snap demo上进行了测试

如何从ReactJS的OpenLayers Map中获取坐标？

1 个答案: