在日常GIS的应用中经常需要我们将已有的矢量数据叠加到在线地图上(如:高德、谷歌地图),以便利用在线地图作为背景更好的展示我们的数据。下面我们以谷歌地图为例具体讲述如何操作。
具体做法是,我们利用QGIS叠加在线地图和已有数据,并生成一个OPENLAYERS的WEBGIS应用。将我们的已有数据叠加到谷歌地图上进行展示。但进行自有数据叠加会遇到一个重要的问题,即:由于国内在线地图基本都是经过偏移的,因此需要对数据进行加偏处理。(顺便说一下,很多人喜欢把在线地图下载到本地,并进行纠偏。但个人觉得这样做不仅完全没有必要,而且也失去了在线地图的实时效果。因为坐标系无论偏移与否,都不会影响用户使用和定位效果,其实只要我们在统一的坐标系标准下操作即可)。
一、获取数据
测试的数据我们从OSM上获得道路数据(具体做法见:https://blog.csdn.net/qq_35582643/article/details/85849294)。
1.输入数据:

2.设定输出


3.设定输出范围

4.设定地图偏移

注意:对于谷歌地图或高德地图我们使用火星加偏
5.生成数据

二、在QGIS里进行数据的叠加和配置。
在QGIS里我们将OSM里下载的道路数据叠加到谷歌地图上,并设置为以不同颜色区分不同道路种类的显示效果,最后保存为工程。


三、构建OPENLAYERS的WEBGIS程序
利用《WEBGIS前端生成工具》生成OPENLAYERS开发的WEBGIS应用(见:https://blog.csdn.net/qq_35582643/article/details/81868972)
在《WEBGIS前端生成工具》中打开上面配置好的QGIS工程,并生成WEBGIS程序。


四、生成效果


网友评论