É possível acessar o modo "escuro" do Bing Maps na API do ArcGIS JS?

8

O Stamen Designs criou um lindo aplicativo Hurricane Tracker , que usa um modo "escuro" do cenário do Bing Maps.

insira a descrição da imagem aqui

Isso é perfeito para direcionar a atenção das pessoas para a sobreposição, e não para o fundo.

É possível acessar esta versão "escura" do Bing Maps na API JS do ArcGIS Server?

arcgis-javascript-api bing-maps stamen Stephen Lead
fonte
Não tenho certeza sobre javascript, mas com o silverlight você pode escurecer o bloco quando o evento TileLoading for acionado.
precisa saber é o seguinte

Respostas:

4

Não conheço os detalhes da API JS do ArcGIS, mas posso dizer que o MSNBC Hurricane Map usa o ColorMatrixFilter e o ColorTransform do Flash para inverter e dessaturar os blocos do Bing em tempo real.

Tenho certeza de que isso não é possível com o JS de maneira cruzada no navegador. Você pode ter algum sucesso se os blocos do Bing forem atendidos com permissões de domínio cruzado (CORS) e se a API do ArcGIS permitir renderizar blocos usando o elemento de tela HTML. Ou talvez você possa fazer proxy dos blocos e modificá-los no lado do servidor, mas é necessário verificar os termos do Bing antes de fazer isso, é claro.

RandomEtc
fonte
1
O Hurricane Map usa o ColorMatrixFilter e o ColorTransform do Flash para inverter e dessaturar os blocos do Bing rapidamente - é bom saber disso, obrigado.
Stephen chumbo
3

Inverter e dessaturar imagens é certamente possível em JS. Confira a biblioteca Pixastic .

E o código específico: Inverter e Desaturar

O truque será interceptar as imagens do Bing Map em JS e aplicar os dois efeitos a elas. Certamente possível, mas não facilmente realizado. Todas as imagens nas quais você está interessado estão em uma div com o ID do map_layerX, onde X é o ID da camada (no caso de um mapa simples com apenas a camada de mapas do Bing, será map_layer0). Isso pressupõe que o id da sua div de mapa seja "map". Firebug será seu amigo.

Sasa Ivetic
fonte
3

Aqui está um aplicativo JS API que foi mostrado na Esri User Conference deste ano, demonstrando uma funcionalidade semelhante: http://na.arcgis.com/UCdemo/traffic.html

Não tenho certeza de como ou se funciona no IE.

Os blocos do mapa base são carregados no mapa base do ArcGIS Online Streets e depois convertidos em escala de cinza. Este também é o aplicativo que usa o Canvas mencionado no slide 7 da apresentação ao qual Mike L está vinculado.

Derek Swingley
fonte
Para poupar algum tempo: na.arcgis.com/UCdemo/common/greyScaleMapLayer.js
Sasa Ivetic
@Sasa thanks! Provavelmente deveria ter incluído isso no meu post ...
Derek Swingley
Isso é ótimo, obrigado. Ele não funciona no IE8, mas pelo menos ele degrada graciosamente - o mapa base ainda é mostrado, mas na cor
Stephen chumbo
@ Stephen: Eu brinquei com o código hoje, e notei que eles estão realmente proxyizando as imagens para permitir que o código funcione. Se você não fizer proxy dos blocos de mapa do VE através do servidor local (ou seja, se os elementos da imagem não parecerem vir do mesmo domínio), NÃO será possível fazer com que isso funcione corretamente. As funções getImageData / toDataUrl () lançam exceções de segurança quando são chamadas. IMO, como o proxy já é necessário, eu faria o processamento de imagens no método proxy e não no JavaScript.
Sasa Ivetic
FWIW, você pode fazê-lo funcionar no IE simplesmente estendendo o VETiledLayer e configurando o filtro css no bloco de mapa (NÃO funciona em nenhum outro navegador .. desculpe pelo feio JS): (function(){ dojo.declare("GreyScaleVELayer", esri.virtualearth.VETiledLayer, { _tileLoadHandler: function(evt) { evt.currentTarget.style.filter = "gray invert"; this.inherited(arguments); } }); })();
Sasa Ivetic
1

Na verdade, eu vi um exemplo da Esri fazendo isso em uma das sessões técnicas durante a UC. Infelizmente, era apenas uma imagem em um slide, então não posso apontar nenhum código-fonte. Siga o link abaixo e dê uma olhada no slide 7. Parece que eles estão usando o HTML5 Canvas para alterar o tom das imagens.

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

Espero que isso ajude você na direção certa.

Mike Long
fonte
Obrigado por compartilhar este PPT. Caso você ainda não tenha notado, existem hiperlinks em muitas das imagens neste PPT. A imagem "canvas" no slide 7 está vinculada à demonstração.
Stephen Lead
0

Nos anos em que publiquei essa pergunta, a Esri lançou sua própria versão do mapa base cinza escuro, que você pode adicionar facilmente a qualquer mapa da API JS do ArcGIS.

Stephen Lead
fonte