É 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?


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.


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.


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.



@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.


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

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.