0
votes

I'm trying to show a polygon feature and an OSM basemap from my geoserver using WFS and openlayers

  1. layer name: utmzones
  2. Native SRS: EPSG:4326
  3. workspase name: utmzone (WFS service enabled)
  4. Namespace URI: www.hamid1.com(not exsist really!)
  5. geoserver url: localhost:8080/geoserver

Using the code mentioned below the OSM layer is shown in the browser but I can't see the polygon layer.

import 'ol/ol.css';
import GeoJSON from 'ol/format/GeoJSON';
import Map from 'ol/Map';
import VectorSource from 'ol/source/Vector';
import {all} from 'ol/loadingstrategy';
import View from 'ol/View';
import XYZ from 'ol/source/XYZ';
import OSM from 'ol/source/OSM';
import {Stroke, Style} from 'ol/style';
import {Tile as TileLayer, Vector as VectorLayer} from 'ol/layer';

var vectorSource = new VectorSource({
  format: new GeoJSON(),
  url: function (extent) {
    return (
      'http://localhost:8080/geoserver/wfs?service=WFS&' +
      'version=1.0.0&request=GetFeature&typename=utmzone:utmzones&' +
      'outputFormat=application/json&srsname=EPSG:4326&' +
      extent.join(',') +
      ',EPSG:4326'
    );
  },
  strategy:all,
});

var vector = new VectorLayer({
  source: vectorSource,
  style: new Style({
    stroke: new Stroke({
      color: 'rgba(0, 0, 255, 1.0)',
      width: 2,
    }),
  }),
});


var raster =new TileLayer({
    source: new OSM(),
  });

var map = new Map({
  layers: [raster, vector],
  target: document.getElementById('map'),
  view: new View({
    center: [0 , 0],
    maxZoom: 19,
    zoom: 1,
  }),
});

Everytime the map loads, this message shows up in geoserver log:

24 Oct 20:46:04 INFO [geoserver.wfs] -
Request: getServiceInfo
24 Oct 20:46:04 INFO [geoserver.wfs] -
Request: getFeature
    service = WFS
    version = 1.0.0
    baseUrl = http://localhost:8080/geoserver/
    query[0]:
        srsName = EPSG:4326
        typeName[0] = {www.hamid1.com}utmzones
    outputFormat = application/json
    resultType = results
24 Oct 20:46:04 INFO [wfs.json] - about to encode JSON

It seems that geoserver recieves the request and the response has been sent but I can't see the feature on the web map.

The feature can be seen by WMS but there is the same problem using gefeatureinfourl

I was wondering if anybody could help me with this problem.

2
If you zoom in you may find your features within 180 meters of [0, 0]. Your view is EPSG:3857, if the server supports requests for EPSG:3857 you should change the url to reflect that, otherwise you will need a loader function to transform the geometries. With strategy all you do not need a url function to include the extent since it is infinite, but with other strategies you also need to transform the extent from the view projection to request projection if they are different. - Mike
thank for reply mike To prevent data loss on the map i used a very big vactor file that It covers almost half of the earth's surface ! nithing shows in the map - hamidmadani
Nothing will show if the request is invalid , and it may be too small to see if the data is in the wrong projection. - Mike
i changed the url and nothing changed and trying to change the projection of view to 'EPSG:4326' results same is it possible that i have a mistake in layer or workspace configuration? - hamidmadani

2 Answers

0
votes

With strategy all you will be requesting bbox=-Infinity,-Infinity,Infinity,Infinity which is not needed and may be rejected by the server. You can replace the url function with a simple string:

url: 
  'http://localhost:8080/geoserver/wfs?service=WFS&' +
  'version=1.0.0&request=GetFeature&typename=utmzone:utmzones&' +
  'outputFormat=application/json&srsname=EPSG:4326',

When using the GeoJSON format the result should be automatically transformed to the view projection.

0
votes

finally i found the main problem After running the web page, the following message was displayed in the browser console, and i was unaware

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:8080/geoserver/rest/. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing). and it resolved by Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:8080/geoserver/rest/. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).

and it resolved by uncommenting crossOrigin lines in web.xml file in geoserver directiory this page helped me:

https://docs.geoserver.org/latest/en/user/production/container.html