nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

クリエイティブなベクターベースマップのデザイン

NinaJakobs

<\/HEAD>

Esri Nederlandでのプロジェクトインターンシップ中に、Kerstkaart<\/A><\/SPAN>を使って作業を行いました。このKerstkaartは背景地図として使用できます。Topo RD地図の色やパターンをクリスマススタイルに変更することで、美しいKerstkaartが誕生しました。Topo RDのラスター基盤地図では色やパターンを変更できませんが、Topo RDのベクターベースマップでは可能です。これは、このベースマップがスプライト（カスタマイズ可能なオブジェクト）にリンクされたベクタタイルで構成されているためです。 ArcGIS Vector Tile Style Editor<\/A> ではこれらのオブジェクトをカスタマイズできます。 <\/SPAN>スタイルの調整に加え、ベクターベースマップはラスター基盤地図に比べてさらに多くの利点があります。Willem Jan Vierbergen<\/A>0c <\/SPAN>は彼のウェビナー<\/A><\/V>でベクターベースマップについて詳しく説明しています。<\/SPAN><\/P>

<\/P>

準備<\/STRONG><\/SPAN><\/P>まず最初に、ArcGIS Onlineで

ベクターベースマップのコピー<\/A><\/V>を作成しました。ライトグレーのCanvas RDベクターベースマップは、レイヤーごとに色を調整でき、グレーの背景上で色がよく見えたので便利でした。コピーを作成した後、ArcGIS Vector Tile Style Editor<\/V>でクリエイティブなベクターベースマップの作成を開始しました。<\/SPAN><\/P>

<\/P>

色の選択<\/STRONG><\/SPAN><\/P>スプライトにパターンを付ける前に、まず地図で使用する色を選択して、それらの色が調和するかどうかを確認することが賢明です。私は

coolors<\/A><\/V>というウェブサイトとAdobe Illustratorを使って、どの色がよく合うかを調べました。 <\/SPAN><\/P>

色の選択が終わった後、Edit Layer Styles<\/EM>を使って地図上の色を調整しました。 <\/SPAN><\/P>coolorsやAdobe Illustratorから選んだ色コードは、変更したいレイヤーのカラーコード欄にコピー＆ペーストします。どの色が最も合うか試行錯誤しながら実験しました。時にはプロセス中に特定の色を変更し、元の色よりも全体的に合う別の色に変えることもありました。例えば線の色はある時点で赤と白にして、クリスマステーマを強調しました。<\/SPAN><\/P><\/P><\/SPAN><\/P><\/P>パターン <\/STRONG><\/SPAN><\/P>次に地図にパターンを追加します。最初にどのパターンがどの面に合うか考えました。例えば森の緑色はそのまま緑ですが、緑のパターンを加えることで地図に少しアクセントが加わります。また前段階で設定した海には濃い青色を使い、その青色をAdobe Illustratorに取り込みました。その上に

Freepik<\/A><\/V>から雪片を貼り付け、背景透過PNGファイルとして保存しました。Freepikをご利用の場合は画像に著作権があることをご注意ください。 <\/SPAN><\/P>

雪片は地図上で繰り返し表示させて、よりクリスマス感を演出しました。そのためには雪片画像の背景色だけ変更すればよく、この作業はAdobe Illustratorや他の画像編集ソフトで行えます。 <\/SPAN><\/P> <\/SPAN><\/P>

スプライト用パターンは地図上で水平・垂直方向に複製されます。パターンがきれいにつながるようAdobe Illustratorでテストしました。同様のソフトやWordで5回繰り返して読み込む方法でも確認可能です。不連続なパターン例は下記画像をご覧ください。

パターンがきれいにつながるよう、画像編集ソフトで元画像をトリミングしました。適切にトリミングされていれば、前述画像のような白線は表示されません。 < IMG __jive_id = "431955" class = "image-6 j-img-centered jive-image " src = "https://us.v-cdn.net/6038851/uploads/legacyfs/online/431955_pastedImage_20.png " style = "display: block; margin-left: auto; margin-right: auto; " /> < TABLE style = "width: 21px; " > < TBODY > < TR > < TD style = "width: 5px; " > </ TD > </ TR > < TR > < TD style = "width: 5px; " > </ TD > < TD style = "width: 10px; " > </ TD > </ TR > </ TBODY > </ TABLE > ArcGIS Vector Tile Style Editor の Edit Icons and Patterns ボタンから画像を追加できます。アップロード後は各レイヤーごとに Edit Layer Styles ボタンで画像を割り当てられます。 ある時点でクリスマスツリーパターンが煩雑すぎると感じました。このパターンを控えめにするため、透明度（Opacity）で明るさを調整しました。& nbsp ;< IMG __jive_id = "431956" class = "image-7 j-img-centered jive-image " src = "https://us.v-cdn.net/6038851/uploads/legacyfs/online/431956_pastedImage_22.png " style = "display: block; margin-left: auto; margin-right: auto; " /> & nbsp ;& nbsp ;& nbsp ;ラベル用アイコン パターン以外にもアイコンが使用できます。Kerstkaartでは例えば場所名・国名・地区名・近隣名などにリボン形状のアイコンを付け、その中にテキストを配置しました。 & nbsp ;& nbsp ;< IMG __jive_id = "431957" class = "j-img-centered jive-image image-8" src = "https://us.v-cdn.net/6038851/uploads/legacyfs/online/431957_pastedImage_24.png" style = "display: block; margin-left: auto; margin-right: auto;" /> & nbsp ;& nbsp ;& nbsp ;& nbsp ;& nbsp ;& nbsp ;& nbsp ;& nbsp ;& nbsp ;& nbsp ;& nbsp ;& nbsp ;& nbsp ;& nbsp ;& nbsp ;& nbsp ;& nbsp ;& nbsp ;& nbsp ;& nbsp ;& nbsp ;& nbsp ;& nbsp ;& nbsp ;& nbsp ;& nbsp ;& nbsp ;& nbsp ;& nbsp ;& nbsp ;リボンが大きすぎたため、Size <\/EM>を使ってサイズを変更しました。Icon Translate<\/EM>でXとYの位置を変えて、テキストがリボンの中央に来るようにしました。<\/SPAN><\/P><\/P>まだいくつか面白くて目立つアイコンが残っていました。これらをよく使われるレイヤーに置くのはやりすぎだと思ったので、あまり使われないレイヤーでズームレベルが深いものに配置することにしました。<\/SPAN><\/P> <\/SPAN><\/P> <\/P> <\/STRONG><\/SPAN><\/P> <\/STRONG><\/SPAN><\/P>既存のアイコンの置き換え<\/STRONG><\/SPAN><\/P>木のアイコンをクリスマスボールに置き換えたかったので、Edit Icons and <\/EM>からReplace Icon\/Pattern. <\/EM>をクリックして、一度にすべての木のアイコンをクリスマスボールに置き換えました。<\/SPAN><\/P><\/SPAN><\/P> <\/P> <\/EM><\/SPAN><\/P>追加要素<\/STRONG><\/SPAN><\/P>仕上げとしてフォントの色を調整し、テキストに白いぼんやりした雲のようなアイコンを追加して楽しい効果を与えました。 <\/SPAN><\/P> <\/SPAN><\/P> <\/SPAN><\/P> <\/SPAN> <\/SPAN><\/P> <\/SPAN><\/P>クリエイティブなベクターベースマップを共有するために、ほぼすべてを変更できるためWeb App Builder for ArcGIS<\/EM>を利用しました。<\/SPAN><\/P> <\/SPAN><\/P>結果<\/STRONG><\/SPAN><\/P>適切なパターンを見つけるのは時々パズルのようでしたが、地図がごちゃごちゃしすぎないように気をつけました。また、非常に多くの地図レイヤーがあるため、正しいレイヤーを見つけるために時にはレイヤーを鮮やかな赤色にする必要もありました。しかし、それはすべてのレイヤーが自分のスタイルに合わせて調整できることも意味します。ArcGIS Vector Tile Style Editorが提供する多くの可能性のおかげで、創造力を発揮して様々な試みができ、美しい最終結果が生まれ、それはあなた自身や友人、家族、同僚たちが誇りに思うものになるでしょう！<\/SPAN><\/P> <\/STRONG><\/SPAN><\/P>メリークリスマス！クリスマスマップはこちらでご覧ください here<\/<A> <\/ <\/ <\/ <\/ <\/ <\/ <IMG __jive_id= "431962" class= "image-12 j-img-centered jive-image" src= "https:\/ \/us.v-cdn.net \/6038851 \/uploads \/legacyfs \/online \/431962_pastedImage_35.png" style= "display: block; margin-left: auto; margin-right: auto;" \/> <\/<BODY> <\/<HTML>

タグ付けされた投稿をもっと見る

Blogs

There are no comments yet

会話に参加する

サインインしたメンバーは投稿、更新のフォローなどができます。初めてですか？無料アカウントを登録してください。

クイックリンク

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.