fonts - 如何在 mapbox 中使用浏览器的字体？

Question

我正在使用 Mapbox 的最新版本构建 POC。

从同一来源我有两层，一层显示点，另一层为每个点打印一个 hello world :

layerPoint : {
    id : this.layerPointId,
    type : "circle",
    source : this.sourceId,
    paint : {
        "circle-color" : this.color,
        "circle-radius" : 4
    }
}
layerText : {
    id : this.layerTextId,
    type : "symbol",
    source : this.sourceId,
    layout : {
        "text-field" : "Hello world",
        "text-size": 12
    }
}

我的控制台出现错误:

layers.l.text.uuid12987456.layout.text-field: use of "text-field" requires a style "glyphs" property

所以我查看 into Mapbox's doc 以了解如果我需要文本字段我应该添加一个字形属性。但是，如果我想获得默认的浏览器或操作系统字体，我应该使用什么字形属性？我不需要任何图标，我的 POC 必须在断开连接的环境中运行。

Answer 1

由于文本渲染 mapbox-gl-js 使用 PBF 格式的字体，对于离线模式，您需要有字体的本地副本。你可以看到一个现成的例子:klokantech/mapbox-gl-js-offline-example .

或者您可以使用 HTML-marker :

// add markers to map
geojson.features.forEach(function(marker) {
    // create a DOM element for the marker
    var el = document.createElement('div');
    el.innerHTML = marker.properties.message
    el.className = 'marker';
    el.addEventListener('click', function() {
      window.alert(marker.properties.message);
    });

    // add marker to map
    new mapboxgl.Marker(el)
      .setLngLat(marker.geometry.coordinates)
      .addTo(map);
});

[ https://jsfiddle.net/3kzbs7nn/ ]