使用canvaskit搭建一个前端地图项目，实现类似原神、黑神话悟空的标点互动地图效果

2025/3/13 10:52:29 来源：https://blog.csdn.net/Beatingworldline/article/details/145510367 浏览: 次关键词：使用canvaskit搭建一个前端地图项目，实现类似原神、黑神话悟空的标点互动地图效果

也属于WebGis 前端地理信息系统
来源B站：小猿_Eric
视频教程地址

目前最常用的 JavaScript 地图库，包含 Canvaskit（Skia）和**Leaflet** 等

CanvasKit运用了WebAssembly的构建技术,将skia图形渲染能力的API扩展到web上。
也就是说CanvasKit项目是skia的WebAssembly版本。
对于前端应用而言，canvaskit提供了图形接口，前端开发者可调用其图形绘制API进行图形绘制。
- ✅高性能渲染（通过 WebAssembly 调用 Skia 引擎）
- ✅支持复杂矢量图形、路径操作、渐变、阴影、滤镜
- ✅ 通过 WebAssembly 实现接近原生的渲染性能，适合大规模动态图形。
- ✅ 减少 JavaScript 与 DOM 交互，避免浏览器渲染瓶颈。
- ❌无地图生态支持，需从头实现
Leaflet 专注于轻量级、高性能的交互式地图开发。它被广泛用于 Web 应用、移动端应用（如 React Native）和数据可视化项目。
- ✅轻量级：压缩后仅约 70KB，加载速度快。
- ✅易用性：提供简洁的 API，支持标记（Marker）、多边形（Polygon）、图层控制等功能。
- ✅移动端友好：适配触摸屏设备，适合手机或平板应用。
- ❌ 大规模矢量数据（如数万点标记）可能导致性能下降，需优化或使用 Canvas 模式。
类似于之前接触过的WebGL和Three.js。
CanvasKit和前者一样，功能强大且专业，但不适合中小型项目和初学者。
Leaflet和后者一样，上手难度较低，且支持移动端。本次学习选用Leaflet。