0

I am trying to get pbf vector tiles which are served by Geoserver to properly render in Openlayers 4 using the code below:

<!DOCTYPE html>
<html>
<head>
  <title>Vector tiles</title>
    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
    <script src="https://openlayers.org/en/v4.6.5/build/ol.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.4.4/proj4.js"></script>
  <style>
    html, body {
      font-family: sans-serif;
      width: 100%;
    }
    .map {
      height: 100%;
      width: 100%;
    }
  </style>
</head>
<body>
  <h3>Vector tiles</h3>
  <div id="map" class="map"></div>
  <script>

      ol.proj.setProj4(proj4);
      proj4.defs('EPSG:27700','+proj=tmerc +lat_0=49 +lon_0=-2 +k=0.9996012717 +x_0=400000 +y_0=-100000 +ellps=airy +towgs84=446.448,-125.157,542.06,0.15,0.247,0.842,-20.489 +units=m +no_defs');
      const proj27700 = ol.proj.get('EPSG:27700');
      const center_point = [385554,157595]; 

  var style_simple = new ol.style.Style({
    fill: new ol.style.Fill({
      color: '#ADD8E6'
    }),
    stroke: new ol.style.Stroke({
      color: '#880000',
      width: 1
    })
  });

  function simpleStyle(feature) {
    return style_simple;
  }

  var layers = [
        new ol.layer.Tile({
          opacity: 1,
          source: new ol.source.XYZ({
            attributions: 'Tiles © <a href="https://services.arcgisonline.com/ArcGIS/' +
            'rest/services/World_Imagery/MapServer">ArcGIS</a> 2018',
          url: 'https://server.arcgisonline.com/ArcGIS/rest/services/' +
            'World_Imagery/MapServer/tile/{z}/{y}/{x}'
          })
        }),  

  new ol.layer.VectorTile({
      style:simpleStyle,
      source: new ol.source.VectorTile({
        tilePixelRatio: 1, // oversampling when > 1            
        tileGrid: ol.tilegrid.createXYZ({maxZoom: 21, extent: [-84702.61914736108, -9272.577651805477, 676223.7241900009, 1242876.667023777]}),  
        format: new ol.format.MVT(),
        projection: proj27700,
        url: 'http://localhost:8080/geoserver/gwc/service/tms/1.0.0/ui:UI00000BVBB@EPSG%3A27700@pbf/{z}/{x}/{-y}.pbf'
      })
    })]


  var map = new ol.Map({
    target: 'map',
    layers: layers,
    view: new ol.View({
      center: center_point,
      projection: proj27700,
      zoom: 10
    }),

  });
  </script>
</body>
</html>

The problem is that the vector tiles are always offset, see image below:

enter image description here

I'm pretty sure it has something to do with the extent. I have tried both "Compute from data" and "Compute from SRS bounds" for the Native Bounding Box in Geoserver and inputting those extents into the Openlayers extent with no improvement. Does anyone have any suggestions/solutions?

  • I would set the extent to 0,0,700000,1300000 in both geoserver and openlayers – Ian Turton Jul 25 '18 at 12:10
  • I have tried the extent 0,0,700000,1300000 for both geoserver and openlayers and it didn't work, the strange thing is the same layer as WMS tiles works perfectly. – Trashmonk Jul 25 '18 at 18:21

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.