水族馆

uMap 简明使用教程

创建你自己的 OSM Web 地图

阅读时间 2 分钟

简介

OSM 全称 Open Stree Map (开放街道地图) 。是一个 内容自由 的地图协作计划。像维基百科一样，所有人都能自由编辑这个世界地图。用户可以编辑地图数据、浏览修订历史、上传 GPS 路径、下载数据导入 GIS (地理信息系统) 软件。

uMap 能在基于 OSM 图层的地图上添加您自己的可交互内容，并将地图嵌入到您的网站。

快速开始

uMap 主页 https://umap.openstreetmap.fr

注册 OSM 帐号并登陆

提示：虽然不登陆即可创建地图，但只能通过 编辑链接 来编辑地图，并且地图为公开可见。因此 不推荐在未登陆状态下创建地图。

  1. 点击 uMap 主页上方的 Log in / Sign in

  2. 选择 OSM 图标

    OSM Logo

  3. 注册并登陆

创建地图

  1. 登陆后，点击 uMap 主页右上方的 Create a map

  2. 进入新建的地图后，点击右上方的蓝色 Save 按钮。Save 按钮变为灰色则说明保存成功。

  3. 刷新网页

设置地图公开状态

地图默认为公开，也就是所有人都可以查看您的地图。

⚠Bug：创建地图后请刷新一次网页，否则无法更改公开状态。

Permission setting

点击右侧工具栏的钥匙

key logo

图标，将 Who can view 一项设置为 anyone with link。

导入地图数据

Import GEO Json data

点击右侧工具栏的上传

upload logo

图标，选择 china.json 文件（本示例中用的是中国省份轮廓数据）。格式为 geojson。

创建可交互内容

uMap 支持创建三种地图 Feature (标记)，点击对应图标即可创建。

  1. Marker 点

    marker logo

  2. Polyline 线

    polyline logo

  3. Polygon 面

    polygon logo

feature example

在 编辑状态下 点击任意 Feature。选择第一个铅笔图标即可对该 Feature 进行详细编辑。

feature information

能设置的属性太多，这里仅挑几个常用的介绍

⚠ 警告：由于地图是在线编辑，建议常按保存。由于网站架设在国外，可以尝试使用 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 是内嵌网页。可以将另一个网页 内嵌 到地图中。

导出地图

点击工具栏中的地图设置

setting logo

。点击 Advanced actions 中的 Download 按钮。

选择 full map data 然后下载数据即可。

常见问题