fixed CORS issue vs Geoserver
This commit is contained in:
parent
30ab1b9185
commit
6f3b2e258f
|
@ -87,11 +87,12 @@ public class LightOpenLayerOSM {
|
||||||
|
|
||||||
// create a OSM-layer
|
// create a OSM-layer
|
||||||
XyzOptions osmSourceOptions = OLFactory.createOptions();
|
XyzOptions osmSourceOptions = OLFactory.createOptions();
|
||||||
|
osmSourceOptions.setCrossOrigin("Anonymous");
|
||||||
|
// osmSourceOptions.setTileLoadFunction(null);
|
||||||
|
|
||||||
Osm osmSource = new Osm(osmSourceOptions);
|
Osm osmSource = new Osm(osmSourceOptions);
|
||||||
LayerOptions osmLayerOptions = OLFactory.createOptions();
|
LayerOptions osmLayerOptions = OLFactory.createOptions();
|
||||||
osmLayerOptions.setSource(osmSource);
|
osmLayerOptions.setSource(osmSource);
|
||||||
|
|
||||||
Tile osmLayer = new Tile(osmLayerOptions);
|
Tile osmLayer = new Tile(osmLayerOptions);
|
||||||
// create a projection
|
// create a projection
|
||||||
projectionOptions.setCode(MAP_PROJECTION.EPSG_3857.getName());
|
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());
|
// imageWMSParams.set("BBOX", bbox.getLowerLeftX()+","+bbox.getLowerLeftY()+","+bbox.getUpperRightX()+","+bbox.getUpperRightY());
|
||||||
|
|
||||||
ImageWmsOptions imageWMSOptions = OLFactory.createOptions();
|
ImageWmsOptions imageWMSOptions = OLFactory.createOptions();
|
||||||
|
imageWMSOptions.setCrossOrigin("Anonymous");
|
||||||
imageWMSOptions.setUrl(mapServerHost);
|
imageWMSOptions.setUrl(mapServerHost);
|
||||||
imageWMSOptions.setParams(imageWMSParams);
|
imageWMSOptions.setParams(imageWMSParams);
|
||||||
// imageWMSOptions.setRatio(1.5f);
|
// imageWMSOptions.setRatio(1.5f);
|
||||||
|
@ -263,13 +265,13 @@ public class LightOpenLayerOSM {
|
||||||
|
|
||||||
public java.util.Map<String, String> getLayerURLsProperty() {
|
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>();
|
java.util.Map<String, String> mapLayerNameURL = new HashMap<String, String>();
|
||||||
if (layers != null) {
|
if (layers != null) {
|
||||||
Base[] layersArr = layers.getArray();
|
Base[] layersArr = layers.getArray();
|
||||||
for (int i = 0; i < layersArr.length; i++) {
|
for (int i = 0; i < layersArr.length; i++) {
|
||||||
Base layer = layersArr[i];
|
Base layer = layersArr[i];
|
||||||
// GeoportalDataViewerConstants.printJsObj(layer);
|
//GeoportalDataViewerConstants.printJs(layer.toString());
|
||||||
if (layer instanceof Image) {
|
if (layer instanceof Image) {
|
||||||
Image layerImage = (Image) layer;
|
Image layerImage = (Image) layer;
|
||||||
|
|
||||||
|
|
|
@ -140,6 +140,8 @@ public abstract class OpenLayerOSM {
|
||||||
|
|
||||||
// create a OSM-layer
|
// create a OSM-layer
|
||||||
XyzOptions osmSourceOptions = OLFactory.createOptions();
|
XyzOptions osmSourceOptions = OLFactory.createOptions();
|
||||||
|
// osmSourceOptions.setCrossOrigin("Anonymous");
|
||||||
|
// osmSourceOptions.setTileLoadFunction(null);
|
||||||
|
|
||||||
Osm osmSource = new Osm(osmSourceOptions);
|
Osm osmSource = new Osm(osmSourceOptions);
|
||||||
LayerOptions osmLayerOptions = OLFactory.createOptions();
|
LayerOptions osmLayerOptions = OLFactory.createOptions();
|
||||||
|
|
|
@ -52,6 +52,8 @@ public class MapView extends Composite {
|
||||||
|
|
||||||
private LightOpenLayerOSM lightOLSM;
|
private LightOpenLayerOSM lightOLSM;
|
||||||
|
|
||||||
|
private String theMapId = null;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Instantiates a new map view.
|
* Instantiates a new map view.
|
||||||
*
|
*
|
||||||
|
@ -60,7 +62,7 @@ public class MapView extends Composite {
|
||||||
*/
|
*/
|
||||||
public MapView(Coordinate centerTo, int zoom, String internalMapWidth, String internalMapHeight) {
|
public MapView(Coordinate centerTo, int zoom, String internalMapWidth, String internalMapHeight) {
|
||||||
initWidget(uiBinder.createAndBindUi(this));
|
initWidget(uiBinder.createAndBindUi(this));
|
||||||
String theMapId = "map" + Random.nextInt();
|
theMapId = "map" + Random.nextInt();
|
||||||
theMap.getElement().setId(theMapId);
|
theMap.getElement().setId(theMapId);
|
||||||
theMap.setWidth(internalMapWidth);
|
theMap.setWidth(internalMapWidth);
|
||||||
theMap.setHeight(internalMapHeight);
|
theMap.setHeight(internalMapHeight);
|
||||||
|
@ -99,6 +101,10 @@ public class MapView extends Composite {
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
public String getPanelMapElementId() {
|
||||||
|
return theMapId;
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Adds the marker.
|
* Adds the marker.
|
||||||
*
|
*
|
||||||
|
|
|
@ -1,5 +1,7 @@
|
||||||
package org.gcube.portlets.user.geoportaldataviewer.client.ui.products.concessioni;
|
package org.gcube.portlets.user.geoportaldataviewer.client.ui.products.concessioni;
|
||||||
|
|
||||||
|
import java.util.ArrayList;
|
||||||
|
import java.util.Collection;
|
||||||
import java.util.Map;
|
import java.util.Map;
|
||||||
|
|
||||||
import org.gcube.application.geoportalcommon.shared.products.model.LayerConcessioneDV;
|
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.DropdownButton;
|
||||||
import com.github.gwtbootstrap.client.ui.NavLink;
|
import com.github.gwtbootstrap.client.ui.NavLink;
|
||||||
import com.google.gwt.core.client.GWT;
|
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.ClickEvent;
|
||||||
import com.google.gwt.event.dom.client.ClickHandler;
|
import com.google.gwt.event.dom.client.ClickHandler;
|
||||||
import com.google.gwt.uibinder.client.UiBinder;
|
import com.google.gwt.uibinder.client.UiBinder;
|
||||||
|
@ -69,20 +73,31 @@ public class LayerConcessioneView extends Composite {
|
||||||
|
|
||||||
DropdownButton downloadButt = new DropdownButton("download as...");
|
DropdownButton downloadButt = new DropdownButton("download as...");
|
||||||
NavLink navLink = new NavLink("PNG");
|
NavLink navLink = new NavLink("PNG");
|
||||||
HTML html = new HTML("<a id=\"image-download\" download=\"map.png\"></a>");
|
String htmlLinkId = mapView.getPanelMapElementId() + "-image-download";
|
||||||
navLink.getElement().appendChild(html.getElement());
|
final HTML htmlLink = new HTML("<a id=\"" + htmlLinkId + "\" download=\"map.png\"></a>");
|
||||||
|
navLink.getElement().appendChild(htmlLink.getElement());
|
||||||
navLink.addClickHandler(new ClickHandler() {
|
navLink.addClickHandler(new ClickHandler() {
|
||||||
|
|
||||||
@Override
|
@Override
|
||||||
public void onClick(ClickEvent event) {
|
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);
|
|
||||||
|
|
||||||
//downloadMap(mapView.getLightOLSM().getMap());
|
|
||||||
|
// String layerURL = mapLayerURLs.get(layerDV.getLayerName());
|
||||||
|
// GWT.log("layerDV name is: " + layerDV.getLayerName());
|
||||||
|
// if (layerURL != null)
|
||||||
|
// Window.open(layerURL, "_blank", null);
|
||||||
|
|
||||||
|
// 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.
|
* Prints the.
|
||||||
*
|
*
|
||||||
* @param msg the msg
|
* @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);
|
console.log("map: " + map);
|
||||||
|
|
||||||
map.once('rendercomplete', function() {
|
map.once('rendercomplete', function() {
|
||||||
var mapCanvas = document.createElement('canvas');
|
var mapCanvas = $doc.createElement('canvas');
|
||||||
var size = map.getSize();
|
var size = map.getSize();
|
||||||
mapCanvas.width = size[0];
|
mapCanvas.width = size[0];
|
||||||
mapCanvas.height = size[1];
|
mapCanvas.height = size[1];
|
||||||
var mapContext = mapCanvas.getContext('2d');
|
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) {
|
.querySelectorAll('.ol-layer canvas'), function(canvas) {
|
||||||
if (canvas.width > 0) {
|
if (canvas.width > 0) {
|
||||||
var opacity = canvas.parentNode.style.opacity;
|
var opacity = canvas.parentNode.style.opacity;
|
||||||
|
@ -125,13 +151,91 @@ public class LayerConcessioneView extends Composite {
|
||||||
// link download attribute does not work on MS browsers
|
// link download attribute does not work on MS browsers
|
||||||
navigator.msSaveBlob(mapCanvas.msToBlob(), 'map.png');
|
navigator.msSaveBlob(mapCanvas.msToBlob(), 'map.png');
|
||||||
} else {
|
} else {
|
||||||
console.log('qui');
|
var link = $doc.getElementById(linkId);
|
||||||
// var link = document.getElementById('image-download');
|
link.href = mapCanvas.toDataURL();
|
||||||
// link.href = mapCanvas.toDataURL();
|
link.click();
|
||||||
window.open(mapCanvas.toDataURL(),'_blank');
|
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
map.renderSync();
|
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);
|
||||||
|
// }
|
||||||
|
// }-*/;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
@ -20,6 +20,10 @@
|
||||||
href="//cdnjs.cloudflare.com/ajax/libs/nanogallery2/3.0.5/css/nanogallery2.min.css"
|
href="//cdnjs.cloudflare.com/ajax/libs/nanogallery2/3.0.5/css/nanogallery2.min.css"
|
||||||
rel="stylesheet" type="text/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 -->
|
<!-- Consider inlining CSS to reduce the number of requested files -->
|
||||||
<!-- -->
|
<!-- -->
|
||||||
|
|
Loading…
Reference in New Issue