MapLibre GL JS第52课：显示和样式化富文本标签

学习目标掌握显示和样式化富文本标签的实现方法理解相关API的使用能够独立完成类似功能开发 核心概念显示和样式化富文本标签。 完 整 代 码代码示例!DOCTYPEhtmlhtmllangenheadtitleDisplay and style rich text labels/titlemetapropertyog:descriptioncontent使用 format 表达式以英文和当地语言显示国家标签。/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/headbody!-- The lang attribute is read from the map container if present, otherwise from the HTML document --dividmaplangzh-HK/divscriptmaplibregl.setRTLTextPlugin(https://unpkg.com/mapbox/mapbox-gl-rtl-text0.3.0/dist/mapbox-gl-rtl-text.js);constmapnewmaplibregl.Map({container:map,// 容器IDstyle:https://tiles.openfreemap.org/styles/bright,// 样式URLcenter:[17.49,40.01],// 初始位置 [经度, 纬度]zoom:4// 初始缩放级别});map.on(load,(){map.setLayoutProperty(label_country,text-field,[format,[get,name_en],{font-scale:1.2},\n,{},[get,name],{font-scale:0.8,text-font:[literal,[Noto Sans Regular]]}]);});/script/body/html 代码解析初始化地图使用new maplibregl.Map()创建地图实例配置基本参数。本示例的核心特色是展示如何使用format表达式创建富文本标签同时显示英文和当地语言名称。加载 RTL 插件maplibregl.setRTLTextPlugin(https://unpkg.com/mapbox/mapbox-gl-rtl-text0.3.0/dist/mapbox-gl-rtl-text.js);关键配置项container: 地图容器的 DOM 元素 IDstyle: 使用 OpenStreetMap 亮色样式https://tiles.openfreemap.org/styles/brightcenter: 地图初始中心点[17.49, 40.01]巴尔干半岛区域zoom: 初始缩放级别为 4显示区域级别视图format 表达式配置map.setLayoutProperty(label_country,text-field,[format,[get,name_en],// 第一部分英文名称{font-scale:1.2},// 英文名称样式放大1.2倍\n,// 换行符{},// 换行符不需要样式[get,name],// 第二部分当地语言名称{font-scale:0.8,// 当地语言样式缩小0.8倍text-font:[literal,[Noto Sans Regular]]}]);⚙️ 参数说明参数类型必填默认值说明containerstring是-地图容器元素的 IDstylestring/object是-地图样式 URL 或内联样式对象center[number, number]否[0, 0]初始中心点坐标zoomnumber否0初始缩放级别format 表达式参数类型说明textexpression要显示的文本内容optionsobject文本样式选项文本样式选项属性类型说明font-scalenumber字体缩放比例text-fontarray字体名称数组text-colorstring文本颜色text-halo-colorstring文本光晕颜色text-halo-widthnumber文本光晕宽度 效果说明运行代码后地图上的国家标签会以双行富文本形式显示第一行: 英文名称放大1.2倍第二行: 当地语言名称缩小0.8倍使用 Noto Sans 字体示例: 国家标签显示为 “Italy” 在上方意大利文 “Italia” 在下方视觉效果:英文名称更大更突出当地语言名称作为补充信息支持 RTL从右到左语言如阿拉伯语、希伯来语 常 见 问 题Q1: format 表达式是什么A:format表达式允许创建富文本标签支持多行文本和不同样式的组合。每个文本片段都可以有独立的样式设置。Q2: 为什么需要 RTL 插件A:RTLRight-to-Left插件支持从右到左书写的语言如阿拉伯语、希伯来语等确保这些语言正确显示。Q3: 如何添加更多文本样式A:在format表达式中添加更多的文本和样式对象对[format,[get,name],{font-scale:1.2},\n,{},[get,capital],{font-scale:0.8,text-color:#888}]Q4: 可以使用哪些字体A:可以使用样式中定义的字体或通过text-font属性指定字体。建议使用支持多语言的字体如 Noto Sans。 练习任务基础练习修改字体大小比例调整中英文名称的显示效果进阶挑战添加第三行文本显示国家首都拓展思考如何根据国家属性动态改变文本颜色 最佳实践字体选择: 使用支持多语言的字体如 Noto Sans确保各种语言正确显示样式层次: 主文本使用较大字体辅助信息使用较小字体RTL 支持: 加载 RTL 插件支持从右到左的语言性能考虑: 避免过多的文本样式组合影响渲染性能可读性: 确保文本颜色与背景有足够对比度语言属性: 使用lang属性帮助浏览器正确处理文本方向 延伸阅读Map API文档MapLibre GL JS 官方文档[下一课预告]将继续学习地图图层的基础知识