张春成
V2
2022/10/21阅读:43主题:默认主题
程序员的格子
程序员的格子
我用 Mapbox 做了一个地图玩具,可以对地图进行精准定位,并且方便比较。
工程可见我的代码笔记本
map-grid-by-mapbox[1]
地图标尺
这个玩具的源头是 Mapbox 支持 Canvas 覆盖,这就相当于马良拿到了笔。
Add a canvas source | Mapbox GL JS[2]
由于地图上的格子大小在地理上是恒定的,另外地图缩放也可以自动调整,因此你可以用它方便地比较地图上各个地方的大小关系。比如北京城大概就是红框内的区域,它在经度方向上的跨度是 0.2 度左右,因为每两条黑色线之间的距离大概是 0.02 度。

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

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

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

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

参考资料
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/
作者介绍
张春成
V2