2

I am using openlayers 3 to try and get vector data from my Geoserver 2.12.0. I am using ol.layer.vectorTile and ol.source.VectorTile to build my vector layer. The main goal is to pull polygon vector data from geoserver so the client can edit/save the polygon. I am using this as a reference to pull the Vector Tile data. I have completed everything on the tutorial except the "Create OpenLayers application" section. This is my openlayer's javascript:

var longitude = -97.587453;
var latitude = 35.471398;
var zoom = 11;
var format = 'application/x-protobuf;type=mapbox-vector';
var layer = 'test:poly';
var projection_epsg_no = '4326';

var layers = [
    new ol.layer.Tile({
        source: new ol.source.OSM()
    }),
new ol.layer.VectorTile({
        style:defaultFeature,
        source: new ol.source.VectorTile({
            tilePixelRatio: 1,
            tileGrid: ol.tilegrid.createXYZ({maxZoom: 19}),
            format: new ol.format.MVT(),
            url: 'http://192.168.10.15:8080/geoserver/gwc/service/tms/1.0.0/' + layer + '@EPSG%3A'+projection_epsg_no+'@pbf/{z}/{x}/{-y}.pbf'
        })
    })
];
var projection = "EPSG:4326";
var latLong = ol.proj.fromLonLat([longitude, latitude]);

var myControl = new ol.control.Control({target: $('#map-panel')});

var controls = [ol.control.Zoom, myControl];

var map = new ol.Map({
    layers: layers,
    target: 'map',
    control: controls,
    view: new ol.View({
        center: latLong,
        zoom: zoom
    })
});

This is the error I get from Chrome's Developer Tool Console:

Failed to load http://192.168.10.15:8080/geoserver/gwc/service/tms/1.0.0/test:poly@EPSG%3A4326@pbf/11/472/1228.pbf: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://192.168.10.15' is therefore not allowed access.

If I change the url to:

url: '/geoserver/gwc/service/tms/1.0.0/' + layer + '@EPSG%3A'+projection_epsg_no+'@pbf/{z}/{x}/{-y}.pbf'

I get the following error:

GET http://192.168.10.15/geoserver/gwc/service/tms/1.0.0/test:poly@EPSG%3A4326@pbf/11/472/1228.pbf 404 (Not Found)

How do I pull in vector data from my geoserver using Openlayer's VectorTiles?

  • Do you have CORS access on? – Ian Turton Oct 21 '17 at 11:26
  • 1
    The origin http://192.168.10.15 is different from http://192.168.10.15:8080. Check other question How to enable CORS in Tomcat – jgrocha Oct 21 '17 at 14:50
  • @jgrocha put that as the answer and I will give you credit. – user908759 Oct 25 '17 at 3:45
2

For security reasons, browsers restrict cross-origin HTTP requests initiated from within scripts.

A user agent makes a cross-origin HTTP request when it requests a resource from a different domain, protocol, or port than the one from which the current document originated.

In your case, you requested a document from http://192.168.10.15 which is considered different from http://192.168.10.15:8080 (because you are using a different port).

To solve this problem, the easiest solution is to enable CORS in Tomcat.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.