DEV Community

yeldo987
yeldo987

Posted on

Can we convert the following code to reactjs. please help

<!DOCTYPE html>


maptalks.GridLayer demo



<style>
    #map { width: 1350px; height: 600px; }
</style>

var map = new maptalks.Map("map",{
    center:  [91.89165, 25.5894],
    zoom: 7,

    attributionControl : {
        'content' : '&amp;copy; &lt;a href="http://www.openstreetmap.org/copyright"&gt;OpenStreetMap&lt;/a&gt; contributors'
    },
    baseLayer : new maptalks.TileLayer("tile",{
        urlTemplate: 'http://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png',
        subdomains  : ['a','b','c','d'],
    })
});

maptalks.Ajax.get('t.txt', function (err, data) {

    if (err || !data) {

        throw new Error('error when loading midcapse_12h_1km.txt');

    }


    var gridData = readData(data);

    // map.setCenter(gridData.center);
    var grid = new maptalks.GridLayer('grid', gridData, {
        symbol : {
            'lineWidth' : 0
        }
    }).addTo(map);
});

function readData(content) {
    const data = [];
    // grid's southwest and northeast
    var sw, ne,
        // grid width and grid height
        width, height,
        center,
        cols, rows,
        centerCol = 0,
        centerRow = 0;
    var line = 0;
    var dataRows = 0, dataLineCnt = 0;
    var dataLine = '';
    var currentLine = '';
    var cols;
              for (var i = 0, l = content.length; i &lt; l; i++) {
        var chr = content.charAt(i);

        if (line &lt; 2) {
            currentLine += chr;

        }
        if (chr === '\n') {
            if (line === 1) {
                var descripts = currentLine.split(' ');
                width = +(descripts[6]);

                height = +(descripts[7]);


                sw = new maptalks.Coordinate(descripts[8], descripts[10]);
                ne = new maptalks.Coordinate(descripts[9], descripts[11]);
                cols = +(descripts[12]),

                rows = +(descripts[13]),

                center = sw.add(ne)._multi(1 / 2);

                centerCol = Math.floor((center.x - sw.x) / width);

                centerRow = Math.floor((center.y - sw.y) / height);

            }
            if (line &lt; 2) {
                currentLine = '';
            }
            line++;
        } else if (line === 2) {
            dataLine += chr;
            if (chr === ' ') {
                dataRows++;
            }
            if (dataRows === cols) {
                var cells = dataLine.split(' ');
                for (var ii = 0; ii &lt; cells.length; ii++) {
                    var value = +cells[ii];
                    if (value !== 0) {
                        data.push([
                            ii - centerCol,
                            dataLineCnt - centerRow,
                            {
                                symbol : {
                                    'polygonFill' : gridValue2FillColor(value),
                                    'polygonOpacity' : 0.7,
                                    'lineWidth' : 0,
                                    'lineColor' : '#bbb',
                                    'lineOpacity' : 0
                                    // 'textName' : '{value}',
                                    // 'textSize' : { stops: [[14, 0], [18, 48]] }
                                },
                                properties : {
                                    value : value.toFixed(1)
                                }
                            }
                        ]);
                    }
                }
                dataLine = '';
                dataRows = 0;
                dataLineCnt++;
            }

        }
    }
    return {
        unit : 'degree',
        center : center,
        width :  width,
        height : height,
        cols      : [centerCol - cols, cols - centerCol],
        rows      : [centerRow - rows, rows - centerRow],
        data : data
    };
}

function gridValue2FillColor(value) {

if (value < 0.0 ) {
return "#FFFF00";
} else if (value < 0.1 ) {
return "#FF0000";
} else if (value < 40 ) {
return "#A52A2A";
}
}

Top comments (0)