Mapbox GL JS 核心表达式：`get` 完全教程
get是 Mapbox GL JS 表达式系统中最基础、最常用的核心表达式之一，其核心作用是安全地获取属性值——既可以从地图要素（Feature）的properties字段取值，也可以从自定义对象取值；若目标属性不存在，会返回null（避免样式崩溃）。本文将从语法、基础用法、进阶场景到完整实战，带你彻底掌握get表达式。
一、前置准备
1.1 环境依赖
首先需要引入 Mapbox GL JS 的 CDN 资源，并获取你的 Mapbox Access Token（从 Mapbox 官网 免费申请）。
1.2 基础地图模板
创建最简化的 Mapbox 地图页面，后续所有示例都基于此模板扩展：
<!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="UTF-8"><title>Mapbox get 表达式教程</title><metaname="viewport"content="width=device-width, initial-scale=1.0"><!-- 引入 Mapbox GL JS 核心资源 --><scriptsrc="https://api.mapbox.com/mapbox-gl-js/v3.4.0/mapbox-gl.js"></script><linkhref="https://api.mapbox.com/mapbox-gl-js/v3.4.0/mapbox-gl.css"rel="stylesheet"><style>body{margin:0;padding:0;}#map{width:100vw;height:100vh;}</style></head><body><divid="map"></div><script>// 替换为你的 Mapbox Access Tokenmapboxgl.accessToken='YOUR_MAPBOX_TOKEN';// 初始化地图constmap=newmapboxgl.Map({container:'map',style:'mapbox://styles/mapbox/light-v11',// 浅色基础样式center:[116.4074,39.9042],// 北京经纬度zoom:11// 初始缩放级别});</script></body></html>二、get表达式语法详解
get有两种核心语法格式，覆盖「要素属性取值」和「自定义对象取值」两大场景：
2.1 语法1：从当前要素的properties取值
格式：["get", "属性名"]
作用：获取当前渲染要素的properties中指定名称的属性值。
示例：
["get","name"]// 获取要素 properties 中的 name 字段值["get","population"]// 获取要素 properties 中的 population 字段值2.2 语法2：从自定义对象取值
格式：["get", "属性名", 目标对象]
作用：从指定的自定义对象中获取属性值（非要素属性）。
示例：
// 从颜色映射对象中获取「地标」对应的颜色值["get","地标",{地标:"#ff6b6b",商圈:"#4ecdc4",景区:"#feca57"}]// 返回结果："#ff6b6b"核心特性
- 安全兜底：若属性不存在，返回
null（而非报错）； - 类型兼容：支持字符串、数字、布尔值等所有基础数据类型；
- 可嵌套：可作为其他表达式的子表达式（如结合
case/match）。
三、基础用法：获取要素属性实现动态样式
3.1 场景1：文本标签——显示要素名称
加载自定义 GeoJSON 数据源（包含北京3个POI），通过get获取name属性作为地图文本标签：
// 地图加载完成后执行map.on('load',()=>{// 1. 添加自定义 GeoJSON 数据源map.addSource('beijing-poi',{type:'geojson',data:{type:'FeatureCollection',features:[{type:'Feature',geometry:{type:'Point',coordinates:[116.4074,39.9042]},// 天安门properties:{name:'天安门',type:'地标',population:0}},{type:'Feature',geometry:{type:'Point',coordinates:[116.4187,39.9175]},// 王府井properties:{name:'王府井',type:'商圈',population:50000}},{type:'Feature',geometry:{type:'Point',coordinates:[116.3972,39.9299]},// 什刹海properties:{name:'什刹海',type:'景区',population:30000}}]}});// 2. 添加点图层（可视化POI位置）map.addLayer({id:'poi-point',type:'circle',source:'beijing-poi',paint:{'circle-radius':8,'circle-color':'#3887be'}});// 3. 添加文本图层：用 get 获取 name 作为标签map.addLayer({id:'poi-label',type:'symbol',source:'beijing-poi',layout:{'text-field':["get","name"],// 核心：获取要素名称'text-font':['Microsoft YaHei','Arial Unicode MS Bold'],// 适配中文字体'text-size':12,'text-offset':[0,0.8]// 文本在点下方},paint:{'text-color':'#333'}});});3.2 场景2：视觉样式——根据数值属性动态调整大小
修改上述poi-point图层的circle-radius，通过get获取population（人口/人流）作为圆的半径：
paint:{'circle-radius':["get","population"],// 人流数决定圆大小'circle-color':'#3887be','circle-opacity':0.8}注：天安门的
population为 0，圆会消失，后续进阶用法会解决此问题。
四、进阶用法：结合其他表达式增强能力
4.1 场景1：条件分档——结合case实现多规则样式
通过case表达式对population分档，同时根据type区分颜色，解决「值为0时圆消失」的问题：
paint:{'circle-radius':['case',// 条件表达式：满足条件返回对应值，否则返回默认值['>',['get','population'],40000],20,// 人流>4万 → 半径20['>',['get','population'],20000],15,// 人流>2万 → 半径158// 其他情况（含0）→ 半径8],'circle-color':['case',['==',['get','type'],'地标'],'#ff6b6b',// 地标 → 红色['==',['get','type'],'商圈'],'#4ecdc4',// 商圈 → 青色['==',['get','type'],'景区'],'#feca57',// 景区 → 黄色'#3887be'// 默认颜色],'circle-opacity':0.8}4.2 场景2：映射取值——从自定义对象中动态取颜色
定义颜色映射表，通过嵌套get实现「要素类型 → 颜色」的动态映射：
// 定义类型-颜色映射表consttypeColorMap={'地标':'#ff6b6b','商圈':'#4ecdc4','景区':'#feca57'};// 修改 circle-color 配置'circle-color':['get',// 从 typeColorMap 中取值['get','type'],// 先获取要素的 type 值（如「地标」）typeColorMap// 再从映射表中取对应颜色]4.3 场景3：嵌套属性——获取多层级属性值
若要素属性是嵌套对象（如address: {city: "北京", district: "东城区"}），需嵌套get取值（不能直接用address.district）：
// 给要素添加嵌套属性features:[{type:'Feature',geometry:{type:'Point',coordinates:[116.4074,39.9042]},properties:{name:'天安门',type:'地标',population:0,address:{city:'北京',district:'东城区'}// 嵌套属性}}]// 文本标签拼接「名称 + 行政区」'text-field':['concat',// 文本拼接表达式['get','name'],' (',['get','district',['get','address']],// 嵌套 get：先取 address，再取 district')']// 最终显示：天安门 (东城区)五、完整实战案例
整合所有进阶用法，实现「动态大小 + 分类颜色 + 嵌套属性标签」的完整效果：
<!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="UTF-8"><title>Mapbox get 表达式实战</title><metaname="viewport"content="width=device-width, initial-scale=1.0"><scriptsrc="https://api.mapbox.com/mapbox-gl-js/v3.4.0/mapbox-gl.js"></script><linkhref="https://api.mapbox.com/mapbox-gl-js/v3.4.0/mapbox-gl.css"rel="stylesheet"><style>body{margin:0;padding:0;}#map{width:100vw;height:100vh;}</style></head><body><divid="map"></div><script>mapboxgl.accessToken='YOUR_MAPBOX_TOKEN';constmap=newmapboxgl.Map({container:'map',style:'mapbox://styles/mapbox/light-v11',center:[116.4074,39.9042],zoom:11});// 类型-颜色映射表consttypeColorMap={'地标':'#ff6b6b','商圈':'#4ecdc4','景区':'#feca57'};map.on('load',()=>{// 添加POI数据源map.addSource('beijing-poi',{type:'geojson',data:{type:'FeatureCollection',features:[{type:'Feature',geometry:{type:'Point',coordinates:[116.4074,39.9042]},properties:{name:'天安门',type:'地标',population:0,address:{city:'北京',district:'东城区'}}},{type:'Feature',geometry:{type:'Point',coordinates:[116.4187,39.9175]},properties:{name:'王府井',type:'商圈',population:50000,address:{city:'北京',district:'东城区'}}},{type:'Feature',geometry:{type:'Point',coordinates:[116.3972,39.9299]},properties:{name:'什刹海',type:'景区',population:30000,address:{city:'北京',district:'西城区'}}}]}});// 点图层：动态大小 + 分类颜色map.addLayer({id:'poi-point',type:'circle',source:'beijing-poi',paint:{'circle-radius':['case',['>',['get','population'],40000],20,['>',['get','population'],20000],15,8],'circle-color':['get',['get','type'],typeColorMap],'circle-opacity':0.8}});// 文本图层：名称 + 行政区map.addLayer({id:'poi-label',type:'symbol',source:'beijing-poi',layout:{'text-field':['concat',['get','name'],' (',['get','district',['get','address']],')'],'text-font':['Microsoft YaHei','Arial Unicode MS Bold'],'text-size':12,'text-offset':[0,0.8]},paint:{'text-color':'#333'}});});</script></body></html>六、注意事项
- 属性名大小写敏感：
["get", "Name"]和["get", "name"]是两个不同的属性，若要素中是小写name，用大写会返回null； - 缺失属性兜底：可用
default表达式处理null值，例如：['default',['get','population'],10]// 若 population 缺失，返回 10 - 嵌套属性限制：不能直接用
["get", "address.district"]，必须嵌套get； - 性能优化：
get本身轻量，但大量嵌套或结合复杂表达式时，建议简化逻辑（如提前定义映射表），避免性能损耗。
七、总结
get是 Mapbox 动态样式的「基石」，几乎所有基于属性的可视化需求（如分类着色、数值映射、文本标签）都离不开它。掌握get的基础语法，并结合case/match/concat/default等表达式，就能实现从简单到复杂的地图样式定制。