Ist es möglich, in der ArcGIS JS-API auf den Bing Maps-Modus „Dunkel“ zuzugreifen?

8

Stamen Designs hat eine wunderschöne Hurricane Tracker- Anwendung entwickelt, die einen "dunklen" Modus des Bing Maps-Hintergrunds verwendet.

Geben Sie hier die Bildbeschreibung ein

Dies ist perfekt, um die Aufmerksamkeit der Leute eher auf die Überlagerung als auf den Hintergrund zu lenken.

Ist es möglich, über die ArcGIS Server JS-API auf diese "dunkle" Version von Bing Maps zuzugreifen?

arcgis-javascript-api bing-maps stamen Stephen Lead
quelle
Ich bin mir bei Javascript nicht sicher, aber mit Silverlight können Sie die Kachel möglicherweise abdunkeln, wenn das TileLoading- Ereignis ausgelöst wird.
Kirk Kuykendall

Antworten:

4

Ich kenne die Vor- und Nachteile der ArcGIS JS-API nicht, aber ich kann Ihnen sagen, dass die MSNBC Hurricane Map ColorMatrixFilter und ColorTransform von Flash verwendet, um die Bing-Kacheln im laufenden Betrieb zu invertieren und zu entsättigen.

Ich bin mir ziemlich sicher, dass dies mit JS browserübergreifend nicht möglich ist. Möglicherweise haben Sie Erfolg, wenn die Bing-Kacheln mit domänenübergreifenden Berechtigungen (CORS) bereitgestellt werden und wenn Sie mit der ArcGIS-API Kacheln mithilfe des HTML-Canvas-Elements rendern können. Oder Sie könnten die Kacheln als Proxy verwenden und sie serverseitig ändern, aber Sie müssten natürlich vorher die Bing-Begriffe überprüfen.

RandomEtc
quelle
1
Hurricane Map verwendet Flashs ColorMatrixFilter und ColorTransform, um die Bing-Kacheln im laufenden Betrieb umzukehren und zu entsättigen - das ist gut zu wissen, danke.
Stephen Lead
3

Das Invertieren und Entsättigen von Bildern ist in JS sicherlich möglich. Schauen Sie sich die Pixastic- Bibliothek an.

Und der spezifische Code: Invertieren und Entsättigen

Der Trick besteht darin, die Bing Map-Bilder in JS abzufangen und die beiden Effekte auf sie anzuwenden. Sicher möglich, aber nicht leicht zu erreichen. Alle Bilder, die Sie interessieren, befinden sich in einem Div mit der ID map_layerX, wobei X die Layer-ID ist (im Fall einer einfachen Karte mit nur dem Bing-Maps-Layer ist es map_layer0). Dies setzt voraus, dass die ID Ihres Map Div "Map" ist. Firebug wird dein Freund sein.

Sasa Ivetic
quelle
3

Hier ist eine JS-API-App, die auf der diesjährigen Esri User Conference gezeigt wurde und ähnliche Funktionen demonstriert: http://na.arcgis.com/UCdemo/traffic.html

Ich bin nicht sicher, wie oder ob es im IE funktioniert.

Grundkartenkacheln werden aus der ArcGIS Online Streets- Grundkarte geladen und dann in Graustufen konvertiert. Dies ist auch die App, die Canvas verwendet, auf das in Folie 7 der Präsentation verwiesen wird, auf die Mike L verlinkt ist.

Derek Swingley
quelle
Um Ihnen einige Zeit zu sparen: na.arcgis.com/UCdemo/common/greyScaleMapLayer.js
Sasa Ivetic
@ Sasa danke! Wahrscheinlich hätte ich das in meinen Beitrag aufnehmen sollen ...
Derek Swingley
Das ist großartig, danke. Es funktioniert nicht in IE8, aber es verschlechtert sich zumindest elegant - die Grundkarte wird immer noch angezeigt, aber in Farbe
Stephen Lead
@Stephen: Ich habe heute mit dem Code herumgespielt und festgestellt, dass sie die Bilder tatsächlich als Proxy verwenden, damit der Code funktioniert. Wenn Sie die VE-Zuordnungskacheln nicht über Ihren lokalen Server übertragen (dh wenn die Bildelemente nicht aus derselben Domäne stammen), können Sie dies NICHT ordnungsgemäß ausführen. Die Funktionen getImageData / toDataUrl () lösen beim Aufruf Sicherheitsausnahmen aus. IMO, da Proxy bereits erforderlich ist, würde ich die Bildverarbeitung in der Proxy-Methode und nicht in JavaScript durchführen.
Sasa Ivetic
FWIW Sie können es einfach genug in IE zum Laufen bringen, indem Sie den VETiledLayer erweitern und den CSS-Filter auf der Kartenkachel einstellen (funktioniert in keinem anderen Browser. Entschuldigung für hässliches JS): (function(){ dojo.declare("GreyScaleVELayer", esri.virtualearth.VETiledLayer, { _tileLoadHandler: function(evt) { evt.currentTarget.style.filter = "gray invert"; this.inherited(arguments); } }); })();
Sasa Ivetic
1

Ich habe tatsächlich ein Esri-Beispiel gesehen, wie sie dies bei einer der technischen Sitzungen während der UC taten. Leider war es nur ein Bild auf einer Folie, so dass ich Sie nicht auf einen Quellcode verweisen kann. Folgen Sie dem Link unten und werfen Sie einen Blick auf Folie 7. Es scheint, dass sie den HTML5-Canvas verwenden, um den Ton der Bilder zu ändern.

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

Hoffe das hilft dir in die richtige Richtung.

Mike Long
quelle
Vielen Dank für das Teilen dieser PPT. Falls Sie es noch nicht bemerkt haben, gibt es Hyperlinks zu vielen Bildern in dieser PPT. Das "Leinwand" -Bild auf Folie 7 verweist auf die Demo.
Stephen Lead
0

In den Jahren, seit ich diese Frage gestellt habe, hat Esri eine eigene Version der dunkelgrauen Grundkarte veröffentlicht, die Sie problemlos zu allen ArcGIS JS-API-Karten hinzufügen können.

Stephen Lead
quelle