How to display (antimeridian) vector tiles generated by geojson-vt in leaflet using L.CRS.Simple?

Question

I have a GeoJSON simple data that i need to display on a leaflet map using L.CRS.Simple crs, because is antimeridian data, and sometimes, coordinates can be [450,389] (more than 180)

This is the very simple GeoJSON:

{
  "type": "FeatureCollection",
  "name": "entities",
  "features": [
    {
      "type": "Feature",
      "properties": {
        "Layer": "0",
        "SubClasses": "AcDbEntity:AcDbPolyline",
        "EntityHandle": "1F9",
        "style": "PEN(c:#FF0000)"
      },
      "geometry": {
        "type": "LineString",
        "coordinates": [
          [
            0,
            0
          ],
          [
            0,
            150
          ],
          [
            150,
            150
          ],
          [
            150,
            0
          ],
          [
            0,
            0
          ]
        ]
      }
    }
  ]
}

Using geojson-vt, (demo page) i'm getting this rectangle:

I made some modifications to geojson-vt lib:

Projection functions:

function projectX(x, simple, projectionFactor) {
    return x / 256 + 1;
}

function projectY(y, simple, projectionFactor) {
    return - y / 256 + 0.5;
}

I added to GeoJSONVT.prototype.getTile function this line:

y = y + (1 << (z - 1)); // xy map

And the result is (markers are placed on [0,0],[150,0],[150,150],[0,150]):

Any suggestion? Why i'm losing tiles here?

Answer 1

I recommend you read this: https://macwright.org/2016/09/26/the-180th-meridian.html

Quoting the GeoJSON spec recommended solution:

In representing Features that cross the antimeridian, interoperability is improved by modifying their geometry. Any geometry that crosses the antimeridian SHOULD be represented by cutting it in two such that neither part’s representation crosses the antimeridian. - GeoJSON Spec, 3.1.9