5

レイヤーの特徴を座標で取得したい。さらに、これまで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 イベントのようにこのポップアップを開きます。

4

1 に答える 1