uMap 简明使用教程
创建你自己的 OSM Web 地图
阅读时间 2 分钟
简介
OSM 全称 Open Stree Map (开放街道地图) 。是一个 内容自由 的地图协作计划。像维基百科一样,所有人都能自由编辑这个世界地图。用户可以编辑地图数据、浏览修订历史、上传 GPS 路径、下载数据导入 GIS (地理信息系统) 软件。
uMap 能在基于 OSM 图层的地图上添加您自己的可交互内容,并将地图嵌入到您的网站。
快速开始
uMap 主页 https://umap.openstreetmap.fr
注册 OSM 帐号并登陆
提示:虽然不登陆即可创建地图,但只能通过 编辑链接 来编辑地图,并且地图为公开可见。因此 不推荐在未登陆状态下创建地图。
-
点击 uMap 主页上方的
Log in / Sign in
-
选择 OSM 图标
-
注册并登陆
创建地图
-
登陆后,点击 uMap 主页右上方的
Create a map
-
进入新建的地图后,点击右上方的蓝色
Save
按钮。Save
按钮变为灰色则说明保存成功。 -
刷新网页
设置地图公开状态
地图默认为公开,也就是所有人都可以查看您的地图。
⚠Bug:创建地图后请刷新一次网页,否则无法更改公开状态。
点击右侧工具栏的钥匙
Who can view
一项设置为 anyone with link
。
导入地图数据
点击右侧工具栏的上传
china.json
文件(本示例中用的是中国省份轮廓数据)。格式为 geojson
。
创建可交互内容
uMap 支持创建三种地图 Feature (标记),点击对应图标即可创建。
-
Marker 点
-
Polyline 线
-
Polygon 面
在 编辑状态下 点击任意 Feature。选择第一个铅笔图标即可对该 Feature 进行详细编辑。
能设置的属性太多,这里仅挑几个常用的介绍
-
Description
用户点击该 Feature 后弹出窗口中的内容。字号、加粗、图片等内容有特殊语法,点击旁边的❓
查看提示。将在下一小节详细介绍。 -
Shape properties
定义形状相关的属性。例如颜色、透明度等。 -
Interaction options
定义交互相关的属性。-
Link to
设置点击该 Feature 后跳转到的外部网页 -
Popup shape
设置弹窗样式⏫ 普通弹窗(默认,适合内容较少的情况)
⏫ 侧边弹窗(适合长内容、多图片的情况)
-
⚠ 警告:由于地图是在线编辑,建议常按保存。由于网站架设在国外,可以尝试使用 VPN 加速,加速效果因网络环境而异。
编辑 Description
弹窗内容使用类似 Markdown 格式的语法。例如左右各一个星号表示斜体,两个星号表示粗体。 *italic*
,将显示为 italic 。**this is bold**
将显示为 this is bold。
以下是各种格式示例。
*simple star for italic*
**double star for bold**
# one hash for main heading
## two hashes for second heading
### three hashes for third heading
Simple link: [[http://example.com]]
Link with text: [[http://example.com|text of the link]]
Image: {{http://image.url.com}}
Image with custom width (in px): {{http://image.url.com|width}}
Iframe: {{{http://iframe.url.com}}}
Iframe with custom height (in px): {{{http://iframe.url.com|height}}}
Iframe with custom height and width (in px): {{{http://iframe.url.com|height*width}}}
--- for an horizontal rule
图片 (Image) 需要使用外部链接(不能是本地电脑上的图片)。要将上传到网络上并获得外部链接 (URL),需要使用图床工具。国内外都有很多免费的图床平台可以使用。例如图片的 URL 是 http://image.url.com
那么需要在用两个花括号 URL 括起来 {{http://image.url.com}}
放到 Description 中。
Iframe 是内嵌网页。可以将另一个网页 内嵌 到地图中。
导出地图
点击工具栏中的地图设置
Advanced actions
中的 Download
按钮。
选择 full map data
然后下载数据即可。
常见问题
-
怎么绘制 Polygon 面?一按
ESC
就取消绘制了。要结束绘制 Polygon,重复点击已绘制的点即可结束绘制。
-
明明设置了,但是点 Feature 不会弹窗?
需要 退出编辑模式 后点击 Feature 才能看到弹窗的效果。
-
怎么退出编辑模式?
点击右上角的蓝色
Save
按钮。待按钮变为灰色后点击Disable editing
即可退出编辑。 -
图片太小。
设置
Interaction options
中的Popup shape
为large
或者side panel
即可得到一个较大的弹窗。