【问题标题】:OL3: GetFeature from Layers by CoordinateOL3:按坐标从图层中获取特征
【发布时间】:2025-12-12 03:40:01
【问题描述】:

我想通过坐标获取图层的特征。 此外,我想在弹出窗口中打开此功能,到目前为止我已经通过 onclick 事件解决了这个问题。但我想通过给出一个特征的坐标并打开该特征的弹出窗口来实现。

我有一个带有地图的图层和一个带有特征的图层:

if (trackMap != null) {
  for (var i = 0; i < trackMap.length; i++) {
    var trackInfo = trackMap[i];
    lat = parseFloat(trackInfo.lat);
    lon = parseFloat(trackInfo.lon);

    var layergpx = new ol.layer.Vector({
      source: new ol.source.Vector({
        parser: new ol.parser.GPX(),
        url: '${contextRoot}/gps/gpx2' + trackInfo.url
      })
    });
    layers.push(layergpx);
  }
}

我想在另一个 Javascript 函数中获取这一层的特性。

如何通过点击地图打开弹出窗口:

/**
 * The Click Event to show the data
 */
var element = document.getElementById('popup');
var popup = new ol.Overlay({
      element: element,
      positioning: ol.OverlayPositioning.BOTTOM_CENTER,
      stopEvent: false
});
map.addOverlay(popup);

map.on('singleclick', function(evt) {
  map.getFeatures({
    pixel: evt.getPixel(),
    layers: vectorLayers,
    success: function(layerFeatures) {
      var feature = layerFeatures[0][0];
      if (feature) {
        var geometry = feature.getGeometry();
        var coord = geometry.getCoordinates();
        popup.setPosition(coord);
        $(element).popover({
          'placement': 'top',
          'html': true,
          'content': feature.get('desc')
        });
        $(element).popover('show');
      } else {
        $(element).popover('destroy');
      }
    }
  });
});

但我不希望通过在地图上单击来打开此功能,而是通过在文本字段中输入坐标,然后地图会打开此弹出窗口,就像在 onclick 事件中一样。

【问题讨论】:

  • 从什么理解你想从这个layergpx层得到一个特征,对吧?为什么,你不想从选择的回调函数中创建弹出窗口?您可以使用任何 JS 函数作为回调。

标签: javascript openlayers-3


【解决方案1】:

看看这个例子,看看它是否对你有帮助: http://openlayers.org/en/latest/examples/kml.html

var displayFeatureInfo = function(pixel) {
  map.getFeatures({
    pixel: pixel,
    layers: [vector],
    success: function(featuresByLayer) {
      var features = featuresByLayer[0];
      var info = [];
      for (var i = 0, ii = features.length; i < ii; ++i) {
        info.push(features[i].get('name'));
      }
      document.getElementById('info').innerHTML = info.join(', ') || '&nbsp';
    }
  });

map.getFeatures() 有这个成功回调,它提供层中指定的层的特征:[vector]。随意定制它以获得您需要的东西。

=== 更新 ===

在 OpenLayers 3 的 Map 对象中有一个函数:getPixelFromCoordinate

/**
 * @param {ol.Coordinate} coordinate Coordinate.
 * @return {ol.Pixel} Pixel.
 */
ol.Map.prototype.getPixelFromCoordinate = function(coordinate) {
  var frameState = this.frameState_;
  if (goog.isNull(frameState)) {
    return null;
  } else {
    var vec2 = coordinate.slice(0, 2);
    return ol.vec.Mat4.multVec2(frameState.coordinateToPixelMatrix, vec2, vec2);
  }
};

【讨论】:

  • 我想,我已经实现了您的建议,只是没有发布。对此感到抱歉。问题是,我不知道特征的像素,但我知道特征的坐标。我想打开弹出窗口,就像 onclick 事件一样,但是通过输入坐标。
  • 您可以添加一个矢量图层,在其中添加一个特征(点),然后获取该点的像素(特征)。
  • 看我的更新,你可以放弃我之前的评论。只需传入坐标,就可以得到 Pixel。
  • 我该如何调用这个函数呢?我试过:ol.Map.prototype.getPixelFormCoordinate(ol.proj.transform([doubleLon, doubleLat], 'EPSG:4326', 'EPSG:3857'))map.getPixelFormCoordinate(ol.proj.transform([doubleLon, doubleLat], 'EPSG:4326', 'EPSG:3857')) 但我有点卡住或困惑? :-/
  • 只在地图对象中使用。 myMap = new ol.Map(...);像素=myMap.getPixelFormCoordinate(ol.proj....)