📌 学习目标
- 掌握添加栅格瓦片源的实现方法
- 理解相关API的使用
- 能够独立完成类似功能开发
🎯 核心概念
向地图添加栅格瓦片数据源。
💻 完 整 代 码
代码示例
js
const map = new maplibregl.Map({
container: 'map', // 容器ID
style: {
'version': 8,
'sources': {
'raster-tiles': {
'type': 'raster',
'tiles': ['https://tile.openstreetmap.org/{z}/{x}/{y}.png'],
'tileSize': 256,
'minzoom': 0,
'maxzoom': 19,
'attribution': "© OpenStreetMap contributors",
}
},
'layers': [
{
'id': 'simple-tiles',
'type': 'raster',
'source': 'raster-tiles',
}
],
'id': 'blank'
},
center: [0, 0], // 初始位置
zoom: 0 // 初始缩放级别
});代码示例
html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Add a raster tile source</title>
<meta property="og:description" content="向地图添加第三方栅格源。" />
<meta property="og:created" content="2025-06-25" />
<meta charset='utf-8'>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel='stylesheet' href='https://unpkg.com/maplibre-gl@5.24.0/dist/maplibre-gl.css' />
<script src='https://unpkg.com/maplibre-gl@5.24.0/dist/maplibre-gl.js'></script>
<style>
body { margin: 0; padding: 0; }
html, body, #map { height: 100%; }
</style>
</head>
<body>
<div id="map"></div>
<script>
const map = new maplibregl.Map({
container: 'map', // 地图容器id
style: {
'version': 8,
'sources': {
'raster-tiles': {
'type': 'raster',
'tiles': ['https://tile.openstreetmap.org/{z}/{x}/{y}.png'],
'tileSize': 256,
'minzoom': 0,
'maxzoom': 19,
'attribution': "© OpenStreetMap contributors",
}
},
'layers': [
{
'id': 'simple-tiles',
'type': 'raster',
'source': 'raster-tiles',
}
],
'id': 'blank'
},
center: [0, 0], // 初始位置
zoom: 0 // 初始缩放级别
});
</script>
</body>
</html>🔍 代码解析
1. 初始化地图
使用 new maplibregl.Map() 创建地图实例，配置完整的自定义样式对象。
2. 配置栅格瓦片源
在 style.sources 中定义栅格瓦片源：
type: 'raster': 指定为栅格瓦片源tiles: 瓦片URL模板数组，支持{z}/{x}/{y}占位符tileSize: 瓦片大小（通常为256）minzoom/maxzoom: 缩放级别范围attribution: 版权信息
3. 添加栅格图层
在 style.layers 中添加 raster 类型图层，引用栅格数据源。
⚙️ 参数说明
| 参数 | 类型 | 必填 | 说明 |
|---|---|---|---|
| container | string | 是 | 地图容器ID |
| style | object | 是 | 完整的样式对象 |
| center | number, number | 否 | 初始中心点，默认0, 0 |
| zoom | number | 否 | 初始缩放级别，默认0 |
栅格瓦片源配置
| 属性 | 类型 | 说明 |
|---|---|---|
| type | string | 必须为 'raster' |
| tiles | array | 瓦片URL模板数组 |
| tileSize | number | 瓦片像素大小（通常256） |
| minzoom | number | 最小缩放级别 |
| maxzoom | number | 最大缩放级别 |
| attribution | string | 版权归属信息 |
🎨 效果说明
运行代码后：
- 地图显示全球视图（中心点 0, 0，缩放级别0）
- 使用OpenStreetMap栅格瓦片作为底图
- 用户可正常交互（拖拽、缩放、旋转）
💡 常 见 问 题
Q1: 矢量瓦片和栅格瓦片有什么区别？
A: 矢量瓦片包含矢量数据，可以自定义样式；栅格瓦片是预先渲染的图片，样式固定。
Q2: 如何添加多个栅格图层？
A: 定义多个数据源和图层，使用 minzoom/maxzoom 或 filter 控制显示。
Q3: 常用的栅格瓦片服务有哪些？
A: OpenStreetMap、MapQuest、Stamen、NASA等提供免费或付费的栅格瓦片服务。
📝 练习任务
- 基础练习：更换为其他栅格瓦片服务（如Stamen）
- 进阶挑战：添加多个栅格图层，实现图层切换
- 拓展思考：如何实现自定义栅格瓦片服务？
🌟 最佳实践
- 版权信息: 必须正确设置attribution属性
- 缩放级别: 合理设置minzoom/maxzoom，避免加载不必要的瓦片
- 瓦片大小: 保持tileSize与服务一致（通常256）
- 跨域处理: 确保瓦片服务支持CORS或使用代理
🔗 延伸阅读
- Map API文档
- MapLibre GL JS 官方文档
- 下一课预告：将继续学习地图图层的基础知识
本文是MapLibre GL JS实践课程系列的一部分，欢迎关注收藏