TransWikia.com

Smoothing isobar d3 js from GeoTIFF

Geographic Information Systems Asked on January 20, 2021

I’m using d3.js to display isobars from GeoTIFF in Leaflet.
The problem I would like to solve is the smoothing of those isolines.

Here is my code:

var xhr = new XMLHttpRequest();
    xhr.open('GET', `./20210129T030000Z_1002.000.tif`, true);
    console.log(xhr)
    xhr.responseType = 'arraybuffer';
    xhr.onload = function () {
        console.log(this.response)
        var tiff = GeoTIFF.parse(this.response);
        var image = tiff.getImage();
        var tiffWidth = image.getWidth();
        var tiffHeight = image.getHeight();
        var rasters = image.readRasters();
        var tiepoint = image.getTiePoints()[0];
        var pixelScale = image.getFileDirectory().ModelPixelScale;
        var geoTransform = [tiepoint.x, pixelScale[0], 0, tiepoint.y, 0, -1 * pixelScale[1]];
        console.log(geoTransform)

        var pressData = new Array(tiffHeight);
        for (var j = 0; j < tiffHeight; j++) {
            pressData[j] = new Array(tiffWidth);
            for (var i = 0; i < tiffWidth; i++) {
                pressData[j][i] = (rasters[0][i + j * tiffWidth] / 100).toFixed(2);
            }
        }
        var intervalsPress = [970, 972, 974, 976, 978, 980, 982, 984, 986, 988, 990, 992, 994, 996, 998,
            1000, 1002, 1004, 1006, 1008, 1010, 1012, 1014, 1016, 1018, 1020, 1022, 1024, 1026, 1028];
        var isobars = rastertools.isolines(pressData, geoTransform, intervalsPress);
        console.log(isobars)

        isobarsLayer = L.geoJSON(isobars, {
            style: {
                "color": "#f00",
                "weight": 1,
                "opacity": 0.65
            }
        });
        isobarsLayer.addTo(map)
    }
    xhr.send()

Here is the output:
enter image description here

Can I use any interpolation like bilinear or bicubic? If yes, how?
Or more easy, can I smooth the lines?

One Answer

A simple solution would be to use Leaflet's built-in SmoothFactor argument that can be passed to the L.geoJSON directly.

In your case it would be:

isobarsLayer = L.geoJSON(isobars, {
            style: {
                "color": "#f00",
                "weight": 1,
                "opacity": 0.65,
            },{'smoothFactor':100}) #test to get the desired smoothing value

Here is the smoothing illustrated on a single polyline:

Before:

Before smoothing

After:

enter image description here

Docs: https://leafletjs.com/reference-1.7.1.html#polyline-smoothfactor

Answered by 15Step on January 20, 2021

Add your own answers!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP