使用 QGIS2Web 线上制图

如果你想出版你的 GIS 资料并让其他使用者存取，线上地图是个非常好的媒介。但是，制作网页地图跟在 GIS 环境中制作地图很不一样。GIS 使用者通常都不是网页设计师，所以要把线上地图做得与 GIS 环境中的地图一样好是件挑战。好消息是，在 QGIS 中有现成的工具可以让你简单地把你的资料转换成线上地图。在本教学中，你会学到如何运用 QGIS2Web 附加元件以及 OpenLayers 或 Leaflet 函式库制作线上地图。

内容说明

制作世界机场的 openlayers 线上地图。

你还会学到这些

  • 如何使用 QGIS 的编辑器控制来隐藏属性栏位或设定自订的格式。

  • 如何使用栏位计算（Field Calculator）来建立虚拟栏位。

  • 建立只在某些缩放尺度之下出现的标籤或图征。

取得资料

本教学使用 Natural Earth 提供的 机场 资料集。

下载 机场 shapefile

为了方便起见，你也可以直接用下面的连结下载：

ne_10m_airports.zip

资料来源 [NATURALEARTH]

操作流程

  1. 开启 QGIS，选择 图层 ‣ 加入向量图层，找到刚下载的 ne_10m_airports.zip 档案，然后按下 开启。

../_images/1198.png

  1. 现在我们要做的是在 QGIS 中制作一个外观跟操作方式都跟网页地图相似的地图，然后 qgis2web 附加元件会复制 QGIS 的设定然后自动产生一个网页地图，在过程中我们完全不用了解背后的函式库如何运作。我们的目标是当使用者点选机场标示的时候，会有个提示视窗出现然后秀出机场的资讯。这些资讯已经在 ne_10m_airports 图层的属性表格中了。右键点选 ne_10m_airports 图层然后选择 属性。

../_images/2153.png

  1. 切换到 栏位 的分页，然后就可看到图层包含有不同属性的栏位。部分的资讯跟我们想让线上地图使用者看到的资讯不相干，所以可以把这些资讯隐藏起来。我们在这边只需要 type、name、iata_code 和 wikipedia 属性，其他的都会藏起来。请点选在 scalerank 属性右侧，编辑器控制项 直栏下列的 文字编辑 按钮。

../_images/386.png

  1. 在 编辑控制项属性 视窗中，选择 隐藏 作为样式，然后按下 确定。

../_images/464.png

  1. 使用同样的方法把其他的属性也设成隐藏。你可能已经发现，还有其他不同种类的样式我们可以设定让属性要怎么呈现在地图上。现在点选在 wikipedia 属性右侧，文字编辑 按钮。

../_images/565.png

  1. 选择 网页检视 作为样式。这个样式是指本属性的值其实是个 URL 网址。

../_images/662.png

  1. 我们也可以使用 别名 栏位来指定属性而外的称呼，这样就不用改动到资料表中的内容了。当你想要使用一个对使用者更友善的属性称呼时，这招非常有用。根据你的偏好指定别名后，按下 确定。

../_images/761.png

  1. 回到 QGIS 主视窗，选择 识别图征 工具然后点选地图上的任意一个点，然后 结果 视窗就会出现，并且秀出刚才排版美化、运用别名后的内容。被隐藏的属性也不会显示出来。

../_images/859.png

  1. 虽然这是个很有用的方法，不会仍然有个限制，那就是我们没办法改变属性的显示顺序。解决这个问题的其中一个方法是建立 虚拟栏位。在本例中，如果我们要把 type 属性的内容移到资讯视窗最下方显示的话，可以简单的建立一个虚拟属性栏位然后把原本的 type 属性隐藏起来。在操作的过程中，我们还可以使用表达式来把 type 属性值的呈现方式排版美化。右键点选 ne_10m_airports 图层，选择 属性，切换至 栏位 分页然后点选 栏位计算。

../_images/958.png

  1. 因为每个属性的名字必须是独一无二的，这里我们使用首字母大写的 Type 做为新属性的名字。选择 文字 (字串) 作为栏位类别，宽度设为 25 个字元。type 属性的值是 small、mid、large 等等的东西，所以我们可以在之后加上 airport 来增加可读性。在 表示式 格中输入下列的表示式后，按下 确定。

concat( title("type"), ' Airport')
../_images/1057.png

  1. 现在昇级版的 Type 属性设定完成，可以把 type 属性的 文字编辑 改成 隐藏 了。

../_images/1199.png

  1. 来用 识别图征 工具看看属性的输出格式是不是我们期待的样子…

../_images/1256.png

  1. 现在让我们来设定图层，让他看起来更美观且传达更多资讯。右键点选 ne_10m_airports 图层然后选择 属性，切换至 样式 分页，然后选择 类别 的样式。在 行 的选单中，选择我们的虚拟栏位 Type，最后按下 分类。

../_images/1354.png

  1. 现在你可以看到不同颜色的圆圈被指定到不同种类的机场。这里考虑到本教学的目标，我们将只选择民用机场作为地图上显示的点。按住 Ctrl 鑑然后把所有军用机场的分类选取起来，然后按下 删除。

../_images/1453.png

  1. 除了指定不同颜色外，也可以指定不同尺寸的标记来帮助使用者识别机场的规模。右键点选任一类别然后按下 变更大小。

../_images/1550.png

  1. 把 Large Airport 类别的 大小 设为 3。

../_images/1646.png

  1. 运用相同方法把 把 Mid Airport 类别的 大小 设为 2，Small Airport 类别的 大小 设为 1。

../_images/1743.png

  1. 一个完整的地图也要包含每个机场的标记。在 属性 视窗中切换到 标记设计 分页，然后选择 Show labels for this layer，接着在 Label with 的下拉选单中选择 iata_code。在 绘图 分页的区块中，我们要设定的是让这些标记只有在缩放到较小的尺度时才会显现。在 标记选项 中勾选 依比例显示，然后在 最小值 中输入 1，在 最大值 中输入 10000000。此设定会让标记在比例尺设定介在 1:10000000 和 1:1 时显现。

../_images/1843.png

  1. 因为我们使用圆圈来显示机场的位置，在做标记时要注意不能让标记挡到这些圆圈才行。在 标记设计 视窗中切换至 位置 分页，然后选择 Cartographic，以及 Distance offset from 选择 From symbol bounds。完成后按下 确定。

../_images/1937.png

  1. 现在我们已经准备好要转换的地图，是时候存档了。点选 专案 ‣ 储存，然后输入 Airports 当作档名。

../_images/2030.png

  1. 现在汇出网页地图的准备已经完成。接下来我们要安装 qgis2web 附加元件，请前往 附加元件 ‣ 管理与安装附加元件 进行安装。(请参考 使用附加元件 进行安装相关细节操作。) 安装后，选择 网路 ‣ qgis2web ‣ Create a web map。

../_images/2154.png

  1. 在 Export to web map 视窗下半段的 Appearance 区块勾选 Add layers list，然后 Label search 栏位选择 ne_10m_airports: iata_code。勾选 Show popups on hover 就可以在滑鼠移至点上的时候显示弹出式视窗。 我们也可以设定底图，这样一来使用者就更能了解这些机场的地理背景。选择 OSM B&W 后就可以使用由 OpenStreetMap 资料提供的黑白色主题地图。你也可以选择要使用 OpenLayers 或是 Leaflet 函式库来制作线上地图。在本教学中，我们只会用到 OpenLayers 。点选 Update Preview` 就可以预览输出后的地图样式。在实际输出之前，我们需要指定输出资料夹 (要填 Export folder 栏位)。选择你喜欢的输出位址后，按下 Export。

../_images/2230.png

  1. 输出完成后，你电脑的预设浏览器会开启，互动式地图就会显现。

../_images/2326.png

  1. 现在你的网页地图已经完成出版的准备工作了。

../_images/2424.png

  1. qgis2web 附加元件有很多的限制，例如说他没办法把 OpenLayers and Leaflet 函式库的强大功能发挥得淋漓尽致。但是，这个操作可以当作线上制图的第一步，以避免花费你宝贵的时间在制作地图范本上。这些时间可以花在进一步改造线上地图上，这边就提供一个例子来说明刚刚制作完成的地图要怎么修改来迎合你的需求。接下来，我们要改变使用者开启线上地图的时候，初始位置会锁定在某个机场。在你电脑上，找到你用来储存线上地图的资料夹，然后前往里面的 resources 资料夹，使用文字编辑器开启 qgis2web.js 档案。

../_images/2522.png

  1. 找到 map.getView().fit() 函式的位置然后在下方添加如下的程式码。新程式码会让网页浏览器把地图的中心锁定在巴黎。完成后存档。

map.getView().setCenter(ol.proj.fromLonLat([2.35, 48.85]))
../_images/2620.png

  1. 重新载入你的浏览器后，地图就会以巴黎为中心。这只是一个没什么大不了的例子，但是你可以看到我们到底可以怎么利用在 OpenLayers 或 Leaflet 中的函式来修改我们的地图。

../_images/2720.png

  1. 输出的地图会储存在你电脑中。这时虽然你可以存取，但是却没办法分享给任何人。你或许会想把它放到网路伺服器上以供他人存取，不过上传的作业可能会依照你选择的伺服器而不同。有个便宜又简单的方式，就是把它放到公开的云端储存服务，譬如说 Amazon S3 就是一个热门的例子。只要创造一个帐户然后依照指示建立一个 Bucket 就可以了。Bucket 创建之后，你就可以上传所有的网页地图资料夹，然后把它设为公开。这里我创造了一个叫做 qgis-tutorials 的 bucket，而且已经把本章的完成版地图上传到一个叫做 qgis2web 的子资料夹了。你可以前往 http://s3.amazonaws.com/qgis-tutorials/qgis2web/index.html 查看。

../_images/2818.png

  1. Google 也有提供相似的服务，称为 Google Cloud Storage。建立帐号并开启付款选项后，你就可以建立一个 bucket 然后上传东西到里面。我使用了与 Amazon 相似的资料夹结构，并且已经把所有的线上地图资料上传到此处，最终的地图可以在 https://storage.googleapis.com/qgis-tutorials/qgis2web/index.html 查看。

../_images/2916.png