郑州广告牌制作市场搜索引擎优化策略不包括

也属于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
  

项目部分

• 原图生成瓦片图
  瓦片图通常是指地图服务中的切片地图，用于将大范围的地图分割成小块，便于快速加载和显示。z/x/y.png的格式来确定坐标。

• 技术栈：Leaflet + Vue + Pinia + Axios + Ejs

• 创建项目：

npm create vue@latest

npm add sass @types/leaflet unplugin-auto-import @types/ejs -D
npm add axios leftlet ejs

• 效果在线预览https://beatingworldline.github.io/wukong-map/

• 开源项目地址https://gitee.com/jumping-world-line/wukong-map
  具体代码附带笔记都在开源项目中