18650电池更换实战：手持吸尘器续航修复与安全操作指南
2026/6/4 20:16:13
📌 学习目标
- 掌握为多边形添加图案的实现方法
- 理解相关API的使用
- 能够独立完成类似功能开发
⭕️MapLibre GL JS全部课时目录⭕️
🎯 核心概念
为多边形添加图案填充。
💻 完 整 代 码
代码示例
constmap=newmaplibregl.Map({container:'map',style:'https://demotiles.maplibre.org/style.json',zoom:1});map.on('load',async()=>{// 添加GeoJSON数据map.addSource('source',{'type':'geojson','data':{'type':'Feature','properties':{},'geometry':{'type':'Polygon','coordinates':[[[-30,-25],[-30,35],[30,35],[30,-25],[-30,-25]]]}}});// 加载图像作为图案constimage=awaitmap.loadImage('https://upload.wikimedia.org/wikipedia/commons/thumb/6/60/Cat_silhouette.svg/60px-Cat_silhouette.svg.png');// 声明图像map.addImage('pattern',image.data);// 使用它填充多边形map.addLayer({'id':'pattern-layer','type':'fill','source':'source','paint':{'fill-pattern':'pattern'}});});代码示例
<!DOCTYPEhtml><htmllang="en"><head><title>Add a pattern to a polygon</title><metaproperty="og:description"content="使用 fill-pattern 从重复的图像图案绘制多边形。"/><metaproperty="og:created"content="2025-06-25"/><metacharset='utf-8'><metaname="viewport"content="width=device-width, initial-scale=1"><linkrel='stylesheet'href='https://unpkg.com/maplibre-gl@5.24.0/dist/maplibre-gl.css'/><scriptsrc='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><divid="map"></div><script>constmap=newmaplibregl.Map({container:'map',style:'https://demotiles.maplibre.org/style.json',zoom:1});map.on('load',async()=>{// 添加GeoJSON数据map.addSource('source',{'type':'geojson','data':{'type':'Feature','properties':{},'geometry':{'type':'Polygon','coordinates':[[[-30,-25],[-30,35],[30,35],[30,-25],[-30,-25]]]}}});// 加载图像作为图案constimage=awaitmap.loadImage('https://upload.wikimedia.org/wikipedia/commons/thumb/6/60/Cat_silhouette.svg/60px-Cat_silhouette.svg.png');// 声明图像map.addImage('pattern',image.data);// 使用它map.addLayer({'id':'pattern-layer','type':'fill','source':'source','paint':{'fill-pattern':'pattern'}});});</script></body></html>🔍 代码解析
初始化地图
使用new maplibregl.Map()创建地图实例，配置基本参数。本示例的核心特色是展示如何为多边形添加图案填充。
关键配置项
- container: 地图容器的 DOM 元素 ID
- style: 使用 MapLibre 官方样式
https://demotiles.maplibre.org/style.json - zoom: 初始缩放级别为 1，显示全球视图
创建 GeoJSON 数据源
map.addSource('source',{'type':'geojson','data':{'type':'Feature','properties':{},'geometry':{'type':'Polygon','coordinates':[[[-30,-25],[-30,35],[30,35],[30,-25],[-30,-25]]]}}});加载图像作为图案
constimage=awaitmap.loadImage('https://upload.wikimedia.org/wikipedia/commons/thumb/6/60/Cat_silhouette.svg/60px-Cat_silhouette.svg.png');map.addImage('pattern',image.data);添加填充图层
map.addLayer({'id':'pattern-layer','type':'fill','source':'source','paint':{'fill-pattern':'pattern'}});⚙️ 参数说明
| 参数 | 类型 | 必填 | 默认值 | 说明 |
|---|---|---|---|---|
| container | string | 是 | - | 地图容器元素的 ID |
| style | string/object | 是 | - | 地图样式 URL 或内联样式对象 |
| zoom | number | 否 | 0 | 初始缩放级别，范围 0-22 |
map.addImage 参数
| 参数 | 类型 | 必填 | 说明 |
|---|---|---|---|
| id | string | 是 | 图像的唯一标识名称 |
| data | ImageData/HTMLImageElement | 是 | 图像数据 |
| options | object | 否 | 可选配置（如拉伸参数） |
fill 图层 paint 属性
| 属性 | 类型 | 说明 |
|---|---|---|
| fill-pattern | string | 引用已注册的图案名称 |
| fill-opacity | number | 填充透明度，0-1 之间 |
| fill-pattern-opacity | number | 图案本身的透明度，0-1 之间 |
🎨 效果说明
运行代码后，地图上会显示一个矩形区域（经度 -30 到 30，纬度 -25 到 35），该区域使用猫咪剪影图案进行平铺填充：
- 图案平铺: 图案从多边形左上角开始，以原始尺寸（60x60像素）重复排列
- 视觉效果: 猫咪剪影图案均匀覆盖整个多边形区域
- 缩放行为: 缩放地图时，图案会保持相同的屏幕尺寸，不会随缩放级别变化
- 交互功能: 支持鼠标拖拽、滚轮缩放等标准交互
💡 常 见 问 题
Q1: 图案不显示怎么办？
A:按以下步骤排查：
- 确保
map.addImage()在map.addLayer()之前调用 - 确认图案 ID 与
fill-pattern中引用的名称完全一致 - 检查图像 URL 是否可访问
- 确保图像已正确加载（使用 await 或 Promise）
Q2: 如何调整图案大小？
A:MapLibre 不支持直接缩放图案尺寸。解决方案：
- 在加载前使用 Canvas API 缩放图像
- 使用不同尺寸的图像文件
- 调整地图缩放级别间接影响图案显示大小
Q3: 如何让图案居中显示而不是平铺？
A:目前 fill-pattern 不支持居中对齐。可以考虑：
- 使用 symbol 图层的图标功能
- 自定义图层实现
- 调整图案图像本身包含空白边距
Q4: 图案可以是透明的吗？
A:可以。使用带透明通道的 PNG 或 WebP 图像，配合fill-pattern-opacity控制透明度。
📝 练习任务
- 基础练习：更换不同的图像 URL，使用自己的图片作为图案
- 进阶挑战：尝试添加多个不同图案的多边形区域
- 拓展思考：如何实现图案的旋转和缩放效果？
🌟 最佳实践
- 图像格式: 使用 PNG 或 WebP 格式，支持透明通道
- 图像大小: 选择合适的图案尺寸，避免过大影响性能
- 异步加载: 使用
await确保图像加载完成后再添加图层 - 错误处理: 添加图像加载失败的降级方案
- 性能优化: 对于大面积填充，使用较小的重复图案
- 图案设计: 设计无缝拼接的图案，避免明显的拼接边界
- 缓存策略: 对于重复使用的图案，考虑缓存图像数据
🔗 延伸阅读
Map API文档
MapLibre GL JS 官方文档
[下一课预告]：将继续学习地图图层的基础知识
本文是MapLibre GL JS实践课程系列的一部分，欢迎关注收藏