如何將MouseOver處理函數添加到GWT-Openlayers中的VectorFeature中

Question

我想在用戶將鼠標懸停在GWT-openlayers地圖上的矢量要素時顯示自定義工具提示（彈出）。我知道SelectFeature.setHover（）將允許我這樣做，但也會選擇我不想要的功能。

它就像是當用戶懸停時，必須顯示工具提示，並且當他點擊該特徵時，選擇繆斯會發生。

這怎麼能實現？

問候 Jatin

Answer 1

看看這個代碼。 這也將被添加到我們的展示中，但我們目前在服務器上有一些小問題。上傳時會在這裏留言。

請注意，添加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); 
} 

Answer 2

你的確使用SelectFeature實現這一目標。 祕訣在於您必須通過SelectFeatureOptions且只有啓用了高亮。

喜歡的東西

SelectFeatureOptions selectFeatureOptions = new SelectFeatureOptions(); 
    selectFeatureOptions.setHighlightOnly(true); 

    SelectFeature selectFeature = new SelectFeature(vectorLayer,selectFeatureOptions);