0

ベクターレイヤーでOpenLayersを使用して、マップ上にさまざまなアイテムを表示します。

その上に、各アイテム（機能）にポップアップを追加したい（アイテムをクリックするとポップアップが表示される）。そのために私は持っています：

function initMap()
    {
     // In this function I add with success the different items to the vectorLayer.
    }

    function finishMap()
    {

        map.addLayer(vectorLayer);

        selectControl = new OpenLayers.Control.SelectFeature(vectorLayer,
            {
                onSelect: onFeatureSelect,
                onUnselect: onFeatureUnselect
            });
        map.addControl(selectControl);
        selectControl.activate();
    }

    function onFeatureClose(evt) {
        selectControl.unselect(selectedFeature);
    }

    function onFeatureSelect(feature) {
        var popup = new OpenLayers.Popup.FramedCloud("popup",
            feature.geometry.getBounds().getCenterLonLat(),
            null,
            feature.description,
            true,
            onFeatureClose);
        popup.panMapIfOutOfView = true;
        popup.autoSize = true;
        feature.popup = popup;

        map.addPopup(popup);
    }

    function onFeatureUnselect(feature) {
        map.removePopup(feature.popup);
        feature.popup.destroy();
        feature.popup = null;
    }

別の関数の呼び出しは次のとおりです。

  1. initMap();
  2. 仕上げマップ();

問題は次のとおりです。クリックするとポップアップが表示されるアイテムが1つしかありません（10を超える）...

4

1 に答える 1

1

一般に、select ハンドラーを層オブジェクトに直接実装する方が簡単です。これは (推測では) initMap メソッドにあります。次のように、eventListeners プロパティを使用します。

    var layer = new OpenLayers.Layer.Vector("Vector layer", { 
        eventListeners: {
            'featureselected':function(evt){
                var feature = evt.feature;
                var popup = new OpenLayers.Popup.FramedCloud("popup",
                    OpenLayers.LonLat.fromString(feature.geometry.toShortString()),
                    null,
                    "<div style='font-size:.8em'>Feature: " + feature.id +"<br>Foo: " + feature.attributes.foo+"</div>",
                    null,
                    true
                );
                feature.popup = popup;
                map.addPopup(popup);
            },
            'featureunselected':function(evt){
                var feature = evt.feature;
                map.removePopup(feature.popup);
                feature.popup.destroy();
                feature.popup = null;
            }
        }
    });

//create selector control
var selector = new OpenLayers.Control.SelectFeature(layer,{
        autoActivate:true
    });

実装例: http://openlayers.org/dev/examples/light-basic.html唯一の違いは、selecotr がクリックではなく、マウスオーバーとマウスアウトに反応することです (これは、セレクターの hover プロパティを true に設定することによって行われます) ）。

また、SO に関する非常によく似た質問: How to add a popup box to a vector in OpenLayers? .

クラスの詳細については、OL ドキュメント ( http://dev.openlayers.org/docs/files/OpenLayers-js.html ) を参照 するか、質問してください。

これが少なくともいくつか役立つことを願っています。

于 2013-09-02T15:46:37.600 に答える