研究笔记 | 基于QGIS的网络照片地图绘制（Web Mapping in QGIS）
01
引言
许多网络地图包含有兴趣点，这些兴趣点通常以点、文字、照片或视频的形式展现出来。创建高质量的web地图可能对于非web程序员的人来说是一个挑战，但现在的一些开源GIS（如QGIS中的qgis2web插件）给我们提供了一个简单的方法来进行可视化并生成web地图。
本次实验主要基于天津大学建筑学院城乡规划系研究生课程——《地理信息和规划支持系统概论》授课内容，对QGIS web mapping进行简单介绍，通过使用带有地理标记的图片创建一个交互式网络地图，旨在展示如何在不使用服务器端软件的情况下用QGIS绘制并mapping一些数据。
02
前期准备
2.1 软件准备
本次实验所使用的软件是QGIS，其软件安装包能够在官方网站上免费获取，可选择合适的软件版本下载（安装包下载地址：https://qgis.org/en/site/forusers/download.html）。
2.2 数据准备
本次实验的数据材料为多张拍摄照片，照片需要含有拍摄地点的地理信息（例如经度和纬度）并且确保被储存在了电脑中合适的目录中。
03
操作步骤
3.1 创建空间数据集
一般来说，手机或相机可以记录拍摄地点的地理坐标，可以在电脑上右键照片，点击“属性”-“详细信息”来查看坐标信息。之后利用在线转换工具将GPS坐标单位从目前的度分秒转换为十进制格式的经纬度。
图1 查看图像GPS坐标信息
图2 地理坐标格式转换
在照片目录文件夹中，双击照片文件，照片信息显示图片大小为3024x4032，所以它的宽和高分别是3024和4032。
图3 图像尺寸信息
新建一个Excel表格，添加五列: Name、Code、Latitude、Longitude和Photo。Name是照片的内容，Code是照片文件的名称，Latitude和Longitude是前面转换后的十进制格式GPS坐标数据，Photo包含照片文件路径和图片大小。
为了达到mapping目的，HTML图像句法在属性表中被用于链接照片。在HTML中，图像被定义为: <img src="图像路径" alt="图像描述" style="width: ？？？px;height:？？？px;">
其中需要替换的内容包括标为斜体字的几个部分:
1．"图像路径"：内容是当前的照片文件夹加上确切的图像文件。一个简单快捷获取图像路径的方法是将照片用电脑浏览器打开，浏览器网址栏显示的就是图像路径。
图4 图像路径
2.“图像描述”：内容是对图片的描述，一般在图像加载成功的情况下不会显示。如果图像加载失败，有些浏览器就会显示这部分内容。如alt="Image6"，图像加载失败的情况下就会显示下图。
图5 图像加载失败时的显示效果
3.“图片的宽度和高度”：即两个“？？？”。可以使用style属性指定图像的宽度和高度。如果图像尺寸太大，当在网站上点击它时可能显示不全。以6141.jpg文件为例，其宽度和高度分别为3024和4032单元，我们选择302.4和403.2(缩小至原来的10%)作为宽度和高度，因此6141.jpg的整个HTML如下：
重复相同的过程补充Excel中的信息，将此文件保存为CSV格式(例如PicturesData.csv)，并确保纬度和经度用十进制数表示，而不是度、分和秒。
注意:如果没有指定图像的宽度和高度，页面可能会在图像加载时闪烁。
图6 数据集
3.2 QGIS中创建点图层（point layer）
新建一个项目，点击“打开数据源管理器”图标，选择“分隔文本”，“文件名”选择上一步创建的CSV格式空间数据集。
图7 创建点图层
确保“几何图形CRS”选择EPSG: 4326 WGS 84，X和Y字段分别选择经度和纬度后，点击“添加”-“Close”。
图8 创建点图层
可以看到含有5个点的点图层已经被添加。
图9 创建点图层
同时可以基于视觉效果，使用“符号化”工具改变这些点的大小和颜色等属性。
图10 点图层符号属性设置
为了帮助解释地图，我们需要添加后台数据，例如OpenStreetMap。
点击“浏览器”-“XYZ Tiles”，然后双击“OpenStreetMap”，最后将OpenStreetMap图层拖动到点图层下方。
图11 添加OpenStreetMap
3.3 创建 web map
这里需要一个第三方提供的插件，它可以通过简单的步骤来创建一个网络地图。在菜单栏上点击“插件”-“管理并安装插件”。
图12 添加插件
在新的对话框中，点击左侧的“全部”，输入“qgis2web”，点击“安装插件”-“Close”。
图13 安装qgis2web插件
点击上方菜单栏“web”-“qgis2web”-“Create web map”。
图14 运行qgis2web插件
在出现的界面中，勾选两个图层及对应的“Visible”和“Popups”。在点图层“PicturesData”中“Name”、“Code”、“Latitude”、“Longitude”和“Photo”分别有“no label”、“inline label”和“header label”三个选项，对应不同的最终效果。之后点击“OpenLayers”-“Update preview”，界面右方会出现地图。
图15 创建web map
图16 “no label”、“inline label”和“header label”分别对应的效果
点击“Export”，会出现下图界面，按照图中的路径找到创建的HTML文件。
图17 创建web map
双击创建的HTML文件，得到一个可以缩放和平移的地图。地图上有5个点，每点击一个点，页面上会显示其对应的属性和图像。
图18 web map效果展示
04
小结
此次实验是进行网络地图研究的起点。使用qgis2web插件可以创建一个web地图，将本地QGIS项目导出到HTML服务器上，并且服务器不需要特殊的软件。其最大的优势是无需在服务器端做任何操作。同时通过实验我也学习了如何使用包含地理信息的图像来进行手动地理标记的简单方法。最后，实验也让我更加熟悉QGIS软件，特别是对矢量数据的空间和属性操作。
参考文献
[1] Shen, J. Cheng*, J. Huang, S., Zeng, F. (2020) An Exploration of Spatial and Social Inequalities of Urban Sports Facilities in Nanning City, China, Sustainability, 12(11), 4353.
[2] Gao, M., Cheng*, J., Li, Y., Hu, J. (2022) Exposure to Street Medical Advertisement: emotional effects and health impacts. Frontiers in Public Health (under review).
编辑 / 宋一鸣
校对 / 郭少军
执行 / 陶 婷
相关链接
。
课程作业