fixed CORS issue vs Geoserver

This commit is contained in:
Francesco Mangiacrapa 2021-09-03 18:22:42 +02:00
parent 30ab1b9185
commit 6f3b2e258f
5 changed files with 139 additions and 21 deletions

View File

@ -87,11 +87,12 @@ public class LightOpenLayerOSM {
// create a OSM-layer
XyzOptions osmSourceOptions = OLFactory.createOptions();
osmSourceOptions.setCrossOrigin("Anonymous");
// osmSourceOptions.setTileLoadFunction(null);
Osm osmSource = new Osm(osmSourceOptions);
LayerOptions osmLayerOptions = OLFactory.createOptions();
osmLayerOptions.setSource(osmSource);
Tile osmLayer = new Tile(osmLayerOptions);
// create a projection
projectionOptions.setCode(MAP_PROJECTION.EPSG_3857.getName());
@ -198,6 +199,7 @@ public class LightOpenLayerOSM {
// imageWMSParams.set("BBOX", bbox.getLowerLeftX()+","+bbox.getLowerLeftY()+","+bbox.getUpperRightX()+","+bbox.getUpperRightY());
ImageWmsOptions imageWMSOptions = OLFactory.createOptions();
imageWMSOptions.setCrossOrigin("Anonymous");
imageWMSOptions.setUrl(mapServerHost);
imageWMSOptions.setParams(imageWMSParams);
// imageWMSOptions.setRatio(1.5f);
@ -263,13 +265,13 @@ public class LightOpenLayerOSM {
public java.util.Map<String, String> getLayerURLsProperty() {
Collection<Base> layers = map.getLayers();
Collection<Base> layers = map.getLayerGroup().getLayers();
java.util.Map<String, String> mapLayerNameURL = new HashMap<String, String>();
if (layers != null) {
Base[] layersArr = layers.getArray();
for (int i = 0; i < layersArr.length; i++) {
Base layer = layersArr[i];
// GeoportalDataViewerConstants.printJsObj(layer);
//GeoportalDataViewerConstants.printJs(layer.toString());
if (layer instanceof Image) {
Image layerImage = (Image) layer;

View File

@ -140,7 +140,9 @@ public abstract class OpenLayerOSM {
// create a OSM-layer
XyzOptions osmSourceOptions = OLFactory.createOptions();
// osmSourceOptions.setCrossOrigin("Anonymous");
// osmSourceOptions.setTileLoadFunction(null);
Osm osmSource = new Osm(osmSourceOptions);
LayerOptions osmLayerOptions = OLFactory.createOptions();
osmLayerOptions.setSource(osmSource);

View File

@ -52,6 +52,8 @@ public class MapView extends Composite {
private LightOpenLayerOSM lightOLSM;
private String theMapId = null;
/**
* Instantiates a new map view.
*
@ -60,7 +62,7 @@ public class MapView extends Composite {
*/
public MapView(Coordinate centerTo, int zoom, String internalMapWidth, String internalMapHeight) {
initWidget(uiBinder.createAndBindUi(this));
String theMapId = "map" + Random.nextInt();
theMapId = "map" + Random.nextInt();
theMap.getElement().setId(theMapId);
theMap.setWidth(internalMapWidth);
theMap.setHeight(internalMapHeight);
@ -99,6 +101,10 @@ public class MapView extends Composite {
});
}
public String getPanelMapElementId() {
return theMapId;
}
/**
* Adds the marker.
*

View File

@ -1,5 +1,7 @@
package org.gcube.portlets.user.geoportaldataviewer.client.ui.products.concessioni;
import java.util.ArrayList;
import java.util.Collection;
import java.util.Map;
import org.gcube.application.geoportalcommon.shared.products.model.LayerConcessioneDV;
@ -14,6 +16,8 @@ import org.gcube.portlets.user.geoportaldataviewer.client.ui.util.CustomFlexTabl
import com.github.gwtbootstrap.client.ui.DropdownButton;
import com.github.gwtbootstrap.client.ui.NavLink;
import com.google.gwt.core.client.GWT;
import com.google.gwt.dom.client.Document;
import com.google.gwt.dom.client.Element;
import com.google.gwt.event.dom.client.ClickEvent;
import com.google.gwt.event.dom.client.ClickHandler;
import com.google.gwt.uibinder.client.UiBinder;
@ -69,20 +73,31 @@ public class LayerConcessioneView extends Composite {
DropdownButton downloadButt = new DropdownButton("download as...");
NavLink navLink = new NavLink("PNG");
HTML html = new HTML("<a id=\"image-download\" download=\"map.png\"></a>");
navLink.getElement().appendChild(html.getElement());
String htmlLinkId = mapView.getPanelMapElementId() + "-image-download";
final HTML htmlLink = new HTML("<a id=\"" + htmlLinkId + "\" download=\"map.png\"></a>");
navLink.getElement().appendChild(htmlLink.getElement());
navLink.addClickHandler(new ClickHandler() {
@Override
public void onClick(ClickEvent event) {
Map<String, String> mapLayerURLs = mapView.getLightOLSM().getLayerURLsProperty();
// Map<String, String> mapLayerURLs = mapView.getLightOLSM().getLayerURLsProperty();
// Collection<String> layerURLs = mapLayerURLs.values();
// ArrayList<String> layers = new ArrayList<String>(layerURLs);
// exportPDF(layers.get(0));
// String layerURL = mapLayerURLs.get(layerDV.getLayerName());
// GWT.log("layerDV name is: " + layerDV.getLayerName());
// if (layerURL != null)
// Window.open(layerURL, "_blank", null);
String layerURL = mapLayerURLs.get(layerDV.getLayerName());
GWT.log("layerDV name is: " + layerDV.getLayerName());
if (layerURL != null)
Window.open(layerURL, "_blank", null);
//downloadMap(mapView.getLightOLSM().getMap());
// GWT.log("GWT Map panel id: " + mapView.getPanelMapElementId());
// Element mapContainer =
// Document.get().getElementById(mapView.getPanelMapElementId());
// GWT.log("GWT Map panel id: " + mapContainer);
downloadMap(mapView.getLightOLSM().getMap(), mapView.getPanelMapElementId(), htmlLinkId);
// mapExport(mapView.getLightOLSM().getMap(), mapView.getPanelMapElementId());
}
});
@ -92,20 +107,31 @@ public class LayerConcessioneView extends Composite {
}
}
public static native void exportPDF(String layerURL) /*-{
var image = new Image(layerURL);
var doc = new $wnd.jspdf.jsPDF();
doc.addImage(layerURL, 'PNG', 0, 0,image.width,image.height);
doc.save("map.pdf")
}-*/;
/**
* Prints the.
*
* @param msg the msg
*/
public static native void downloadMap(ol.Map map)/*-{
public static native void downloadMap(ol.Map map, String mapPanelId, String linkId)/*-{
console.log("map: " + map);
map.once('rendercomplete', function() {
var mapCanvas = document.createElement('canvas');
var mapCanvas = $doc.createElement('canvas');
var size = map.getSize();
mapCanvas.width = size[0];
mapCanvas.height = size[1];
var mapContext = mapCanvas.getContext('2d');
Array.prototype.forEach.call(document
var mapContainer = $doc.querySelector('#'+mapPanelId);
//console.log("mapContainer:" +JSON.stringify(mapContainer, null, 4));
Array.prototype.forEach.call(mapContainer
.querySelectorAll('.ol-layer canvas'), function(canvas) {
if (canvas.width > 0) {
var opacity = canvas.parentNode.style.opacity;
@ -125,13 +151,91 @@ public class LayerConcessioneView extends Composite {
// link download attribute does not work on MS browsers
navigator.msSaveBlob(mapCanvas.msToBlob(), 'map.png');
} else {
console.log('qui');
// var link = document.getElementById('image-download');
// link.href = mapCanvas.toDataURL();
window.open(mapCanvas.toDataURL(),'_blank');
var link = $doc.getElementById(linkId);
link.href = mapCanvas.toDataURL();
link.click();
}
});
map.renderSync();
}-*/;
// public static native void mapExport(ol.Map map, String mapPanelId)/*-{
// try {
// var dims = {
// a0 : [ 1189, 841 ],
// a1 : [ 841, 594 ],
// a2 : [ 594, 420 ],
// a3 : [ 420, 297 ],
// a4 : [ 297, 210 ],
// a5 : [ 210, 148 ],
// };
//
// var resolutions = {
// 72 : 72,
// 150 : 150,
// 300 : 300,
// };
//
// //var format = document.getElementById('format').value;
// var format = 'a4';
// //var resolution = document.getElementById('resolution').value;
// var resolution = resolutions[150];
// var dim = dims[format];
// var width = Math.round((dim[0] * resolution) / 25.4);
// var height = Math.round((dim[1] * resolution) / 25.4);
// var size = map.getSize();
// var viewResolution = map.getView().getResolution();
//
// map.once('rendercomplete', function() {
// var mapCanvas = $doc.createElement('canvas');
// mapCanvas.width = width;
// mapCanvas.height = height;
// var mapContext = mapCanvas.getContext('2d');
// var selectId = "#" + mapPanelId;
// console.log('selectId: ' + selectId);
// var container = $doc.querySelector(selectId);
// console.log('container: ' + container);
// Array.prototype.forEach.call(container
// .querySelectorAll('.ol-layer canvas'),
// function(canvas) {
// canvas.crossOrigin = "anonymous"; // This enables CORS
// if (canvas.width > 0) {
// var opacity = canvas.parentNode.style.opacity;
// mapContext.globalAlpha = opacity === '' ? 1
// : Number(opacity);
// var transform = canvas.style.transform;
// // Get the transform parameters from the style's transform matrix
// var matrix = transform
// .match(/^matrix\(([^\(]*)\)$/)[1]
// .split(',').map(Number);
// // Apply the transform to the export map context
// CanvasRenderingContext2D.prototype.setTransform
// .apply(mapContext, matrix);
// mapContext.drawImage(canvas, 0, 0);
// }
// });
//
// //window.open(mapCanvas.toDataURL(), '_blank');
//
// var pdf = new $wnd.jspdf.jsPDF('landscape', undefined, format);
// pdf.addImage(mapCanvas.toDataURL('image/jpeg'), 'JPEG', 0, 0,
// dim[0], dim[1]);
// pdf.save('map.pdf');
// // Reset original map size
// map.setSize(size);
// map.getView().setResolution(viewResolution);
// exportButton.disabled = false;
// document.body.style.cursor = 'auto';
// });
// //map.renderSync();
// // Set print size
// var printSize = [width, height];
// map.setSize(printSize);
// var scaling = Math.min(width / size[0], height / size[1]);
// map.getView().setResolution(viewResolution / scaling);
// } catch (error) {
// window.alert(error);
// }
// }-*/;
}

View File

@ -20,6 +20,10 @@
href="//cdnjs.cloudflare.com/ajax/libs/nanogallery2/3.0.5/css/nanogallery2.min.css"
rel="stylesheet" type="text/css">
<script
src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.3.1/jspdf.umd.min.js"
type="text/javascript"></script>
<!-- -->
<!-- Consider inlining CSS to reduce the number of requested files -->
<!-- -->