张春成

V2

2022/10/21阅读:37主题:默认主题

程序员的格子

程序员的格子

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

工程可见我的代码笔记本

map-grid-by-mapbox[1]


地图标尺

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

Add a canvas source | Mapbox GL JS[2]

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

Untitled
Untitled

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

Untitled
Untitled

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

Untitled
Untitled

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

Untitled
Untitled

用线条表示高度

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

Untitled
Untitled

参考资料

[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/

分类:

后端

标签:

后端

作者介绍

张春成
V2