当前位置：首页 > news >正文

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

news 来源：原创 2025/4/30 19:10:23

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

技术选型

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

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。
Mapbox GL
- ✅ 高性能矢量渲染
  基于 WebGL，支持动态矢量切片（Vector Tiles），可实现复杂的地图样式（3D 地形、动态光照、自定义图层），渲染效率高。
- ✅ 数据驱动样式
  通过 JSON 配置实现地图样式的实时更新，支持数据绑定（如根据属性动态调整颜色、大小）。
- ✅ 生态完善
  提供丰富的 SDK（JS、React、Android、iOS）和工具链（Mapbox Studio），适合企业级应用。
- ❌ 复杂度高
  学习曲线陡峭，需理解矢量切片、坐标系转换等概念。
- ❌商业化限制
  免费版有请求量限制（如 50k 次/月），高流量场景需付费。
- ❌依赖性强
  默认绑定 Mapbox 服务，若需完全自托管（如私有地图服务），需额外配置。
实际上leaflet的性能尚可接受，类似于原神地图数据量非常庞大的情况依然可以用leaflet来实现
而游民星空黑神话悟空地图用的则是Mapbox GL