2

I have GeoDjango application for the visualization of household data with around 10k features. So I have used the vector tile for the visualization of these data. Now I faced the problem with the proper way of filtering the datasets.

Though I get an idea of filtering datasets with style function it didn't help much and I don't think its best way approach, as data is not actually filtered in this scenario.

I have used following code for the visualization purpose:

  var urlFilter = '/api/v1/data/house.mvt?tile{z}/{x}/{y}';
  var vectorHouse = new ol.layer.VectorTile({
    declutter: true,
    // style:simpleStyle,
    source: new ol.source.VectorTile({
      // tilePixelRatio: 20, // oversampling when > 1
      tileGrid: ol.tilegrid.createXYZ({maxZoom: 24}),
      // projection: 'EPSG:3857',
      format: new ol.format.MVT(),
      url: urlFilter
    })
   });
   
  spatialMap.addLayer(vectorHouse);

Now I am looking for the client-side filter based upon the properties like houseID. I am using Django as backend and djangorestframework-mvt for vector tile generation.

Any suggestions?

  • 1
    Filtering where? Server side or client side? How do you serve vector tiles? Which format? – TomazicM Aug 4 at 6:52
  • Basically I am focussed on client-side. Though I am using Djangorestframework-mvt, it supports basic filter but it doesn't fully satisfy my requirements. – Krishna Kafle Aug 4 at 6:56
  • 1
    Please edit your question and add this additional info and also relevant existing code of what you have tried so far, otherwise question is most likely to be closed (see gis.stackexchange.com/tour). – TomazicM Aug 4 at 7:34
  • okay thanks for suggestions I have edited the question – Krishna Kafle Aug 4 at 8:09
1

One possible way to filter MVT vector tile layer on the client side would be to use layer style option and set a style function that would set style only for selected features.

Below is a simple example of filtering only coastlines (based on official example at https://openlayers.org/en/latest/examples/vector-tile-info.html):

var defaultStyles = new ol.layer.Vector().getStyleFunction()();

var styleFunction = function(feature, resolution) {
  if (feature.get('layer') == 'Coastline') {
    return(defaultStyles);
  }
};

var map = new ol.Map({
  target: 'map',
  view: new ol.View({
    center: [0, 0],
    zoom: 2,
  }),
  layers: [
    new ol.layer.VectorTile({
      source: new ol.source.VectorTile({
        format: new ol.format.MVT(),
        url: 'https://basemaps.arcgis.com/v1/arcgis/rest/services/World_Basemap/VectorTileServer/tile/{z}/{y}/{x}.pbf',
      }),
      style: styleFunction
    })
  ],
});
| improve this answer | |
  • 2
    The MVT format has a similar filter format: new ol.format.MVT({layerName: 'layer', layers: ['Coastline']}), – Mike Aug 4 at 21:03
  • @Mike Yes, that's definitely even simpler when one wants only to apply filter, without changing the style. – TomazicM Aug 5 at 5:19
  • Thanks it helped – Krishna Kafle Aug 5 at 17:51
2

You can use filter in url or after download the data in following solution.

  var vectorHouse = new ol.layer.VectorTile({
    declutter: true,
    // style:simpleStyle,
    source: new ol.source.VectorTile({
      // tilePixelRatio: 20, // oversampling when > 1
      tileGrid: ol.tilegrid.createXYZ({maxZoom: 24}),
      // projection: 'EPSG:3857',
      loader: function(extent, resolution, projection) {        
        $.ajax({
          url: "your filter data url",
          success: function(data) {
             
             /// you can filter data here
             
            var features = new ol.format.MVT().readFeatures(data);
            farmersSource.addFeatures(features);
          }
        }); 
      }
    })
   });
| improve this answer | |
  • 1
    thanks got your idea and it helped to some extent – Krishna Kafle Aug 5 at 17:52

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