VOL3 / v-ol3

Vaadin OpenLayers 3 wrapper
Apache License 2.0
15 stars 18 forks source link

No change listener on feature object #38

Open edwin-cox opened 9 years ago

edwin-cox commented 9 years ago

When one attribute of a feature, like geometry or style, is changed, it doesn't repercute to the canvas. In the demo here, a polygon is created with one button. The two other buttons should modify its geometry or color.

package web.vaadin7examples.mhosio.demoandtestapp;

import com.vaadin.server.VaadinRequest;
import com.vaadin.shared.ui.colorpicker.Color;
import com.vaadin.ui.*;
import com.vaadin.ui.Button.ClickEvent;

import org.vaadin.addon.vol3.OLMap;
import org.vaadin.addon.vol3.OLView;
import org.vaadin.addon.vol3.OLViewOptions;
import org.vaadin.addon.vol3.client.OLCoordinate;
import org.vaadin.addon.vol3.client.OLExtent;
import org.vaadin.addon.vol3.client.source.OLMapQuestLayerName;
import org.vaadin.addon.vol3.client.style.OLFillStyle;
import org.vaadin.addon.vol3.client.style.OLStyle;
import org.vaadin.addon.vol3.feature.OLFeature;
import org.vaadin.addon.vol3.feature.OLPoint;
import org.vaadin.addon.vol3.feature.OLPolygon;
import org.vaadin.addon.vol3.interaction.OLDrawInteraction;
import org.vaadin.addon.vol3.layer.OLLayer;
import org.vaadin.addon.vol3.layer.OLTileLayer;
import org.vaadin.addon.vol3.layer.OLVectorLayer;
import org.vaadin.addon.vol3.source.OLMapQuestSource;
import org.vaadin.addon.vol3.source.OLVectorSource;
import org.vaadin.addon.vol3.source.OLVectorSourceOptions;
import org.vaadin.addon.vol3.util.StyleUtils;

import web.tools.GisUtils;

/**
 * Basic map view
 */
public class fitExtentDemo extends UI {

    private OLFeature featurePoly;
    private static final OLCoordinate[] COORDINATES = new OLCoordinate[]{new OLCoordinate(7, 47),new OLCoordinate(7.5, 47),new OLCoordinate(7.5, 47.5),new OLCoordinate(7, 47)};
    protected OLMap map;
    protected OLVectorLayer vectorLayer;

    @Override
    protected void init(VaadinRequest vaadinRequest) {
        VerticalLayout root = new VerticalLayout();
        root.setSizeFull();
        this.setContent(root);

        map = createMap();
        root.addComponent(map);
        root.setExpandRatio(root.iterator().next(), 1.0f);
        root.addComponent(createControls());

    }

    protected OLMap createMap() {
        OLMap map = new OLMap();
        OLLayer layer = new OLTileLayer(new OLMapQuestSource(
                OLMapQuestLayerName.OSM));
        map.addLayer(layer);
        map.setView(createView());
        map.setSizeFull();

        OLVectorSourceOptions vectorOptions=new OLVectorSourceOptions();
        vectorLayer = new OLVectorLayer(new OLVectorSource(vectorOptions));
        vectorLayer.setLayerVisible(true);
        map.addLayer(vectorLayer);

        OLPoint point = new OLPoint(new OLCoordinate(7, 47));
        OLFeature p2=new OLFeature("p1");
        p2.setGeometry(point);
        ((OLVectorSource)vectorLayer.getSource()).addFeature(p2);

        return map;
    }

    private OLView createView() {

        OLViewOptions viewOpts = new OLViewOptions();
        viewOpts.setMapProjection("EPSG:900913");
        viewOpts.setInputProjection("EPSG:900913");

        OLCoordinate[] swissCoordinateList900913 = new OLCoordinate[] {
                new OLCoordinate(313081.66, 6261715.66), // links oben
                new OLCoordinate(1565425.66, 6261715.66), // rechts oben
                new OLCoordinate(1565425.66, 5635543.66), // rechts unten
                new OLCoordinate(313081.66, 5635543.66) }; // links unten

        OLView view = new OLView(viewOpts);
        view.setZoom(9);
        view.setCenter(
                (swissCoordinateList900913[0].x + swissCoordinateList900913[1].x) / 2.0,
                (swissCoordinateList900913[0].y + swissCoordinateList900913[2].y) / 2.0);

        return view;
    }

    private AbstractLayout createControls() {
        HorizontalLayout controls = new HorizontalLayout();
        controls.setSpacing(true);
        controls.setDefaultComponentAlignment(Alignment.MIDDLE_CENTER);

        Button createPolyButton = new Button("create poly");
        createPolyButton.addClickListener(new Button.ClickListener() {

            @Override
            public void buttonClick(ClickEvent event) {

                OLPolygon poly=new OLPolygon(COORDINATES);
                featurePoly = new OLFeature("r1");
                featurePoly.setGeometry(poly);

                OLVectorSource source = (OLVectorSource)vectorLayer.getSource();
                source.addFeature(featurePoly);

                OLPoint point = new OLPoint(new OLCoordinate(7.1, 47.1));
                OLFeature p2=new OLFeature("p2");
                p2.setGeometry(point);
                source.addFeature(p2);

            }
        });
        controls.addComponent(createPolyButton);

        Button modifyPolyButton = new Button("modify poly");
        modifyPolyButton.addClickListener(new Button.ClickListener() {

            @Override
            public void buttonClick(ClickEvent event) {

                OLPolygon newPoly=new OLPolygon(new OLCoordinate[]{new OLCoordinate(7.1, 46.9),new OLCoordinate(7.5, 47),new OLCoordinate(7.5, 47.5),new OLCoordinate(7.1, 46.9)});
                featurePoly.setGeometry(newPoly);
            }
        });
        controls.addComponent(modifyPolyButton);

        Button colorizePolyButton = new Button("colorize poly");
        colorizePolyButton.addClickListener(new Button.ClickListener() {

            @Override
            public void buttonClick(ClickEvent event) {

                OLStyle olStyle =StyleUtils.createDefaultStyle();
                olStyle.fillStyle=new OLFillStyle("red");
                featurePoly.setStyle(olStyle);

                // if uncommented, the color changes.
//              OLVectorSource source = (OLVectorSource)vectorLayer.getSource();
//              source.removeFeatureById("r1");
//              source.addFeature(featurePoly);
            }
        });
        controls.addComponent(colorizePolyButton);

        return controls;
    }

}
mhosio commented 9 years ago

Sounds a bit difficult to implement that effectively to me. But you could just use OLVectorSource.updateFeature(featurePoly) for refreshing the changes.

Styp commented 9 years ago

Here the code, it is not the 'neatest' solution in my eyes - but it does the job. This passage:

@Override
public void buttonClick(ClickEvent event) {

    OLStyle olStyle =StyleUtils.createDefaultStyle();
    olStyle.fillStyle=new OLFillStyle("red");
    featurePoly.setStyle(olStyle);

}

has to be replaced with this code:

@Override
public void buttonClick(ClickEvent event) {

    OLStyle olStyle =StyleUtils.createDefaultStyle();
    olStyle.fillStyle=new OLFillStyle("red");
    featurePoly.setStyle(olStyle);

    ((OLVectorSource)vectorLayer.getSource()).updateFeature(featurePoly);
}

Btw. added this feature inspired by this issue:

((OLVectorSource)vectorLayer.getSource()).updateAllFeatures();