web-dev-qa-db-ja.com

mapbox gl変更アイコンの色

Mapbox-gl-jsのアイコン画像の色を変更する方法はありますか？

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

公式ドキュメントに記載されているすべてのオプションを試しました

mapboxmapbox-glmapbox-gl-js
18
jordi

答えを見つけました。これを機能させるには、sdfアイコンが必要です。

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

@ yurikによって更新されました：上記のリンクは機能しなくなり、おそらく https://github.com/mapbox/maki/blobを参照しています） /b0060646e28507037e71edf049a17fab470a0080/sdf-render.js

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

7
Gert Cuykens

問題は、MapBoxでは、SDF（signed distance function）形式のアイコンにのみ色を付けることができることです。

icon-color アイコンの色。これは、sdfアイコンでのみ使用できます。

ここ はそれについての小さなドキュメントです。 GitHubの投稿のように、これは1色のみに制限されていると述べています。 MapBoxでは、pngファイルからsdfファイルを取得するのは非常に簡単です。

addImage 関数のドキュメントは、sdfとpixelRatioを含むことができるオプションのオプションパラメータを追加できることを示しています。

だからあなたがしなければならないすべてはこのようなものです：

        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
                }
            });
        });
3
Ribisl

最初にmap.loadImage()とmap.addImage()を使用する場合は、独自の事前着色された外部アイコンをicon-imageとして使用する（またはその場で着色アイコンを生成する）こともできます。

例：

アイコンをマップに追加

生成されたアイコンをマップに追加

1
Mike Davlantes