javascript - Wrapping lines/polygons across the antimeridian in Leaflet.js -
is there way shape wrap 1 edge across dateline meridian (180° longitude) appear on other side of map in leaflet.js?
i've looked at:
but i'm unsure on reliably draw across dateline...
thank in advance!
oh, you're hitting antimeridian artifacts. you're not first one, , not last one.
in leaflet, there 2 approaches problem:
1a: cut polygon beforehand
if know gis tools, preprocess polygon, end 2 (or possibly more) polygons. see «how can make polyline wrap around world?».
once have file several polygons don't cross antimeridian, should render fine. hit artifacts (namely, vertical polygon border @ antimeridian, spanning inside ofthe polygon) if apply border polygons, might want cut polygon , polyline polygon's edge if want render both nicely.
1b: cut polygon on browser
if don't want cut polygon beforehand, can let web browser on fly.
there utilities can here, i'm going point leaflet.vectorgrid in particular. leveraging geojson-vt, can cut polygons , edges tile-sized polygons , polygon edges. can handle geometries crossing antimeridian quite well.
you might want geojson-vt directly, or maybe turf.js on-the-fly geoprocessing.
2: think outside [-180..180] range
leaflet can handle longitudes outside [-180..180] range. in leaflet, longitudes wrap only tilelayer's tiles , not markers or polylines.
in other words: marker @ [0, -179] shown @ different place [0, 181]. see this answer example.
in other words: line [0, 179] [0, -179] 358 degrees long, line [0, 179] [0, 181] 2 degrees long.
in other words: can have linestrings or polygons coordinates longitudes outside [-180..180] range, , that's fine leaflet. it's not fine lot of gis software (in fact, think new geojson spec prohibits it). make leaflet happy.
Comments
Post a Comment