ArcGIS JS APIでBing Mapsの「ダーク」モードにアクセスすることは可能ですか?


8

Stamen Designsは、Bing Maps背景の「ダーク」モードを使用する美しいハリケーントラッカーアプリケーションを作成しました。

ここに画像の説明を入力してください

これは、背景ではなくオーバーレイに人々の注意を向けるのに最適です。

ArcGIS Server JS API内でこの「ダーク」バージョンのBing Mapsにアクセスできますか?


JavaScriptについてはわかりませんが、silverlightを使用すると、TileLoadingイベントが発生したときにタイルを暗くできる場合があります。
カークカイケンダル

回答:


4

ArcGIS JS APIの詳細についてはわかりませんが、MSNBCハリケーンマップがFlashのColorMatrixFilterとColorTransformを使用して、Bingタイルをオンザフライで反転および彩度を下げていることはわかります。

私はそれがクロスブラウザーの方法でJSで不可能であることをかなり確信しています。Bingタイルがクロスドメイン(CORS)権限で提供され、ArcGIS APIでHTMLキャンバス要素を使用してタイルをレンダリングできる場合は、ある程度成功する可能性があります。あるいは、タイルをプロキシしてサーバー側で変更することもできますが、もちろんそれを行う前にBingの用語を確認する必要があります。


1
ハリケーンマップは、FlashのColorMatrixFilterとColorTransformを使用して、Bingタイルをその場で反転および彩度を下げます。これは知っておくと便利です。
スティーブンリード

3

JSでは画像の反転と彩度の低下が確実に可能です。Pixasticライブラリーを調べてください。

そして特定のコード:Invert and Desaturate

トリックは、JSでBingマップ画像をインターセプトし、それらに2つの効果を適用することです。確かに可能ですが、簡単には達成できません。対象となるすべての画像は、map_layerXというIDを持つdivにあります。XはレイヤーIDです(Bingマップレイヤーのみの単純なマップの場合、map_layer0になります)。これは、マップdivのIDが「マップ」であると想定しています。Firebugはあなたの友達になります。


3

今年のEsriユーザー会議で同様の機能をデモしたJS APIアプリは次のとおりです。http//na.arcgis.com/UCdemo/traffic.html

IEでどのように動作するか、または動作するかどうかはわかりません。

ベースマップタイルは、ArcGIS Online Streetsベースマップから読み込まれ、グレースケールに変換されます。これは、Mike Lがリンクされたプレゼンテーションのスライド7で参照されているCanvasを使用するアプリでもあります。



@ササありがとう!おそらくそれを私の投稿に含めるべきだったのでしょう...
Derek Swingley、2011

ありがとうございます。IE8では機能しませんが、少なくとも正常に低下します。ベースマップは引き続き表示されますが、カラーで表示されます
Stephen Lead

@Stephen:今日コードをいじってみたところ、コードが機能するように、実際に画像をプロキシしていることがわかりました。ローカルサーバーを介してVEマップタイルをプロキシしない場合(つまり、画像要素が同じドメインから取得されていないように見える場合)、これを正しく機能させることができません。getImageData / toDataUrl()関数は、呼び出されるとセキュリティ例外をスローします。IMO、プロキシが既に必要なので、JavaScriptではなくプロキシメソッドで画像処理を行います。
Sasa Ivetic、2011

VETiledLayerを拡張し、マップタイルにcssフィルターを設定することで、IEでFWIWを簡単に機能させることができます(他のブラウザーでは機能しません。醜いJSについては申し訳ありません): (function(){ dojo.declare("GreyScaleVELayer", esri.virtualearth.VETiledLayer, { _tileLoadHandler: function(evt) { evt.currentTarget.style.filter = "gray invert"; this.inherited(arguments); } }); })();
Sasa Ivetic

1

UCのテクニカルセッションの1つでこれを行っているEsriの例を実際に見ました。残念ながら、これはスライドの写真にすぎなかったため、ソースコードを紹介することはできません。以下のリンクをたどって、スライド7をご覧ください。画像の色調を変更するためにHTML5キャンバスを使用しているようです。

http://proceedings.esri.com/library/userconf/proc11/uc/tw-ppts/tw_1463.ppt

これが正しい方向に役立つことを願っています。


このPPTを共有していただきありがとうございます。まだ気付いていない場合のために、このPPTの多くの画像にはハイパーリンクがあります。スライド7の「キャンバス」画像はデモにリンクしています。
スティーブンリード

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.