It seems the transition from OL2 to OL3 will be harder than I thought. There are significant differences and the online support its still limited (regarding examples etc.)
I am trying to do something relatively simply..to display a WFS layer on my map using OpenLayers3. I have found this example and tried to modify it to my needs.
He presents 3 different ways to create a vector layer from geoserver and I used the last one (JSONP format). That means that I had to enable JSONP in geoserver as described here.
When I try to see the map I get a blank page with the error:
Uncaught TypeError: undefined is not a function on line 82 which is:
strategy: ol.loadingstrategy.tile(new ol.tilegrid.XYZ({If I change this line into:
strategy: ol.loadingstrategy.boxthen I see the map layer (but not the vector layer) and I get this error:
XMLHttpRequest cannot load http://localhost:8080/geoserver/wfs...8334.3618555046,4592871.718571385,EPSG:900913. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.This is my code in the init() function
function init() {var center = ol.proj.transform([23.709719,37.973333], 'EPSG:4326','EPSG:900913');var view = new ol.View ({ center: center, zoom: 12,});var newLayer = new ol.layer.Tile({ source: new ol.source.OSM()});// WFS layer from GeoserverloadFeatures = function(response) {formatWFS = new ol.format.WFS(),sourceVector.addFeatures(formatWFS.readFeatures(response));};sourceVector = new ol.source.Vector({loader: function(extent) { $.ajax('http://localhost:8080/geoserver/wfs',{ type: 'GET', data: { service: 'WFS', version: '1.1.0', request: 'GetFeature', typename: 'dSpatialAnalysis:categoriesdata', srsname: 'EPSG:900913', outputFormat: 'application/json', bbox: extent.join(',') + ',EPSG:900913' }, }).done(loadFeatures); }, strategy: ol.loadingstrategy.bbox});layerVector = new ol.layer.Vector({ source: sourceVector, style: new ol.style.Style({ stroke: new ol.style.Stroke({ color: 'rgba(0, 0, 255, 1.0)', width: 2 }) })});map = new ol.Map({ target:'map', renderer:'canvas', view: view, layers: [newLayer, layerVector],});}
I have downloaded the library and call it locally:
EDIT
Removing the port from the URL makes the request correctly and I can see in Firebug the response. But I still have issues displaying the points on the map.
أكثر...
I am trying to do something relatively simply..to display a WFS layer on my map using OpenLayers3. I have found this example and tried to modify it to my needs.
He presents 3 different ways to create a vector layer from geoserver and I used the last one (JSONP format). That means that I had to enable JSONP in geoserver as described here.
When I try to see the map I get a blank page with the error:
Uncaught TypeError: undefined is not a function on line 82 which is:
strategy: ol.loadingstrategy.tile(new ol.tilegrid.XYZ({If I change this line into:
strategy: ol.loadingstrategy.boxthen I see the map layer (but not the vector layer) and I get this error:
XMLHttpRequest cannot load http://localhost:8080/geoserver/wfs...8334.3618555046,4592871.718571385,EPSG:900913. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.This is my code in the init() function
function init() {var center = ol.proj.transform([23.709719,37.973333], 'EPSG:4326','EPSG:900913');var view = new ol.View ({ center: center, zoom: 12,});var newLayer = new ol.layer.Tile({ source: new ol.source.OSM()});// WFS layer from GeoserverloadFeatures = function(response) {formatWFS = new ol.format.WFS(),sourceVector.addFeatures(formatWFS.readFeatures(response));};sourceVector = new ol.source.Vector({loader: function(extent) { $.ajax('http://localhost:8080/geoserver/wfs',{ type: 'GET', data: { service: 'WFS', version: '1.1.0', request: 'GetFeature', typename: 'dSpatialAnalysis:categoriesdata', srsname: 'EPSG:900913', outputFormat: 'application/json', bbox: extent.join(',') + ',EPSG:900913' }, }).done(loadFeatures); }, strategy: ol.loadingstrategy.bbox});layerVector = new ol.layer.Vector({ source: sourceVector, style: new ol.style.Style({ stroke: new ol.style.Stroke({ color: 'rgba(0, 0, 255, 1.0)', width: 2 }) })});map = new ol.Map({ target:'map', renderer:'canvas', view: view, layers: [newLayer, layerVector],});}
I have downloaded the library and call it locally:
EDIT
Removing the port from the URL makes the request correctly and I can see in Firebug the response. But I still have issues displaying the points on the map.
أكثر...