mapbox 文本加粗
时间: 2025-05-23 22:58:25 浏览: 20
### Mapbox 中实现文本加粗的效果
在 Mapbox GL JS 中,可以通过 `text-font` 和 `text-transform` 属性来控制文本样式。如果要实现文本加粗的效果,则需要通过调整字体权重或者引入支持加粗样式的自定义字体文件[^4]。
以下是具体的代码示例:
#### HTML 部分
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Mapbox Text Bold Example</title>
<script src='https://api.mapbox.com/mapbox-gl-js/v2.15.0/mapbox-gl.js'></script>
<link href='https://api.mapbox.com/mapbox-gl-js/v2.15.0/mapbox-gl.css' rel='stylesheet'/>
<style>
body { margin: 0; padding: 0; }
#map { position: absolute; top: 0; bottom: 0; width: 100%; }
</style>
</head>
<body>
<div id="map"></div>
<script>
// JavaScript部分见下文
</script>
</body>
</html>
```
#### JavaScript 部分
```javascript
mapboxgl.accessToken = 'your_mapbox_access_token'; // 替换为您的访问令牌
const map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v12', // 使用默认街道风格
center: [-74.5, 40], // 设置中心坐标
zoom: 9 // 设置缩放级别
});
map.on('load', () => {
map.addSource('point', {
type: 'geojson',
data: {
type: 'FeatureCollection',
features: [{
type: 'Feature',
geometry: {
type: 'Point',
coordinates: [-74.5, 40]
},
properties: {
title: 'Bold Text'
}
}]
}
});
map.addLayer({
id: 'bold-text-layer',
type: 'symbol',
source: 'point',
layout: {
'text-field': ['get', 'title'], // 获取属性中的文本字段
'text-font': ['Open Sans Bold', 'Arial Unicode MS Bold'], // 定义加粗字体
'text-size': 16,
'text-anchor': 'bottom' // 文本锚点位置
},
paint: {
'text-color': '#ff0000', // 字体颜色
'text-halo-color': '#ffffff', // 边框颜色
'text-halo-width': 1 // 边框宽度
}
});
});
```
在这个例子中,`layout.text-font` 的值被设置为了包含加粗字体的数组。需要注意的是,只有当所选字体支持加粗样式时,这种效果才会生效。如果没有合适的内置字体可用,也可以上传自己的 TTF/OTF 文件并将其作为资源加载到项目中[^4]。
---
阅读全文
相关推荐

















