Extension OL3 : rationnaliser l'utilisation des styles et markers par defaut pour les controles

[gcebelieu]

Les différents contrôles de l'extension OL3 utilisent des ressources par défaut si celles-ci ne sont pas renseignées par l'utilisateur.

• Les outils de dessin définissent ces styles en dur dans le code (pas bien)
• Les widgets de calculs d'itinéraires et d'isochrones définissent les markers par défaut dans une classe src/Ol3/Controls/Utils/Markers (mieux)

Il faudrait rassembler et partager ces différentes définitions par défaut dans un code commun et public exporté par l'extension.

Rque : le commit suivant exporte déjà les markers par défaut des controles Route et Isocurve sous le nom ol.control.DefaultMarkers :

https://github.com/IGNF/geoportal-extensions/commit/25debb7cf8d8b4283b77e979212626683cf96f71

[lboulanger]

Info : actuellement, utilisation des styles par les contrôles de l'extension pour OL3 :

I. OVERLAYS

Contrôles "Route", "IsoCurve", "SearchEngine" : utilisation d'overlays (http://openlayers.org/en/v3.14.2/apidoc/ol.Overlay.html) => on pourrait paramétrer les paramètres suivant :

• "element" (element DOM),
• "offset" (décalage, par ex. [0,0])
• ou encore un "positioning" (par ex. "bottom-right").

Pour "Route" et "IsoCurve", on peut déjà paramétrer ces overlays, simplement en spécifiant une autre image pour le marker (l'élément est donc forcément de type ), et son décalage :

    var route = new ol.control.Route({
        markersOpts : {
            departure : {
                url : ""data:image/png;base64,xxxx",
                offset : [-25.5, -38]
            }
        }
    });

solution 1 : garder le même paramétrage pour "Route" et "IsoCurve", et mettre en place pour SearchEngine :

    var searchEngine = new ol.control.SearchEngine({
        markerOpts : {
            url : ""data:image/png;base64,xxxx",
            offset : [-25.5, -38]
        }
    })

solution 2 : mettre en place un paramétrage + poussé, où l'utilisateur peut spécifier sa propre div pour les overlays, avec les paramètres qui l'accompagnent. Ex :

var searchEngine = new ol.control.SearchEngine({
        markerOpts : {
            element : maPropreDivImage,
            positioning : "bottom-right"
        }
    })

=> nécessite + de maîtrise, mais + proche du comportement d'OpenLayers.

II. Styles pour des features (couches vecteur)

Contrôles "ReverseGeocode", "LayerImport", "Drawing", "ElevationPath" et "Measures" : utilisation de couches vecteur et de features (http://openlayers.org/en/v3.14.2/apidoc/ol.Feature.html) => on peut paramétrer leur style directement, avec un ol.style.Style (http://openlayers.org/en/v3.14.2/apidoc/ol.style.Style.html)

• "LayerImport" : on peut paramétrer le style par défaut directement avec ol.style.Style, qui prend en compte les différents cas (image, stroke, fill). On pourrait paramétrer + finement, notamment pour les imports GeoJSON.
• "ElevationPath" et "Measures" : on peut paramétrer les styles + finement avec ol.style.Stroke (start et finish) et ol.style.image (pointer et marker)
• "Drawing" : on peut paramétrer seulement certains aspects spécifiques des styles, par exemple :

  defaultStyles : {
      textFillColor : "#0000FF",
      textStrokeColor : "#FFFFFF",
      strokeColor : "#0000FF",
      polyFillColor : "#FF00FF",
      polyFillOpacity : 0.8,
      strokeWidth : 5
  }

  Il faut pouvoir paramétrer des styles de type ol.style.Image (pointer et marker), ol.style.fill (cercle et emprise), ol.style.Stroke (cercle et emprise), et ol.style.Text (labels)

• "ReverseGeocode" : aucun style n'est paramétrable pour l'instant. Il faut pouvoir paramétrer des styles de type ol.style.Image (pointer et marker), ol.style.fill (cercle et emprise), et ol.style.Stroke (cercle et emprise)

[elias75015]

Report du ticket en interne