学习目标掌握根据缩放级别改变建筑颜色的实现方法理解相关API的使用能够独立完成类似功能开发 核心概念根据缩放级别改变建筑颜色。 完 整 代 码代码示例constmapnewmaplibregl.Map({container:map,style:https://tiles.openfreemap.org/styles/bright,center:[-90.73414,14.55524],zoom:13});map.on(load,(){map.setPaintProperty(building-top,fill-color,[interpolate,[exponential,0.5],[zoom],15,#e2714b,22,#eee695]);map.setPaintProperty(building-top,fill-opacity,[interpolate,[exponential,0.5],[zoom],15,0,22,1]);});document.getElementById(zoom).addEventListener(click,(){map.zoomTo(19,{duration:9000});});代码示例!DOCTYPEhtmlhtmllangenheadtitleChange building color based on zoom level/titlemetapropertyog:descriptioncontent使用插值表达式缓入建筑物图层并在两种颜色之间平滑过渡。/metapropertyog:createdcontent2023-06-27/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/headbodystyle#zoom{display:block;position:absolute;top:20px;left:50%;transform:translate(-50%);width:50%;height:40px;padding:10px;border:none;border-radius:3px;font-size:12px;text-align:center;color:#fff;background:#ee8a65;}/styledividmap/divbuttonidzoomZoom to buildings/buttonscriptconstmapnewmaplibregl.Map({container:map,style:https://tiles.openfreemap.org/styles/bright,center:[-90.73414,14.55524],zoom:13});map.on(load,(){map.setPaintProperty(building-top,fill-color,[interpolate,[exponential,0.5],[zoom],15,#e2714b,22,#eee695]);map.setPaintProperty(building-top,fill-opacity,[interpolate,[exponential,0.5],[zoom],15,0,22,1]);});document.getElementById(zoom).addEventListener(click,(){map.zoomTo(19,{duration:9000});});/script/body/html 代码解析初始化地图使用new maplibregl.Map()创建地图实例配置基本参数。本示例的核心特色是展示如何根据缩放级别动态改变建筑物颜色和透明度。关键配置项container: 地图容器的 DOM 元素 IDstyle: 使用 MapLibre 官方样式https://tiles.openfreemap.org/styles/brightcenter: 地图初始中心点[-90.73414, 14.55524]洪都拉斯附近zoom: 初始缩放级别为 13显示城市级别视图插值表达式配置map.on(load,(){map.setPaintProperty(building-top,fill-color,[interpolate,[exponential,0.5],[zoom],15,#e2714b,22,#eee695]);map.setPaintProperty(building-top,fill-opacity,[interpolate,[exponential,0.5],[zoom],15,0,22,1]);});缩放动画按钮document.getElementById(zoom).addEventListener(click,(){map.zoomTo(19,{duration:9000});});⚙️ 参数说明参数类型必填默认值说明containerstring是-地图容器元素的 IDstylestring/object是-地图样式 URL 或内联样式对象center[number, number]否[0, 0]初始中心点坐标格式为[经度, 纬度]zoomnumber否0初始缩放级别范围 0-22interpolate 表达式参数类型说明typestring插值类型linear或exponentialbasenumber指数插值的底数仅 exponential 类型需要inputexpression输入值通常是[zoom]stop1number第一个停止点的输入值output1any第一个停止点的输出值stop2number第二个停止点的输入值output2any第二个停止点的输出值 效果说明运行代码后页面显示一个交互式地图建筑物颜色和透明度随缩放级别变化缩放级别 15 以下: 建筑物完全透明fill-opacity: 0缩放级别 15-22: 建筑物从透明渐变为完全不透明颜色从橙色#e2714b渐变为浅黄色#eee695缩放级别 22 以上: 建筑物完全不透明显示浅黄色页面顶部有一个 “Zoom to buildings” 按钮点击后会在9秒内平滑缩放到级别19可以清楚看到建筑物颜色渐变效果。 常 见 问 题Q1: 插值表达式的工作原理是什么A:插值表达式根据输入值如缩放级别在指定的停止点之间进行插值计算。linear插值是线性的exponential插值是非线性的底数越大变化越陡峭。Q2: 可以使用哪些插值类型A:MapLibre 支持linear线性插值和exponential指数插值两种类型。线性插值变化均匀指数插值在高缩放级别变化更快。Q3: 如何添加更多停止点A:在插值表达式中添加更多的stop, output对即可。例如[interpolate,[linear],[zoom],10,#fff,15,#ccc,20,#000]Q4: 插值表达式可以用于哪些属性A:大多数 paint 属性都支持插值表达式包括颜色、透明度、宽度等。 练习任务基础练习修改颜色值尝试不同的颜色渐变效果进阶挑战添加更多停止点实现更复杂的颜色变化拓展思考如何根据缩放级别改变建筑物的高度3D效果 最佳实践表达式复用: 将复杂的表达式提取为变量便于维护性能优化: 使用exponential插值可以在高缩放级别提供更好的性能视觉设计: 确保颜色渐变在整个缩放范围内都清晰可见测试验证: 在不同缩放级别测试效果确保过渡平滑文档说明: 添加注释说明插值表达式的含义和预期效果用户体验: 提供缩放动画按钮帮助用户观察效果变化 延伸阅读Map API文档MapLibre GL JS 官方文档[下一课预告]将继续学习地图图层的基础知识本文是MapLibre GL JS实践课程系列的一部分欢迎关注收藏