程序员的格子

我用 Mapbox 做了一个地图玩具，可以对地图进行精准定位，并且方便比较。

工程可见我的代码笔记本

map-grid-by-mapbox^[1]

---

• 程序员的格子

  • 地图标尺
  • 用线条表示高度

地图标尺

这个玩具的源头是 Mapbox 支持 Canvas 覆盖，这就相当于马良拿到了笔。

Add a canvas source | Mapbox GL JS^[2]

由于地图上的格子大小在地理上是恒定的，另外地图缩放也可以自动调整，因此你可以用它方便地比较地图上各个地方的大小关系。比如北京城大概就是红框内的区域，它在经度方向上的跨度是 0.2 度左右，因为每两条黑色线之间的距离大概是 0.02 度。

而同样的范围可以绰绰有余地包住伦敦，因为它实在太小了，我不得不放大一些。

要找到跟北京同样体量的东西不容易，我想了想，看来太湖比较合适，太湖又太大了，因此视角要提得再高些。

另外，由于经纬网络是可以旋转的，因此，特别适合描述天津这样临河而建的城市。从这个网络上看，天津的街道竟然都是直的，越靠近河越直。

用线条表示高度

当然，它也可以让你对山的大小有个感性的概念，比如多山的香港。由于标尺是沿着等高线绘制的，因此也不用担心它的位置受到高低落差的影响。但由于覆盖在高度地图上的 Canvas 也同样被拉伸了，因此线条在宽度方向会产生一定的畸变，这个情况暂时不知道怎么处理。

参考资料

[1]

map-grid-by-mapbox: https://observablehq.com/@listenzcc/map-grid-by-mapbox

[2]

Add a canvas source | Mapbox GL JS: https://docs.mapbox.com/mapbox-gl-js/example/canvas-source/