Fügen Sie Ihr eigenes Logo zu ArcGIS JS Maps hinzu

ReneRubalcava

<\/HEAD>

<\/P>

Eines der einfachsten Dinge, die Sie tun können, um Ihre ArcGIS JavaScript-Karte zu personalisieren, ist das Hinzufügen eines benutzerdefinierten Logos. Esri macht es, warum können Sie es nicht? <\/EM><\/P><\/P>Machen Sie es zu Ihrem eigenen<\/H2>Wahrscheinlich erstellen Sie die App für einen Kunden, und ein Kunde kann auch Ihr eigener Arbeitsplatz sein, aber ich wette, dieser Kunde hat eine Marke und höchstwahrscheinlich ein Logo.<\/P><\/P>Sie arbeiten hart für Ihre Karten, also lassen Sie die Leute das wissen!<\/EM><\/P><\/P>Das ist wirklich nicht schwer zu machen, es ist nur ein bisschen CSS und DOM-Einfügung, aber Sie könnten es aufwerten und auch als wiederverwendbares Widget gestalten. Ein sehr einfaches Beispiel könnte ungefähr so aussehen:<\/P><\/P>var LogoWidget = declare([_WidgetBase, _TemplatedMixin], {
  templateString: '<div class="${logoClassName}" data-dojo-attach-event="click:openLink"><\/div>',
  postCreate: function() {
    put(dom.byId('map_root'), this.domNode);
  },
  openLink: function() {
    window.open(this.get('url'), '_blank');
  }
});<\/PRE><\/P>Was Sie hier haben, ist ein grundlegendes Widget, bei dem Sie den put-selector<\/A> verwenden können, um den DOM-Knoten des Widgets zur Seite hinzuzufügen. Ich gehe davon aus, dass Sie das Logo innerhalb der Kartenbegrenzungen haben möchten, daher habe ich es so eingerichtet, dass es in das div mit der ID "map_root"<\/STRONG> eingefügt wird. Dies entspricht der DOM-ID, die Sie dem DOM-Element gegeben haben, das Sie für die Karte bereitgestellt haben. Wenn die Karten-ID "map"<\/STRONG> lautet, enthält sie ein div mit der ID "map_root"<\/STRONG>. Wenn meine Karten-ID "harry"<\/STRONG> wäre, würde sie ein div mit der ID "harry_root"<\/STRONG> enthalten. Ich bin sicher, Sie verstehen die Idee.<\/P><\/P>Sobald Sie das getan haben, initialisieren Sie einfach das Widget mit einer URL und einem Klassennamen, den Sie in Ihrem CSS definieren:<\/P>var logo = new LogoWidget({
  url: '<\/SPAN>http:\/\/odoe.net\/blog\/<\/A>',<\/SPAN>
  logoClassName: 'my-logo'
});<\/PRE><\/P>

Stylen Sie es<\/H2>Dann können Sie im CSS für das Widget die Größe und Position sowie das Hintergrundbild definieren:<\/P>.my-logo {
  display: inline-block;
  position: absolute;
  height: 36px;
  width: 125px;
  right: 75px;
  bottom: 5px;
  z-index: 30;
  background-color: white;
  background-image: url('<\/SPAN>http:\/\/odoe.net\/blog\/wp-content\/uploads\/logo_gray_sm.png');<\/A>
  cursor: pointer;
}<\/PRE>

*Hinweis - Sie könnten das alles auch ändern und stattdessen ein <img>-Tag verwenden, wenn Sie möchten.<\/EM><\/SPAN><\/P><\/P><\/P>Da haben Sie es! Sie haben ein Logo in der Karte und können auf dieses Logo klicken, um zu einer Website Ihrer Wahl zu gelangen.<\/P>Sie können eine

Demo dieses Beispiels<\/A><\/STRONG> ansehen und damit experimentieren, wenn Sie möchten. Es steht Ihnen frei, aufdringlich<\/SPAN> großartig<\/EM> zu sein und auch ein animiertes gif als Ihr Logo hinzuzufügen<\/A><\/STRONG>.<\/P>

<\/P>

Passen Sie also Ihre Apps und Karten an und zeigen Sie Ihre Fähigkeiten!<\/P><\/BODY>