Bagaimana cara mendesain fitur yang dibuat oleh kontrol DrawFeature?

Saya telah mengikuti tutorial ini: http://workshop.pgrouting.org/chapters/geoext_client.html#select-the-start-and-final-destination

Ini berisi kontrol Openlayers.Control.DrawFeatures didefinisikan dalam sampel kode berikut. Anda juga dapat melihat baris di mana komentar penulis "jika kita ingin menerapkan gaya khusus ke titik awal kita harus melakukan ini di sini" . Masalahnya adalah: Saya tidak tahu bagaimana menerapkan gaya dalam pengaturan ini dan tidak dapat menemukan contoh menggunakan kontrol DrawFeatures dengan cara ini.

Bagaimana saya bisa membuat titik awal menggunakan gaya yang berbeda dari titik akhir menggunakan kontrol DrawFeatures ini?

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();            
    }
}
});

tambahkan baris ini dan modifikasi sesuai dengan gaya Anda:

...
    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();
    }
...

Ini akan menyalin gaya default dan Anda dapat memodifikasinya dari sana. Anda harus mendapatkan sesuatu seperti ini: