Apakah mungkin untuk mengakses mode Bing gelap "gelap" di ArcGIS JS API?

8

Stamen Designs telah membuat aplikasi Hurricane Tracker yang indah yang menggunakan mode "gelap" dari latar belakang Bing Maps.

masukkan deskripsi gambar di sini

Ini sempurna untuk mengarahkan perhatian orang pada hamparan alih-alih latar belakang.

Apakah mungkin untuk mengakses versi "gelap" dari Bing Maps ini di dalam ArcGIS Server JS API?

arcgis-javascript-api bing-maps stamen Stephen Lead
sumber
Saya tidak yakin tentang javascript, tetapi dengan silverlight Anda mungkin dapat menggelapkan ubin ketika acara TileLoading menyala.
Kirk Kuykendall

Jawaban:

4

Saya tidak tahu seluk beluk dari ArcGIS JS API tetapi saya dapat memberi tahu Anda bahwa Peta Badai MSNBC menggunakan Flash's ColorMatrixFilter dan ColorTransform untuk membalikkan dan menghilangkan desaturasi ubin Bing dengan cepat.

Saya cukup yakin itu tidak mungkin dengan JS dengan cara lintas-browser. Anda mungkin akan berhasil jika ubin Bing disajikan dengan izin lintas-domain (CORS) dan jika ArcGIS API memungkinkan Anda untuk membuat ubin menggunakan elemen kanvas HTML. Atau mungkin Anda bisa mem-proxy ubin dan memodifikasinya di sisi server, tetapi Anda harus memeriksa persyaratan Bing sebelum melakukannya, tentu saja.

RandomEtc
sumber
1
Hurricane Map menggunakan Flash's ColorMatrixFilter dan ColorTransform untuk membalikkan dan mendesaturasi ubin Bing dengan cepat - itu bagus untuk diketahui, terima kasih.
Stephen Lead
3

Pembalikan dan desaturasi gambar tentu dimungkinkan di JS. Lihat perpustakaan Pixastic .

Dan kode spesifik: Balikkan dan Desaturate

Triknya adalah memotong gambar Bing Map di JS dan menerapkan dua efek padanya. Tentu mungkin, tetapi tidak mudah dicapai. Semua gambar yang Anda minati adalah div dengan id map_layerX, di mana X adalah ID lapisan (dalam kasus peta sederhana dengan hanya lapisan peta Bing, itu akan menjadi map_layer0). Itu dengan asumsi id div peta Anda adalah "map". Firebug akan menjadi teman Anda.

Sasa Ivetic
sumber
3

Berikut ini adalah aplikasi JS API yang ditampilkan pada Esri User Conference tahun ini yang mendemonstrasikan fungsi yang serupa: http://na.arcgis.com/UCdemo/traffic.html

Saya tidak yakin bagaimana atau apakah itu berfungsi di IE.

Ubin basemap diambil dari basemap ArcGIS Online Streets dan kemudian dikonversi menjadi grayscale. Ini juga merupakan aplikasi yang menggunakan Canvas yang dirujuk dalam slide 7 dari presentasi yang terhubung dengan Mike L.

Derek Swingley
sumber
Untuk menghemat waktu Anda: na.arcgis.com/UCdemo/common/greyScaleMapLayer.js
Sasa Ivetic
@Asa terima kasih! Mungkin seharusnya memasukkan itu dalam posting saya ...
Derek Swingley
Ini bagus, terima kasih. Itu tidak bekerja di IE8, tapi setidaknya itu terdegradasi dengan anggun - basemap masih ditampilkan, tetapi dalam warna
Stephen Lead
@Stephen: Saya bermain-main dengan kode hari ini, dan memperhatikan bahwa mereka sebenarnya mem-proxy-kan gambar untuk memungkinkan kode bekerja. Jika Anda tidak mem-proxy petak peta VE melalui server lokal Anda (yaitu jika elemen gambar tampaknya tidak berasal dari domain yang sama), Anda TIDAK akan bisa membuat ini berfungsi dengan baik. Fungsi getImageData / toDataUrl () akan melempar pengecualian keamanan ketika mereka dipanggil. IMO, karena proxy sudah diperlukan, saya akan melakukan pemrosesan gambar dalam metode proxy dan bukan dalam JavaScript.
Sasa Ivetic
FWIW Anda bisa membuatnya berfungsi di IE cukup dengan memperluas VETiledLayer dan mengatur filter css pada ubin peta (TIDAK bekerja di browser lain .. maaf tentang JS jelek): (function(){ dojo.declare("GreyScaleVELayer", esri.virtualearth.VETiledLayer, { _tileLoadHandler: function(evt) { evt.currentTarget.style.filter = "gray invert"; this.inherited(arguments); } }); })();
Sasa Ivetic
1

Saya sebenarnya telah melihat contoh Esri dari mereka melakukan ini di salah satu Sesi Teknis selama UC. Sayangnya itu hanya gambar dalam slide jadi saya tidak bisa mengarahkan Anda ke kode sumber apa pun. Ikuti tautan di bawah ini dan lihat slide 7. Tampaknya mereka menggunakan Kanvas HTML5 untuk mengubah nada gambar.

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

Semoga ini bisa membantu Anda ke arah yang benar.

Mike Long
sumber
Terima kasih telah berbagi PPT ini. Jika Anda belum menyadarinya, ada banyak tautan di banyak gambar di PPT ini. Gambar "canvas" pada slide 7 menghubungkan ke demo.
Stephen Lead
0

Pada tahun-tahun sejak saya memposting pertanyaan ini, Esri telah merilis versi mereka sendiri dari basemap abu-abu gelap yang dapat dengan mudah Anda tambahkan ke peta API API ArcGIS JS.

Stephen Lead
sumber