制作 Leaflet 线上地图¶
警告
qgis2leaf 附加元件由于已不在开发阶段,目前它的功能已经整合到另一个新的附加元件 qgis2web 中。
参见:doc:web_mapping_with_qgis2web 此教学文件的更新版本。
Leaflet 是个热门的开源 Javascript 函数库,用于线上制图或其他相关联的应用程式。qgis2leaf 附加元件提供简单的方法,让你可以把 QGIS 地图输出到基于 Leaflet 建构之下的线上地图。此附加元件可以让你快速开始线上制图,或是由你的静态 GIS 资料图层制作互动式地图。
内容说明¶
制作世界机场的 leaflet 线上地图。
你还会学到这些¶
在栏位计算机(Field Calculator)中使用
CASE
这个 SQL 陈述式,使用不同的条件叙述建立新栏位。在 QGIS 中寻找和使用自订的 SVG 图示
操作流程¶
选择
,然后安装qgis2leaf``(译按:现在已是 ``qgis2web
)附加元件。(有关如何安装 QGIS 的附加元件,请参考 使用附加元件 )
解压缩刚下载的
ne_10m_airports.zip
,然后开启 QGIS,选择 ,找到刚解压缩的ne_10m_airports.shp
档案,按下 开启。
ne_10m_airports
图层载入后,可使用 识别图征 工具点选任一图征,查看内含的属性。我们要制作的地图会把所有的机场分成 3 种类别,而分类的过程中需要使用到type
这个属性。
在
ne_10m_airports
图层上按右键,选择 开启属性表格,
在属性表格视窗中,按下 切换编辑模式 钮以进入编辑模式,在此模式中,按下 开启栏位计算 钮。
接下来要做的是建立一个称为
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
回到 属性表格,新的栏位就会出现在表格最末端。检查表达式有正确运作后,再次按下 切换编辑模式 以储存刚才所做的修改。
让我们来使用新建立的
type_code
属性调整一下机场图层的样式。在ne_10m_airports
图层上按右键选择 属性。
在 图层属性 视窗中切换至 样式 分页,在下拉选单中选择 类别 样式然后在 行 中选择
type_code
。选择一个你喜欢的色彩映射表然后按下 分类,最后按下 :guilabel:`确定 回到 QGIS 主视窗。
现在机场地图已经设定好不错的样式了,让我们开始制作互动性网页地图吧。选择
。(译按:现在路径已更改为 。以下操作的文字说明将以新版的 qgis2web 为主,因此可能会与旧版的 qgis2leaf 截图不符。)
在 Export to web map 视窗中,点选下方左侧的 Leaflet 以切换到 Leaflet 的制图模式,Data export 中的 Export folder 选择输出档存放的路径,Scale/Zoom 中的 Extent 选择 Fit to layers extent,Appearance 中的 Template 选择 full-screen,右下角的栏位选择 OSM 作为底图,最后按下 Export。
输出完成后,打开浏览器,开启在你刚刚选择的输出资料夹中的
Index.html
档案,就可以看到你刚刚在 QGIS 中看到的地图复制品。你可以缩放、移至地图上的任意区域,而且只要点选任一图征,就会看到图征的属性资讯显示在跳出来的讯息框中。只要把资料夹内的所有内容复制起来,就能够把此地图移到网页伺服器,当作线上展示的互动地图。
现在我们要来看看如何进一步使用此附加元件来调整、自订我们的地图。你可能已注意到,在网页地图跳出的视窗中,记载着图征所有属性的资料,但其中某些属性并没有那么重要,而且预设的跳出式视窗文字格式也实在不怎么好看。因此我们接着要来换掉预设的格式,使用我们自己的 HTML 语法,让它能够漂亮地呈现资讯。具体来说,我们现在要把自订的 HTML 加到一个新增的
html_exp
栏位内。在ne_10m_airports
图层上按右键,选择 开启属性表格。
在属性表格视窗中,按下 切换编辑模式 钮以进入编辑模式,在此模式中,按下 开启栏位计算 钮。
勾选 建立新栏位 方框,在 输出栏位名称 内输入
html_exp
,然后在 输出栏位类别 内选择 文字 (字串)。因为我们要建立的是很长的 HTML 字串,所以 输出栏位宽度 要调成很大,例如200
。在 表示式 区块中输入如下的表达式,虽然表达式看起来很复杂,不过其实内容是在定义 HTML 的 table 元件,然后把lata_code
、name
和type
栏位的属性值放到元件内。检查一下 输出预览 以确认表达式是否正确。
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 个字元。如果你要在栏位中放入更长的字串,请使用其他格式储存。
回到 属性表格,新的栏位就会出现在表格最末端。检查表达式有正确运作后,再次按下 切换编辑模式 以储存刚才所做的修改。
现在请再次选择
。
选择和之前相同的选项。
当输出完成后,前往输出档案的资料夹,其中会有一个子资料夹,名字包含了现在的时间戳记。使用浏览器打开此资料中的
Index.html
,然后再点选任一图征查看跳出视窗。现在它提供的资讯看起来清楚多了。
qgis2leaf
附加元件的另一个好用功能是在线上地图中使用自订的图示,做法是在新栏位icon_exp
中指定自订的图示路径。我们接着要建立只包含主要机场的新图层,然后使用自订的图示来设定样式。点选工具列上的 使用表示式选取图征 钮。
输入如下所示的表达式,按下 选取 以选择所有主要机场。
"type_code" = 3
在
ne_10m_airports
图层上按右键然后选择 储存选取区域为… (或是 存档为…),
在 储存向量图层为… 视窗中,把输出档命名为
major_airports.shp
,然后勾选 加入储存档案至地图中`(译注:如果有 :guilabel:`储存仅选取的图征,也应一并勾选),最后按下 确定。
当
major_airports
已载入到 QGIS 中后,右键点选图层然后选择 开启属性表格。
在属性表格视窗中,按下 切换编辑模式 钮以进入编辑模式,在此模式中,按下 开启栏位计算 钮。
在 栏位计算器 视窗中,输出栏位名称 输入
icon_exp
,并选择 文字 (字串) 的栏位类别。在 表示式 区块中,输入以下的表达式。
'airport.svg'
按下 切换编辑模式 以储存刚才的更动。
再次选择
,在右下角你还会发现除了OSM
以外,还有很多不同的底图可供选择。这次我们可以选选看不同的,例如 Stamen Watercolor。按下 Export。
接下来我们要找寻我们之前指定的
airport.svg
档案作为机场的图示,并手动把它添加到输出资料夹中。QGIS 本身即带有许多图示,在 Windows 系统中,图示的路径在 ,不过会随着安装方式和作业系统版本而有些微的更改。你可以选择资料夹中的任何图示,不过在此教学中,我们可以试试看在transport
分类中的amenity=airport.svg
。
把图示复制贴上到地图的输出资料夹,并把它重新命名为
airport.svg
。
现在打开资料夹中的
index.html
,这次我们就有了一张漂亮的地图,使用自订的图示表达主要机场的位置。此外,注意右上角的面板,可以让你控制两个图层的显示设定。
Hope this tutorial gives you a head start in creating web maps. Below is the live interactive map created for this tutorial.