制作 Leaflet 线上地图

警告

qgis2leaf 附加元件由于已不在开发阶段,目前它的功能已经整合到另一个新的附加元件 qgis2web 中。

参见:doc:web_mapping_with_qgis2web 此教学文件的更新版本。

Leaflet 是个热门的开源 Javascript 函数库,用于线上制图或其他相关联的应用程式。qgis2leaf 附加元件提供简单的方法,让你可以把 QGIS 地图输出到基于 Leaflet 建构之下的线上地图。此附加元件可以让你快速开始线上制图,或是由你的静态 GIS 资料图层制作互动式地图。

内容说明

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

你还会学到这些

  • 在栏位计算机(Field Calculator)中使用 CASE 这个 SQL 陈述式,使用不同的条件叙述建立新栏位。

  • 在 QGIS 中寻找和使用自订的 SVG 图示

取得资料

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

下载 机场 shapefile

资料来源 [NATURALEARTH]

操作流程

  1. 选择 附加元件 ‣ 管理与安装附加元件,然后安装 qgis2leaf``(译按:现在已是 ``qgis2web)附加元件。(有关如何安装 QGIS 的附加元件,请参考 使用附加元件 )

../_images/1165.png
  1. 解压缩刚下载的 ne_10m_airports.zip,然后开启 QGIS,选择 图层 ‣ 加入向量图层,找到刚解压缩的 ne_10m_airports.shp 档案,按下 开启

../_images/2125.png
  1. ne_10m_airports 图层载入后,可使用 识别图征 工具点选任一图征,查看内含的属性。我们要制作的地图会把所有的机场分成 3 种类别,而分类的过程中需要使用到 type 这个属性。

../_images/367.png
  1. ne_10m_airports 图层上按右键,选择 开启属性表格

../_images/447.png
  1. 在属性表格视窗中,按下 切换编辑模式 钮以进入编辑模式,在此模式中,按下 开启栏位计算 钮。

../_images/547.png
  1. 接下来要做的是建立一个称为 type_code 的新属性,所有主要机场的属性值是 3,中型机场的属性值是 2,其馀的机场是 1。我们可使用 CASE 流程控制语法,然后撰写表达式,借由判断 type 属性的值来给定 type_code 的值。勾选 建立新栏位 方框然后在 输出栏位名称 填入 type_code,然后在 输出栏位类别 选择 数字 (整数)。接着在 表示式 视窗中,输入以下数行。

CASE  WHEN "type" LIKE '%major%'  THEN 3
 WHEN "type" LIKE '%mid%' THEN 2
 ELSE 1
END
../_images/645.png
  1. 回到 属性表格,新的栏位就会出现在表格最末端。检查表达式有正确运作后,再次按下 切换编辑模式 以储存刚才所做的修改。

../_images/744.png
  1. 让我们来使用新建立的 type_code 属性调整一下机场图层的样式。在 ne_10m_airports 图层上按右键选择 属性

../_images/843.png
  1. 图层属性 视窗中切换至 样式 分页,在下拉选单中选择 类别 样式然后在 中选择 type_code。选择一个你喜欢的色彩映射表然后按下 分类,最后按下 :guilabel:`确定 回到 QGIS 主视窗。

../_images/943.png
  1. 现在机场地图已经设定好不错的样式了,让我们开始制作互动性网页地图吧。选择 网路(Web) ‣ qgis2leaf ‣ Exports a QGIS Project to a working leaflet webmap。(译按:现在路径已更改为 网路(Web) ‣ qgis2web ‣ Create web map。以下操作的文字说明将以新版的 qgis2web 为主,因此可能会与旧版的 qgis2leaf 截图不符。)

../_images/1041.png
  1. Export to web map 视窗中,点选下方左侧的 Leaflet 以切换到 Leaflet 的制图模式,Data export 中的 Export folder 选择输出档存放的路径,Scale/Zoom 中的 Extent 选择 Fit to layers extentAppearance 中的 Template 选择 full-screen,右下角的栏位选择 OSM 作为底图,最后按下 Export

../_images/1166.png
  1. 输出完成后,打开浏览器,开启在你刚刚选择的输出资料夹中的 Index.html 档案,就可以看到你刚刚在 QGIS 中看到的地图复制品。你可以缩放、移至地图上的任意区域,而且只要点选任一图征,就会看到图征的属性资讯显示在跳出来的讯息框中。只要把资料夹内的所有内容复制起来,就能够把此地图移到网页伺服器,当作线上展示的互动地图。

../_images/1242.png
  1. 现在我们要来看看如何进一步使用此附加元件来调整、自订我们的地图。你可能已注意到,在网页地图跳出的视窗中,记载着图征所有属性的资料,但其中某些属性并没有那么重要,而且预设的跳出式视窗文字格式也实在不怎么好看。因此我们接着要来换掉预设的格式,使用我们自己的 HTML 语法,让它能够漂亮地呈现资讯。具体来说,我们现在要把自订的 HTML 加到一个新增的 html_exp 栏位内。在 ne_10m_airports 图层上按右键,选择 开启属性表格

../_images/1341.png
  1. 在属性表格视窗中,按下 切换编辑模式 钮以进入编辑模式,在此模式中,按下 开启栏位计算 钮。

../_images/1439.png
  1. 勾选 建立新栏位 方框,在 输出栏位名称 内输入 html_exp,然后在 输出栏位类别 内选择 文字 (字串)。因为我们要建立的是很长的 HTML 字串,所以 输出栏位宽度 要调成很大,例如 200。在 表示式 区块中输入如下的表达式,虽然表达式看起来很复杂,不过其实内容是在定义 HTML 的 table 元件,然后把 lata_codenametype 栏位的属性值放到元件内。检查一下 输出预览 以确认表达式是否正确。

concat('<h3>', "iata_code", '</h3><table>', '<tr><td>Airport Name: <b> ',
"name", '</b></td></tr><tr><td>Category: <b> ', "type",
'</b></td></tr></table>')

注解

shapefile 格式可在一个栏位内放上至多 254 个字元。如果你要在栏位中放入更长的字串,请使用其他格式储存。

../_images/1538.png
  1. 回到 属性表格,新的栏位就会出现在表格最末端。检查表达式有正确运作后,再次按下 切换编辑模式 以储存刚才所做的修改。

../_images/1634.png
  1. 现在请再次选择 网路(Web) ‣ qgis2web ‣ Create web map

../_images/1731.png
  1. 选择和之前相同的选项。

../_images/1831.png
  1. 当输出完成后,前往输出档案的资料夹,其中会有一个子资料夹,名字包含了现在的时间戳记。使用浏览器打开此资料中的 Index.html,然后再点选任一图征查看跳出视窗。现在它提供的资讯看起来清楚多了。

../_images/1925.png
  1. qgis2leaf 附加元件的另一个好用功能是在线上地图中使用自订的图示,做法是在新栏位 icon_exp 中指定自订的图示路径。我们接着要建立只包含主要机场的新图层,然后使用自订的图示来设定样式。点选工具列上的 使用表示式选取图征 钮。

../_images/2018.png
  1. 输入如下所示的表达式,按下 选取 以选择所有主要机场。

"type_code" = 3
../_images/2126.png
  1. ne_10m_airports 图层上按右键然后选择 储存选取区域为… (或是 存档为…),

../_images/2220.png
  1. 储存向量图层为… 视窗中,把输出档命名为 major_airports.shp,然后勾选 加入储存档案至地图中`(译注:如果有 :guilabel:`储存仅选取的图征,也应一并勾选),最后按下 确定

../_images/2317.png
  1. major_airports 已载入到 QGIS 中后,右键点选图层然后选择 开启属性表格

../_images/2416.png
  1. 在属性表格视窗中,按下 切换编辑模式 钮以进入编辑模式,在此模式中,按下 开启栏位计算 钮。

../_images/2515.png
  1. 栏位计算器 视窗中,输出栏位名称 输入 icon_exp,并选择 文字 (字串) 的栏位类别。在 表示式 区块中,输入以下的表达式。

'airport.svg'
../_images/2613.png
  1. 按下 切换编辑模式 以储存刚才的更动。

../_images/2713.png
  1. 再次选择 网路(Web) ‣ qgis2web ‣ Create web map,在右下角你还会发现除了 OSM 以外,还有很多不同的底图可供选择。这次我们可以选选看不同的,例如 Stamen Watercolor。按下 Export

../_images/2811.png
  1. 接下来我们要找寻我们之前指定的 airport.svg 档案作为机场的图示,并手动把它添加到输出资料夹中。QGIS 本身即带有许多图示,在 Windows 系统中,图示的路径在 (QGIS 安装路径)‣ apps ‣ qgis ‣ svg,不过会随着安装方式和作业系统版本而有些微的更改。你可以选择资料夹中的任何图示,不过在此教学中,我们可以试试看在 transport 分类中的 amenity=airport.svg

../_images/2911.png
  1. 把图示复制贴上到地图的输出资料夹,并把它重新命名为 airport.svg

../_images/306.png
  1. 现在打开资料夹中的 index.html ,这次我们就有了一张漂亮的地图,使用自订的图示表达主要机场的位置。此外,注意右上角的面板,可以让你控制两个图层的显示设定。

../_images/3113.png

Hope this tutorial gives you a head start in creating web maps. Below is the live interactive map created for this tutorial.