概述
地图要让人一眼看出答案
多数商业地图失败的原因就那三条：图层太多，同时争夺注意力；配色暗示了一种数据并不支持的规律；以及体积大到还没渲染完，读者已经走了。
我们围绕问题来设计。一个主图层承载核心信息，背景信息主动退后，分级方式是刻意选定的，而不是接受一个恰好把分界线放在好看位置上的默认值。
性能被当作设计约束来对待。大体量图层转成矢量瓦片，重交互地图先以静态预览呈现、读者主动点开再加载，任何环节都不会阻塞页面其余部分的渲染。
输出示例
同一份数据，画在地图上
这里是静态预览，而不是内嵌地图 SDK，页面因此保持轻快。交互式地图可以作为可视化项目单独构建。
服务范围
我们做什么
小到一张嵌入式地图，大到一整套分析界面。
交互式网页地图
支持平移、缩放、筛选与查看明细，按数据量选用 MapLibre、Leaflet 或 deck.gl。
分级设色图
按区域取值着色，分级方式经过挑选与论证，而不是沿用默认值。
点位与聚合地图
通过聚类、分箱或瓦片渲染，让大规模点集依然清晰可辨。
热力图图层
采用感知均匀色带的密度表面，配一个诚实的图例。
流向与路径地图
呈现起终点与移动轨迹，不让线条纠成一团。
带时间维度的地图
以动画或分步方式呈现随时间的变化，带时间轴拖动控件。
数据看板
地图与图表、表格组合在一起，一次筛选联动全部视图。
矢量瓦片
生成 MBTiles 或 PMTiles，让百万级要素的图层在浏览器里依然流畅。
印刷制图
高分辨率 PDF 与 SVG，供报告、规划文件与演示使用。
可嵌入组件
可直接放进你现有网站或产品的 React 组件。
交付格式
按你的技术栈习惯的方式交付
- 已部署的网页地图
- 部署在你的基础设施或我们的环境上，源码与构建说明一并移交。
- React 组件
- 带类型定义与文档的组件，可直接放进现有应用。
- 矢量瓦片
- PMTiles 或 MBTiles，附渲染所用的样式规范。
- 静态导出件
- 印刷分辨率的 PNG、SVG 与 PDF，含图例与数据来源标注。
- 样式规范
- 以数据形式描述的地图样式，可复用，也可纳入版本管理。
样例数据
你实际拿到的是什么
示例项目数据。我们在开工之前就为每个图层定好传输体积预算，因为性能上的取舍放在设计阶段做，成本要低得多。
| 图层 | 要素数 | 分发方式 | 传输体积 | 首次绘制 |
|---|---|---|---|---|
| 底图 | — | 矢量瓦片 | 180 KB | 0.4 s |
| 行政边界 | 412 | GeoJSON | 62 KB | 0.5 s |
| POI 点位 | 23,517 | PMTiles | 310 KB | 0.7 s |
| 热力图表面 | — | 栅格瓦片 | 240 KB | 0.9 s |
| 标注 | 1,840 | 矢量瓦片 | 48 KB | 0.9 s |
服务流程
五个步骤，每个项目都一样
- 步骤 01
说明你需要什么数据
提供数据，并说明这张地图要为它的受众回答的那一个问题。
- 步骤 02
我们确定数据范围
共同敲定图层、交互方式、性能预算与无障碍访问要求。
- 步骤 03
我们采集并处理数据
准备数据，做适度简化，数据量大的部分切成瓦片。
- 步骤 04
我们校验数据集
在移动端与受限网速下测试，并用键盘操作和读屏软件逐项验证。
- 步骤 05
我们交付最终成果
已部署的地图或组件，附源码、样式与文档。
按图层数量、需要多少交互，以及地图背后的数据量来报价。告诉我们它最终要放在哪里——报告、看板还是你自己的产品，你会拿到一份对应书面工作范围的固定报价。
常见问题
客户经常问到的问题
你们用哪些地图库？
多数交互场景用 MapLibre GL；当轻量比样式控制力更重要时用 Leaflet；超大规模点集与流向数据用 deck.gl；非滑动式的定制地图用 D3 或纯 SVG。选择依据是数据量与交互需求，不是习惯。
地图会拖慢我们的网站吗？
做法得当就不会。地图库只在读者主动交互时才加载，在此之前先展示静态预览。图层都做了瓦片化并设有体积预算，再重的地图也不会阻塞页面其余部分的渲染。
能贴合我们的品牌风格吗？
可以。我们会按你的色板与字体构建底图样式，并检查配色的对比度以及色觉障碍下的可辨识度——多数品牌色板从未做过这项检验。
能处理非常大的数据集吗？
可以。要素量超过大约五万之后，我们会改用矢量瓦片或 GPU 渲染，而不是把 GeoJSON 直接推给浏览器。这样在笔记本上交互依然顺滑，在手机上也能用。
地图支持无障碍访问吗？
我们会提供键盘操作、有实际含义的替代文本、同一份数据的表格视图，以及在常见色觉障碍下仍能区分的色带。一张只能用鼠标、且要求色觉正常才看得懂的地图，是不完整的交付物。
项目可以移交给我们的开发团队吗？
可以。交付物包含源码、样式规范、构建说明和一次讲解交接。后续运行不依赖我们。
下一步
有具体的数据需求？
告诉我们地图可视化需要覆盖哪片地域、包含哪些字段、多久刷新一次。正式开工前，你会先拿到明确方案、样例数据与固定报价。