D3JsDay15 了解WEB地图学,先懂一点地理学—web地图的科学

GIS地理资讯系统(Geographic Information System)

地理资讯系统这个名词听起来有些抽象,其实诸如我们平常所使用的Google Map,汽车所使用的卫星导航,气象局所呈现的大气图表、卫星云图或是你使用手机的租用单车APP查看哪里还有可使用的单车,只要结合了以下

  1. 地理(也就是传统地理空间、某个地方或位置)
  2. 资讯(单车可租用的位置)
  3. 系统(让使用者透过APP查看)

或是之前因为covid19疫情关系所出现的口罩地图

  1. 地理(可能是台湾或是某个县市)
  2. 资讯(包含还有口罩存货的药局或是已经尚无存货的药局等等)
  3. 系统(民众使用手机或是电脑点击操作过滤还有剩余口罩的药局)

以上这些都可以算是GIS系统,属於比较与民众相关的应用,其他像是可能的应用包含如果我们将每次的车祸事故的位置记录下来,放到电脑当中使用GIS系统绘制出交通发生的地点,对於一些事故率较高的地区在交通尖峰时期可以调派警员指挥交通,或是根据人口分布、灾害发生位置分析後来妥善的配置救护车的数量。

只要是提及到空间资讯的应用、像是生态保育、都市规划、人口迁移这些拥有位置资讯的地图都可以套入GIS系统加以分析使其得出有用的资讯。

补充说明

地理资讯系统(英语:Geographic Information System,缩写:GIS)是一门综合性学科,结合地理学与地图学,已经广泛的应用在不同的领域,是用於输入、储存、查询、分析和显示地理资料的电脑系统。

空间资料格式—Shapefile、Geojson、TopoJSON

Shapefile

ESRI Shapefile(shp)制作GIS地理资讯系统的公司所开发的一个空间资料格式,目前也在软件界成为了开放标准
以下引用Shapefile维基百科的叙述

Shapefile档案用於描述几何体物件:点、折线与多边形。例如,Shapefile档案可以储存井、河流、湖泊等空间物件的几何位置。除了几何位置,shp档案也可以储存这些空间物件的属性,例如河流的名字、城市的温度等等。

另外比较值得一提的是虽然他叫做Shapefile档案,实际上使用了多个档案格式、其中有三个档案是不可缺少的档案,分别是.shp,.shx.dbf档案。

其他更多的叙述可以参考wiki

Shapefile维基百科

Geojson

然而由於shp的档案格式需要储存的容量较大,因此在web世界里面作为传输将会影响使用者进入网页的速度,因此後来有人基於JSON格式下规范了geojson的标准,json在Web世界里面属於轻量级的交换文字格式,所以能更加的快速在浏览网页的时候载入页面,详细介绍可以参考wiki

GeoJSON维基百科

我们可以使用浏览器观看geojson的结构可以发现使用type来储存点、线、多边的几何结构和特徵或是特徵的集合。

https://ithelp.ithome.com.tw/upload/images/20210930/20125095zdJYsYNsTD.png

如上图,properties储存的东西是一些资讯例如县市名称、县市代号等等,coordinate储存的是经纬度这些座标点。

其他更多可以至以下网址参考规范

geojson.org

TopoJSON

後来TopoJSON可以算是GeoJson的改良版,由於我们在地图的绘制过程当中像是县市与县市的交界或是省份与省份的交界是共用边,因此提出了容量更小的一种格式,另外此种格式也是D3js作者Mike Bostock所发明的格式(但是在D3Js使用时候必须转换成geojson)

地图投影法

麦卡托投影法

一般我们都是使用麦卡托投影方式,依据维基百科的说明是法兰德斯出身的地理学家杰拉杜斯·麦卡托发表的一种投影法,可以使的投影後的角度和形状不变,但是会使面积产生变形,靠近南极和北极的区域看起来会变得很大。据说早期的Google Map也不是使用麦卡托投影方式,但是由於接近极区的地图会有角度上的偏差,他们认为大多数的使用者都需要看街道图,如果街道图形变形严重的话对他们来说十分不便利。因此後来Google的采用让其他做Map系统的提供商也跟进。

GoogleHelp

Web地图—麦卡托投影法

麦卡托投影法Wiki

如官方API文件的图片

https://ithelp.ithome.com.tw/upload/images/20210930/20125095EzUcuyzvcJ.png

麦卡托投影法D3官方API

但是其实这会导致容易形成印象是极区的土地面积比起赤道附近的土地面积来的大,例如实际上非洲是格陵兰的面积十四倍大,但是在麦卡托投影法底下观看却看起来一样大。

有兴趣的读者可以到以下的网站玩玩看各个国家的土地面积拉到赤道或者极区附近的话会变得如何呢?

The true size of

Equal Earth投影

如果期望面积看起来与原始地球的样貌差异不大的话,可以参考Equal Earth投影,启发於罗宾森投影(Robinson projection)的改良版,在2018年发表,算是比较新的一种投影方式,D3内函式也包含了此种投影法则

官方API文件展示的图片如下图

https://ithelp.ithome.com.tw/upload/images/20210930/20125095d1H5sUmAs8.png

Equal-Earth投影D3官方API

小总结

以上说明了简单说明地图的基础知识,对於资料视觉化来说假使我们拥有一系列的资料包含经纬度的话,我们可以做透过D3JS画出地图,然後在地图上面标示各种资料,例如就像你在Google Map上面的标记。另外一个知识点像是如果想要呈现关於人口和面积的地理资讯图表的时候,也许你该选择的投影方式是等面积类型的投影法则比麦卡托投影法来的好,反之如果你要呈现的资料包含方位或是让使用者导览路线的话,或许运用古时候航海图所常用的麦卡托投影法是一个好选择。

另外官方还有其他种类型的投影方式,也在API文件有附上图片,可以至以下连结到参考官方API文件

D3-geo官方API文件


<<:  android studio 30天学习笔记-day 15-databinding 双向绑定

>>:  30天轻松学会unity自制游戏-结语

虹语岚访仲夏夜-2(专业的小四篇)

不是阳光洒落时的光芒 是你微笑时  让我忘了黑暗筑起的高墙 不是月下拂过的清凉 是你指尖的方向 撑...

[Day - 27] - Spring 环境管理思想与设计

Abstract 许多开发者势必会遇到一种状况,就是在上线前势必会先放到测试主机进行测试,我们称之开...

Day08 - [丰收款] 十六进位格式的後续探讨,字串传输容量倍增了!

延续昨天的十六进位转换,还有件重要的事。 隐藏的问题,容量变大了 若是某个需求,资料传送过程中不允许...

【填坑系列01】IP位址计算 (IPv4 适用)

大二修企业资料通讯(BDC)时,对於IP位址的计算一窍不通,上网看教学影片、文章仍然无法学会,後来...

Day08:资料结构 - 堆积(Heap)

谈谈堆积(Heap)吧! 今天来谈谈堆积(Heap)吧!堆积是一种特别的二元树(Binary tre...