1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

Mapbox Studioで行政国ポリゴンを使って国をマスキングする

Last updated at Posted at 2022-04-27

623c1406b08bb47fc079438c_zHOOEqbFE2HGze2S9rZqlTyHC3ehI9dmMG6OmWKyM20cacZVkziN2uWr4qwusgkgJhwFQICqocTncBcLHf8O3BB4dYngyGqJJbzmgUaj0PdHyT2CmPWZJWbQTMMz0ZKuBxdUKZsJ.png
高解像度の行政区域タイルセットが、Mapbox Studioを使用するすべてのユーザーの皆様に無料で提供されています。このタイルセットは、マスキング技術によって個々の国を強調する場合に最適です。

マスキングとは、地図用語の一つで、地図上の特徴を隠すことにより、不要な視覚的混乱を防ぎ、関心のある地理的領域をメインに表示することを指します。

Mapbox Studioで国をマスキングするための5つの簡単なステップ

614d5fe2364fe078289535b4_5f88a9161bf39c2be0774fc8_YZYTqPUpCoKd1FF65fZDZrHU0pZ0auuj6tps_yTAXXZkX7-a_Tm3kiy63j_VgevO0oDQ10PrNSuN984D00T4f_mUlOHneO6i7zsiAuJArfTw3wNj39I1UhfG11XKn277AtTQcoV_.png
ステップ1
まずは、Mapbox Studioで新しく「blank」のスタイルを作成することから始めます。Layersタブを選択し、「Mapbox Satellite」レイヤーから「mapbox-satellite」を追加します。
614d5fe28bd047b38df7797b_5f88a9169775921e1c85d31b_XxNGcg3IQQYz980jJymGPh6OjZDnTGPxva96xDe5oyqA96O-ZRFK7HPJ-EE010XGTzKQ8hfLxS3Iu3lf7Cl7okq-eDWcbBTStls1Z7f8tLc71cH5y9tu54e4w43SqfnwUwxlowNd.png
ステップ2
次に、「Mapbox Countries v1」レイヤーから「country-boundaries」を追加します。次のステップで色を調整します。
614d5fe2f17661b8ece04793_5f88a9167dcf750f5ce3f024_guhtlbab2xA-L4NVXit3D_VjKleV2lFmuFm8q1xoRtyKIRgtJfAuQ_MQsunYDKk_Xnpnavp7gmvcfXhG6jEtEGEiykR5KSrR6jmVChXlRKIXf_qaZa6cm-7bKJz6-X1xskM1CNmA.png
ステップ3
Mapbox Countries v1レイヤーで「Color」を選択し、「Style with data condition」からスタイル設定します。「name」のデータフィールドで「United States」と入力します。

その後、「select data」パネルを使って、地図上をクリックして好きな国を検索してください。
614d5fe2364fe00bff9535b2_5f88a918e3a33e2b7d4c31f8_JuAjG09B6lyOs9bO_2iIRB8U3m8imZveTm1VGrBouHNbFKQLKnV4T6wCBIusZNhqKDCCcQjGdB5Qs8RBomEycynAqXFug1AyUxLqzBYm-ebuL3VQwPbdH6SVSToWnz296ifytvQv.png
614d5fe2dbe52209a181579d_5f88a9169a84e137d36d42a7_gS11KZmjkQA-k8m1tuJ-Val9iJ68UgVpvtltqUv4ucsmgItnSafQHPs22mJzInFU_tLuBkMbEqtIYBS2DpMgidBXnTAJwbUy-aPC-UcNSSOI69UiO1uX0-AfJkm5t6t0cUdC-HEo.png
ステップ4
「United States」を選択したら、その色の不透明度(α)を「0」にします。地図は以下のように表示されます。
614d5fe2364fe05ea09535b3_5f88a91793f2726b365b39ee_JJEuhQolkDspyuYrjQMFkMoQonXP35jhuAm1OPvvvXZ6GxNg7-L3RhZkbTeS5DAZp725K4lD64hf75VuGiv3TgLm91shtmoScFpEjEZEfMtFqfSp2ehm0lUGlF4k6yWSm2oHFC6e.png
Doneをクリックし、「Fallback value」を白、全不透明(α=100)とします。地図には、米国を除くすべての国が白色で表示されます。
614d5fe37c943746a220f306_5f88a9160770bd694e4d718e_E_EOv9mMwfMS5lPCV-c4VGLziIoD_bd02NqFSWgHcS-8Jy2hgVM4ocPW7Bw62Cw9FyKalNg31lNkfRMAByodimvS1kt6iskgqiS2tRkrxE6OpSuZvPUS3caX8xmjz83T9ovI8a6P.png
ステップ5
Mapboxの「water」レイヤーを追加し、同様の手順で塗りつぶしの色を白に設定します。これで、関心のある国がマスクされたことになります。

もちろん、国のFallback valueを好きな色に設定し、そのスタイルを水のレイヤーに合わせることもできます。Webページの背景色に最も合うように、さまざまな色をお試しください!
614d5fe324ac777f7d054427_5f88a9181bf39cec6e7750c9_XwLR_rdqSiGxxTuzxGZdO96vAHNqygbsDw5GgdBZSLu93LUn7sPFAeivZEdfQmUp3Cq-q-Q76h2vDyGwvbh-mMHV8gj24BnzXyRMMKYwiPjJHowwvlHaxfxEVTp_8YLDvhbEfPDd.png

境界線などの背景の追加

国の境界線など、周囲の微妙な地理的状況を追加するには、「country-boundaries」レイヤーを複製し、以下のように「select data」から 「type」を 「Line」に変更します。
614d5fe3caced6d94c7b0f62_5f88a9187dcf7538bee3f0e2_7Ki1Fqkz5kN3HQ-ajqfbrs_PjGUTv3DM1Il0FVFmjjqC6mV19yIuSGxseZKa0vq_pcR1PzrY-poW14je7E3oeKObAPtrGUhW2GYsJYvTQnuiWKQNly3-aWbgaDZzodXW2ko5P1Po.png
新しい「country-boundaries」レイヤーをドラッグして、階層の一番上に移動させます。下の例では、線の幅を細くし、グレーに着色しています。
614d5fe3fbc1578810a99b87_5f88a919f75f7139b5aa2f1a_PNsysI07DDdAsTv56Ds1QfQFdhtdGJykn8dMqMp5aWDbvRcPTvRA5jvVMUhV7U9JYi2CBfObgB_uXGSsV09mJz-N4kBc6hH7bc2nsgCJ1VrUSse2rEHHcCpQi8FApPbTj9udPfu-.png

背景のコンテキストレイヤーとして白黒の衛星レイヤーを使う

下の例では、もう一つsatelliteレイヤーを追加しています。ここでは階層の順番にご注意ください 。

「water」レイヤーの下で「country-boundaries」レイヤーの上です。また、このレイヤーのopacityを0.4とし、saturationを-1に落としました。
614d5fe339a1a63fe579fa9a_5f88a918f5b96055ad0eabe6_TEV97BeXVGhw3e31lREEvz-c_cD72i7FMozKWagTrSACuUXktWvi9Xfmc0zr5BII0Cl5Qwg3xwFkaROOWEiN4RfbN8vdCljg-2dXqnpLrGNLO6uaxzWwKD2gpF8lgoT6xiVTFV16.png

ぜひマスキングをお試しください!

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?