GWT-Openlayers의 VectorFeature에 MouseOver 처리기를 추가하는 방법

Question

사용자가 GWT-openlayers 맵의 Vector Feature를 가리킬 때 사용자 정의 툴팁 (팝업)을 표시하려고합니다. 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);