DrawFeatureコントロールによって作成されたフィーチャーのスタイルを設定する方法は?


9

私はこのチュートリアルに従っています:http : //workshop.pgrouting.org/chapters/geoext_client.html#select-the-start-and-final-destination

これには、次のコードサンプルで定義されているOpenlayers.Control.DrawFeaturesコントロールが含まれています。また、著者が「開始点に特別なスタイルを適用したい場合は、ここでこれを実行する必要があります」とコメントしている行も確認できます。問題は、この設定でスタイルを適用する方法がわからず、この方法でDrawFeaturesコントロールを使用した例が見つからないことです。

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

回答:


7

これらの行を追加し、スタイルに合わせて変更します。

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

これによりデフォルトのスタイルがコピーされ、そこから変更できます。あなたはこのようなものを得るはずです:

ここに画像の説明を入力してください


まことにありがとうございます!ここではredraw()を呼び出すことが重要であるようです。私はそれを試したことはありません:)
アンダーダーク

どういたしまして。マスターをサポートすることは常にやりがいのあるものです:)
CaptDragon

それはスタイルのアプリケーションに関連した、あまりにも私の問題を解決しましたどうもありがとうとして
GSTomar
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.