openlayers 3のマップで動的に複数のポップアップを表示する方法

Question

誰でもopenlayers 3マップのすべてのマーカーのポップアップを表示する方法を教えてもらえますか？私は、多くのサイトを検索するが、任意の答えを得ることができなかった、誰もがこのことを知ってください。そして、私の

var map = new ol.Map({ 
    layers: [ 
    new ol.layer.Tile({ 
     source: new ol.source.TileJSON({ 
     url: 'https://api.tiles.mapbox.com/v3/mapbox.geography-class.json?secure', 
     crossOrigin: 'anonymous' 
     }) 
    }) 
    ], 
    overlays: [overlay], 
    target: 'map', 
    view: new ol.View({ 
    center: ol.proj.fromLonLat([0, 50]), 
    zoom: 2 
    }) 
}); 

var vectorSource = new ol.source.Vector({ 
    features: [ 
       new ol.Feature({ 
       geometry: new ol.geom.Point(ol.proj.fromLonLat([16.37, 48.2])), 
       name: 'London' 
       }), 
       new ol.Feature({ 
       geometry: new ol.geom.Point(ol.proj.fromLonLat([-0.13, 51.51])), 
       name: 'NY' 
       }), 
       new ol.Feature({ 
        geometry: new ol.geom.Point(ol.proj.fromLonLat([30.69, 55.21])), 
        name: 'Paris' 
       }) 
      ] 
      }); 

var markers = new ol.layer.Vector({ 
    source: vectorSource, 
    style: new ol.style.Style({ 
    image: new ol.style.Icon({ 
     src: '//openlayers.org/en/v3.12.1/examples/data/icon.png', 
     anchor: [0.5, 1] 
    }) 
    }) 
}); 
map.addLayer(markers); 

function showpopup(){ 

    // For showing popups on Map 

    var arrayData = [1]; 
    showInfoOnMap(map,arrayData,1); 

    function showInfoOnMap(map, arrayData, flag) { 
     var flag = 'show'; 
     var extent = map.getView().calculateExtent(map.getSize()); 
     var id = 0; 
     var element = document.getElementById('popup'); 
     var popup = new ol.Overlay({ 
      element: element, 
      positioning: 'center' 
     }); 

     map.addOverlay(popup); 
     if (arrayData != null && arrayData.length > 0) { 
     arrayData.forEach(function(vectorSource) { 
     /* logMessage('vectorSource >> ' + vectorSource); */ 
     if (vectorSource != null && markers.getSource().getFeatures() != null && markers.getSource().getFeatures().length > 0) { 
      markers.getSource().forEachFeatureInExtent(extent, function(feature) { 
     /* logMessage('vectorSource feature >> ' + feature); */ 
     console.log("vectorSource feature >> " + markers.getSource().getFeatures()); 
      if (flag == 'show') { 
      var geometry = feature.getGeometry(); 
      var coord = geometry.getCoordinates(); 
      popup.setPosition(coord); 
      /* var prop; 
      var vyprop = ""; */ 
      $(element).popover({ 
      'position': 'center', 
      'placement': 'top', 
      'template':'<div class="popover"><div class="popover-content"></div></div>', 
      'html': true, 
      'content': function() { 
       var string = []; 

       var st = feature.U.name; 
       if (st != null && st.length > 0) { 

       var arrayLength = 1; 
       string = "<table>"; 

        string += '<tr><td>' + st + "</table>"; 
       } 
       return string; 
       } 
      }); 
      $(element).popover('show'); 
      } else { 
      $(element).popover('destroy'); 
      } 
     }); 
     } 
     }); 
     } 
    }; 

} 

を助け、私は私のファイルにこのコードを使用しますが、それはすべてのマーカーに一つだけのポップアップを表示誰かがどのように教えてくださいすべてのマーカーのポップアップを同時に表示します。

Answer 1

あなたのポップアップに表示しようとしている内容が正確ではありませんが、おそらくこの方法を試してみます。これにより、ol.Overlayクラスが拡張され、マップオブジェクトを取得し、クリックされた機能を取得するために使用できるリスナーをアタッチできます。これはあなたが達成しようとしていることですか？

function PopupOverlay() { 
    var element = document.createElement('div'); 
    $(element).popover({ 
    template: '<div class="popover"><div class="popover-content"></div></div>', 
    placement: 'top', 
    position: 'center', 
    html: true 
    }); 

    ol.Overlay.call(this, { 
    element: element 
    }); 
} 
ol.inherits(PopupOverlay, ol.Overlay); 

PopupOverlay.prototype.setMap = function (map) { 
    var self = this; 
    map.on('singleclick', function (e) { 
    map.forEachFeatureAtPixel(e.pixel, function (feature, layer) { 
     ol.Overlay.prototype.setPosition.call(self, feature.getGeometry().getCoordinates()); 
     var el = self.getElement(); 
     $(el).data('bs.popover').options.content = function() { 

     // EDIT THE POPOVER CONTENT 
     return feature.get('name'); 
     }; 
     $(el).popover('show'); 
    }); 
    }); 
    ol.Overlay.prototype.setMap.call(this, map); 
}; 

Check out this example

だからあなたのコメントの後、私はあなたが今何をしようとして参照してください。私は同じ基本的なアプローチを取って、ol.Overlayを上書きするクラスを作ってみたいと言っていますが、今回はすべての機能をループして各機能のオーバーレイを作成しています。あなたは地図上の任意の場所をクリックしたときに

This Updated Example

function PopoverOverlay(feature, map) { 
    this.feature = feature; 

    var element = document.createElement('div'); 
    $(element).popover({ 
     template: '<div class="popover"><div class="popover-content"></div></div>', 
     placement: 'top', 
     position: 'center', 
     html: true 
    }); 

    ol.Overlay.call(this, { 
     element: element, 
     map: map 
    }); 
}; 
ol.inherits(PopoverOverlay, ol.Overlay); 

PopoverOverlay.prototype.togglePopover = function() { 
    ol.Overlay.prototype.setPosition.call(this, this.feature.getGeometry().getCoordinates()); 
    var self = this; 
    var el = this.getElement(); 
    $(el).data('bs.popover').options.content = function() { 

     // EDIT THE POPOVER CONTENT 
     return self.feature.get('name'); 
    }; 
    $(el).popover('toggle'); 
}; 

// create overlays for each feature 
var overlays = (function createOverlays() { 
    var popupOverlays = []; 
    vectorSource.getFeatures().forEach(function (feature) { 
     var overlay = new PopoverOverlay(feature, map); 
     popupOverlays.push(overlay); 
     map.addOverlay(overlay); 
    }); 
    return popupOverlays; 
})(); 

// on click, toggle the popovers 
map.on('singleclick', function() { 
    for(var i in overlays) { 
     overlays[i].togglePopover(); 
    } 
}); 

さて、それはtogglePopoverメソッドを呼び出し、個々の要素のポップオーバーを切り替える必要があります。