Problem loading Vector Tiles in OpenLayers using geojson-vt

Question

I'm using OpenLayers with Ionic Framework. Now I'm trying to use geojson-vt with the example provided by OL example page . I can see that the GeoJSON file is loaded in the Network console tab, but it does not show up in map after zoom 0 or 1 and in these zooms, it shows misplaced.

What I trying to do:

var tilePixels = new Projection({
      code: "EPSG:3857"
//  code: 'TILE_PIXELS',
//  units: 'tile-pixels'
});

var url = 'assets/geojson/agriculture.geojson';
fetch(url).then(function(response) {
    return response.json();
}).then(function(json) {
    var tileIndex = geojsonvt(json, {
          maxZoom: 14,
            tolerance: 3,
            extent: 4096,
            buffer: 64,
            debug: 1,
            lineMetrics: false,
            promoteId: null,
            generateId: false,  
            indexMaxZoom: 5,
            indexMaxPoints: 100000
    });
    var vectorSource = new VectorTileSource({
        format: new GeoJSON(),
        tileLoadFunction: function(tile) {
            var format = tile.getFormat();
            var tileCoord = tile.getTileCoord();
            var data = tileIndex.getTile(tileCoord[0], tileCoord[1], -tileCoord[2] - 1);

            var features = format.readFeatures(
                JSON.stringify({
                    type: 'FeatureCollection',
                    features: data ? data.features : []
                }, replacer)
            );
            tile.setLoader(function() {
                tile.setFeatures(features);
                tile.setProjection(tilePixels);
            });
        },
        url: 'data:' // arbitrary url, we don't use it in the tileLoadFunction 
    });
    var vectorLayer = new VectorTileLayer({
        source: vectorSource
    });             
    that.map.addLayer(vectorLayer);
});

I tried to change the dataProjection attribute inside the "format: new GeoJSON()" to EPSG:31982 (my data projection) and EPSG:3857, but can't see any visible changes. I run a "console.log(features)" bellow the "format" inside tileLoadFunction to see what is generated, This was the output:

0: Feature
    dispatching_: {}
    disposed_: false
    geometryChangeKey_: {bindTo: Feature, callOnce: false, listener: ƒ, target: Polygon, type:  "change", …}
    geometryName_: "geometry"
    id_: undefined
    listeners_: {change:geometry: Array(1)}
    ol_lm: {change:geometry: Array(1)}
    ol_uid: "38"
    pendingRemovals_: {}
    revision_: 2
    styleFunction_: undefined
    style_: null
    values_:
        AREA_HA: "0.53804709057583"
        CLASS: "AGRICULTURE"
        SHAPE_Area: "5380.4709057583"
        SHAPE_Length: "352.045733732799"
        geometry: Polygon
            dispatching_: {}
            disposed_: false
            ends_: [74]
            extentRevision_: -1
            extent_: (4) [Infinity, Infinity, -Infinity, -Infinity]
            flatCoordinates: (74) [5992922, 1487, 5992964, 1441, 5992982, 1378, 5992980, 1259, 5992875, 694, 5992807, 268, 5992751, 0, 5992574, 0,  5992503,    240, 5992386, 1020, 5992361, 1297, 5992373, 1462, 5992390, 1588, 5992337, 1652, 5992252, 1727, 5992156, 1781, 5992081, 1812,    5992023, 1804, 5991973, 1767, 5991896, 1604, 5991775, 1214, 5991772, 1081, 5991788, 901, 5991836, 585,  5991849, 460, 5991976, 210, 5992048, 757, 5992146, 963, 5992249, 1064, 5992375, 1105, 5992577,  1129, 5992689, 1175, 5992769, 1268, 5992848, 1392, 5992852, 1520, 5992877, 1527, 5992922, 1487]
            flatInteriorPointRevision_: -1
            flatInteriorPoint_: null
            layout: "XY"
            listeners_: {change: Array(1)}
            maxDeltaRevision_: -1
            maxDelta_: -1
            ol_lm: {change: Array(1)}
            ol_uid: "37"
            orientedFlatCoordinates_: null
            orientedRevision_: -1
            pendingRemovals_: {}
            revision_: 2
            simplifiedGeometryCache: {1531607591.9622366: Polygon}
            simplifiedGeometryMaxMinSquaredTolerance: 0
            simplifiedGeometryRevision: 2
            stride: 2
            values_: {}
            __proto__: SimpleGeometry
        __proto__: Object
    __proto__: BaseObject

Then I run a "console.log(format)" and this was the output:

GeoJSON {dataProjection: Projection, defaultFeatureProjection: null, geometryName_: undefined, extractGeometryName_: undefined}
    dataProjection: Projection
        axisOrientation_: "enu"
        canWrapX_: false
        code_: "EPSG:31982"
        defaultTileGrid_: null
        extent_: null
        getPointResolutionFunc_: undefined
        global_: false
        metersPerUnit_: undefined
        units_: "m"
        worldExtent_: null
    __proto__: Object
    defaultFeatureProjection: null
    extractGeometryName_: undefined
    geometryName_: undefined
    __proto__: JSONFeature

I see lots of undefined and nulls, maybe I have to complete these options somehow? I also tried to change the tilePixels variable to 'code: "EPSG: 31982"' and 'code: "EPSG: 3857"', with both configurations I can see a misplaced loaded dot with zoom 0 and 1 (all map displayed), but when I come closer it disappears.

The debug outputs from geojson-vt:

preprocess data: 16.31201171875ms
index: maxZoom: 5, maxPoints: 100000
features: 25, points: 5731
generate tiles: 5.870849609375ms
tiles generated: 1 {"z0":1}

OpenLayers v5.3 | Ionic v4 | geojson-vt v3.2.1

Answer 1

In the example geojsonvt is using Lon/Lat coordinates. So I think you could simply convert your EPSG:31982 data to EPSG:4326 before passing it to geojsonvt (EPSG:31982 will need to defined and registered in proj4).

}).then(function(json31982) {
    var format = new GeoJSON();
    var features = format.readFeatures(json31982, {dataProjection: 'EPSG:31982', featureProjection: 'EPSG:4326'});
    var json = format.writeFeaturesObject(features);
    var tileIndex = geojsonvt(json, {

Some geojsons have have properties with null values. This causes an error in when using the code in the example and this change is needed

  var replacer = function(key, value) {
    if (value && value.geometry) {