Přidejte své vlastní logo do ArcGIS JS Maps

ReneRubalcava

<\/HEAD>

<\/P>

Jedna z nejjednodušších věcí, kterou můžete udělat pro personalizaci vaší ArcGIS JavaScript mapy, je přidat vlastní logo. Esri to dělá, proč byste to nemohli dělat vy?<\/EM><\/P><\/P>Vlastněte to<\/H2>Je pravděpodobné, že vytváříte aplikaci pro klienta, a klient může znamenat i vaše vlastní pracoviště, ale vsadím se, že ten klient má značku a pravděpodobně i logo.<\/P><\/P>Pracujete tvrdě na svých mapách, tak to dejte lidem najevo!<\/EM><\/P><\/P>Není to opravdu těžké udělat, je to jen trochu css a vložení do DOM, ale můžete to vylepšit a udělat z toho také znovupoužitelný widget. Velmi jednoduchý příklad může vypadat nějak takto:<\/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>Co máte, je základní widget, kde můžete použít put-selector<\/A> k přidání DOM uzlu widgetu na stránku. Předpokládám, že chcete logo uvnitř hranic mapy, takže jsem to nastavil tak, aby se vložilo do divu s id "map_root"<\/STRONG>. To odpovídá DOM id, které jste dali DOM elementu poskytnutému pro mapu, takže pokud je id mapy "map"<\/STRONG>, bude obsahovat div s id "map_root"<\/STRONG>. Pokud by moje id mapy bylo "harry"<\/STRONG>, obsahovalo by div s id "harry_root"<\/STRONG>. Jsem si jistý, že chápete myšlenku.<\/P><\/P>Až to uděláte, jednoduše inicializujete widget s URL a názvem třídy, který definujete ve svém css:<\/P>var logo = new LogoWidget({
  url: '<\/SPAN>http:\/\/odoe.net\/blog\/<\/A>',<\/SPAN>
  logoClassName: 'my-logo'
});<\/PRE><\/P>

Stylujte to<\/H2>Pak v css pro widget můžete definovat velikost a umístění stejně jako background-image:<\/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>

*Poznámka - Můžete to celé změnit tak, aby používalo <img> tag, pokud chcete.<\/EM><\/SPAN><\/P><\/P><\/P>Tady to máte! Máte logo v mapě a můžete na něj kliknout a přejít na webovou stránku dle vašeho výběru.<\/P>Můžete si prohlédnout

demo tohoto příkladu<\/A><\/STRONG> a pohrát si s ním, pokud chcete. Nic vám nebrání být obtěžující<\/SPAN> úžasní<\/EM> a přidat také animovaný gif jako vaše logo<\/A><\/STRONG>.<\/P>

<\/P>

Takže přizpůsobte své aplikace a mapy a ukažte své dovednosti!<\/P><\/BODY>