test

ニュースレター購読

プロダクト

【新バージョンリリース】アダプティブ・プロジェクション(自動最適投影法)による新しい世界の見方|Mapbox GL JS v2.6

2021
11
24

Mapboxのサービス概要資料はこちら

無料でダウンロード無料でダウンロード

Mapboxのアカウント作成はこちら

Mapboxのアカウント作成はこちら

今すぐ無料登録今すぐ無料登録

お問い合わせはこちら

Mapboxのアカウント作成はこちら

お問い合わせ今すぐ無料登録

インタラクティブなWebマップの投影方法を選択できるようになりました。Mapbox GL JS v2.6の新機能の一つであるアダプティブ・プロジェクション(自動適用投影法)により、開発者やデザイナーはあらゆるズームレベルで正確なビジュアライゼーションを行うことができます。ニューヨークタイムズ紙は国政選挙の地図にアルベルス図法を使用し、ナショナルジオグラフィック協会は世界地図にヴィンケル図法を使用しています。

これまで、Webマップで地図投影法を変更するには、インタラクティブ性を犠牲にするか、複雑なカスタム実装を行う必要がありました。アダプティブ・プロジェクションにより、複雑な作業をせずとも、たった 1 行のコードで異なった地図投影法をご利用いただけます。

Maps with different projections.


地図投影は地球の表面を画面上に平らに表現する方法です。平らにするためには、ある部分は伸び、ある部分は縮むというように、歪みは避けられません。ほとんどのWebマップはメルカトル図法を使用しています。メルカトル図法は、角度と形状を維持し、高倍率でも機能しますが、世界全体のデータを見るときのように、ズームアウトしていくと地域のサイズが歪んでしまいます。例えば、グリーンランドは、実際にはアフリカの14分の1の大きさにもかかわらず、メルカトル図法では同じ大きさに見えます。

イコールアース図法のような等面積投影法やヴィンケル図法のような投影法は、この歪みを修正し、大陸や国を相対的に本来の大きさで表示します。

今後、Mapboxをご利用いただいている全ユーザーは、国の大きさを維持するか、形状を維持するか、あるいはその両方を兼ね備えた投影法を選択することができます。GLJS は、アルベルス図法、ランベルト正角円錐図法、イコールアース図法、ナチュラルアース図法、ヴィンケル図法、正距円筒図法、メルカトル図法の各投影法に対応しています。

▲ズームするとメルカトル図法に移行するヴィンケル図法

アダプティブ・プロジェクションはどの投影法を選択しても、ユーザーがズームインするとメルカトル図法にシームレスに移行します。データを正確に伝えるだけではなく、詳細に掘り下げるオーバービューマップを簡単に作成することができます。

▲ズームするとメルカトル図法に移行するアルベルス図法の南極


アダプティブ・プロジェクションは、既存のマップスタイルや、Mapbox Tiling Service で処理された既存のタイルセットでご利用いただけます。GL JS v2.6では、開発者はデータ変換や面倒な作業を必要とせず、すべてのマップビジュアライゼーションに単一のライブラリを使用することができます。1行のコードで地図の投影を変更したり、Mapbox Studioのマップスタイルエディタを使用することができます。


new mapboxgl.Map({
    projection: {name: "winkelTripel"},
    ...
});


GL JS v2.6の新機能は、アダプティブ・プロジェクションだけでなく、モバイルでのジェスチャー処理のオプション改善、3Dラベリングの改善なども含まれます。

コーポレーティブ・ジェスチャー操作

地図が全幅で表示されているWebページをスクロールしようとすると、スクロールやズームの操作がWebページではなく地図上で行われるため、エンドユーザーがイライラすることがあります。コーポレーティブ・ジェスチャー操作は、Webページと地図の間のユーザーの操作をシンプルにします。開発者は、複数のデバイスタイプで一貫したエクスペリエンスを得るために、カスタム イベント処理を実装する必要がなくなります。

コーポレーティブ・ジェスチャーを有効にすると、スクロール中に control キーまたは command キーを使用してマップをズームする必要があります。タッチデバイスの場合は、2 本の指を使用してマップを移動する必要があります。

コーポレーティブ・ジェスチャーを無効にすると、カーソルや指をマップから離すまで、地図の下のコンテンツにスクロールすることができません。 

▲コーポレーティブ・ジェスチャー有効時の操作

コーポレーティブ・ジェスチャーを有効にするには、マップをインスタンス化する際に コーポレーティブ・ジェスチャーを trueに設定します。デフォルトでは、コーポレーティブ・ジェスチャーはfalseに設定されています。


new mapboxgl.Map({
    cooperativeGestures: true,
    ...
});


3Dラベリングの改善

2Dおよび3Dビューに適したラベル処理とラベルの密度をデザインするための2つの方法を新たに導入しました。ピッチ表現とカメラからの距離表現では、マップカメラの変化に合わせて連続的に評価されるダイナミックフィルターを用いてシンボルレイヤーを作成することができます。

▲高ピッチ時にラインを使用するラベルへと動的に切り替える


2つのレイヤーのピッチ制限を設定することで、ラインを使用するラベルを切り替えることができます。


Set the non-elevated layer to show at pitch <= 60 deg
map.setFilter(“natural-point-label”, [“<=”, [“pitch”], 60]);

// Set the elevated layer to show at pitch > 60
map.setFilter(“natural-point-label-elevated”, [“>”, [“pitch”], 60]);


ピッチ表現と中心からの距離表現を組み合わせることで、遠くの物体が近くに見える現象である「透視短縮」の影響を緩和することができます。この例のように、距離のしきい値を設定することで、大きなラベルがまとまってしまうことを防ぐことができます。


[case,
  // At a low pitch always show labels
  ['<', ['pitch'], 60], true,
  // At a high pitch, only show labels close to the center
  ['all', ['>=', ['pitch'], 60], 
          ['<=', ['distance-from-center'], 2.0]
  ], true,
  // At a high pitch, hide labels far from the center
  false
]


これらの新しい表現は、Mapbox Studioでスタイリングする際や、ランタイムAPIでフィルタを設定する際に使用します。

ラベルの安定性と読みやすさの向上

見やすい、安定したテキストの配置は、効果的なデータビジュアライゼーションには欠かせません。長くてまっすぐな道のように、テキストがほぼ垂直の場合、ラベルの向きがより安定するようになりました。この他にもラベルには様々な改良が施されており、お客様はコードを変更することなく、すぐに使用することができます。

▲左:改良前/右:改良後

CJKの改善

従来、ラインラベルのラテン文字や数字は、日中韓の文字の向きと一致しておらず、ユーザーは文字ごとに読む方向を変えなければなりませんでした。以前はポイントラベルでのみ有効だった横書き・縦書きのテキストモードが、ラインラベルでも利用できるようになりました。これにより、世界中のユーザーのニーズに応えることができます。

▲左:改良前/右:改良後


この変更を適用するには、ラインラベルにtext-writing-modeプロパティを追加し、横書きと縦書きのどちらを有効にするかを指定します。


{
  "id": "road-label",
  "type": "symbol",
  "source": "mapbox",
  "layout": {
  	"text-field": "{name}",
		"symbol-placement": "line",
    "text-writing-mode": ["horizontal", “vertical”],
    "text-rotation-alignment" : "map"  
	}
}



ドキュメンテーション

APIリファレンスのドキュメントを全面的に見直し、100以上のExamplesを最新のJavascript ES6に移行し、ユーザーの皆様からご報告いただいた問題を解決しました。また、メソッドイベントをセクションごとに分類し、新規の開発者の方がGL JSの機能を一目で理解できるようにしました。

このようなドキュメントの改善により、Mapbox GL JSライブラリの強力な機能を誰もが簡単に理解し、構築できるようになりました。

早速v2.6でのビルドを始めましょう

昨年の夏からのリリースで、Mapboxはインタラクティブマップの新境地を開拓し、ウェブアプリケーションとの統合を容易にしました。また、コミュニティからの要望が多かった、アダプティブ・プロジェクション、ジェスチャー操作(1,2)、ブラウザの互換性問題の迅速な解決(1)などの機能を搭載しています。GL JS v2.6にアップデートするには、HTMLファイルの<head>ブロックに以下のコードを記述してください。

<script src='https://api.mapbox.com/mapbox-gl-js/v2.6.0/mapbox-gl.js'></script>
<link href='https://api.mapbox.com/mapbox-gl-js/v2.6.0/mapbox-gl.css' rel='stylesheet'/>

変更点の詳細については、リリースノートをご覧ください。
*本記事は、Mapbox Inc. Blogの翻訳記事です。

No items found.
No items found.

Mapboxのサービス概要資料はこちら

Mapbox Japanでは、プロダクトの概要や導入事例を紹介した資料をご用意しております。無料でダウンロードいただけますので、ぜひMapboxのビジネス活用のご参考にご利用ください。

無料でダウンロード無料でダウンロード

Mapboxのアカウント作成はこちら

Mapboxのアカウント作成はこちら

Mapboxではお得な無料枠をご用意しているため、お気軽にご利用を開始することができます。ご登録がお済みでない方は今すぐMapboxアカウントに登録してMapboxのツール・サービスをお試しください。

Mobile Maps SDK v10は、Mapboxのアカウントを作成後すぐにご利用いただけます。お得な無料枠もご用意しているのでお気軽にお試しください!

今すぐ無料登録今すぐ無料登録

お問い合わせはこちら

Mapboxのアカウント作成はこちら

Mapboxのプロダクトや企業情報に関するご質問・ご不明点はこちらからお問い合わせください。

Mobile Maps SDK v10は、Mapboxのアカウントを作成後すぐにご利用いただけます。お得な無料枠もご用意しているのでお気軽にお試しください!

お問い合わせ今すぐ無料登録

関連記事