7

ポリゴンに色を付ける OpenLayers.Style 、ポイントのサイズを調整するスタイル、およびすべてのジャズを作成しました。次に、これらのスタイルが何を表しているかをユーザーに説明したいと思います。

これらのスタイルを使用して独自の凡例を描画できる OpenLayers には何も表示されません。すべてが、私が持っていないデータを送信している想定されたマップ サーバーに向けられているようです。

現時点では、いくつかのサンプル ポイント/エリアを描画し、それらをスクリーン グラブして独自の凡例を作成する必要があるようです。スタイルが変更されたときに画像を再生成する必要がないように、スタイルに基づいてそれを行うより良い方法はありますか?

更新 GeoExt（したがってExtJS）に依存する良い答えがありましたが、jQuery互換の答えがあるかどうかまだ聞きたいです。特にプレーンな Javascript と OpenLayers の場合。

4

5 に答える 5

3

実際、OpenLayers はあなたが望むものをサポートしていません (少なくとも私はその方法を知りません)。Chau が言ったように、GeoExt の LegendPanel が唯一の希望です。

興味深いリンク:

http://geoext.org/lib/GeoExt/widgets/LegendPanel.html

http://www.mail-archive.com/openlayers-users@lists.osgeo.org/msg01318.html

于 2011-03-11T20:34:47.190 に答える
2

1 つのオプションとして、OL3 スタイルのように同じ属性を持つ SVG 要素を作成できます。サークル スタイルの例を次に示します (他のタイプでも同様のメソッドが必要になります)。

getIconLegend = function(style) {
    style = style.getImage();
    var radius = style.getRadius();
    var strokeWidth = style.getStroke().getWidth();
    var dx = radius + strokeWidth;

    var svgElem = $('<svg />')
        .attr({
            width: dx * 2,
            height: dx * 2
        });

    $('<circle />')
        .attr({
            cx: dx,
            cy: dx,
            r: radius,
            stroke: style.getStroke().getColor(),
            'stroke-width': strokeWidth,
            fill: style.getFill().getColor()
        })
        .appendTo(svgElem);

    // Convert DOM object to string to overcome from some SVG manipulation related oddities
    return $('<div>').append(svgElem).html();
}

jQuery を使用した SVG 操作は HTML 要素とは少し異なるため、代わりにオブジェクトを文字列に変換しています。詳細は、jquery の append が svg 要素で機能しないことから確認できますか?

後で、凡例アイコンをHTMLに貼り付けることができます

$('#legendText').prepend($(getIconLegend(yourFeature.getStyle())));
于 2016-01-18T10:42:47.817 に答える
0

プレーンな OpenLayers で必要なものに最も近いのは、WFS の代わりに WMS サービスを使用するか、機能を取得するために使用する方法です。WMS にはリクエスト タイプ GetLegendGraphic があり、名前が示すように、レイヤーに適用されているスタイルを示す画像を動的に取得できます。

于 2011-03-16T17:55:39.340 に答える