0

I have been setting up my own MVT-service, which takes some GeoJSON input and convert it to MVT tiles. Then I've used Open Layers 4.6.5 to render the tiles.

The testdata I have been playing with is for the Norwegian Continental Shelf.

It all works great in EPSG:3857 projection, my tiles render nicely where they are supposed to be (I'm at zoom-level 2 for overview purposes). See the image below: EPSG:3857

However, I then try to render the same layer in WGS84 projection, and I get this display: EPSG:4326

This leaves two questions:

  1. The first thing is the location, ending up in Africa could mean that I have an axis problem. How do I change that?

  2. Secondly, despite of the location being wrong, I clearly see that the features still render in EPGS:3857 projection. So they are not reprojected according to the projection of the view object.

These are the relevant code snippets:

    //Define view projection to WGS 84
var viewProj = ol.proj.get('EPSG:4326');

//Use a baselayer with vector data
var countries = new ol.layer.Vector({
      source: new ol.source.Vector({
        url: 'https://openlayers.org/en/v4.6.5/examples/data/geojson/countries-110m.geojson',
        format: new ol.format.GeoJSON({
          defaultDataProjection: ol.proj.get('EPSG:4326'),
          featureProjection: viewProj
                })
              })
        });

//Define a "custom" tilegrid so that we match the projection (and can get proper resolutions for the view later on)
var tileGrid = ol.tilegrid.createXYZ({
        extent: viewProj.getExtent(),
        tileSize: 256
    });

//Set up the Vector Tile layer with a custom tileLoadFunction
var layer = new ol.layer.VectorTile({
    source: new ol.source.VectorTile({
    attributions: '...',
    format: new ol.format.MVT(),
    tileGrid: tileGrid,
    tilePixelRatio: 16,
    tileLoadFunction: function(tile, url) {
      tile.setLoader(function() {
            Promise.all([
              fetch(url,{
              headers: {
                    "my.custom.header": "my.custom.value"
                }
              }),
            ])
            .then(function(responses) {
              return Promise.all([
                responses[0].arrayBuffer()
              ]);
            })
            .then(function(results) {
              var format = tile.getFormat();
              var features = format.readFeatures(results[0]);
              tile.setFeatures(features);
              tile.setProjection(format.readProjection(results[0]));
            });
          });
        },
    url: "http://my/service/that/returns/mvt/tiles/"+"{z}/{x}/{y}.mvt?"
    })
});

//Create the map object 
var map = new ol.Map({
target: 'map',
view: new ol.View({
      center: ol.proj.fromLonLat([8.0, 65.822], viewProj),
      projection: viewProj,
      zoom: 2,
      //Set the extent and resolutions to match the defined projection/tileGrid
      extent: viewProj.getExtent(),
      resolutions: tileGrid.getResolutions()
    })
});

//add the layers
map.addLayer(countries);
map.addLayer(layer);

Your Answer

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

Browse other questions tagged or ask your own question.