Làm cách nào để tạo kiểu cho các tính năng được tạo bởi điều khiển DrawFeature?

Tôi đã theo dõi hướng dẫn này: http://workshop.pgrouting.org/ch chương / geoext_client.html#select-the-start-and-final-destination

Nó chứa một điều khiển Openlayers.Control.DrawFeatures được xác định trong mẫu mã sau. Bạn cũng có thể thấy các dòng mà tác giả bình luận "nếu chúng ta muốn áp dụng một phong cách đặc biệt cho điểm bắt đầu, chúng ta nên làm điều này ở đây" . Vấn đề là: Tôi không biết cách áp dụng một kiểu trong cài đặt này và không thể tìm thấy bất kỳ ví dụ nào sử dụng điều khiển DrawFeatures theo cách này.

Làm cách nào để điểm bắt đầu sử dụng một kiểu khác với điểm kết thúc bằng cách sử dụng điều khiển DrawFeatures này?

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

thêm các dòng này và sửa đổi chúng cho phù hợp với phong cách của bạn:

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

Điều này sẽ sao chép kiểu mặc định và bạn có thể sửa đổi nó từ đó. Bạn sẽ nhận được một cái gì đó như thế này: