Mapjar - 轻量高性能的 WebGL2 地图引擎

绿岸公式
131 阅读3分钟

简介

Mapjar 是一个基于 WebGL2 的现代化地图渲染引擎，专注于高性能和易用性。相比现有的地图库，Mapjar 更轻量、更快、更灵活。

在线文档和示例： mapjar.netlify.app/

特色功能

🚀 高性能渲染

  • WebGL2 GPU 加速，60 FPS 流畅渲染
  • Web Worker 并发加载，首屏速度提升 28%
  • 视锥剔除 + 批量渲染，支持 10,000+ 要素
  • 完美支持高 DPI 屏幕（Retina）

🎨 丰富的图层类型

基础图层：

  • TileLayer - 瓦片图层（OSM、Google Maps 等）
  • VectorLayer - 矢量图层（点、线、面）
  • GeoJSONLayer - GeoJSON 数据加载
  • ImageLayer - 图像叠加（历史地图、卫星影像）

科学可视化：

  • WindLayer - 风场动画（粒子系统）
  • HeatmapLayer - 热力图（温度、降水等）

自定义图层：

  • OverlayLayer - HTML 元素叠加
  • CanvasLayer - Canvas 2D 自定义绘制

💡 数据驱动样式

根据要素属性动态设置样式：

layer.setDataDrivenStyle({
  fillColor: StyleFunction.createPropertyColorMap(
    'type',
    {
      'residential': [0.8, 0.8, 0.6, 0.5],  // 住宅区
      'commercial': [1.0, 0.6, 0.6, 0.5],   // 商业区
      'park': [0.4, 0.8, 0.4, 0.5]          // 公园
    }
  )
});

🎬 流畅动画

所有交互都带有平滑的缓动效果：

// 飞行到目标位置
engine.flyTo(121.4737, 31.2304, 10, { duration: 2000 });

// 自动适配边界
engine.fitBounds({
  minLon: 73.5, minLat: 18.2,
  maxLon: 135.0, maxLat: 53.5
});

快速开始

安装

npm install mapjar

基础示例

import { MapEngine, TileLayer } from 'mapjar';

// 创建地图
const engine = new MapEngine('#map', {
  center: [116.4074, 39.9042],  // 北京
  zoom: 10
});

// 添加 OpenStreetMap
const tileLayer = new TileLayer(
  'osm',
  'https://tile.openstreetmap.org/{z}/{x}/{y}.png'
);
engine.addLayer(tileLayer);

风场动画示例

import { WindLayer } from 'mapjar';

const windLayer = new WindLayer('wind', {
  particleCount: 5000,
  speedFactor: 0.5,
  colorRamp: ['#3288bd', '#66c2a5', '#fee08b', '#d53e4f']
});

// 设置风场数据
windLayer.setData({
  uv: uvData,        // UV 分量数组
  width: 100,
  height: 50,
  minU: -10, maxU: 10,
  minV: -10, maxV: 10,
  bounds: { minLon: 73.5, minLat: 18.0, maxLon: 135.0, maxLat: 53.5 }
});

engine.addLayer(windLayer);

热力图示例

import { HeatmapLayer } from 'mapjar';

const heatmapLayer = new HeatmapLayer('temperature', {
  colorRamp: [
    { value: 0.0, color: '#313695' },  // 冷
    { value: 0.5, color: '#ffffbf' },  // 中
    { value: 1.0, color: '#a50026' }   // 热
  ]
});

// 直接使用图片
const img = new Image();
img.onload = async () => {
  const bitmap = await createImageBitmap(img);
  heatmapLayer.setData({
    image: bitmap,
    bounds: { minLon: 55, minLat: 1, maxLon: 155, maxLat: 57 }
  });
};
img.src = 'temperature.png';

engine.addLayer(heatmapLayer);

性能对比

Web Worker 瓦片加载

指标优化前优化后提升
首屏加载2.5s1.8s28% ↓
主线程阻塞150ms20ms87% ↓
帧率下降15 fps3 fps80% ↓

渲染性能

  • ✅ 10,000+ 矢量要素流畅渲染
  • ✅ 60 FPS 稳定帧率
  • ✅ 5,000 个粒子实时动画

浏览器兼容性

支持所有现代浏览器（WebGL2）：

  • Chrome 56+
  • Firefox 51+
  • Safari 15+
  • Edge 79+

覆盖 97%+ 的用户。

为什么选择 Mapjar？

vs Mapbox GL JS

  • ✅ 更轻量（~80KB vs ~500KB）
  • ✅ 零配置，开箱即用
  • ✅ 更简单的 API
  • ✅ 完全开源免费

vs Leaflet

  • ✅ WebGL2 GPU 加速
  • ✅ 更高的渲染性能
  • ✅ 内置科学可视化图层
  • ✅ 更流畅的动画效果

vs OpenLayers

  • ✅ 更现代的技术栈
  • ✅ 更简洁的 API 设计
  • ✅ 更好的 TypeScript 支持
  • ✅ 更小的打包体积

技术栈

  • TypeScript - 类型安全
  • WebGL2 - GPU 加速
  • Web Workers - 并发加载
  • Earcut - 多边形三角化
  • Vite - 快速构建

在线资源

avatar
文章
阅读
粉丝