Polsterung Ihrer Sachen

ReneRubalcava

<\/HEAD>

<\/P>

Ein weiteres praktisches Feature, das Teil der ArcGIS API for JavaScript 4.0beta1<\/A> ist, ist dieses Konzept der view padding<\/A>. Auf den ersten Blick fragen Sie sich vielleicht, was view padding genau bewirkt.<\/P>

<\/P>

Hier ist ein Beispiel<\/A> aus der Dokumentation, das gut demonstriert, was view padding tatsächlich macht. Wenn Sie sich dieses Beispiel ansehen, sehen Sie Liberty Island und ein DOM-Element mit etwas Text auf der rechten Seite.<\/P>

<\/P>

Was vielleicht nicht offensichtlich erscheint<\/EM>, ist, dass das Zentrum der Karte als Standort von Liberty Island festgelegt wurde, aber durch das Setzen des view padding wird die View<\/EM> das Zentrum der Karte um diesen Padding-Wert verschieben<\/STRONG>. Denken Sie daran,

dass es die View ist, die steuert, wie die Karte gezeichnet wird<\/A>. Dies ermöglicht es Ihnen, Seitenleisten, Fußzeilen oder Kopfzeilen zu Ihrer Karte hinzuzufügen und dennoch so viel wie möglich von der Karte zu nutzen. Betrachten Sie es fast wie einen Rahmen um die Karte, bei dem jede Seite nach Bedarf in der Größe angepasst werden kann.<\/P>

<\/P>

Vielleicht haben Sie in Ihrer Anwendung Seitenpaneele erstellt, die viel Platz einnehmen, die Karte in bestimmten Situationen verdecken, wenn sie es nicht müssten, oder Sie passen die Kartengröße an, damit die Seitenleiste passt. Jetzt haben Sie eine weitere Möglichkeit, einfach das Padding der View anzupassen, um dies für Sie auszugleichen<\/EM>.<\/P><\/P>Das bedeutet auch, dass Sie anpassen können, wie die Karte und UI-Elemente interagieren, wenn etwas aktualisiert wird. Vielleicht möchten Sie das Seitenpaneel verkleinern, wenn es nicht verwendet wird, also möchten Sie wahrscheinlich gleichzeitig das view padding anpassen.<\/P><\/P>Das könnten Sie tun, indem Sie das obige Beispiel ein wenig anpassen.<\/P><\/P>require([\n  "esri\/Map",
  "esri\/views\/SceneView",
  "esri\/widgets\/Search",
  "dojo\/on",
  "dojo\/domReady!"
], function(\n  Map,\n  SceneView,\n  Search,\n  on\n) {\n  \/\/_Create the map\n  var map = new Map({\n    basemap: "topo"\n  });\n\n  \/\/_Create the view set the view padding to be 320 px\n  var view = new SceneView({\n    container: "viewDiv",\n    map: map,\n    center: [-118, 34],\n    zoom: 9,\n    padding: {\n      right: 320\n    }\n  });\n  \n  view.then(function() {\n    var searchWidget = new Search({\n      view: view\n    }, "searchDiv");\n    searchWidget.startup();\n  });\n  \n  var resize = document.getElementById("resize");\n  on(resize, "click", function() {\n    if (view.padding.right === 320) {\n      view.padding = { right: 18 };\n    } else {\n      view.padding = { right: 320 };\n    }\n  });\n\n  \/\/_Using the view.padding to update the css\n  var updatePadding = function(padding) {\n    var right = padding.right + "px";\n    var paddingRight = document.querySelector("#padding").style;\n    paddingRight.width = right;\n    paddingRight.visibility = "visible";\n  };\n  \n  updatePadding(view.padding);\n  \n  \/\/_ watch for view padding updates\n  view.watch('padding', function(val) {\n    updatePadding(val);\n  });\n});<\/PRE><\/P>In diesem Fall beobachten wir einen Button-Klick und passen das view padding an, was wiederum das Seitenpaneel in der Größe verändert. Das ist in der EsriJS beta nicht allzu schwer umzusetzen.<\/P><\/P>Sie können eine

Demo dieser Anwendung hier ansehen<\/A>.<\/P>

<\/P>

View padding in der aktuellen Beta-Version ist einer dieser netten kleinen Details der API, die Ihnen als Entwickler viel Flexibilität bieten. Es ermöglicht Ihnen kreative Gestaltung Ihrer Benutzeroberfläche und wie diese die Interaktion Ihrer Nutzer mit der Karte beeinflusst. Also haben Sie Spaß damit<\/EM>.<\/P><\/P>Für weitere geodev Tipps und Tricks besuchen Sie

meinen Blog<\/A>.<\/P><\/BODY><\/HTML>