基于 OpenStreetMap 数据构建的无限量矢量地图瓦片，可直接用于 MapLibre GL 或 Leaflet。无需 API 密钥，没有配额，也不会收到意外账单。
大多数地图瓦片服务商会先赠送免费额度。流量一旦增长，按量计费就会让小项目收到实实在在的账单：用量难以看清，每次加载地图都可能增加费用，定价复杂得需要用表格计算。Google Maps 和 Mapbox 都采用这种模式。原本免费的服务，最终可能成为项目不想承担的成本。
LFMaps 则不同。免费就是真免费：没有意外收费、用量上限或账单。
上线地图所需的一切，简单直接。
填入瓦片 URL 即可使用。无需注册、访问令牌或管理后台。
没有配额、隐性上限，也不按地图加载次数计费。按需使用即可。
无论有十次还是一千万次地图浏览，费用始终为零。
我们不跟踪访问者，也不设置 Cookie。你的隐私政策无需因此变复杂。
最适合 MapLibre GL，也支持 Leaflet 和 React
<link href="https://unpkg.com/maplibre-gl@6.11.2/dist/maplibre-gl.css" rel="stylesheet" />
<script type="importmap">
{ "imports": { "maplibre-gl": "https://unpkg.com/maplibre-gl@6.11.2/dist/maplibre-gl.mjs" } }
</script>MapLibre GL v6 仅以 ES 模块形式提供，因此以下示例通过导入映射和模块脚本加载。
npm i maplibre-gl@^6然后在 JavaScript 中导入：
import * as maplibregl from 'maplibre-gl'
import 'maplibre-gl/dist/maplibre-gl.css'
import workerUrl from 'maplibre-gl/dist/maplibre-gl-worker.mjs?worker&url'
maplibregl.setWorkerUrl(workerUrl)在打包项目中，MapLibre 无法自行找到其 worker。这里展示 Vite 的写法；webpack 等其他打包工具请参阅 MapLibre 安装指南.
<div id="map" style="width: 100%; height: 500px"></div>
<script type="module">
import * as maplibregl from 'maplibre-gl'
const map = new maplibregl.Map({
style: 'https://data.lfmaps.fr/styles/bright',
center: [6.1844, 48.6937],
zoom: 12,
container: 'map',
})
</script>更好的 Core Web Vitals 通常有助于提升搜索排名
使用以下加载器，让首屏渲染更轻快：
// 此处为 Vite 写法，其他打包工具请参阅安装指南
import workerUrl from 'maplibre-gl/dist/maplibre-gl-worker.mjs?worker&url';
let maplibrePromise = null;
let cssLoaded = false;
/**
* 按需延迟加载 MapLibre GL 及其 CSS
* @returns {Promise} MapLibre GL 模块
*/
async function loadMapLibre() {
if (!maplibrePromise) {
maplibrePromise = Promise.all([
import('maplibre-gl'),
loadMapLibreCSS()
]).then(([module]) => {
module.setWorkerUrl(workerUrl);
return module;
});
}
return maplibrePromise;
}
/**
* 动态加载 MapLibre GL CSS
*/
async function loadMapLibreCSS() {
if (!cssLoaded) {
await import('maplibre-gl/dist/maplibre-gl.css');
cssLoaded = true;
}
}
/**
* MapLibre GL 延迟加载器类
* 提供与 maplibregl 类似的 API，并支持延迟加载
*/
export class MapLibreLoader {
constructor() {
this.maplibregl = null;
}
/**
* 创建新地图实例，必要时延迟加载 MapLibre GL
* @param {Object} options - 地图配置选项
* @returns {Promise} 一个 MapLibre GL Map 实例
*/
async createMap(options) {
this.maplibregl = await loadMapLibre();
return new this.maplibregl.Map(options);
}
/**
* 获取 MapLibre GL 库，必要时延迟加载
* @returns {Promise} MapLibre GL 库
*/
async getLibrary() {
this.maplibregl = await loadMapLibre();
return this.maplibregl;
}
}
export default new MapLibreLoader();使用示例：
import MapLibreLoader from './maplibre-loader.js';
// 仅在需要时创建地图（例如滚动到地图或用户交互时）
async function initMap() {
const map = await MapLibreLoader.createMap({
style: 'https://data.lfmaps.fr/styles/bright',
center: [6.1844, 48.6937],
zoom: 12,
container: 'map',
});
// 添加控件、标记等
const maplibregl = await MapLibreLoader.getLibrary();
map.addControl(new maplibregl.NavigationControl());
}如需高级功能和完整 API，请参阅 MapLibre GL JS 文档
Leaflet 本身无法读取矢量瓦片，因此需要配合 maplibre-gl-leaflet 插件：
<link href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" rel="stylesheet" />
<script type="importmap">
{ "imports": {
"leaflet": "https://unpkg.com/leaflet@1.9.4/dist/leaflet-src.esm.js",
"maplibre-gl": "https://unpkg.com/maplibre-gl@6.11.2/dist/maplibre-gl.mjs"
} }
</script>
<script type="module">
import * as L from 'leaflet'
import { maplibreGL } from 'https://unpkg.com/@maplibre/maplibre-gl-leaflet@0.1.4/dist/leaflet-maplibre-gl.mjs'
const map = L.map('map').setView([48.6937, 6.1844], 12)
maplibreGL({
style: 'https://data.lfmaps.fr/styles/bright',
}).addTo(map)
</script>该插件支持 Leaflet 1.x；同样可以使用免费瓦片，无需担心账单。
npm i react-map-gl maplibre-gl@^6import Map from 'react-map-gl/maplibre'
import { setWorkerUrl } from 'maplibre-gl'
import workerUrl from 'maplibre-gl/dist/maplibre-gl-worker.mjs?worker&url'
import 'maplibre-gl/dist/maplibre-gl.css'
setWorkerUrl(workerUrl)
export default function MyMap() {
return (
<Map
initialViewState={{ longitude: 6.1844, latitude: 48.6937, zoom: 12 }}
style={{ width: '100%', height: 500 }}
mapStyle="https://data.lfmaps.fr/styles/bright"
/>
)
}无需 mapbox-gl 或访问令牌，react-map-gl 可直接连接 MapLibre GL。
https://data.lfmaps.fr/styles/bright
https://data.lfmaps.fr/styles/positron
https://data.lfmaps.fr/styles/liberty
瓦片通过 CDN 提供，地图转瞬呈现
99.9% 在线时间
覆盖全球的 OpenStreetMap 数据
只需几行 MapLibre GL 或 Leaflet 代码，地图即可上线
同样能在页面上展示地图，月底账单却大不相同。
也要说明取舍：LFMaps 只提供地图瓦片。地理编码、路线规划和逐向导航不在服务范围内。
是的。无论流量多少，都没有付费套餐、信用卡要求或用量账单。LFMaps 与本页的其他免费工具一样，由开发者作为个人项目维护。
不需要。无需注册，也没有要定期更换的令牌。将地图样式指向 LFMaps 的 URL 即可使用。
没有配额，也没有严格的速率限制。我们只希望你不要批量抓取整个瓦片集；网站或应用中的正常地图使用完全没问题。
可以。我们推荐原生渲染矢量瓦片的 MapLibre GL；配合 maplibre-gl-leaflet 插件也能使用 Leaflet。
数据来自 OpenStreetMap，并通过 OpenFreeMap 提供。数据由社区共同创建，这也是服务能够保持免费的原因。
可以，商业项目也能使用。只需在地图上保留可见的 OpenStreetMap 署名。
不会。我们不收集个人数据，也不会通过瓦片请求设置 Cookie，因此添加地图不会给你的隐私政策增加内容。
它们先提供免费额度，业务增长后按地图加载次数收费。LFMaps 完全不按用量计费：十次地图浏览和一千万次地图浏览的费用都是零。