1

Need help for displaying of local pbf file, it does show tiles but at wrong location and when zoom-in the whole feature set split into 4 locations.

First Openlayers v 4.6.5 is not displaying local pbf file

Here is code i am trying

   new ol.layer.Tile({
     source:new ol.source.VectorTile({
       format: new ol.format.MVT(),
       url:"rectangle-1.0.0.pbf"
     })
   })

openlayers load file "rectangle-1.0.0.pbf" as i can see in "Network Tab" of Chrome Developer's tool.

try above code with this style code also but shows nothing on map

     style: function(feature, res) {
           return new ol.style.Style({
               stroke: new ol.style.Stroke({
                   width: 2,
                   color: 'rgba(0, 102, 204)'
               })
           })
       },

i also try latest openlayers version 5.3.0 but it gives me error "Cannot read property 'ol_uid' of undefined".

Using help from @Mike it now shows pbf tiles with this code

   new ol.layer.VectorTile({
     source:new ol.source.VectorTile({
       format: new ol.format.MVT(),
       url:"rectangle-1.0.0.pbf"
     })
   })

but at wrong location and when i zoom-in whole feature set split into 4 locations and so on.

Note: Openlayers projection must be 4326 otherwise it does not display pbf files.i am creating pbf files with the help of geojson-vt "https://github.com/mapbox/geojson-vt". (From GeoJSON to pbf).the geojson must be in 4326.

What needs to be done?

zoom-in split features

4
  • A vector tile layer works with a grid of pbf tiles If you have a single pbf file try loading it using ol.layer.Vector and ol.source.Vector.
    – Mike
    Nov 15, 2018 at 11:01
  • i tried with your idea but it gives error "Cannot read property 'toString' of null"
    – yasir
    Nov 16, 2018 at 13:22
  • tried with ol.layer.VectorTile, new ol.source.VectorTile , it does show data on map, but data is not on it's original position but shifted. Can you tell me why? Thanks
    – yasir
    Nov 16, 2018 at 14:59
  • GeoJSON only has one projection and its not EPSG:4326
    – nmtoken
    Nov 18, 2018 at 15:37

1 Answer 1

0

You are displaying the same data from rectangle-1.0.0.pbf in every tile at each zoom level, which is why you can see a repeated pattern across the map. If you have a tile grid you need a url string containing {x} {y} and {z}. If you only have one tile (and therefore one zoom level) you should that as the minZoom and maxZoom on the source. I don't know what data is in your pbf file, however all I need to get a copy of the pbf in this mapbox demo https://github.com/mapbox/vt-pbf/tree/master/test/fixtures to give similar results to the geojson link is:

var map = new ol.Map({
  target: 'map',
  layers: [
    new ol.layer.Tile({
      source: new ol.source.OSM()
    }),
    new ol.layer.VectorTile({
      source:new ol.source.VectorTile({
      format: new ol.format.MVT(),
        url:"rectangle-{z}.{x}.{y}.pbf",
        tileGrid: ol.tilegrid.createXYZ({minZoom: 1, maxZoom: 1})
      })
    })
  ],
  view: new ol.View({
    center: [0,0],
    zoom: 0
  })
});

then zoom in to eastern Canada

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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