2

OpenLayers ベクター レイヤーがあり、そのレイヤーのポイントには、場所の名前である外部グラフィックを使用しています。場所ごとに名前が異なるため、画像の幅も異なります。名前をポイントの中央に配置するのではなく、スポットを指している側に配置します (グラフィックは道路標識のような形になっていると思います)。graphicXOffset を 0 に設定することで簡単に画像を横に移動できますが、画像の幅がわからないため、graphicWidth を設定できません。

間違った値に設定すると、画像がつぶれてしまいます。グラフィックの高さとグラフィックの幅を設定しないと、画像は表示されません。

現時点で私が持っている唯一のアイデアは、余分なスペースを透明にして画像を固定幅にすることですが、その領域は依然としてクリック可能であり、ユーザーにとって非常に奇妙です.

4

2 に答える 2

0

Are you storing filename for icon in feature's attributes and using attribute replacement to set externalGraphic, ie:

'externalGraphic': '${icon}'

You could create predefined lookup table for all images and use style's or stylemap's context function:

var style = new OpenLayers.Style({
    externalGraphic: '${icon}',
    graphicWidth: '${getWidth}',
    /* etc... */
}, {
    context: {
        getWidth: function(feat) {
            var lookup = {
                'london.png': 120,
                'manchester.png': 150
            }
            var defaultWidth = 100;
            return lookup[feat.attributes.icon] || defaultWidth;
        }
    }
});
于 2012-10-29T08:45:57.503 に答える
0
  1. イベント リスナーをレイヤーに追加します。'beforefeatureadded'
  2. 画像サイズを返す別の Web サービス メソッドへの同期 AJAX 呼び出しを行います。
  3. 次に、 と をフィーチャの属性として設定しwidthますheight。
  4. 使用${widthAttr}、${heightAttr}スタイルでの交換。
于 2013-01-31T00:36:45.710 に答える