Créer la légende de la carte pour correspondre à OpenLayers.Style

J'ai pu résoudre mon légende besoins à l'aide de l'ol.Carte de classe comme un conteneur pour les symboles. Peut-être un peu un hack, mais semble fonctionner pour la plupart (?) les couches vectorielles (je n'ai pas WMS).

Donc ce que je fais, c'est:

1. boucle à travers les couches de la carte et de choisir le type de vecteur avec

   if(lyr instanceof ol.layer.Vector)

2. vérifier quel type de style est utilisée et les stocker dans un tableau

   var style = lyr.getStyle();
   var image = style.getImage();
   if(image){
       if(image instanceof ol.style.Icon){
           //raster icon from url
           var icon2 = new ol.style.Icon( ({
               src: image.getSrc()
           }))
           var iconStyle2 = new ol.style.Style({
               image: icon2
           });
           row = {};
           row.style = iconStyle2;
           row.title = lyr.get('title');               
       }
       else{ //ol.style.RegularShape?
           row = {};
           row.style = style;
           row.title = lyr.get('title');               
       }
   }else{
       row = {};
       row.style = style;
       row.title = lyr.get('title');
   }
   

3. également stocker le type de géométrie

   //geometry type
   var feats = lyr.getSource().getFeatures();
   if (feats && feats.length>0){
       if(feats[0].getGeometry() instanceof ol.geom.Point || feats[0].getGeometry() instanceof ol.geom.MultiPoint){
           row.geomType="point";
       }else if (feats[0].getGeometry() instanceof ol.geom.LineString || feats[0].getGeometry() instanceof ol.geom.MultiLineString){
           row.geomType="line";
       }else{
           row.geomType="polygon";
       }
   }
   

4. boucle à travers le stockés à-être la légende de lignes et de construire les éléments HTML nécessaire, généralement un div pour le "mini-carte" et le nom de la couche

   for (i = 0; i < legendRows.length; i++) { 
       row = document.createElement("tr");
       //symbol
       cell = document.createElement("td");
       cell.style="width:35px";
       var div = document.createElement("div");
       div.style="width:32px; height:32px;";
       div.id = "mapLegendRowSymbolDiv" + i; 
       tble.appendChild(row);
       row.appendChild(cell);
       cell.appendChild(div);
       //layer title
       cell = document.createElement("td");      
       tble.appendChild(row);
       row.appendChild(cell);
       cell.innerHTML=legendRows[i].title; 
   }
   
   //append table
   $( "#legendText" ).empty();
   $( "#legendText" ).append(tble);
   

5. une fois les éléments HTML ont été ajoutés à la page, lancer les cartes et insérez le faux fonctionnalités pour afficher les symboles

   //loop legend rows and and insert the maps
   var extent = [0, 0, 32, 32];
   var projection = new ol.proj.Projection({
       code: 'xkcd-image',
       units: 'pixels',
       extent: extent
   });
   for (i = 0; i < legendRows.length; i++) { 
       //target div
       var targetDiv = document.getElementById("mapLegendRowSymbolDiv" + i);
       //layer for icon
       var sourceLegend = new ol.source.Vector({wrapX: false});
       var vectorLegend = new ol.layer.Vector({
           source: sourceLegend,
           style: legendRows[i].style
       });
       //map
       var mapLegend = new ol.Map({
           controls: [],
           layers: [
               new ol.layer.Image({
                   source: new ol.source.ImageStatic({
                       projection: projection,
                       imageExtent: extent
                   })
               }),
               vectorLegend
           ],
           target: targetDiv,
           view: new ol.View({
               projection: projection,
               center: ol.extent.getCenter(extent),
               zoom: 2,
               maxZoom: 2
           })
       });
       //icon feature depending on type
       var geom;
       if(legendRows[i].geomType=='point'){
           geom = new ol.geom.Point([16,16]);
       }else if(legendRows[i].geomType=='polygon'){
           var polyCoords = [];
           polyCoords.push([15.7, 15.7]);
           polyCoords.push([16.3, 15.7]);
           polyCoords.push([16.3, 16.3]);
           polyCoords.push([15.7, 16.3]);
           polyCoords.push([15.7, 15.7]);
           geom = new ol.geom.Polygon([polyCoords]);
       }else{
           var lineCoords = [];                
           lineCoords.push([15.6, 15.6]);
           lineCoords.push([16, 16]);
           lineCoords.push([16, 15.8]);
           lineCoords.push([16.4, 16.2]);
           geom = new ol.geom.LineString(lineCoords);
       }
       var feature = new ol.Feature({
           geometry: geom
       });
       vectorLegend.getSource().addFeature(feature);
   }   
   

Avec cela, j'ai été en mesure de créer et de mettre à jour une part de mythe dialogue (jQuery UI):

Je n'ai pas testé beaucoup de choses encore, il peut y avoir quelques problèmes avec cette approche...

OriginalL'auteur Samuli Neuvonen

Le plus proche que vous pouvez obtenir ce que vous voulez avec la plaine OpenLayers est si vous utilisez le service WMS au lieu de WFS ou quelle que soit la méthode que vous utilisez pour l'extraction de caractéristiques. WMS est le type de la requête GetLegendGraphic qui, comme le nom l'indique, vous permet de récupérer dynamiquement une image qui montre ce style est appliqué à la couche.

OriginalL'auteur igorti