OpenStreetMap + Canvas 城市地图实践：EveryCityMap 的五个工程取舍
内容提要
EveryCityMap是一款基于OpenStreetMap数据的浏览器城市地图工具，支持500座城市和五种主题。文章介绍了五个工程取舍：保留城市自然形状而非矩形视窗、共享城市几何数据支持多主题、按语义图层组织数据、确保预览与导出一致、预存数据减少在线依赖。作者强调Canvas渲染的稳定性，并探索真实城市作为游戏地图的可能性。
延伸解读
语义图层与主题分离的工程价值
文章强调将城市几何数据与视觉主题分离，使同一份数据支持多种主题。这种设计不仅避免了重复存储，还保留了扩展性。对开发者而言，这种分层思路可降低维护成本，并允许未来新增主题或功能时无需改动底层数据。同时，语义图层（如道路、水域）的划分也为游戏化应用提供了基础，使同一城市可强调不同元素。
Canvas渲染一致性的重要性
作者指出预览与导出必须使用同一套渲染逻辑，以避免用户所见与所得不一致。这提醒开发者，在涉及图像导出的应用中，应确保渲染路径统一，避免因字体、透明度或绘制顺序差异导致结果偏差。此外，稳定的绘制顺序（如先水域后道路）对地图视觉效果至关重要，错误顺序会破坏空间感。
预存数据与缓存策略的取舍
为了提升稳定性和加载速度，EveryCityMap预存城市数据并通过CDN和本地缓存交付，而非依赖实时在线服务。这种策略增加了前期工作量，但换来了更可预测的用户体验。对于需要频繁访问或离线使用的应用，预存数据可减少网络依赖，但需权衡数据更新频率和存储成本。
浏览器兼容性问题的处理经验
文章提到Safari中Canvas模糊效果产生色带的问题，最终通过低分辨率透明画布分步处理解决。这提示开发者，Canvas在不同浏览器中的渲染结果可能不一致，不能仅凭参数推测。对于图形密集型应用，需在目标浏览器中反复测试，并考虑使用替代方案或降级策略。
Q&A
EveryCityMap 是什么？它有哪些主要功能？
EveryCityMap 是一个运行在浏览器中的城市地图工作室，基于 OpenStreetMap 数据，目前支持 500 座城市，可以切换五种主题（Ink、Paper、Night、Metro、Atlas），编辑图层与颜色，生成分享图，并无需注册即可导出 1440px WebP 图片。
EveryCityMap 的五个工程取舍是什么？
五个工程取舍是：1. 保留城市自然形状而非矩形视窗；2. 共享一份城市几何数据支持所有视觉主题；3. 按语义图层组织数据，先理解图层意义再决定颜色；4. 确保预览和导出使用同一套渲染逻辑；5. 预存城市数据并通过 CDN 和缓存减少在线依赖。
为什么 EveryCityMap 不采用矩形视窗，而是保留城市的自然形状？
因为矩形视窗会切断河流、岛屿等自然特征，使不同城市看起来相似。保留自然构图能更好地展现城市特色，也便于未来作为游戏地图时，城市结构能自然成为路线、区域和关卡边界的基础。
EveryCityMap 如何实现多主题切换而不重复准备城市数据？
城市几何和视觉主题被分成两部分：城市几何描述“城市里有什么”，视觉主题决定“怎样被看见”。所有主题共享同一份城市几何数据，切换主题时只需让 Canvas 按新的视觉规则重绘，无需重新准备城市数据。
EveryCityMap 中语义图层的作用是什么？
语义图层将城市数据整理为道路、水域、陆地、绿地、铁路等类别，每个图层有明确的语义意义。主题决定显示哪些图层以及如何渲染，用户也可以关闭图层、修改颜色。这种设计便于编辑和游戏化，因为可以强调不同方面而无需重新处理底层几何。
EveryCityMap 如何保证预览和导出的图片一致？
编辑器预览、分享图和 WebP 导出共同依赖同一套 Canvas2D 渲染逻辑。界面负责修改状态，渲染器负责将状态绘制成画面，确保用户看到什么，导出的就是什么。
EveryCityMap 如何处理 500 座城市的数据加载，以减少在线依赖？
EveryCityMap 提前准备城市数据，通过 CDN 和浏览器本地缓存交付。主题切换只改变视觉表达，不重复下载城市几何；再次打开同一城市时尽量复用已有数据。这样避免了每次访问都依赖在线服务，提高了稳定性和可预测性。
在开发 Atlas 主题时，作者遇到了什么浏览器兼容性问题？如何解决的？
在 Safari 中，用于柔化海岸的 Canvas 模糊效果产生了有规律的色带。增大模糊值无效，反而让边缘更脏。最终改为先在较低分辨率的透明画布上分别处理海岸效果，再合成回最终画面。
EveryCityMap 的灵感来源是什么？作者最初想用它做什么？
作者想用真实城市做游戏地图，因为真实城市本身很像设计过的游戏关卡：道路是路径，河流是边界，桥梁是连接点。他先决定制作一个地图生成工具，后来发展成 EveryCityMap。
