MapLibre Native 样式表达式教程4 个核心表达式控制地图颜色、大小与显隐【免费下载链接】maplibre-nativeMapLibre Native - Interactive vector tile maps for iOS, Android and other platforms.项目地址: https://gitcode.com/GitHub_Trending/ma/maplibre-native你往地图上丢了五百个定位点结果密密麻麻糊成一团。想让重要的先冒头、次要的往后排又不想去改数据字段MapLibre Native 的样式表达式能按属性值和缩放级别自动重算每个要素该长什么样。一句话讲透样式表达式是给要素写 if-else 先建个最直白的心智模型样式表达式就是贴在每个要素身上的 if-else。你写下数据字段 → 视觉属性的映射规则渲染引擎对每一个要素求一次值输出它真实的颜色、半径或透明度。它不是命令画一个红点而是描述什么条件下该是什么剩下的一律交给引擎逐个算。想让它随缩放变、随属性变、随条件变下面这张表就是你能用的积木。样式表达式速查表名称用途最小示例get读要素的某个属性字段[get, temperature]literal给一个确定的值或数组[literal, [a, b]]interpolate在区间内平滑过渡颜色/数值[interpolate, [linear], [zoom], 10, 1, 16, 4]step跨阈值时跳一档[step, [get, magnitude], 2, 4, 6]case多个条件按顺序取第一个为真的[case, [, [get, status], 1], red, grey]match按离散值精确匹配[match, [get, class], trunk, 8, 2]zoom取当前缩放级别内置函数[zoom]这些积木能单独用也能一层套一层。下面挑三个高频场景直接把代码搬进你的paint。三个高频场景实战circle-radius 表达式按震级分档半径随震级分档大震级一眼就能看到小震级退成小点。circle-radius: [ step, [get, magnitude], 2, 4, 6, 6, 10 ]为什么这样写震级是人按5 级以上才危险来感知的step分档比连续插值更符合直觉两档之间不用纠结中间值。interpolate 插值表达式给温度区间配色气温图层里颜色随温度从冷到热连续过渡不用手动切十几种色。circle-color: [ interpolate, [linear], [get, temperature], -10, #1a9850, 20, #fee08b, 40, #d73027 ]为什么这样写interpolate在两个 stop 之间做线性插值温度是连续量过渡自然中间再补几个 stop 就能把色带掰成你想要的形状。line-width 表达式叠加道路等级与缩放主干道比小路粗而且越放大越粗两条规则叠在一起生效。line-width: [ step, [zoom], [match, [get, class], trunk, 6, street, 3, 1], 16, 8 ]为什么这样写step的默认值本身又是一个表达式所以按缩放调宽和按等级调粗能嵌在一层里这正是表达式嵌套的典型用法。新手最容易踩的 3 个坑 ⚠️漏它引擎只能两手一摊不知道输出啥。下面三处都是编译期就能抓到的错。interpolate漏插值类型错误[interpolate, [zoom], 10, 1, 20, 4]正确[interpolate, [linear], [zoom], 10, 1, 20, 4]第二个参数必须显式写[linear]或[exponential, 基底]、[cubic-bezier, ...]缺了直接编译失败。case漏默认分支错误[case, [, [get, status], 1], red]正确[case, [, [get, status], 1], red, grey]最后一个参数是无条件兜底值所有条件都不满足时用它漏了引擎没有出口。取缩放级别写成get错误[get, zoom]正确[zoom]zoom是内置函数不是属性[get, zoom]永远读不到东西。三个坑都指向同一件事表达式对结构极敏感差一个参数就废。写完拿测试用例对一对最稳。三步跑通第一个动态样式第 1 步把仓库拉到本地git clone https://gitcode.com/GitHub_Trending/ma/maplibre-native第 2 步保存下面这份style.json含 sources、layers、paint 三块可直接粘贴{ version: 8, sources: { quakes: { type: geojson, data: assets/quakes.geojson } }, layers: [ { id: quakes, type: circle, source: quakes, paint: { circle-radius: [step, [get, magnitude], 2, 4, 6, 6, 10], circle-color: [interpolate, [linear], [get, magnitude], 2, #ffff00, 7, #d73027] } } ] }第 3 步加载它Android 侧mapView.getMapAsync { map - map.setStyle(url) }iOS 侧mapView.loadStyle(MLNStyle(url: url))引擎会按表达式逐个要素重算视觉。延伸阅读想系统翻规范、找现成范例这两处最值得逛样式规范与概念文档docs/mdbook/src/design/表达式测试用例每种表达式都有输入输出对照metrics/integration/expression-tests/渲染测试样例各种表达式写进 style.json 的真实样子metrics/integration/render-tests/【免费下载链接】maplibre-nativeMapLibre Native - Interactive vector tile maps for iOS, Android and other platforms.项目地址: https://gitcode.com/GitHub_Trending/ma/maplibre-native创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 MapLibre Native 样式表达式教程：4 个核心表达式控制地图颜色、大小与显隐
MapLibre Native 样式表达式教程4 个核心表达式控制地图颜色、大小与显隐【免费下载链接】maplibre-nativeMapLibre Native - Interactive vector tile maps for iOS, Android and other platforms.项目地址: https://gitcode.com/GitHub_Trending/ma/maplibre-native你往地图上丢了五百个定位点结果密密麻麻糊成一团。想让重要的先冒头、次要的往后排又不想去改数据字段MapLibre Native 的样式表达式能按属性值和缩放级别自动重算每个要素该长什么样。一句话讲透样式表达式是给要素写 if-else 先建个最直白的心智模型样式表达式就是贴在每个要素身上的 if-else。你写下数据字段 → 视觉属性的映射规则渲染引擎对每一个要素求一次值输出它真实的颜色、半径或透明度。它不是命令画一个红点而是描述什么条件下该是什么剩下的一律交给引擎逐个算。想让它随缩放变、随属性变、随条件变下面这张表就是你能用的积木。样式表达式速查表名称用途最小示例get读要素的某个属性字段[get, temperature]literal给一个确定的值或数组[literal, [a, b]]interpolate在区间内平滑过渡颜色/数值[interpolate, [linear], [zoom], 10, 1, 16, 4]step跨阈值时跳一档[step, [get, magnitude], 2, 4, 6]case多个条件按顺序取第一个为真的[case, [, [get, status], 1], red, grey]match按离散值精确匹配[match, [get, class], trunk, 8, 2]zoom取当前缩放级别内置函数[zoom]这些积木能单独用也能一层套一层。下面挑三个高频场景直接把代码搬进你的paint。三个高频场景实战circle-radius 表达式按震级分档半径随震级分档大震级一眼就能看到小震级退成小点。circle-radius: [ step, [get, magnitude], 2, 4, 6, 6, 10 ]为什么这样写震级是人按5 级以上才危险来感知的step分档比连续插值更符合直觉两档之间不用纠结中间值。interpolate 插值表达式给温度区间配色气温图层里颜色随温度从冷到热连续过渡不用手动切十几种色。circle-color: [ interpolate, [linear], [get, temperature], -10, #1a9850, 20, #fee08b, 40, #d73027 ]为什么这样写interpolate在两个 stop 之间做线性插值温度是连续量过渡自然中间再补几个 stop 就能把色带掰成你想要的形状。line-width 表达式叠加道路等级与缩放主干道比小路粗而且越放大越粗两条规则叠在一起生效。line-width: [ step, [zoom], [match, [get, class], trunk, 6, street, 3, 1], 16, 8 ]为什么这样写step的默认值本身又是一个表达式所以按缩放调宽和按等级调粗能嵌在一层里这正是表达式嵌套的典型用法。新手最容易踩的 3 个坑 ⚠️漏它引擎只能两手一摊不知道输出啥。下面三处都是编译期就能抓到的错。interpolate漏插值类型错误[interpolate, [zoom], 10, 1, 20, 4]正确[interpolate, [linear], [zoom], 10, 1, 20, 4]第二个参数必须显式写[linear]或[exponential, 基底]、[cubic-bezier, ...]缺了直接编译失败。case漏默认分支错误[case, [, [get, status], 1], red]正确[case, [, [get, status], 1], red, grey]最后一个参数是无条件兜底值所有条件都不满足时用它漏了引擎没有出口。取缩放级别写成get错误[get, zoom]正确[zoom]zoom是内置函数不是属性[get, zoom]永远读不到东西。三个坑都指向同一件事表达式对结构极敏感差一个参数就废。写完拿测试用例对一对最稳。三步跑通第一个动态样式第 1 步把仓库拉到本地git clone https://gitcode.com/GitHub_Trending/ma/maplibre-native第 2 步保存下面这份style.json含 sources、layers、paint 三块可直接粘贴{ version: 8, sources: { quakes: { type: geojson, data: assets/quakes.geojson } }, layers: [ { id: quakes, type: circle, source: quakes, paint: { circle-radius: [step, [get, magnitude], 2, 4, 6, 6, 10], circle-color: [interpolate, [linear], [get, magnitude], 2, #ffff00, 7, #d73027] } } ] }第 3 步加载它Android 侧mapView.getMapAsync { map - map.setStyle(url) }iOS 侧mapView.loadStyle(MLNStyle(url: url))引擎会按表达式逐个要素重算视觉。延伸阅读想系统翻规范、找现成范例这两处最值得逛样式规范与概念文档docs/mdbook/src/design/表达式测试用例每种表达式都有输入输出对照metrics/integration/expression-tests/渲染测试样例各种表达式写进 style.json 的真实样子metrics/integration/render-tests/【免费下载链接】maplibre-nativeMapLibre Native - Interactive vector tile maps for iOS, Android and other platforms.项目地址: https://gitcode.com/GitHub_Trending/ma/maplibre-native创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考