在地图开发、瓦片服务调试、数据核对和手绘图对齐的过程中，经常会遇到一些看似简单但很费时间的问题：

  • 当前鼠标位置对应哪个瓦片？
  • 一个瓦片的四角经纬度是多少？
  • 高德、百度、OSM、WGS84 的瓦片编号有什么差异？
  • 某个经纬度范围会覆盖多少个瓦片？
  • 一张手绘图放在地图上，大概覆盖哪些坐标和瓦片？

TileScope 瓦片坐标工作台就是为这些场景准备的。它不是完整 GIS 平台，也不是普通地图浏览器，而是一个专注于”看清楚瓦片、坐标、范围和匹配结果”的轻量工具。

目录

1. 功能概览

功能 说明
多坐标系切换 支持 OSM / WGS84 / 高德 / 百度瓦片源
瓦片栅格显示 叠加瓦片框，展示 z/x/y 与四角坐标
实时鼠标坐标 经纬度 + 所在瓦片编号实时显示
坐标拾取 点击地图拾取位置，自动复制瓦片信息
经纬度定位 输入坐标和 zoom 快速跳转
瓦片范围查询 按经纬度范围计算覆盖瓦片
视图瓦片导出 导出当前视图覆盖瓦片清单（CSV）
手绘图配准 上传手绘图并人工对齐，计算覆盖范围
多格式导出 支持 JSON / CSV / GeoJSON 导出

2. 支持多种坐标系与瓦片源

TileScope 当前支持几类常见在线瓦片源：

坐标系 瓦片源 说明
EPSG:3857 OpenStreetMap XYZ 标准 Web Mercator 瓦片
WGS84 / EPSG:4326 EPSG:4326 WMS 栅格瓦片
高德 / GCJ-02 高德在线瓦片 火星坐标系
百度 / BD-09 百度在线瓦片 支持百度瓦片坐标换算

切换坐标系后，地图底图、瓦片编号、zoom 范围和坐标显示都会同步变化。

3. 瓦片栅格与四角坐标

打开”显示栅格”后，地图上会叠加当前视图范围内的瓦片框。每个栅格会显示：

  • 坐标系名称
  • z / x / y
  • 西北角 / 东北角 / 西南角 / 东南角坐标

所有坐标统一保留 6 位小数，方向使用中文显示，方便直接阅读和复制。

点击任意栅格后，右侧面板会显示该栅格详情，并自动复制完整信息。复制内容包含瓦片 URL，百度模式下还会包含百度瓦片坐标。

4. 实时鼠标坐标追踪

鼠标在地图上移动时，右侧面板会实时显示：

  • 当前经度 / 纬度
  • 鼠标所在瓦片 z / x / y
  • 百度模式下的百度瓦片坐标

适合快速检查某个位置到底落在哪个瓦片上。

5. 坐标拾取与信息复制

切换到”拾取”模式后，点击地图任意位置，TileScope 会：

  1. 在地图上标记拾取点
  2. 显示经纬度与所在瓦片编号
  3. 显示真实瓦片 URL
  4. 自动复制拾取点信息

适合在排查问题、记录位置、生成瓦片请求地址时使用。

6. 经纬度定位

顶部提供经纬度定位工具，输入经度、纬度和 zoom 级别，点击”定位”后地图会跳转到指定位置和级别。切换坐标系时，zoom 选项会自动按照当前坐标系更新。

7. 瓦片范围查询

右侧工作面板提供”瓦片范围查询”，输入西 / 南 / 东 / 北侧经纬度和 zoom 级别，点击”计算范围”后会返回：

  • x / y 范围
  • 瓦片数量
  • 覆盖瓦片列表与瓦片 URL

结果可以复制，也可以导出为 CSV。点击”填入当前视图”可自动把当前地图边界填入查询表单。

8. 导出当前视图瓦片清单

点击”导出视图瓦片”，可以直接导出当前地图窗口覆盖到的瓦片清单。CSV 中包含 z、x、y、百度瓦片坐标和瓦片 URL，对瓦片下载、缓存检查、服务请求排查很实用。

9. 手绘图上传与人工配准

TileScope 支持上传一张手绘图、截图或草图。手绘图会作为独立浮层显示在地图上：

  • 可以拖动、缩放、调整透明度
  • 可以锁定，避免误操作
  • 不会跟随地图自动移动或缩放

这种设计适合人工对齐：你可以单独调整地图，也可以单独调整图片，直到它们看起来匹配。

点击”计算匹配位置”后，工具会把当前图片四角投影到地图坐标中，得到四角坐标、覆盖瓦片范围、瓦片数量、四角所在瓦片和覆盖瓦片列表。计算后，覆盖到的瓦片会在地图上高亮显示。

10. 匹配结果导出

手绘图匹配结果支持一键复制，也支持导出为 JSON、CSV、GeoJSON 三种格式。其中 GeoJSON 可以用于后续 GIS 工具或地图系统中查看大致覆盖范围。

11. 快捷操作

操作 说明
复制当前地图状态 一键复制经纬度、zoom 等信息
回到中国视图 快速回到全国范围
定位到手绘图覆盖范围 跳转到手绘图所在区域
导出当前视图瓦片 快速生成瓦片清单 CSV

12. 推荐操作流程

场景一：查看某个位置对应哪个瓦片

  1. 选择坐标系
  2. 用顶部定位工具跳转到指定经纬度
  3. 切换到”拾取”模式
  4. 点击地图目标位置
  5. 在右侧查看并复制经纬度、瓦片编号和瓦片 URL

场景二：检查某个瓦片四角坐标

  1. 打开”显示栅格”
  2. 缩放地图到需要的 zoom
  3. 点击目标栅格
  4. 在右侧查看栅格详情并复制

场景三：生成某个范围的瓦片清单

  1. 在右侧”瓦片范围查询”中输入西、南、东、北经纬度
  2. 选择 zoom 级别，点击”计算范围”
  3. 查看覆盖瓦片数量和范围
  4. 点击”导出 CSV”生成瓦片清单

场景四：导出当前地图视图瓦片

  1. 拖动和缩放地图到目标区域
  2. 点击”导出视图瓦片”
  3. 得到当前视图覆盖瓦片的 CSV 文件

场景五：对齐手绘图并导出坐标

  1. 切换到”手绘图”模式，上传图片
  2. 调整图片位置、大小和透明度
  3. 移动或缩放地图，使图片和地图内容对齐
  4. 点击”计算匹配位置”
  5. 查看四角坐标和覆盖瓦片
  6. 导出 JSON、CSV 或 GeoJSON

13. 适合人群

  • 地图前端开发者
  • WebGIS 工程师
  • 瓦片服务维护人员
  • 需要核对坐标和瓦片编号的数据人员
  • 需要把手绘图、截图、草图和地图做人工对齐的人
  • 需要生成瓦片清单、瓦片 URL、覆盖范围结果的人

在线体验： TileScope 瓦片坐标工作台