Grid as MVT / Dynamic Themes

[dbauszus-glx]

Grid layers were initially developed to for dynamic (bi-variate) themes. This required the whole viewport to be loaded from one request and the style to be calculated prior to setting the style.

[dbauszus-glx]

Going forward the geostats module will be used for different classification algorithm.

[dbauszus-glx]

The hard bit is to style layers once all tiles are loaded. This can be achieved with the rendercomplete event which must be called only once. The rendercomplete event should only be called by the first source.tileloadstart event after a map.movestart event.

let features = []
let jenks
let moveStart

source.on('tileloadstart', function () {
  layer.L.setStyle(addFeature)

  if (!moveStart) return;
  moveStart = false
  features = []
  _xyz.map.once('rendercomplete', renderComplete)
})

function renderComplete() {

  if (!features.length) return;
  const series = new geostats(features)
  jenks = series.getEqInterval(10)
  layer.L.setStyle(styleJenks)
}

_xyz.map.on('movestart', () => {
  moveStart = true
})

function addFeature(feature) {
    
  const val = feature.get(field)
    
  val && features.push(val)

  // just lines style.
  return new ol.style.Style({
    stroke: new ol.style.Stroke({
      color: '#333',
      width: 1
    }),
    fill: new ol.style.Fill({
      color: _xyz.utils.Chroma('#fff').alpha(0).rgba()
    })
  })
}

function styleJenks(feature) {

  const value = parseFloat(feature.get(field))

  // Create style object based on where the value falls into the jenks array
}