I want to connect wfs in json format from geoserver to openlayer in j2EE platform for web application i have this server :http://localhost:8085/ for geoserver :http://localhost:8080/
with this code:
// a tiled raster layer as the backdrop
var tiledRaster = new ol.layer.Tile({
source: new ol.source.OSM()
});
//faire une transformation des coordonnées du WGP en SPHERICAL MERCATOR
var center = ol.proj.transform([-5.833379, 35.7632691], 'EPSG:4326', 'EPSG:3857');
var view = new ol.View({
center: center,
zoom: 13,
minZoom: 5,
maxZoom: 18
});
//Affichage de l'echelle
var scaleLineControl = new ol.control.ScaleLine();
scaleLineControl.setUnits('metric');
var vectorSource = new ol.source.Vector({
loader: function() {
// use jsonp: false to prevent jQuery from adding the "callback"
// parameter to the URL
$.ajax('http://localhost:8080/geoserver/mymap/ows', {
type: 'GET',
data: {
service: 'WFS',
version: '1.0.0',
request: 'GetFeature',
typename: 'mymap:mar_adm4',
outputFormat: 'application/json',
srsname: 'EPSG:4326',
bbox: '-13.2287683486938,27.6288108825684,-0.936553478240967,35.9639053344727' + ',EPSG:4326'
}
/*,
strategy: ol.loadingstrategy.tile(ol.tilegrid.createXYZ({
maxZoom: 19
}))*/
});
}
});
/**
* JSONP WFS callback function.
* @param {Object} response The response object.
*/
window.loadFeatures = function(response) {
vectorSource.addFeatures(geojsonFormat.readFeatures(response));
};
var vector = new ol.layer.Vector({
source: vectorSource,
style: new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'rgba(0, 255, 0, 1.0)',
width: 2
})
})
});
//Creation de la map
var map = new ol.Map({
target: 'map',
controls: ol.control.defaults({
attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
collapsible: false
})
}).extend([
scaleLineControl
]),
layers: [
//tiledRaster ,
vector
],
view: view
});
zoomslider = new ol.control.ZoomSlider();
map.addControl(zoomslider);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="map" class="map" style="width:1400px;height:600px;background-color: orange ;align:left"></div>
I get this error:
XMLHttpRequest cannot load http://localhost:8080/geoserver/mymap/ows?service=WFS&version=1.0.0&request…8%2C27.6288108825684%2C-0.936553478240967%2C35.9639053344727%2CEPSG%3A4326. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8085' is therefore not allowed access.