Mapbox GL AddLayer: ¿De dónde provienen las imágenes de los iconos?

10

Muchos de los ejemplos siempre cargan la imagen del icono de esta manera (por ejemplo, aquí: 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"
    }
});

¿Dónde se almacena este icono y cómo puedo vincularlo a un png o svg local? ¿O cómo puedo poner el mío markersen la fuente? El ejemplo no está muy bien documentado.

tobias47n9e
fuente
¿Revisaste la sección 'referencia de estilo' de los documentos de la API?
Tangnar
3
No está muy bien explicado en mi opinión. Me encantaría ver un ejemplo de trabajo bien explicado.
tobias47n9e

Respuestas:

13

Si sigues los ejemplos, solo obtienes los sprites que se cargan con la hoja de sprites de tu estilo particular, que NO ES NECESARIAMENTE una coincidencia 1 a 1 con ningún otro estilo.

ex: emerald-v8 NO tiene "icon-image": "harbor-15" como el ejemplo que usa streets-v8.

Para ver la lista de sprites disponibles de los estilos correspondientes: https://github.com/mapbox/mapbox-gl-styles/tree/master/sprites

Puedo elegir el icono "puerto" de su repositorio emerald-v8 de esta manera:

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

Aquí está el recurso que me ayudó a reunirlo todo, y explica cómo crear sus propios iconos: https://www.mapbox.com/help/custom-markers/#locate-mapbox-styles-images

EDITAR:

Básicamente, para agregar uno de sus propios iconos, vaya al estudio Mapbox, cree su propio estilo o edite uno de los suyos. Simplemente agregue uno de sus propios SVG, luego ese icono estará disponible para usted en su hoja de sprites personalizada.ingrese la descripción de la imagen aquí

CCantey
fuente
0

Como se dice en los documentos de sprite : Pase "sprite": "https://link"a su estilo, donde linkhay un enlace a json generado con spritezero-cli . spritezero-cli generó png sprite de la lista de sus iconos en formato svg. Que puede usar iconos en capas de símbolos como 'icon-image'.

microspace
fuente