MapLibre GL JS第48课：用数据驱动属性样式化线

学习目标掌握用数据驱动属性样式化线的实现方法理解相关API的使用能够独立完成类似功能开发 核心概念使用数据表达式创建线条颜色的可视化。 完 整 代 码代码示例!DOCTYPEhtmlhtmllangenheadtitleStyle lines with a>/titlemetapropertyog:descriptioncontent使用 line-color 的数据表达式创建可视化。/metapropertyog:createdcontent2025-06-25/metacharsetutf-8metanameviewportcontentwidthdevice-width, initial-scale1linkrelstylesheethrefhttps://unpkg.com/maplibre-gl5.24.0/dist/maplibre-gl.css/scriptsrchttps://unpkg.com/maplibre-gl5.24.0/dist/maplibre-gl.js/scriptstylebody{margin:0;padding:0;}html, body, #map{height:100%;}/style/headbodydividmap/divscriptconstmapnewmaplibregl.Map({container:map,style:https://tiles.openfreemap.org/styles/bright,center:[-122.48383155304096,37.82882682974591],zoom:16});map.on(load,(){map.addSource(lines,{type:geojson,data:{type:FeatureCollection,features:[{type:Feature,properties:{color:#F7455D// 红色},geometry:{type:LineString,coordinates:[[-122.4833858013153,37.829607404976734],[-122.4830961227417,37.82932776098012],[-122.4830746650696,37.82932776098012],[-122.48218417167662,37.82889558180985],[-122.48218417167662,37.82890193740421],[-122.48221099376678,37.82868372835086],[-122.4822163581848,37.82868372835086],[-122.48205006122589,37.82801003030873]]}},{type:Feature,properties:{color:#33C9EB// 蓝色},geometry:{type:LineString,coordinates:[[-122.48393028974533,37.829471820141016],[-122.48395174741744,37.82940826466351],[-122.48395174741744,37.829412501697064],[-122.48423874378203,37.829357420242125],[-122.48422533273697,37.829361657278575],[-122.48459815979002,37.8293425906126],[-122.48458743095398,37.8293447091313],[-122.4847564101219,37.82932776098012],[-122.48474299907684,37.829331998018276],[-122.4849334359169,37.829298101706186],[-122.48492807149889,37.82930022022615],[-122.48509705066681,37.82920488676767],[-122.48509168624878,37.82920912381288],[-122.48520433902739,37.82905870855876],[-122.48519897460936,37.82905870855876],[-122.4854403734207,37.828594749716714],[-122.48543500900269,37.82860534241688],[-122.48571664094925,37.82808206121068],[-122.48570591211319,37.82809689109353],[-122.4858346581459,37.82797189627337],[-122.48582661151886,37.82797825194729],[-122.4859634041786,37.82788503534145],[-122.48595803976059,37.82788927246246],[-122.48605459928514,37.82786596829394]]}}]}});map.addLayer({id:lines,type:line,source:lines,paint:{line-width:3,// 使用get表达式 (https://maplibre.org/maplibre-style-spec/expressions/#get)// 将线颜色设置为要素属性值。line-color:[get,color]}});});/script/body/html 代码解析初始化地图使用new maplibregl.Map()创建地图实例配置基本参数。本示例的核心特色是展示如何使用数据驱动属性data-driven property为线条设置颜色。关键配置项container: 地图容器的 DOM 元素 IDstyle: 使用 OpenStreetMap 亮色样式https://tiles.openfreemap.org/styles/brightcenter: 地图初始中心点[-122.4838, 37.8288]美国旧金山区域zoom: 初始缩放级别为 16显示街道级别视图GeoJSON 数据源map.addSource(lines,{type:geojson,data:{type:FeatureCollection,features:[{type:Feature,properties:{color:#F7455D},// 红色geometry:{type:LineString,coordinates:[...]}},{type:Feature,properties:{color:#33C9EB},// 蓝色geometry:{type:LineString,coordinates:[...]}}]}});数据驱动属性配置map.addLayer({id:lines,type:line,source:lines,paint:{line-width:3,line-color:[get,color]// 使用 get 表达式获取属性值}});⚙️ 参数说明参数类型必填默认值说明containerstring是-地图容器元素的 IDstylestring/object是-地图样式 URL 或内联样式对象center[number, number]否[0, 0]初始中心点坐标zoomnumber否0初始缩放级别get 表达式参数类型说明propertyNamestring要获取的属性名称line 图层 paint 属性属性类型必填默认值说明line-widthnumber/expression否1线条宽度像素line-colorstring/expression否#000000线条颜色 效果说明运行代码后地图上会显示两条不同颜色的路径红色路径: 坐标从[-122.4834, 37.8296]到[-122.4821, 37.8280]颜色为#F7455D蓝色路径: 坐标从[-122.4839, 37.8295]到[-122.4861, 37.8279]颜色为#33C9EB数据驱动原理:[get, color]表达式会从每个要素的 properties 中读取color属性每条线根据自身的color属性值渲染对应的颜色支持鼠标拖拽、滚轮缩放等标准交互 常 见 问 题Q1: 什么是数据驱动属性A:数据驱动属性允许根据 GeoJSON 要素的属性值动态设置图层样式。使用get表达式可以访问要素的 properties。Q2: 除了颜色还能驱动哪些属性A:许多 paint 和 layout 属性都支持数据驱动包括line-width、line-opacity、circle-radius、circle-color等。Q3: 如果属性不存在怎么办A:如果get表达式找不到指定属性会返回null图层会使用该属性的默认值或显示异常。建议使用coalesce提供默认值。Q4: 可以使用其他表达式组合吗A:可以。例如使用match表达式根据属性值返回不同颜色line-color:[match,[get,type],road,#FF0000,#0000FF] 练习任务基础练习添加第三条路径使用绿色 (#2ECC71)进阶挑战根据路径的长度动态设置线条宽度拓展思考如何实现根据属性值进行颜色渐变 最佳实践属性命名规范: 使用清晰的属性名称便于维护默认值处理: 使用coalesce表达式为缺失属性提供默认值表达式复用: 将复杂表达式提取为变量或函数性能优化: 对于大量要素考虑使用feature-state而非频繁更新属性颜色一致性: 保持颜色方案与整体设计风格一致测试覆盖: 测试各种属性值和边界情况 延伸阅读Map API文档MapLibre GL JS 官方文档[下一课预告]将继续学习地图图层的基础知识本文是MapLibre GL JS实践课程系列的一部分欢迎关注收藏