Mapbox GL AddLayer: de onde vêm as imagens dos ícones

10

Muitos exemplos sempre carregam a imagem do ícone como esta (por exemplo, aqui: https://www.mapbox.com/mapbox-gl-js/example/geojson-markers/ ):

map.addLayer({
    "id": "markers",
    "type": "symbol",
    "source": "markers",
    "layout": {
        "icon-image": "{marker-symbol}-15",
        "text-field": "{title}",
        "text-font": ["Open Sans Semibold", "Arial Unicode MS Bold"],
        "text-offset": [0, 0.6],
        "text-anchor": "top"
    }
});

Onde esse ícone está armazenado e como posso vincular a um png ou svg local? Ou como posso colocar minha própria markersfonte? O exemplo não está muito bem documentado.

tobias47n9e
fonte
Você verificou a seção 'referência de estilo' dos documentos da API?
Tangnar 03/02
3
Não está muito bem explicado na minha opinião. Gostaria de ver um exemplo de trabalho bem explicado.
Tobias47n9e

Respostas:

13

Se você seguir os exemplos, receberá apenas os sprites carregados com a folha de sprite do seu estilo específico, que NÃO É NECESSARIAMENTE uma correspondência de 1 para 1 com qualquer outro estilo.

ex: emerald-v8 NÃO possui "icon-image": "harbor-15" como o exemplo que usa streets-v8.

Para ver a lista de sprites disponíveis dos estilos correspondentes: https://github.com/mapbox/mapbox-gl-styles/tree/master/sprites

Eu posso escolher o ícone "porto" do repositório emerald-v8 da seguinte forma:

map.addLayer({
    "id": "pointclick",
    type: 'symbol',
    source: 'pointclick',
    "layout": {
        "icon-image": "harbor_icon",
        "icon-size":1.5
    },
    "paint": {}
});

Aqui está o recurso que me ajudou a reunir tudo e explica como criar seus próprios ícones: https://www.mapbox.com/help/custom-markers/#locate-mapbox-styles-images

EDITAR:

Basicamente, para adicionar um de seus próprios ícones, entre no Mapbox studio, crie seu próprio estilo ou edite um deles. Basta adicionar um de seus próprios SVGs e esse ícone ficará disponível em sua planilha de sprites personalizada.insira a descrição da imagem aqui

CCantey
fonte
0

Como é dito nos documentos do sprite : Passe "sprite": "https://link"para o seu estilo, onde linkestá o link para o json gerado com o spritezero-cli . spritezero-cli gerou png sprite da lista de seus ícones no formato svg. Que você pode usar ícones em camadas de símbolo como 'icon-image'.

microspace
fonte