From b414b21016946b55084e9f54f781a45b494f25d0 Mon Sep 17 00:00:00 2001 From: francesco Date: Wed, 28 Oct 2020 11:19:12 +0100 Subject: [PATCH] managed toggle button --- pom.xml | 2 - .../client/gis/OpenLayerOSM.java | 85 ++++-- .../client/ui/GeonaDataViewMainPanel.java | 58 ++-- .../client/ui/GeonaDataViewMainPanel.ui.xml | 8 +- ...tuallyExclusiveToggleButtonCollection.java | 45 +++ .../shared/gis/ClickDataInfo.java | 265 ++++++++++++++++++ 6 files changed, 420 insertions(+), 43 deletions(-) create mode 100644 src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/ui/util/MutuallyExclusiveToggleButtonCollection.java create mode 100644 src/main/java/org/gcube/portlets/user/geoportaldataviewer/shared/gis/ClickDataInfo.java diff --git a/pom.xml b/pom.xml index 0f8cdf7..a77f1b6 100644 --- a/pom.xml +++ b/pom.xml @@ -103,13 +103,11 @@ 2.3.2.0 compile - org.gcube.spatial.data geo-utility [1.0.0,2.0.0-SNAPSHOT) - org.gcube.common.portal portal-manager diff --git a/src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/gis/OpenLayerOSM.java b/src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/gis/OpenLayerOSM.java index 6c02fb4..cd72f53 100644 --- a/src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/gis/OpenLayerOSM.java +++ b/src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/gis/OpenLayerOSM.java @@ -4,6 +4,7 @@ import java.net.MalformedURLException; import org.gcube.portlets.user.geoportaldataviewer.client.GeoportalDataViewerConstants; +import com.google.gwt.core.client.GWT; import com.google.gwt.user.client.DOM; import com.google.gwt.user.client.Element; import com.google.gwt.user.client.Event; @@ -20,6 +21,7 @@ import ol.View; import ol.ViewOptions; import ol.control.Attribution; import ol.event.EventListener; +import ol.geom.Point; import ol.interaction.Draw; import ol.interaction.DrawOptions; import ol.interaction.Extent; @@ -63,7 +65,9 @@ public class OpenLayerOSM { private ProjectionOptions projectionOptions = OLFactory.createOptions(); /** The point draw. */ - private Draw pointDraw; + private Draw queryPoint; + + private Extent queryBox; /** The popup overlay. */ private Overlay popupOverlay; @@ -128,6 +132,31 @@ public class OpenLayerOSM { public void onEvent(MapBrowserEvent event) { // TODO Auto-generated method stub Coordinate coordinate = event.getCoordinate(); + if(queryPoint!=null && queryPoint.getActive()) { + + double lon = coordinate.getX(); + double lat = coordinate.getY(); + + int w = (int) map.getSize().getWidth(); + int h = (int) map.getSize().getHeight(); + // handler.clickOnMap(x, y, w, h); + + // ratio - mapPixelWeight : bboxWeight = 10px : geoRectangleWidth + // where 10px is the pixel diameter dimension of the clicked point + double bboxWidth = Math.abs(getExtent().getLowerLeftX() - getExtent().getUpperRightX()); + double geoWidth = bboxWidth / w * 10 / 2; + double x1 = Math.min(lon+geoWidth, lon-geoWidth); + double x2 = Math.max(lon+geoWidth, lon-geoWidth); + double y1 = Math.min(lat+geoWidth, lat-geoWidth); + double y2 = Math.max(lat+geoWidth, lat-geoWidth); + GWT.log("("+x1+","+y1+")("+x2+","+y2+")"); + + Point pt = new Point(coordinate); + ol.Extent extent = pt.getExtent(); + selectBox(x1, y1, x2, y2); + + } + if(popupOverlay==null) { Element elPopup = DOM.getElementById("popup"); popupOverlay = addOverlay(elPopup); @@ -147,6 +176,15 @@ public class OpenLayerOSM { } + /** + * Gets the extent. + * + * @return the extent + */ + public ol.Extent getExtent() { + return this.map.getView().calculateExtent(map.getSize()); + } + /** * Adds the popup closer handelr. * @@ -206,8 +244,6 @@ public class OpenLayerOSM { Image wmsLayer = new Image(layerOptions); map.addLayer(wmsLayer); - //https://data.d4science.org/gis-viewer-app/?wmsrequest=https://data.d4science.org/gis-viewer-app/?wmsrequest=https%3A%2F%2Fgeona-proto.d4science.org%2Fgeoserver%2Fconcessioni_conf%2Fwms%3Fservice%3DWMS%26version%3D1.1.0%26request%3DGetMap%26layers%3Dconcessioni_conf%3Acentroids_concessioni%26styles%3D%26bbox%3D8.476%2C39.179%2C17.391%2C45.772%26width%3D768%26height%3D567%26srs%3DEPSG%3A4326%26format%3Dapplication%2Fopenlayers&zoom=6¢ermap=12.45%2C42.98https://data.d4science.org/gis-viewer-app/?wmsrequest=https%3A%2F%2Fgeona-proto.d4science.org%2Fgeoserver%2Fconcessioni_conf%2Fwms%3Fservice%3DWMS%26version%3D1.1.0%26request%3DGetMap%26layers%3Dconcessioni_conf%3Acentroids_concessioni%26styles%3D%26bbox%3D8.476%2C39.179%2C17.391%2C45.772%26width%3D768%26height%3D567%26srs%3DEPSG%3A4326%26format%3Dapplication%2Fopenlayers&zoom=6¢ermap=12.45%2C42.98https://data.d4science.org/gis-viewer-app/?wmsrequest=https%3A%2F%2Fgeona-proto.d4science.org%2Fgeoserver%2Fconcessioni_conf%2Fwms%3Fservice%3DWMS%26version%3D1.1.0%26request%3DGetMap%26layers%3Dconcessioni_conf%3Acentroids_concessioni%26styles%3D%26bbox%3D8.476%2C39.179%2C17.391%2C45.772%26width%3D768%26height%3D567%26srs%3DEPSG%3A4326%26format%3Dapplication%2Fopenlayers&zoom=6¢ermap=12.45%2C42.98https://data.d4science.org/gis-viewer-app/?wmsrequest=https%3A%2F%2Fgeona-proto.d4science.org%2Fgeoserver%2Fconcessioni_conf%2Fwms%3Fservice%3DWMS%26version%3D1.1.0%26request%3DGetMap%26layers%3Dconcessioni_conf%3Acentroids_concessioni%26styles%3D%26bbox%3D8.476%2C39.179%2C17.391%2C45.772%26width%3D768%26height%3D567%26srs%3DEPSG%3A4326%26format%3Dapplication%2Fopenlayers&zoom=6¢ermap=12.45%2C42.98https://data.d4science.org/gis-viewer-app/?wmsrequest=https%3A%2F%2Fgeona-proto.d4science.org%2Fgeoserver%2Fconcessioni_conf%2Fwms%3Fservice%3DWMS%26version%3D1.1.0%26request%3DGetMap%26layers%3Dconcessioni_conf%3Acentroids_concessioni%26styles%3D%26bbox%3D8.476%2C39.179%2C17.391%2C45.772%26width%3D768%26height%3D567%26srs%3DEPSG%3A4326%26format%3Dapplication%2Fopenlayers&zoom=6¢ermap=12.45%2C42.98https://data.d4science.org/gis-viewer-app/?wmsrequest=https%3A%2F%2Fgeona-proto.d4science.org%2Fgeoserver%2Fconcessioni_conf%2Fwms%3Fservice%3DWMS%26version%3D1.1.0%26request%3DGetMap%26layers%3Dconcessioni_conf%3Acentroids_concessioni%26styles%3D%26bbox%3D8.476%2C39.179%2C17.391%2C45.772%26width%3D768%26height%3D567%26srs%3DEPSG%3A4326%26format%3Dapplication%2Fopenlayers&zoom=6¢ermap=12.45%2C42.98https://data.d4science.org/gis-viewer-app/?wmsrequest=https%3A%2F%2Fgeona-proto.d4science.org%2Fgeoserver%2Fconcessioni_conf%2Fwms%3Fservice%3DWMS%26version%3D1.1.0%26request%3DGetMap%26layers%3Dconcessioni_conf%3Acentroids_concessioni%26styles%3D%26bbox%3D8.476%2C39.179%2C17.391%2C45.772%26width%3D768%26height%3D567%26srs%3DEPSG%3A4326%26format%3Dapplication%2Fopenlayers&zoom=6¢ermap=12.45%2C42.98https://data.d4science.org/gis-viewer-app/?wmsrequest=https%3A%2F%2Fgeona-proto.d4science.org%2Fgeoserver%2Fconcessioni_conf%2Fwms%3Fservice%3DWMS%26version%3D1.1.0%26request%3DGetMap%26layers%3Dconcessioni_conf%3Acentroids_concessioni%26styles%3D%26bbox%3D8.476%2C39.179%2C17.391%2C45.772%26width%3D768%26height%3D567%26srs%3DEPSG%3A4326%26format%3Dapplication%2Fopenlayers&zoom=6¢ermap=12.45%2C42.98https://data.d4science.org/gis-viewer-app/?wmsrequest=https%3A%2F%2Fgeona-proto.d4science.org%2Fgeoserver%2Fconcessioni_conf%2Fwms%3Fservice%3DWMS%26version%3D1.1.0%26request%3DGetMap%26layers%3Dconcessioni_conf%3Acentroids_concessioni%26styles%3D%26bbox%3D8.476%2C39.179%2C17.391%2C45.772%26width%3D768%26height%3D567%26srs%3DEPSG%3A4326%26format%3Dapplication%2Fopenlayers&zoom=6¢ermap=12.45%2C42.98https://data.d4science.org/gis-viewer-app/?wmsrequest=https%3A%2F%2Fgeona-proto.d4science.org%2Fgeoserver%2Fconcessioni_conf%2Fwms%3Fservice%3DWMS%26version%3D1.1.0%26request%3DGetMap%26layers%3Dconcessioni_conf%3Acentroids_concessioni%26styles%3D%26bbox%3D8.476%2C39.179%2C17.391%2C45.772%26width%3D768%26height%3D567%26srs%3DEPSG%3A4326%26format%3Dapplication%2Fopenlayers&zoom=6¢ermap=12.45%2C42.98https://data.d4science.org/gis-viewer-app/?wmsrequest=https%3A%2F%2Fgeona-proto.d4science.org%2Fgeoserver%2Fconcessioni_conf%2Fwms%3Fservice%3DWMS%26version%3D1.1.0%26request%3DGetMap%26layers%3Dconcessioni_conf%3Acentroids_concessioni%26styles%3D%26bbox%3D8.476%2C39.179%2C17.391%2C45.772%26width%3D768%26height%3D567%26srs%3DEPSG%3A4326%26format%3Dapplication%2Fopenlayers&zoom=6¢ermap=12.45%2C42.98https%3A%2F%2Fgeona-proto.d4science.org%2Fgeoserver%2Fconcessioni_conf%2Fwms%3Fservice%3DWMS%26version%3D1.1.0%26request%3DGetMap%26layers%3Dconcessioni_conf%3Acentroids_concessioni%26styles%3D%26bbox%3D8.476%2C39.179%2C17.391%2C45.772%26width%3D768%26height%3D567%26srs%3DEPSG%3A4326%26format%3Dapplication%2Fopenlayers&zoom=6¢ermap=12.45%2C42.98 - } @@ -217,11 +253,11 @@ public class OpenLayerOSM { * @return the draw */ public Draw addPointVectorSource() { - if(pointDraw==null) + if(queryPoint==null) initPointInteraction(); - map.addInteraction(pointDraw); - return pointDraw; + map.addInteraction(queryPoint); + return queryPoint; } /** @@ -235,7 +271,16 @@ public class OpenLayerOSM { drawOptions.setMaxPoints(1); drawOptions.setMinPoints(1); drawOptions.setWrapX(false); - pointDraw = new Draw(drawOptions); + queryPoint = new Draw(drawOptions); + + queryPoint.addChangeListener(new EventListener() { + + @Override + public void onEvent(ol.events.Event event) { + GWT.log(event.getType()); + + } + }); } /** @@ -250,14 +295,15 @@ public class OpenLayerOSM { /** * Removes the interactions. */ - public void removeInteractions() { + public void removeQueryInteractions() { Collection interactions = map.getInteractions(); if(interactions!=null) { - Interaction[] inters = map.getInteractions().getArray(); - for (int i = 0; i < inters.length; i++) { - Interaction inter = inters[i]; - map.removeInteraction(inter); - } + map.removeInteraction(queryBox); + map.removeInteraction(queryPoint); + //for (int i = 0; i < inters.length; i++) { +// Interaction inter = inters[i]; +// map.removeInteraction(inter); + //} } } @@ -273,9 +319,9 @@ public class OpenLayerOSM { //styleOptions.setStroke(stroke); //styleOptions.set //extentOptions.setBoxStyle(new ol.style.Style(styleOptions)); - Extent extent = new Extent(extentOptions); - map.addInteraction(extent); - return extent; + queryBox = new Extent(extentOptions); + map.addInteraction(queryBox); + return queryBox; } @@ -297,6 +343,13 @@ public class OpenLayerOSM { return overlay; } + + public void selectBox(double x1, double y1, double x2, double y2) { + //ClickDataInfo cdi = new ClickDataInfo(x1, y1, x2, y2); + GWT.log("("+x1+","+y1+")("+x2+","+y2+")"); + + } + diff --git a/src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/ui/GeonaDataViewMainPanel.java b/src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/ui/GeonaDataViewMainPanel.java index 9ecc0ff..a1d5267 100644 --- a/src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/ui/GeonaDataViewMainPanel.java +++ b/src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/ui/GeonaDataViewMainPanel.java @@ -3,7 +3,10 @@ package org.gcube.portlets.user.geoportaldataviewer.client.ui; import org.gcube.portlets.user.geoportaldataviewer.client.gis.OpenLayerOSM; import com.github.gwtbootstrap.client.ui.Button; +import com.github.gwtbootstrap.client.ui.ButtonGroup; import com.github.gwtbootstrap.client.ui.Tab; +import com.github.gwtbootstrap.client.ui.constants.IconType; +import com.github.gwtbootstrap.client.ui.constants.ToggleType; import com.google.gwt.core.client.GWT; import com.google.gwt.event.dom.client.ClickEvent; import com.google.gwt.event.dom.client.ClickHandler; @@ -21,60 +24,71 @@ public class GeonaDataViewMainPanel extends Composite { @UiField Tab mapTabPanel; - + @UiField Button dataPointSelection; - + @UiField Button dataBoxSelection; - + + @UiField + ButtonGroup buttonGroup; + private MapPanel mapPanel; private OpenLayerOSM map; - + public GeonaDataViewMainPanel() { initWidget(uiBinder.createAndBindUi(this)); mapPanel = new MapPanel("600px"); mapTabPanel.add(mapPanel); - - dataPointSelection.setToggle(true); - dataBoxSelection.setToggle(true); - bindHandlers(); + dataPointSelection.setIcon(IconType.SCREENSHOT); + dataBoxSelection.setIcon(IconType.BOOKMARK); } - + public void setMapHeight(int height) { - mapPanel.setHeight(height +"px"); + mapPanel.setHeight(height + "px"); } public MapPanel getMapPanel() { return mapPanel; } - + public void setMap(OpenLayerOSM map) { this.map = map; } - - public void bindHandlers(){ + + public void bindHandlers() { + dataPointSelection.addClickHandler(new ClickHandler() { - + @Override public void onClick(ClickEvent event) { - map.removeInteractions(); - map.addPointVectorSource(); + map.removeQueryInteractions(); + GWT.log("dataPointSelection.isActive() " + dataPointSelection.isActive()); + if (!dataPointSelection.isActive()) { + map.addPointVectorSource(); + } + dataBoxSelection.setActive(false); + //dataBoxSelection.getElement().removeClassName("active"); } }); - + dataBoxSelection.addClickHandler(new ClickHandler() { - + @Override public void onClick(ClickEvent event) { - map.removeInteractions(); - map.addExtentInteraction(); - + map.removeQueryInteractions(); + GWT.log("dataBoxSelection.isToggled() " + dataBoxSelection.isActive()); + if (!dataBoxSelection.isActive()) { + map.addExtentInteraction(); + } + dataPointSelection.setActive(false); + //dataPointSelection.getElement().removeClassName("active"); } }); - + } } diff --git a/src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/ui/GeonaDataViewMainPanel.ui.xml b/src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/ui/GeonaDataViewMainPanel.ui.xml index 79a7424..902d114 100644 --- a/src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/ui/GeonaDataViewMainPanel.ui.xml +++ b/src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/ui/GeonaDataViewMainPanel.ui.xml @@ -9,9 +9,11 @@ - - Data Point Selection - Data Box Selection + + Data Point + Selection + Data Box + Selection diff --git a/src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/ui/util/MutuallyExclusiveToggleButtonCollection.java b/src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/ui/util/MutuallyExclusiveToggleButtonCollection.java new file mode 100644 index 0000000..93a0199 --- /dev/null +++ b/src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/ui/util/MutuallyExclusiveToggleButtonCollection.java @@ -0,0 +1,45 @@ +package org.gcube.portlets.user.geoportaldataviewer.client.ui.util; + +import java.util.ArrayList; +import java.util.List; + +import com.github.gwtbootstrap.client.ui.Button; +import com.google.gwt.core.client.GWT; +import com.google.gwt.event.dom.client.ClickEvent; +import com.google.gwt.event.dom.client.ClickHandler; + +/** + * The Class MutuallyExclusiveToggleButtonCollection. + * + * @author Francesco Mangiacrapa at ISTI-CNR (francesco.mangiacrapa@isti.cnr.it) + * + * Oct 28, 2020 + */ +public class MutuallyExclusiveToggleButtonCollection { + + /** The list toggle button. */ + List