Как использовать браузерные шрифты с mapbox? - PullRequest
Новая
       7

Как использовать браузерные шрифты с mapbox?

0 голосов
/ 23 мая 2018

Я создаю POC с последней версией Mapbox.

Из того же источника у меня есть два слоя, один для отображения точек, а другой для печати мира приветствия для каждой точки: 

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

Так что я смотрю в документ Mapbox , чтобы увидеть, что я должен добавить свойство глифа, если мне нужен text-fiel,Но какое свойство глифа следует использовать, если я хочу получить шрифты по умолчанию для браузера или ОС?Мне не нужны никакие значки, и мой POC должен работать в отключенной среде.

1 Ответ

0 голосов
/ 23 мая 2018

Поскольку для рендеринга текста mapbox-gl-js используют шрифты в формате PBF, для автономного режима вам необходимо иметь локальную копию шрифтов.Вы можете увидеть готовый пример: klokantech / mapbox-gl-js-offline-example .

Или вы можете использовать HTML-маркер : 

// 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/]

...