Как нарисовать статический текст внутри пользовательских слоев Mapbox? - PullRequest
Новая
       35

Как нарисовать статический текст внутри пользовательских слоев Mapbox?

0 голосов
/ 29 марта 2019

Какой самый простой метод записи текста в пользовательский слой Mapbox GL? Смотрите изображение, чтобы увидеть, как оно должно выглядеть: Карта Mapbox со статическим текстом ! Текст должен быть абсолютным - не перемещаться вместе с картой - и в идеале он должен использовать собственный шрифт, например Google Fonts. Но альтернатива использованию HTML5 2D Canvas поверх карты не подходит, потому что я хочу дополнительно изменить весь контекст web-gl, включая текст.

Я знаю, как создать слой клиента с 2d-контекстом, и я знаю, что теоретически мог бы написать клиентский шейдер и т. Д. В GLGS, чтобы каким-то образом генерировать текст внутри контекста, но делать это вручную это просто нереально. Я знаю, что есть библиотеки, такие как PixieJS, которые абстрагируют 2d рендеринг, но я не уверен, что, например, при расчесывании Настраиваемый слой Mapbox GL и PixieJS - это умный способ достичь легкости рисования текста?

Фрагмент формы пользовательского слоя, как получить текст рендеринга (с абсолютной позицией), с пользовательским шрифтом и хорошо выглядеть? 

var custom_layer = {
    id: 'customer-layer-1',
    type: 'custom',
    renderingMode: '2d',

onAdd: function (map, gl) {
    var vertexSource = "" +
    "uniform mat4 u_matrix;" +
    "attribute vec2 a_pos;" +
    "void main() {" +
    "    gl_Position = u_matrix * vec4(a_pos, 0.0, 1.0);" +
    "}";

    var fragmentSource = "" +
    "void main() {" +
    "    gl_FragColor = vec4(1.0, 0.0, 0.0, 0.5);" +
    "}";

Как мне избежать необходимости писать собственные вершинные / фрагментные шейдеры? Я знаю, что есть также удивительные пользовательские интеграции слоев, например, с Deck.gl, который сам по себе предлагает TextLayer, но этот использует растровые шрифты, которые на самом деле не так уж хороши.

Любые советы / примеры будут замечательными

...