¿Es posible acceder al modo "oscuro" de Bing Maps en la API ArcGIS JS?

8

Stamen Designs ha creado una hermosa aplicación de seguimiento de huracanes que utiliza un modo "oscuro" del fondo de Bing Maps.

ingrese la descripción de la imagen aquí

Esto es perfecto para dirigir la atención de las personas a la superposición en lugar de al fondo.

¿Es posible acceder a esta versión "oscura" de Bing Maps dentro de la API JS de ArcGIS Server?

arcgis-javascript-api bing-maps stamen

— Stephen Lead
fuente

No estoy seguro acerca de JavaScript, pero con Silverlight es posible que pueda oscurecer el mosaico cuando se active el evento TileLoading .

— Kirk Kuykendall el

4

No conozco los entresijos de la API ArcGIS JS, pero puedo decirle que el mapa de huracanes de MSNBC utiliza ColorMatrixFilter y ColorTransform de Flash para invertir y desaturar los mosaicos de Bing sobre la marcha.

Estoy bastante seguro de que eso no es posible con JS en una forma de navegador cruzado. Es posible que tenga cierto éxito si los mosaicos de Bing se sirven con permisos de dominio cruzado (CORS) y si la API de ArcGIS le permite renderizar mosaicos utilizando el elemento de lienzo HTML. O tal vez podría proxy los mosaicos y modificarlos en el lado del servidor, pero tendría que verificar los términos de Bing antes de hacerlo, por supuesto.

— RandomEtc
fuente

1

Hurricane Map utiliza ColorMatrixFilter y ColorTransform de Flash para invertir y desaturar los mosaicos de Bing sobre la marcha . Es bueno saberlo, gracias.

— Stephen Lead

3

Invertir y desaturar imágenes es ciertamente posible en JS. Echa un vistazo a la biblioteca de Pixastic .

Y el código específico: Invertir y desaturar

El truco consistirá en interceptar las imágenes de Bing Map en JS y aplicarles los dos efectos. Ciertamente posible, pero no fácil de lograr. Todas las imágenes que le interesan están en un div con id de map_layerX, donde X es la ID de capa (en el caso de un mapa simple con solo la capa de mapas de Bing, será map_layer0). Eso supone que la identificación de su div de mapa es "mapa". Firebug será tu amigo.

— Sasa Ivetic
fuente

3

Aquí hay una aplicación JS API que se mostró en la Conferencia de usuarios de Esri de este año que muestra una funcionalidad similar: http://na.arcgis.com/UCdemo/traffic.html

No estoy seguro de cómo o si funciona en IE.

Los mosaicos del mapa base se cargan desde el mapa base de ArcGIS Online Streets y luego se convierten en escala de grises. Esta es también la aplicación que utiliza Canvas referenciada en la diapositiva 7 de la presentación a la que Mike L se vinculó.

— Derek Swingley
fuente

Para ahorrarle algo de tiempo: na.arcgis.com/UCdemo/common/greyScaleMapLayer.js

— Sasa Ivetic

@Sasa gracias! Probablemente debería haber incluido eso en mi publicación ...

— Derek Swingley

Esto es genial, gracias. No funciona en IE8, pero al menos se degrada con gracia: el mapa base todavía se muestra, pero en color

— Stephen Lead

@Stephen: Hoy jugué con el código y noté que en realidad están representando las imágenes para que el código funcione. Si no representa los mosaicos del mapa VE a través de su servidor local (es decir, si los elementos de la imagen no parecen provenir del mismo dominio), NO podrá hacer que esto funcione correctamente. Las funciones getImageData / toDataUrl () generarán excepciones de seguridad cuando se invoquen. En mi opinión, dado que ya se requiere proxy, haría el procesamiento de imágenes en el método proxy y no en JavaScript.

— Sasa Ivetic

FWIW puede hacer que funcione en IE simplemente extendiendo VETiledLayer y configurando el filtro css en el mosaico del mapa (NO funciona en ningún otro navegador ... perdón por el feo JS):

(function(){     dojo.declare("GreyScaleVELayer", esri.virtualearth.VETiledLayer, { 		_tileLoadHandler: function(evt) { 			evt.currentTarget.style.filter = "gray invert"; 			this.inherited(arguments); 		}     }); })();

— Sasa Ivetic

1

De hecho, he visto un ejemplo de Esri de ellos haciendo esto en una de las sesiones técnicas durante la UC. Desafortunadamente, era solo una imagen en una diapositiva, así que no puedo señalar ningún código fuente. Siga el enlace a continuación y eche un vistazo a la diapositiva 7. Parece que están utilizando el lienzo HTML5 para cambiar el tono de las imágenes.

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

Espero que esto te ayude en la dirección correcta.

— Mike Long
fuente

Gracias por compartir este PPT. En caso de que aún no lo haya notado, hay hipervínculos en muchas de las imágenes en este PPT. La imagen del "lienzo" en la diapositiva 7 enlaza con la demostración.

— Stephen Lead

0

En los años transcurridos desde que publiqué esta pregunta, Esri ha lanzado su propia versión del mapa base gris oscuro que puede agregar fácilmente a cualquier mapa API ArcGIS JS.

— Stephen Lead
fuente