4

I am trying to process a vector tile source in OpenLayers using the VectorTile layer and source in OpenLayers 4.1. The backend is serving pbf (mvt-based) tiles from an mbtiles source. The tiles have many tens of thousands of features in some cases.

I am using the ol VectorTile layer and source, and the 'ol-mapbox-style' library to process the styles. OpenLayers bogs down with anything other than a very simple point style - like a simple circle fill color. Even adding a stroke slows it down, and complex data-defined styles will stall out and lock the browser (coloring based on feature attribute values).

Leaflet and mapbox-gl both process the same data without a problem.

Here is the code I am using to create the layer and apply the styling.

  var tilegrid = ol.tilegrid.createXYZ({tileSize: 512, maxZoom: 22});
  var vLayer = new ol.layer.VectorTile({
    source: new ol.source.VectorTile({
      format: new ol.format.MVT(),
      tileGrid: tilegrid,
      tilePixelRatio: 8,
      url: "https://mydomain.www/myFeatureLayer/{z}/{x}/{y}.pbf",
    }),
    opacity: .73,
  })

  olms.applyStyle(vLayer, glStyle, 'sourceLayer').then(function() {
    self.map.addLayer(vLayer);
  });

Does anyone have insight on processing/styling large numbers of features in OL4, using a mapbox tile source, and mapbox style definitions?

I will note - after writing this, I did remove the olms library, and made the styling a very simple OpenLayers style:

  var vectorStyle = new ol.style.Style({
    fill: fill,
    stroke: stroke,
    image: circle
  });

That lets the map move again even with all these features - almost as performant as a regular map, though a bit laggy - but it would be much better if I could leverage the mapbox native styling.

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.