openlayers / ol-cesium

OpenLayers - Cesium integration
http://openlayers.org/ol-cesium/
BSD 2-Clause "Simplified" License
1.01k stars 329 forks source link

Info window for Vector Layer #205

Open aslam-gis opened 9 years ago

aslam-gis commented 9 years ago

Hi, I am trying to display a popup as Info window for my vector Layer but I am not getting any result. Please have a look at my code below and suggest the way forward. LongLat = [obj.longitude,obj.latitude]; siteLonLat = ol.proj.fromLonLat(LongLat);
var point = new ol.geom.Point([siteLonLat[0],siteLonLat[1]]); var feature = new ol.Feature({ geometry: point, properties : obj, geometryName : 'Site' });

vectorSource = new ol.source.Vector();
vectorSource.addFeature(feature);

// Create vector layer attached to the vector source.
vectorLayer = new ol.layer.Vector({
    source: vectorSource,
    style: new ol.style.Style({
          image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({
                    src: 'img/radio-tower.png'
              }))

    });

map.addLayer(vectorLayer);  

var element = document.getElementById('popup');

var popup = new ol.Overlay({
  element: element,
  positioning: 'bottom-center',
  stopEvent: false
});
map.addOverlay(popup);

   // display popup on click
map.on('click', function(evt) {
  var feature = map.forEachFeatureAtPixel(evt.pixel,
      function(feature, layer) {
        return feature;
      });

  if (feature) {
    var geometry = feature.getGeometry();
    var coord = geometry.getCoordinates();
    var _geomproperties = feature.getProperties();
    popup.setPosition(evt.coordinate);

    //alert(_lineproperties.geometryName);

    if(_geomproperties.geometryName == 'Site')
    {
        s =     "<code>Link Name :   " + _geomproperties.properties['site'] + "</code>"+
                "<br><code>ES A : " + _geomproperties.properties['latitude']  + "</code>"+
                "<br><code>ES B : " +_geomproperties.properties['longitude']  + "</code>";
    }               

    $(element).popover({
      'placement': 'top',
      'html': true,
      'title' : '<span class="text-info"><strong>Site Details...</strong></span> <button type="button" style="float:right">&times;</button>',
      'content':  s
    });
    $(element).popover('show');
  } else {
    $(element).popover('destroy');
  }

$('.close').click(function() {
    $(element).popover('destroy');
});
});

$(map.getViewport()).on('mousemove', function(e) { var pixel = map.getEventPixel(e.originalEvent); var hit = map.forEachFeatureAtPixel(pixel, function(feature, layer) { return true; }); if (hit) { document.getElementById('map').style.cursor = 'pointer'; } else { document.getElementById('map').style.cursor = ''; } });

jmgomezpoveda commented 8 years ago

Hi, this seems to be the same problem that I had. You can check my workaround at https://github.com/openlayers/ol3-cesium/issues/344#issuecomment-214098148