OpenLayers does not display vector tiles in their origin projection

Question

I have 3 vector layers and one raster which I want to display with OpenLayers. I used Geoserver and Geowebcache for creating VectorTiles cache (in EPSG:4326). These cached layers displayed well in the standard Geoserver viewer.

Then I created map in OL (for this example I left only one raster (basemap) and one vector tile layer):

var layerCity = 'xxx:city',
    layerTerrain = 'xxx:terrain';

var epsg_projection = '4326';

var City = new ol.layer.VectorTile({
    source: new ol.source.VectorTile({
      tilePixelRatio: 1, // oversampling when > 1
      tileGrid: ol.tilegrid.createXYZ({maxZoom: 13}),
      format: new ol.format.MVT(),
      projection: 'EPSG:4326',
      url: 'http://xxx/geoserver/gwc/service/tms/1.0.0/' + layerCity + '@EPSG%3A' + epsg_projection +'@pbf/{z}/{x}/{-y}.pbf'
    }),
    style: function(feature) { //sdsds
      return styleCity = new ol.style.Style({
              image: new ol.style.RegularShape({
                  stroke: new ol.style.Stroke({
                    color: 'white',
                    width: 1.5
                  }),
                  fill: new ol.style.Fill({
                    color: 'black'
                  }),
                  radius: 5,
                  points: 4,
                  angle: Math.PI / 4,
             }),
             text: new ol.style.Text({
                stroke: new ol.style.Stroke({
                   color: '#ffffff',
                   width: 2.5
                 }),
                // fill: new ol.style.Fill({
                //    color: 'f2cb00',
                //    width: 2.5
                //  }),
                font: 'bold 14px Roboto, sans-serif',
                text: feature.get("name").toString(),
                offsetX: 17,
                offsetY: -12
            })
        })
    }
  });

var Terrain = new ol.layer.Tile({
    source: new ol.source.TileWMS({
      url: 'http://xxx/geoserver/gwc/service/wms?',
      params: {
        'LAYERS': layerTerrain,
        'TILED': true,
        'VERSION': '1.1.1',
        // 'SRS': 'EPSG:4326',
        'FORMAT': 'image/png8'
      }
  })
});


var map = new ol.Map({
    target: 'map-frame',
    view: new ol.View({
        projection: 'EPSG:4326',
        // center: [-26.103, -4.195], //Deois
        zoom: 2,
        minZoom: 0,
        maxZoom: 8
      //  projection: 'EPSG:4326'
    }),
    layers: [Terrain, City]
});

As you сan see I set projection for my map to "EPSG:4326", because default prj is 3857.

But unfortunatly I got a partial result: displaying of basemap without vectortile layer visualisation. Also I used Chrome developer extension for checking donwloads. So I got about 15 pbf files without fails but I don't see that on the map!

However, if I change (or remove) map projection to 3857, I get the vector tile visualisation. I think it must sounds strange because on the server I have tiles' directories only with such format: "EPSG_4326...".

I have no any idea for solving this problem.

Answer 1

After understanding your question, The problem is how you define the projection of your vector layers, your tiles and map all in [EPSG:4326] projection. So in this case, you need define your vector layers as:

var City = new ol.layer.VectorTile({
source: new ol.source.VectorTile({
  tilePixelRatio: 1, // oversampling when > 1
  tileGrid: ol.tilegrid.createXYZ({maxZoom: 13}),
  format: new ol.format.MVT({
  defaultDataProjection: 'EPSG:4326' 
 }),
  url: 'http://xxx/geoserver/gwc/service/tms/1.0.0/' + layerCity + '@EPSG%3A' + epsg_projection +'@pbf/{z}/{x}/{-y}.pbf'
}),

A working example with same procedure