Mapbox 上用 Turf 裁多边形:屏幕贴边了,接口却说越界

子多边形画出最外层了,只想留下重叠的那一块。

图上看着齐了,一切到另一张地图,边又探出去。修完提交,接口说:点不在最外层里面。

Turf 取交集的函数没坏。是交在了错误的平面上。

碰上了啥

Mapbox 画边,按 Web 墨卡托拉直线。

Turf 取交集,默认拿经纬度当平面坐标,连的是经纬度直线。

两条线不是同一条。后面全乱在这。

第一下:图上齐了,其实只是墨卡托齐了。

经纬度里取完交集,写回 Mapbox 再拉直,边要么夹一条缝,要么鼓出最外层。

第二下:顶点都在里面,就懒得裁了。

Turf 判断「在里面」时,压在边上也算数。顶点过了,墨卡托直边照样能探出去。再切一套经纬度,非线性一变,鼓得更明显。

第三下:图上终于齐了,提交被打回来。

取交集的点正好钉在最外层边上。前端觉得压边算里面,后端要严格在内部。再转一次 UTM,边上的点抖到外面。凹进去的形状交点多,更爱中枪。

第四下:在 UTM 里裁完,再转成经纬度去画。

那是给提交坐标系贴边,不是给屏幕贴边。画完看着歪,你再裁,顶点被改来改去。

还有个冤种:经纬度上加 0.05,注释写「内移 5cm」。UTM 里是 5 厘米,经纬度里是 0.05 度,大概五公里。方向还朝最外层「中心」走,凹形的中心可能在面外,点沿着边滑,挪完还是在边上。

屏幕齐、经纬度齐、UTM 齐,为啥是三件事

顶点可以是同一串数。齐不齐,看你拿哪条线去连这些点。

屏幕齐

Mapbox 把两点之间画成墨卡托平面上的直线。你眼睛看到的「贴着最外层」,指的是这条屏幕直边。

经纬度齐

Turf 把同一对点当成经纬度平面上的直线。这条线和屏幕直边对不上:顶点都在最外层里面时,经纬度连出来的边投到屏幕上可以鼓出去;屏幕上看齐的边,换成经纬度直线去判,也可能夹缝。

UTM 齐

提交用的是局部米制网格。UTM 里两点连线,又是第三种直线。屏幕上钉在最外层边上的点,转成 UTM 以后,一般不在 UTM 那条直边上,差一丁点就算出界。

同一串顶点,三种连法,三块不一样的面。

所以图上齐了,只保证墨卡托齐。Turf 在经纬度里取交集,保证的是经纬度齐。接口在 UTM 里校验,要的是 UTM 齐。查 bug 之前先问:这次到底在跟哪一种齐较劲。

怎么改的

就一句:

在哪画,就在哪裁。提交只换坐标,别再裁。

1. 取交集之前,先转到墨卡托

最外层和里面的多边形,都转成墨卡托,取完交集再转回经纬度,写进 Draw。

这样交出来的边,才是屏幕上那条直边。

环要闭合。交成两块不相连时,Draw 只能留一块,留面积大的。同时碰上两块最外层,别偷偷挑面积最大的那块裁进去,会裁错对象。

2. 切地图:先转到那张图的经纬度,再按那张图取交集

不要先在 UTM 里裁完再拿去画。

切完也不要用「经纬度看起来已经在里面」当跳过条件。看起来在里面,直边仍可能探出,必须强制用墨卡托交集写回。

绘制时已经完全落在最外层里(含压边),可以不换顶点。不然取交集会把贴边洗成一圈新点。

3. 贴边点沿法线往里走 1cm

在墨卡托里找到离最外层最近的边,投影上去,沿这条边的内法线走大约 1cm。

地面距离用 0.01 / cos(纬度) 估。

离边超过大约 2cm 的点别动,凹进去那条边不用跟着缩。

别用负的 buffer 当内缩,凹形容易碎、容易自交。

4. 提交只做经纬度 → UTM

画布上已经裁过了。这里再按 UTM 最外层裁一遍,屏幕对齐会再漂。

绘制、最外层变形、换地图,几何都走同一套:和唯一一块最外层取交集。调用方只传当前屏幕上的坐标。

千万别踩的坑

屏幕齐、经纬度齐、UTM 齐,上面说过了:同一串点,三种连线。查 bug 之前先问这次交在哪个平面。

前端「压边算里面」和后端「必须严格在内部」不是一回事。取交集的点天生在边界上,不往里让 1cm,提交必炸。

内移必须用米。0.05 自己不会告诉你它是厘米还是度。方向用边的法线,别用中心,凹的会走反。

换地图:先转再裁。提交:只转不裁。两步反了,你会和屏幕较劲很久。

按 id 把接口坐标填回图形时,find 可能是空的。失败返回也经常是 undefined,不是空数组。直接点 .coordinates 就是白屏。缺了就保持原样。

相关推荐
计算机魔术师1 小时前
纽约时报告了OpenAI和微软:820万条聊天记录背后,是AI时代最大的版权保卫战
前端
码事漫谈1 小时前
在 Kubernetes 上管好数据库:金仓 KES-Operator 正式落地
前端·后端
用户1880687493521 小时前
手上全是油,我怎么让rokid眼镜在厨房里教我炒菜
前端
gnip1 小时前
uni-app 原生插件
前端·javascript·uni-app
gnip1 小时前
跨域常用解决方案
前端·javascript
用户298698530141 小时前
前端如何把 TXT 文本文件转成 Word 文档:React 实践
前端·javascript·react.js
FEF前端团队1 小时前
03# Claude Code实战:终端里的逻辑引擎
前端·ai编程·claude
FEF前端团队2 小时前
04# Codex CLI实战:OpenAI的编程代理
前端·chatgpt·ai编程
掘金挖土2 小时前
前端手摸手跑路之 AI 应用开发(七)
前端·后端