# OpenStreetMap Nominatim / GeoJSON 静态 SVG 地图渲染器（POI 图标 + 路线叠加）

把 GeoJSON FeatureCollection 渲染为无 tile 依赖的可嵌入静态 SVG：OSM Carto 风格的水域/绿地/建筑/分等级道路，按 amenity/shop/tourism 标签分类的带标签 POI 图钉，叠加 GeoJSON LineString 路线并按测地方位角画方向箭头，含比例尺、经纬网格与完整 OSM 署名（© OpenStreetMap contributors，ODbL）；可选 Nominatim 地理编码（≤5 查询、按官方政策限速并携带标识 User-Agent）叠加地点标记。

> 标准页面: https://elysiatools.com/zh/tools/openstreetmap-nominatim-geojson-static-svg-map-renderer-with-styled-poi-icons-and-route-overlay

- **分类:** Geography

- **关键词:** GeoJSON 转 SVG, 静态地图, OSM Carto 风格, POI 图标, 路线叠加, 方位箭头, Nominatim 地理编码, OpenStreetMap 署名, ODbL, Web Mercator, 无 tile 地图, 徒步地图, 旅行博客地图, 离线地图

## 概述

投影为 Web Mercator（EPSG:3857 slippy 数学）并按数据 bbox 适配画布；配色取 OSM Carto 经典体系（水 #aad3df、绿地 #add19e/#c8facc、住宅地 #e0dfdf、建筑 #d9d0c9、机动车道 #e892a2、干道 #f9b29c、主要路 #fcd6a4、次要路 #f7fabf、白色住宅路带描边）。POI 按 amenity（restaurant/cafe/bar/parking/information）、tourism（hotel/viewpoint/attraction/museum）、shop 标签分类配色并绘制图形符号，标签用白色描边（paint-order）保证可读。路线 LineString 高亮为蓝色，每段中点按测地方位角公式 θ=atan2(sinΔλ·cosφ₂, cosφ₁·sinφ₂−sinφ₁·cosφ₂·cosΔλ) 画方向箭头（Mercator 为正形投影，局部方位角保持，屏幕旋转 = 方位角 − 90°）。比例尺由 bbox 中心纬度的米/像素换算。SVG 内嵌 OSM 署名并链接 openstreetmap.org/copyright（OSMF 署名指南要求 © OpenStreetMap contributors + ODbL）。Nominatim：官方政策要求绝对不超过 1 请求/秒且提供可识别应用的 User-Agent——本工具限制 ≤5 个查询、间隔 1.1 秒、User-Agent 标识 elysia-tools；查询失败会以警告呈现而不中断渲染。

## 输入项

- **GeoJSON FeatureCollection** (textarea): {"type":"FeatureCollection","features":\[…\]}
- **Nominatim 地点查询（最多 5 个，分号分隔）** (text): Brandenburg Gate; Eiffel Tower (leave empty for offline)
- **SVG 宽度（px）** (number)
- **SVG 高度（px）** (number)
- **POI 标签** (checkbox)
- **路线方位箭头** (checkbox)
- **比例尺** (checkbox)
- **经纬网格** (checkbox)
- **生成可下载 .svg 文件** (checkbox)

## 适用场景

- 需要将包含多边形、路线及兴趣点的 GeoJSON 数据直接导出为轻量级、可嵌入博客或文章的独立 SVG 矢量地图时。
- 希望在静态地图中直观展示徒步、骑行或行车路线，并自动沿线段绘制准确的前进方向指示箭头时。
- 需要离线或无瓦片地图服务支持下生成带 OSM Carto 标准样式、POI 图标与合规署名信息的静态插图时。

## 工作原理

- 输入 GeoJSON FeatureCollection 文本，根据全部要素计算边界框（BBox），并通过 Web Mercator（EPSG:3857）投影算法适配至指定像素尺寸画布。
- 按层级顺序渲染地理要素，将水域、绿地、住宅区、建筑与各级道路匹配 OSM Carto 经典色彩及描边规则。
- 为 amenity、tourism、shop 等分类的 POI 点生成图标与白色描边防遮挡文字标签，并根据线段测地方位角在路线中点计算并绘制方向箭头。
- （可选）输入最多 5 个地点名称调用 Nominatim 接口完成地理编码追加标记，并组合比例尺、经纬网格与 ODbL 署名生成最终 SVG。

## 使用案例

- 户外运动博主为徒步、越野或骑行路线生成带有行进方向箭头和补给点 POI 标识的静态路线图。
- 旅行指南编辑快速制作标有酒店、餐厅、停车场及主要观光景点的区域导览矢量插图。
- GIS 工程师与技术团队将小范围地理要素快速出图为轻量 SVG 矢量文件，用于报表嵌入或离线文档分发。

## 常见问题

### 生成 SVG 地图时是否需要加载底图瓦片（Tiles）？

不需要。本工具直接基于输入的 GeoJSON 几何数据在矢量画布上绘制多边形、线段与图标，完全脱离外部地图瓦片。

### 路线上的方向箭头是如何计算角度的？

工具针对 LineString 的每个分段，基于起点与终点经纬度使用大圆测地方位角公式计算出前进角度，并在正形投影下旋转绘制箭头。

### 使用 Nominatim 地名查询有什么限制？

为了遵守官方政策，最多支持 5 个地点查询（分号分隔），请求间隔固定为 1.1 秒并携带标识 User-Agent，查询失败不会中断整体地图渲染。

### POI 标签文字是如何避免与底图混淆的？

标签文字应用了 SVG paint-order 白色描边（Halo）效果，即使覆盖在深色水体或复杂道路上方也能清晰辨认。

### 生成的地图是否可以直接商用或发布？

可以。SVG 输出已内置符合 OSMF 规范的“© OpenStreetMap contributors”版权链接与 ODbL 署名标识。

## 相关工具

- [音频旋律轮廓提取器](https://elysiatools.com/zh/tools/audio-melody-contour-extractor): 从音频中提取主导旋律，并在一个 ZIP 中导出 MIDI、音符事件、音高轮廓、SVG 和 JSON。
- [Data URI 生成器](https://elysiatools.com/zh/tools/data-uri-generator): 将文件转换为 Data URI（Base64 或百分号编码），用于直接在 HTML、CSS 或 Markdown 中内联图片、字体等资源
- [CSV 直方图、散点图与箱线图图表工作台](https://elysiatools.com/zh/tools/csv-histogram-scatter-box-plot-chart-studio): 上传或粘贴 CSV 即刻出图：支持 Sturges / Freedman-Diaconis / Scott 分箱的直方图、带 Pearson r 与最小二乘拟合的散点图、Tukey 箱线图——每张图均可下载 PNG 与 SVG。
- [ECharts 主题 Token 抽取器](https://elysiatools.com/zh/tools/echarts-theme-token-extractor): 从 ECharts 主题 JSON 抽取设计 token——颜色、数字、字号与字符串——并直接导出到你的设计系统。粘贴一个主题对象（即通过 echarts.init(dom, themeName) 注册的那种），工具遍历每个叶子节点，为每个颜色（可选地将命名色/rgb 规范化为 hex）、间距数字、字号与字符串打标，然后输出干净的 CSS 变量、Tailwind theme.extend 配置、Style Dictionary tokens.json 或 SCSS 变量。在 ECharts 可视化主题与 Figma/CSS/Tailwind 设计 token 之间架桥，无需逐个手抄。
- [OCR PDF 转结构化 JSON 桥](https://elysiatools.com/zh/tools/ocr-pdf-to-structured-json-bridge): 按几何结构抽取 PDF 文本层（y 坐标分行、列间隙识表、字号识标题、冒号键值对），然后逐字段填入用户提供的 JSON Schema——标签按归一化键名匹配、值按声明类型归一化，并用 ajv 校验。
- [象形图生成器](https://elysiatools.com/zh/tools/pictograph-generator): 使用图标/符号创建象形图来表示数量，支持自定义图标、颜色和布局
- [播客章节标记生成器（ID3 / Podcasting 2.0）](https://elysiatools.com/zh/tools/podcast-chapter-marker-builder): 粘贴时间码章节列表，一次生成全部交付格式：Podcasting 2.0 章节 JSON（v1.2.0）与 RSS podcast:chapters 标签、可选把 ID3v2.4 CHAP+CTOC 章节帧直接烧入上传的 MP3（毫秒为普通大端 uint32、偏移 0xFFFFFFFF、每章嵌 TIT2 子帧、保留原有标签帧）、Vorbis CHAPTER001 注释对（OGG/Opus）、mp4chaps 文本、YouTube 说明栏时间戳块与 SRT 副车文件，并附各播放器真实支持情况（Apple 自 2025 起支持 RSS JSON；Pocket Casts/Overcast 仅读内嵌 ID3；Spotify 两者都不读）。
- [SQL 执行计划可视化器](https://elysiatools.com/zh/tools/sql-explain-plan-visualizer): 粘贴 EXPLAIN / EXPLAIN ANALYZE 输出（PostgreSQL/MySQL/SQLite），渲染为成本树，标注估算行数与实际行数的偏差热点，并给出具体的索引建议

## 示例

- [D3.js 数据可视化示例](https://elysiatools.com/zh/samples/d3js-data-visualization): 全面的D3.js数据可视化示例，包括图表、地图、动画和交互式可视化
- [SVG示例](https://elysiatools.com/zh/samples/svg-samples): 可缩放矢量图形（SVG）示例，展示各种SVG功能和技术
- [SVG 查看器样本](https://elysiatools.com/zh/samples/svg-viewer-samples): 用于浏览器内 SVG 查看器的样本矢量图
- [GeoJSON 查看器示例](https://elysiatools.com/zh/samples/geojson-viewer-samples): 用于浏览器内预览的 GeoJSON 示例