产品 | Mapbox 支持富文本标签，一起动手创建双语地图吧

前一阵子，有将近 50 位 Mapboxers 参与了关于双语地图的调研活动，为官方的产品优化提供了十分宝贵的建议。

近期，Mapbox 针对双语地图相关的富文本标签，更新了新的案例！我们很高兴地宣布：从 Mapbox GL JS v0.48、Maps SDK for iOS v4.6、Maps SDK for Android v6.7 开始，各位开发者可以访问地图上文本标签的丰富格式选项啦！

💡

富文本标签，可以怎么用？

使用富文本标签，显示太阳能设备名称和参数

不仅仅可以制作双语地图，甚至还可以直接在地点 Label 上显示数据和其他含义的标注，这样的上下文分层，大家可以更灵活地打造自定义地图了。

那么我可以如何设计呢？最简单的方式，可以尝试将地点的名称设置得更大，并用不同字体结合字号，显示地点更多相关信息，就像下面这张图，巧用字体字号清晰地显示了双语信息。

欧洲某一部分的双语地图

在 Mapbox 样式规范中，我们使用新的格式化数据类型表示格式化文本，并支持在使用 text-field 属性的任何图层上使用格式化字符串。

使用新的格式化表达式创建格式化字符串具体代码如下：

"text-field": ["format",
    ["get", "title"], {}, // Use default formatting
    "\n", {},
    ["get", "subtitle"],
    {
         "text-font": ["literal", ["DIN Offc Pro Italic"]],
         "font-scale": 0.8
    }
]

格式化的字符串从父节点text-field 处继承了格式化选项，可以使用这些选项覆盖 text-font 和 font-scale 等属性。并且，所有元素只需要进行一次绘制操作，统一被当作一个整体进行碰撞检测。这意味着，具有格式化字符串的标签，其所有的重叠、排序和碰撞等行为，将会与其未格式化的标签等效项相同。

可能看起来有点复杂，我们为你准备了一个详细的例子，可以亲自上手试一试。

🌰

举个改变语言类型的例子

这个例子在 Mapbox gl js 文档的 Example 中，可以用电脑点击这里查看。

map.setLayoutProperty(layer, 'text-field', ['format',
['get', 'name_en'], { 'font-scale': 1.2 },
'\n', {},
['get', 'name'], {
'font-scale': 0.8,
'text-font': ['literal', [ 'DIN Offc Pro Italic', 'Arial Unicode MS Regular' ]]
}

上面的‘name_en’可以被替换为‘name-zh’或者‘name’，我们一起试一下，替换后地图的不同之处吧。

初始状态下，地点的名称是英文。

初始状态：name_en

修改‘name_en’参数后，地点的名称变成了适应当地语言。

name_en 改成 name

再次修改后，地点的名称变成了中文。

name_en 改成 name_zh

这只是最简单的例子，虽然目前创建格式化字符串需要直接调用底层格式化表达式，但未来可能会在 Mapbox Studio 中实现工具化操作，不会写代码的朋友也可以进行富文本设计！

未来，我们也会考虑加入更多自定义选项，比如文本颜色，尽情期待！

---

欢迎你添加微信（Mapbox_max）拉你进入开发者社群，和 1000+ 开发者一起搞事情～

如果您的 App 也想获得好看、轻量、开放定制化的地图服务，请戳下图联系我们吧，官方工作人员会尽快与您取得联系！

---

您还可以在下面的渠道持续关注我们哦。

微博

@Mapbox地图数据平台，或者tag #mapbox# 

知乎

@Mapbox中国