Блог

доброе утро.

Для работы со слоем wfs лучше использовать листовки или открытые слои?

У меня есть код с openlayers, который возвращает WFS с геосервера. Но я не могу показать атрибуты во всплывающем окне. кто-нибудь может мне помочь? Спасибо

Вы можете попробовать ol-ext ol/Overlay/PopupFeature для отображения атрибутов объектов во всплывающем окне. См. Пример: https://viglino.github.io/ol-ext/examples/popup/map.popup.feature.html

Следуя примеру https://viglino.github.io/ol-ext/examples/popup/map.popup.feature.html, У меня есть этот код, в котором мой слой WFS содержит атрибуты идентификатора и имени, однако он ничего не показывает во всплывающем окне

     var vectorSource = new ol.source.Vector({
            format: new ol.format.GeoJSON(),
            url: function(extent) {
            return 'http://localhost:8080/geoserver/teste/wfs?service=WFSamp;'  
              version=1.1.0amp;request=GetFeatureamp;typename=teste:MYLAYERamp;'  
              'outputFormat=application/jsonamp;srsname=EPSG:4326amp;'  
              'bbox='   extent.join(',')   ',EPSG:4326';
            },
            strategy: ol.loadingstrategy.bbox
        });
 
 
        var vector = new ol.layer.Vector({
            source: vectorSource,
            style: new ol.style.Style({
                stroke: new ol.style.Stroke({
                    color: 'rgba(0, 0, 255, 1.0)',
                    width: 2
                })
            })
        });
               
        var layers = [
            new ol.layer.Tile({source: new ol.source.OSM()}),
            vector,
        ];
        var map = new ol.Map({
            layers: layers,
             interactions: ol.interaction.defaults({ altShiftDragRotate:false, pinchRotate:false }),
            target: 'map',
            view: new ol.View({
                center: ol.proj.fromLonLat([-46.444137, -23.713596]),
                zoom: 12
            })
        });
        
  var select = new ol.interaction.Select({
    hitTolerance: 5,
    multi: true,
    condition: ol.events.condition.singleClick
  });
 map.addInteraction(select);

  var popup = new ol.Overlay.PopupFeature({
    popupClass: 'default anim',
    select: select,
    canFix: true,
    template: {
        title: 
          function(f) {
            return f.get('nome') ' (' f.get('id') ')';
          },
        attributes: // [ 'id', 'nome' ]
        {
          'nome': { title: 'Nome' },
          'id': { title: 'Id' },
        
        }
    }
  });
 map.addOverlay (popup);
 

Это всплывающий код. У меня есть 3 слоя: слой 1, слой 2 и слой 3. Для слоя 1 идентификатор, который я хочу показать как идентификатор. Для слоя 2 я хочу показать идентификатор в виде КОДА, а для других слоев я не хочу показывать атрибут идентификатора. Как я должен изменить шаблон? Спасибо

  var popup = new ol.Overlay.PopupFeature({
    popupClass: 'default anim',
    select: select_interaction,
    canFix: true,
    template: {
        title: 
            function(f) {
                return f.get('NAME') ' (' f.get('ID') ')';
            },
        attributes: 
        {
            'ID': { title: 'ID' },
            // with prefix and suffix
            'POP': { 
                title: 'População',  // attribute's title
                before: '',           // something to add before
                format: ol.Overlay.PopupFeature.localString(),  // format as local string
                after: ' hab.'        // something to add after
            }, 
        }
    }
});
 

@пользователь12538529
Вы должны создать функцию и вернуть шаблон для каждого случая:

 // Create templates
var templateID = { ... }; 
var templateCODE = { ... };
// Popup with a template function
var popup = new ol.Overlay.PopupFeature({
    popupClass: 'default anim',
    select: select_interaction,
    canFix: true,
    template: function(feature) {
      var prop = feature.getProperties();
      // Test if has property ID
      if (prop.hasOwnProperty('ID')) return templateID;
      // or property CODE
      else if (prop.hasOwnProperty('CODE')) return templateCODE;
    }
});