zzcyrus / Leaflet.Tile.PixelLayer

Use grid vector data to render colorize pixels in leaflet tilelayer.

Leaflet.Tile.PixelLayer

A pixel layer using Leaflet.TileLayer based on grid vector data, mostly use in meteorological data like NC or Grib2.

中文文档 相关blog说明

Demo

demo

Usage

var tilePixelLayer = L.tilePixelLayer({
  data: data,  //     see demo/data.json,
  url: './data.png', // need this option if use png data
  overlayAlpha: 230,  //  0-255 layer opacity alpha in rgba
  gradient: [
    [233.15, [56, 4, 45]],
    [243.15, [48, 0, 106]],
    ...       // color gradient, [ value,[ r, g, b ] ]
  ]
})
map.addLayer(tilePixelLayer)

Data process

python ./data/download.py --timestamp 2019111406 --output_dir ./output

Dev

npm start # local development server

TODO

• click event
• custom color scale
• more map option
• ui control example
• data generate example