如何使用OpenStreetMap创建自定义风格化映射

10,290

257

4

简介:如何使用OpenStreetMap创建自定义风格化地图

About: I enjoy DIY projects, especially those involving woodworking. I'm an avid computer programmer, computer animator, and electronics enthusiast.

在本教程中,我将描述一个过程,通过该过程,您可以生成自己定制的样式化地图。样式化地图是一种地图,用户可以在其中指定哪些数据层是可视化的,以及定义每个层的可视化样式。我将首先描述您可以编写用于样式化地图的软件的过程,然后是我为执行此任务而编写的Python软件的示例。

以下视频突出显示我个人生成风格化的地图,而是继续阅读亲密的细节。我很高兴看到社区创造了什么!

What is my motivation behind this project?

坦率地说,我开始这个项目,因为我认为要做很有趣。在过去的一年里,这个想法在我的脑海中一直在咆哮,我终于花了我需要把它带到成果。经过一些基本脚本的原型设计,我能够产生极其有希望的结果 - 如此希望我知道我需要正规化我的脚本,以便其他人可以轻松地创造自己的创造。

My motivation in writing this instructable is due to the fact that I found very minimal information on how to create your own stylized maps from scratch. I hope to share what I've learned with the community.

Resources/Links:

补给品:

  • A Python distribution (I used Anaconda & Python 3.6)
  • PyQt5(用于GUI依赖项)

步骤1:定义流程I:下载OSM文件

When I first began this project, the most glaring question was, "where can I get map data." Naturally, as you'd expect, I immediately thought of Google Maps. After significant research, I discovered that Google真的doesn't want people playing with their data, in a creative sense or otherwise. In fact, they explicitly disallow web-scraping from Google Maps.

Fortunately, my despair was short-lived upon my discovery of OpenStreetMap (OSM). OSM is a collaborative project involving people all across the globe contributing data. OSM explicitly permits open-ended usage of their data in the name of Open Source software. As such, visiting the OSM webpage is where the map stylizing journey begins.

After arriving at the OSM website, click on the "Export" tab to show the map export tools. Now, zoom in to view the region with which you're interested in collecting map data. Select the "Manually select a different area" link, which will bring up a box on your screen. Shape and place this box over the region of interest. Once satisfied, click the "Export" button to download your OSM data file.

注1:If your selected region contains too much data, you will get an error that you've selected too many nodes. If this happens to you, click the "Overpass API" button to download your larger file.

Note #2:如果您下载的OSM文件大于30MB,我编写的Python程序将明显变慢。如果你决定使用一个大的区域,考虑写一个脚本来丢弃你不打算绘制的多余数据。

第二步:定义流程第二步:理解数据

"我有数据......现在是什么?"

首先打开你下载的OSM文件到你最喜欢的文本编辑软件。你会首先注意到这是一个XML文件太好了!XML很容易解析。文件的开头看起来应该与此步骤的第一张图片几乎相同—将列出一些基本元数据和地理边界。

当您滚动文件时,您将注意到整个使用的三个数据元素:

  1. 节点
  2. 方式
  3. Relations

The most basic data element, anode只是有一个与之相关联的唯一标识符、纬度和经度。当然,还有额外的元数据,但是我们可以安全地丢弃它。

方式是节点的集合。方法可以呈现为封闭形状或开放线。方法由一组由其唯一标识符标识的节点组成。它们用定义它们所属的数据组的键进行标记。例如,上面第三张图片中的方式属于数据组“place”,其子组“island”。换句话说,这种特殊方式属于“place”组下的“island”层。方法也有唯一的标识符。

最后,关系是各种方法的集合。关系可以表示具有孔或多个区域的复杂形状。关系也将有一个唯一的标识符,并将被标记为类似的方式。

您可以从OSM Wiki阅读更多关于这些数据元素的信息:

第三步:定义流程第三步:消化数据

现在,您应该至少对构成OSM文件的数据元素进行肤浅的理解。此时,我们有兴趣使用您的首选语言读取OSM数据。虽然这一步是Python中心,如果您不想使用Python,则您仍然应该阅读此部分,因为它包含一些提示和技巧。

xml包由defau包括lt with most standard Python distributions. We will use this package to very easily parse our OSM file as shown in the first image. In a single for loop, you can process the handling of OSM data for each particular data element.

在图像的最后一行,您会注意到我检查了“bounds”标记。这一步对于将纬度和经度值转换为屏幕上的像素非常重要。我强烈建议在加载OSM文件时运行此转换,因为数据的大规模转换是过程密集型的。

说到把纬度和经度转换成屏幕坐标,在这里是我写的计算功能的链接。您可能会注意到将纬度转换为屏幕坐标的一些奇怪。与经度相比,涉及额外的一步!事实证明,使用伪符号投影方法建模OSM数据。幸运的是,OSM对此主题有很棒的文档在这里,并为大量语言提供纬度转换函数。令人惊叹的!

Note:在我的代码中,屏幕坐标(0,0)是屏幕的左上角。

步骤4:Python映射样式器实现

到目前为止,我已经讨论了OSM数据文件-它是什么,如何读取它,以及如何处理它。现在我将讨论我编写的用于处理风格地图可视化的软件(GitHub repo在简介中提供)。

我的具体实施侧重于用户控制渲染管道。具体地,我允许用户选择它们想要可见的层以及它们如何可视化该图层。正如我前面简要提及的那样,有两种呈现的元素:填充物品和行项目。金宝博娱乐城填充仅由颜色定义,而行由颜色,线宽,线条样式,线路上限样式和线路连接方式定义。

As the user makes modifications to layer styles and visibility, the changes are reflected in the map widget to the right. Once a user has modified the map's appearance to their satisfaction, he can adjust the maximum map dimension and save the map as an image on his computer. In saving an image, a user configuration file will also be saved. This ensures a user can recall and reuse the configuration he used to generate an particular image at any time.

第五步:实施缺陷+解决方案

当我第一次开始手动设计地图样式时,我知道这是一个相当乏味的过程。由于有大量可用的“旋钮”,为用户提供最大的控制可能会让人不知所措。

我开始识别我特别感兴趣的层次。为了这个指示的目的,让我们说我对建筑物(所有这些),河流,主高速公路和地表街道最感兴趣。我会编写一个脚本,我创建一个实例配置,使用setItemState()功能和定义常量,并根据我想要如何使用的图层来设置颜色设置值()。The resulting configuration file that gets saved can be copied into the configs folder and loaded by the user.

上图中是一个示例脚本。第二幅图是helper函数的示例,由于它们基本上都是相同的,只是常数不同,所以我只提供了一个示例的图片。

步骤6:需要改进的领域

After reflecting on my software implementation, I've identified several areas that would be helpful improvements for power users.

  1. 动态层渲染。目前,我有一个将呈现的预定义的图层列表,即它。部分理由是难以确定层是否应该是一行或填充物。结果,您打开几乎每个OSM文件,您将被打招呼,这是一个关于将无法呈现的层的警告。通常这些是如此最小,这不是一个问题,但是缺少临界层缺失。动态层渲染将消除这些问题。
  2. Dynamic layer assignment。This goes hand-in-hand with #1; if you want dynamic layer rendering, you need dynamic layer assignment (i.e., identifying a fill layer vs. a line layer). This could reasonably be accomplished, as I've learned, because Ways whose first and last node are the same will be enclosed paths and therefore filled.
  3. 颜色组。程式化的地图通常具有多个具有相同风格的层,并使用户同时可以大大降低用户的时间花费一对逐个将大大减少用户的时间。

Step 7: Closing Thoughts

Thank you everyone for taking the time to read through my Instructable. This project represents the culmination of many hours of research, design, programming, and debugging. I hope I've been able to provide a launch pad from which you can build your own project or build on what I've already written. I also hope my shortcomings and tips provide plenty of points to consider in your design. If you're less inclined to program and more inclined to create works of art, I'd love to see what you make in the comments! The possibilities are endless!

特别感谢OpenStreetMap的贡献者!没有他们的巨大努力,这样的项目是不可能的。

如果您在评论中有任何问题,请告诉我!

Maps Challenge

Runner Up in the
Maps Challenge

2人制作了这个项目!

Recommendations

  • 任何事都有可能

    任何事都有可能
  • Block Code Contest

    Block Code Contest
  • Make it Real Student Design Challenge

    Make it Real Student Design Challenge

4 Discussions

0
AndersJ3

5 months ago

Nice work, quite impressive. You have implemented a GIS application.

What you done is interesting and impressive. Part of what you have done can be done by GIS programs like QGis, and data can be retrieved by Gis Servers. The filtering can be done there, so much of the filtering you done can be done there. So you might want to continue to look at this.

但正如我写的那样,我认为你所做的事情非常有趣,谢谢。

0
层堡垒

回复5 months ago

Thank you for the comment! This was one of those "art of the possible" projects I did to exercise my skills.

1
ccotton1

6个月前的Step 7

很酷!很长一段时间以来,我一直在留意那些不反映房款的软件,而正是这些软件做了这件事。我不能停止想象我将如何使用这个。非常感谢!

0
层堡垒

回复5 months ago

Thank you! I'm so glad to hear you will get some good use out of this! Keep an eye on the GitHub, I'll be updating the code soon!