Leafletjs と OSM を使用してローカルおよび英語の複製マップを取得する

Question

私は、leafletjs と Openstreetmap を使用して vuejs で地図を作成しました (公式 Web サイト: https://leafletjs.com/ を使用)。 リーリー

しかし、ここでは、図に示すように、地図上に現地の元の言語と英語の両方を表示したいと考えています (下の画像を参照)

https://liveuamap.com/

Google で検索して多くのチュートリアルを確認しましたが、探しているものが見つかりませんでした。 vuejs を使用してマップでこれを実現するにはどうすればよいですか。 次に、英語もオフにする必要があるため、ユーザーが現地の言語のみを表示したい場合、または英語を表示したい場合は、そうすることを選択できます。 ご協力をよろしくお願いいたします。前もって感謝します！

Answer 1

さまざまな言語オプションを提供するベクター タイル プロバイダー (MapTiler など) に変更する必要があります。または、リーフレット タイルやラスター タイルを使用したい場合は、英語のラベルを提供するタイル プロバイダーを使用してください。例えば。 MapTiles API は、グローバル ラスター タイルを使用してローカルまたは英語のラベル (両方の組み合わせではありません) を提供します。

たとえば、これ (API キーが必要です) には英語のラベルが表示されます:

リーリー

編集: 英語とローカルのラベルが混在するマップ レイヤーが見つかりました。 Thunderforest マップ タイルには、liveuamap の例と同様に、英語とローカルのラベルの両方が表示されます。 API キーも必要です。

コード例:

リーリー

切り替えについて: ラスター タイルの場合、これはマップ レイヤー スイッチャー (Leaflet ではレイヤー コントロールと呼ばれます。ここを参照してください: https://leafletjs.com/SlavaUkraini/examples/layers-control/##) を介してのみ可能です。 ＃）。例えば。 1 つのレイヤーには標準の OpenStreetMap タイルがあり、別のレイヤーには、たとえば MapTiles API の英語タイルと Thunderforest タイルがあります。