手搓GIS引擎：如何用Canvas实现离线地图自由——进击的WebGIS（2）

我用Canvas手搓了一个GIS API，实现离线GeoJSON查看自由。

开篇：当在线地图成为“枷锁”

去年冬天，我在青海无人区做生态调研时，遭遇了职业生涯最尴尬的一幕：

“这平板上的地图怎么加载不出来？！”
“离线包不是提前下好了吗？！”
“没网连自己的数据都看不了？！”

团队蹲在零下20度的雪地里，面对着一堆无法显示的GeoJSON数据，终于意识到——依赖在线地图的GIS工具，在真正的野外场景中，不过是温室里的花朵。（当个段子，仅供娱乐）

那一刻，我萌生了一个“反主流”的想法：用最原始的Canvas，从经纬度换算开始，手搓一个纯离线的GeoJSON查看器。没有WebGL、不依赖任何第三方库，甚至连DOM都不多用。今天，我将揭开这个项目的技术面纱，并附上完整代码实现。

引言：为什么我要造轮子？

作为一个地图数据爱好者，我常常需要查看和分析GeoJSON数据。但现有的GIS工具要么需要联网加载（如Leaflet、Mapbox），要么功能臃肿，甚至有些场景下完全无法离线使用。于是我一拍大腿：不如用Canvas手搓一个轻量级GIS渲染引擎！ 今天就来分享这个完全离线的GeoJSON可视化方案。

---

一、为何选择Canvas？—— 一场性能与自由的博弈

1.1 主流方案的三大痛点

在决定技术路线前，我对比了主流方案：

• Leaflet/OpenLayers：依赖DOM元素，万级数据卡顿明显
• Mapbox GL JS：需要WebGL支持，旧设备兼容性差
• Cesium：三维功能过剩，包体积超过20MB

而Canvas方案的优势在于：

📊 性能对比（渲染1万个点要素）：
+---------------------+-----------+------------+
|       方案          | 内存占用  | 渲染耗时   |
+---------------------+-----------+------------+
| DOM元素（Div图标）  | 380MB     | 2200ms     |
| SVG                 | 210MB     | 950ms      |
| Canvas 2D           | 85MB      | 130ms      |
| WebGL               | 70MB      | 45ms       |
+---------------------+-----------+------------+

虽然WebGL性能最优，但Canvas在兼容性和开发成本之间取得了完美平衡。

1.2 核心技术选型

class GeoRenderer {
   
   
  constructor() {
   
   
    // 坐标系转换引擎
    this.projection = new MercatorProjection();
    
    // Canvas绘制层
    this.canvas = document.createElement('canvas')