web-dev-qa-db-fra.com

mapbox gl changer la couleur de l'icône

Existe-t-il un moyen de changer une couleur d’image-image mapbox-gl-js?

Ce code issu de https://www.mapbox.com/mapbox-gl-js/example/geojson-markers/ ne changera pas la couleur du marqueur en rouge

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"
    },
    "Paint": {
        "text-size": 12,
        "icon-color" : "#ff0000"
    }
});

J'ai essayé toutes les options listées dans la documentation officielle

mapboxmapbox-glmapbox-gl-js
14
jordi

J'ai trouvé une réponse. Vous avez besoin d’icônes sdf spécifiquement pour que cela fonctionne.

https://github.com/mapbox/mapbox-gl-js/issues/1594

Unfortunately we don't have a turnkey solution for generating sdf icons but you can see an example of how its done in the maki project

https://github.com/mapbox/maki/blob/mb-pages/sdf-render.js

https://github.com/mapbox/mapbox-gl-js/issues/161

7
Gert Cuykens

Le problème est que MapBox vous permet uniquement de colorer les icônes au format SDF (fonction de distance signée)}.

icon-color La couleur de l'icône. Ceci ne peut être utilisé qu'avec des icônes sdf.

Ici est une petite documentation à ce sujet. Comme le dit le post de GitHub, il est limité à seulement une couleur . Extraire un fichier sdf d'un fichier png est assez facile avec MapBox.

La documentation de la fonction addImage vous indique que vous pouvez ajouter un paramètre optionnel qui peut contenir sdf et pixelRatio.

Donc, tout ce que vous avez à faire est quelque chose comme ça:

        map.loadImage(imageURL, function(error0, image0) {
            if (error0) throw error0;
            map.addImage("image", image0, {
                "sdf": "true"
            });

            map.addLayer({
                "id": "Layer1",
                "type": "symbol",
                "source": "places",
                "layout": {
                    "icon-image": "image",
                    "icon-allow-overlap": true,
                },
                "Paint": {
                    "icon-color": "#00ff00",
                    "icon-halo-color": "#fff",
                    "icon-halo-width": 2
                }
            });
        });
1
Ribisl

Vous pouvez également utiliser vos propres icônes externes pré-colorées (ou en générer à la volée) en tant que icon-image si vous utilisez d'abord map.loadImage() et map.addImage().

Exemples:

Ajouter une icône à la carte

Ajouter une icône générée à la carte

1
Mike Davlantes