当前位置：首页 > news >正文

MapLibre GL JS第36课：一个Source配置多个图层样式

news 2026/6/1 19:50:15

📌 学习目标

掌握一个Source配置多个图层样式
理解相关API的使用
能够独立完成类似功能开发

🎯 核心概念

一个Source配置多个图层样式

💻 完整代码

代码示例

constmap=newmaplibregl.Map({container:'map',style:'https://tiles.openfreemap.org/styles/bright',center:[-88.13734351262877,35.137451890638886],zoom:4});map.on('load',()=>{constlayers=map.getStyle().layers;// 查找地图样式中第一个符号图层的索引letfirstSymbolId;for(leti=0;i<layers.length;i++){if(layers[i].type==='symbol'){firstSymbolId=layers[i].id;break;}}map.addSource('urban-areas',{'type':'geojson','data':'https://d2ad6b4ur7yvpq.cloudfront.net/naturalearth-3.3.0/ne_50m_urban_areas.geojson'});map.addLayer({'id':'urban-areas-fill','type':'fill','source':'urban-areas','layout':{},'paint':{'fill-color':'#f08','fill-opacity':0.4}// 这是此示例的重要部分：addLayer方法接受2个参数：// 一个是图层对象，另一个是表示另一个图层名称的字符串。// 如果另一个图层已存在于样式表中，// 新图层将紧挨该图层放置在堆栈中，// 从而可以将"覆盖物"放置在图层堆栈中的任何位置。// 将图层插入到第一个符号图层下方。},firstSymbolId);});

代码示例

<!DOCTYPEhtml><htmllang="en"><head><title>Add a new layer below labels</title><metaproperty="og:description"content="使用 addLayer 的第二个参数在标签下方添加图层。"/><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://tiles.openfreemap.org/styles/bright',center:[-88.13734351262877,35.137451890638886],zoom:4});map.on('load',()=>{constlayers=map.getStyle().layers;// 查找地图样式中第一个符号图层的索引letfirstSymbolId;for(leti=0;i<layers.length;i++){if(layers[i].type==='symbol'){firstSymbolId=layers[i].id;break;}}map.addSource('urban-areas',{'type':'geojson','data':'https://d2ad6b4ur7yvpq.cloudfront.net/naturalearth-3.3.0/ne_50m_urban_areas.geojson'});map.addLayer({'id':'urban-areas-fill','type':'fill','source':'urban-areas','layout':{},'paint':{'fill-color':'#f08','fill-opacity':0.4}// 这是本示例的重要部分：addLayer方法接受2个参数：// 图层对象，和表示另一个图层名称的字符串。// 如果另一个图层已存在于样式表中，新图层将被定位// 在该图层之前，使得可以将"叠加层"放置在图层堆栈的任何位置。// 在第一个符号图层下方插入该图层。},firstSymbolId);});</script></body></html>

🔍 代码解析

初始化地图

使用new maplibregl.Map()创建地图实例，配置基本参数。本示例的核心特色是展示如何在标签图层下方添加新图层。

关键配置项

container: 地图容器的 DOM 元素 ID
style: 使用 MapLibre 官方样式https://tiles.openfreemap.org/styles/bright
center: 地图初始中心点[-88.13734351262877, 35.137451890638886]（美国田纳西州附近）
zoom: 初始缩放级别为 4，显示区域级别视图

图层堆栈定位逻辑

map.on('load',()=>{constlayers=map.getStyle().layers;// 查找地图样式中第一个符号图层的索引letfirstSymbolId;for(leti=0;i<layers.length;i++){if(layers[i].type==='symbol'){firstSymbolId=layers[i].id;break;}}// ... 添加数据源和图层});

添加图层到指定位置

map.addLayer({'id':'urban-areas-fill','type':'fill','source':'urban-areas','layout':{},'paint':{'fill-color':'#f08','fill-opacity':0.4}},firstSymbolId// 在第一个符号图层下方插入);

⚙️ 参数说明

参数	类型	必填	默认值	说明
container	string	是	-	地图容器元素的 ID
style	string/object	是	-	地图样式 URL 或内联样式对象
center	[number, number]	否	`[0, 0]`	初始中心点坐标，格式为`[经度, 纬度]`
zoom	number	否	`0`	初始缩放级别，范围 0-22

addLayer 方法参数

参数	类型	必填	说明
layer	object	是	图层配置对象
beforeId	string	否	目标图层 ID，新图层将插入到该图层之前

图层配置对象

属性	类型	必填	说明
id	string	是	图层唯一标识
type	string	是	图层类型（`fill`、`line`、`symbol`等）
source	string	是	数据源名称
layout	object	否	布局属性
paint	object	否	绘制属性