如何将MouseOver处理程序添加到GWT-Openlayers中的VectorFeature

时间:2013-12-16 08:25:04

标签: gwt openlayers gwt-openlayers

当用户将鼠标悬停在GWT-openlayers地图上的矢量要素上时,我想显示自定义工具提示(弹出窗口)。我知道SelectFeature.setHover()允许我这样做,但也会选择我不想要的功能。

就好像,当用户徘徊时,必须显示工具提示,当他点击该功能时,就会选择冥想。

如何实现这一目标?

此致 Jatin

2 个答案:

答案 0 :(得分:0)

您必须确实使用SelectFeature来实现此目的。 秘诀是您必须通过仅启用高亮显示的SelectFeatureOptions。

这样的东西
   SelectFeatureOptions selectFeatureOptions = new SelectFeatureOptions();
   selectFeatureOptions.setHighlightOnly(true);

   SelectFeature selectFeature = new SelectFeature(vectorLayer,selectFeatureOptions);

答案 1 :(得分:0)

查看此代码。 这也将添加到我们的展示中,但我们现在对服务器有一点问题。在上传时会在这里发出一声喊叫。

请注意,添加SelectFeature控件的顺序非常重要。

public void buildPanel() {
    // create some MapOptions
    MapOptions defaultMapOptions = new MapOptions();
    defaultMapOptions.setNumZoomLevels(16);

    // Create a MapWidget
    final MapWidget mapWidget = new MapWidget("500px", "500px",
            defaultMapOptions);

    // Create an EmptyLayer as base layer
    EmptyLayer.Options emptyLayerOptions = new EmptyLayer.Options();
    emptyLayerOptions.setAttribution("EmptyLayer (c) GWT-Openlayers");
    emptyLayerOptions.setIsBaseLayer(true); // make it a baselayer.
    EmptyLayer emptyLayer = new EmptyLayer("Empty layer", emptyLayerOptions);
    mapWidget.getMap().addLayer(emptyLayer);

    // Add a clickable vectors to the map

    // create a layer to add the vectors to
    final Vector vectorLayer = new Vector("Vectorlayer");
    mapWidget.getMap().addLayer(vectorLayer);

    // SelectFeature control to capture clicks on the vectors
    final SelectFeature selectFeature = new SelectFeature(vectorLayer);
    selectFeature.setAutoActivate(true);

    // SelectFeature control to capture hover on the vectors
    SelectFeatureOptions selectFeatureHoverOptions = new SelectFeatureOptions();
    // use the tempory style to be defined in the StyleMap      
    selectFeatureHoverOptions.setRenderIntent(RenderIntent.TEMPORARY); 
    selectFeatureHoverOptions.setHighlightOnly(true);
    selectFeatureHoverOptions.setHover();
    SelectFeature selectHoverFeature = new SelectFeature(vectorLayer,
            selectFeatureHoverOptions);
    selectHoverFeature.setClickOut(false);
    selectHoverFeature.setAutoActivate(true);

    mapWidget.getMap().addControl(selectHoverFeature);
    mapWidget.getMap().addControl(selectFeature);

    // Define a style for the vectors
    Style style = new Style();
    style.setFillColor("red");
    style.setStrokeColor("green");
    style.setStrokeWidth(2);
    style.setFillOpacity(0.9);
    style.setPointRadius(30);

    Style selectedStyle = new Style();
    selectedStyle.setFillColor("yellow");
    selectedStyle.setStrokeColor("yellow");
    selectedStyle.setStrokeWidth(2);
    selectedStyle.setFillOpacity(0.9);
    selectedStyle.setPointRadius(30);

    Style hoverStyle = new Style();
    hoverStyle.setFillColor("blue");
    hoverStyle.setStrokeColor("pink");
    hoverStyle.setStrokeWidth(2);
    hoverStyle.setFillOpacity(0.9);
    hoverStyle.setPointRadius(30);

    StyleMap styleMap = new StyleMap(style, selectedStyle, hoverStyle);
    vectorLayer.setStyleMap(styleMap);

    // Add a point
    Point point = new Point(146.7, -41.8);
    final VectorFeature pointFeature = new VectorFeature(point);
    vectorLayer.addFeature(pointFeature);

    // capture clicks on the vectorlayer
    vectorLayer
            .addVectorFeatureSelectedListener(new VectorFeatureSelectedListener() {
                public void onFeatureSelected(
                        FeatureSelectedEvent eventObject) {
                    Window.alert("The vector is now selected.\nIt will get de-selected when closing this popup.");
                    selectFeature.unSelect(eventObject.getVectorFeature());
                }
            });

    // Attach a popup to the point, we use null as size cause we set
    // autoSize to true
    // Note that we use FramedCloud... This extends a normal popup and
    // creates is styled as a baloon
    // We want to display this popup on hover, and hide it when hovering
    // ends

    final Popup popup = new FramedCloud("id1",
            pointFeature.getCenterLonLat(), null,
            "<h1>Some popup text</H1><BR/>And more text", null, false);
    popup.setPanMapIfOutOfView(true); // this set the popup in a strategic
                                        // way, and pans the map if needed.
    popup.setAutoSize(true);
    pointFeature.setPopup(popup);

    // capture hover by adding a listener to the control, and display the
    // popup
    selectHoverFeature
            .addFeatureHighlightedListener(new FeatureHighlightedListener() {

                public void onFeatureHighlighted(VectorFeature vectorFeature) {
                    mapWidget.getMap().addPopup(vectorFeature.getPopup());
                }
            });

    // capture unhover, and remove popup
    selectHoverFeature
            .addFeatureUnhighlightedListener(new FeatureUnhighlightedListener() {

                public void onFeatureUnhighlighted(
                        VectorFeature vectorFeature) {
                    mapWidget.getMap()
                            .removePopup(vectorFeature.getPopup());
                }
            });

    // Center and zoom to a location
    mapWidget.getMap().setCenter(new LonLat(146.7, -41.8), 6);

    contentPanel
            .add(new HTML(
                    "<p>This example shows how to add a Vector (point) to map, and do some action when hovering, and another when clicking.</p>"
                            + "<p>"
                            + "<LI>Hover over the point. This will cause a popup to show, and change the style of the point to the temporary style.</LI>"
                            + "<LI>Then when you click the Vector gets selected, gets another style, and a Window.alert is displayed.</LI>"
                            + "<LI>When closing the Window.alert, the Vector gets de-selected.</p>"));

    contentPanel.add(mapWidget);

    initWidget(contentPanel);

    mapWidget.getElement().getFirstChildElement().getStyle().setZIndex(0); 
}