Vycpávání vašich věcí

ReneRubalcava

<\/HEAD>

<\/P>

Další skvělou funkcí, která je součástí ArcGIS API for JavaScript 4.0beta1<\/A>, je tento koncept view padding<\/A>. Na první pohled se možná ptáte, co přesně view padding dělá.<\/P>

<\/P>

Zde je ukázka<\/A> z dokumentace, která dobře demonstruje, co view padding skutečně dělá. Při pohledu na tuto ukázku vidíte Liberty Island a DOM prvek s nějakým textem napravo.<\/P>

<\/P>

Co nemusí být zřejmé<\/EM> je, že střed mapy byl nastaven jako umístění Liberty Island, ale nastavením view paddingu view posune střed mapy o tuto hodnotu paddingu<\/STRONG>. Pamatujte,

že to je view, které řídí, jak je mapa vykreslena<\/A>. To vám umožňuje přidat postranní panely, patičky nebo záhlaví k vaší mapě a přitom stále využít co nejvíce prostoru mapy. Můžete si to představit téměř jako rám kolem mapy, kde lze každou stranu podle potřeby změnit velikost.<\/P>

<\/P>

Možná jste ve své aplikaci vytvořili boční panely, které zabírají hodně místa, zakrývají mapu v určitých situacích, kdy to není potřeba, nebo měníte velikost mapy, aby se boční panel vešel. Nyní máte další možnost jednoduše upravit padding view a tím toto vykompenzovat<\/EM>.<\/P><\/P>To také znamená, že můžete upravit interakci mapy a UI prvků při aktualizaci něčeho. Možná chcete změnit velikost bočního panelu, když není používán, takže pravděpodobně budete chtít současně upravit view padding.<\/P><\/P>Můžete to udělat tak, že trochu upravíte výše uvedený příklad.<\/P><\/P>require([
  "esri\/9Map",
  "esri\/9views\/9SceneView",
  "esri\/9widgets\/9Search",
  "dojo\/9on",
  "dojo\/9domReady!"
], function(
  Map,
  SceneView,
  Search,
  on
) {
  \/\/_Vytvoření mapy
  var map = new Map({
    basemap: "topo"
  });

  \/\/_Vytvoření view a nastavení view padding na 320 px
  var view = new SceneView({
    container: "viewDiv",
    map: map,
    center: [-118, 34],
    zoom: 9,
    padding: {
      right: 320
    }
  });
 
  view.then(function() {
    var searchWidget = new Search({
      view: view
    }, "searchDiv");
    searchWidget.startup();
  });
 
  var resize = document.getElementById("resize");
  on(resize, "click", function() {
    if (view.padding.right === 320) {
      view.padding = { right: 18 };
    } else {
      view.padding = { right: 320 };
    }
  });

  \/\/_Použití view.padding k aktualizaci css
  var updatePadding = function(padding) {
    var right = padding.right + "px";
    var paddingRight = document.querySelector("#padding").style;
    paddingRight.width = right;
    paddingRight.visibility = "visible";
  };
 
  updatePadding(view.padding);
 
  \/\/_ sledování aktualizací view padding
  view.watch('padding', function(val) {
    updatePadding(val);
  });
});<\/PRE><\/P>V tomto případě sledujeme kliknutí na tlačítko a upravujeme view padding, což následně změní velikost bočního panelu. To není v EsriJS beta příliš složité dosáhnout.<\/P><\/P>Můžete si prohlédnout

demo této aplikace zde<\/A>.<\/P>

<\/P>

View padding v aktuálním beta vydání je jedním z těch pěkných drobných vylepšení API, které vám jako vývojáři poskytuje velkou flexibilitu. Umožňuje vám být kreativní s uživatelským rozhraním a jak to ovlivňuje interakci uživatelů s mapou. Tak si s tím užijte zábavu<\/EM>.<\/P><\/P>Pro více tipů a triků pro geodev

navštivte můj blog<\/A>.<\/P><\/BODY><\/HTML>