Comment styliser les fonctionnalités créées par le contrôle DrawFeature?


9

J'ai suivi ce tutoriel: http://workshop.pgrouting.org/chapters/geoext_client.html#select-the-start-and-final-destination

Il contient un contrôle Openlayers.Control.DrawFeatures défini dans l'exemple de code suivant. Vous pouvez également voir les lignes où l'auteur commente "si nous voulons appliquer un style spécial au point de départ, nous devons le faire ici" . Le problème est: je ne sais pas comment appliquer un style dans ce paramètre et je ne trouve aucun exemple utilisant le contrôle DrawFeatures de cette manière.

Comment puis-je faire en sorte que le point de départ utilise un style différent du point final à l'aide de ce contrôle DrawFeatures?

DrawPoints = OpenLayers.Class(OpenLayers.Control.DrawFeature, {

// this control is active by default
autoActivate: true,

initialize: function(layer, options) {
    // only points can be drawn
    var handler = OpenLayers.Handler.Point;
    OpenLayers.Control.DrawFeature.prototype.initialize.apply(
            this, [layer, handler, options]
        );
},

drawFeature: function(geometry) {
    OpenLayers.Control.DrawFeature.prototype.drawFeature.apply(
            this, arguments 
        );
    if (this.layer.features.length == 1) {
        // we just draw the startpoint
        // note: if we want to apply a special style to the 
        //       start point we should do this here
    } else if (this.layer.features.length == 2) {
        // we just draw the finalpoint
        // note: if we want to apply a special style to the 
        //       final point we should do this here

        // we have all what we need; we can deactivate ourself.
        this.deactivate();            
    }
}
});

Réponses:


7

ajoutez ces lignes et modifiez-les selon votre style:

...
    if (this.layer.features.length == 1) {
        // we just draw the startpoint
        // note: if we want to apply a special style to the 
        //       start point we should do this here

        var myFirstPointStyle = OpenLayers.Util.applyDefaults(myFirstPointStyle, OpenLayers.Feature.Vector.style['default']);
        myFirstPointStyle.fillOpacity = 0.8;
        myFirstPointStyle.strokeWidth = 2;
        myFirstPointStyle.fillColor = "#ffffff";
        this.layer.features[this.layer.features.length - 1].style = myFirstPointStyle;

        this.layer.redraw();

    } else if (this.layer.features.length == 2) {
        // we just draw the finalpoint
        // note: if we want to apply a special style to the 
        //       final point we should do this here
        var mySecondPointStyle = OpenLayers.Util.applyDefaults(mySecondPointStyle, OpenLayers.Feature.Vector.style['default']);
        mySecondPointStyle.fillOpacity = 0.8;
        mySecondPointStyle.strokeWidth = 7;
        mySecondPointStyle.pointRadius = 12;
        mySecondPointStyle.fillColor = "#000000";
        this.layer.features[this.layer.features.length - 1].style = mySecondPointStyle;

        this.layer.redraw();


        // we have all what we need; we can deactivate ourself.
        this.deactivate();
    }
...

Cela copiera le style par défaut et vous pourrez le modifier à partir de là. Vous devriez obtenir quelque chose comme ceci:

entrez la description de l'image ici


Grand merci! On dirait qu'appeler redraw () est la clé ici. Je n'ai jamais essayé ça :)
underdark

Vous êtes les bienvenus, c'est toujours gratifiant d'aider un maître :)
CaptDragon

Merci beaucoup car cela a aussi résolu mon problème qui était lié à l'application des styles
GSTomar
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.