Berührungsempfindlich werden

ReneRubalcava

<\/HEAD>

<\/P>

Haben Sie schon einmal mit Ihrer schönen und glänzenden mobilen Webkarte gearbeitet und versucht, eine Art Zeichnung zu machen oder ein Element auf dem Bildschirm auszuwählen, nur um festzustellen, dass Sie nicht sagen können, wo Ihre dicken<\/SPAN> Finger die Karte berührt haben? Wäre es nicht cool, wenn Sie irgendwie eine Rückmeldung darüber bekommen könnten, wie Sie mit der Karte interagieren? Ich verrate Ihnen ein schmutziges Geheimnis, es ist ziemlich einfach zu machen<\/EM>.<\/P><\/P>Berührungsempfindlich fühlen<\/H2>Vor einiger Zeit hatte ich einen Benutzerkommentar, dass sie Probleme hatten zu wissen, ob sie auf der Karte dort klickten, wo sie dachten. Touchscreens auf mobilen Geräten können manchmal wählerisch sein und ich habe gesehen, dass einige langsamere Geräte bis zu einem Zoll daneben lagen, wo man dachte, man berühre den Bildschirm.<\/P><\/P>Um damit umzugehen, habe ich ein TouchWidget<\/A> erstellt. Was dieses Widget macht, ist einfach Klickereignisse auf der Karte zu hören und einen kleinen Kreis hinzuzufügen, der dann nach etwa einer halben Sekunde wieder gelöscht wird. Die Idee ist nicht allzu schwierig, aber es kann etwas irritierend sein, einfach nur einen Marker anzuzeigen und zu verbergen. Daher können Sie einige der graphics modules in Dojo<\/A> verwenden, um den Übergang etwas schöner zu gestalten. Hier ist ein nettes kleines Tutorial<\/A> zum Arbeiten mit Dojo-Animationen.<\/P>

Hier ist der Quellcode für das TouchWidget<\/P>

define([
  'esri\/layers\/GraphicsLayer',
  'esri\/graphic',
  'esri\/symbols\/SimpleMarkerSymbol',
  'dojo\/on', 'dojo\/fx', 'dojo\/_base\/fx', 'dojo\/fx\/easing',
  'dojo\/aspect', 'dojo\/_base\/Color',
  'dojo\/_base\/declare', 'dojo\/_base\/lang',
  'dijit\/_WidgetBase', 'dijit\/a11yclick'
], function(
  GraphicsLayer, Graphic, SimpleMarkerSymbol,
  on, fx, coreFx, easing, aspect, Color,
  declare, lang, _WidgetBase, a11yclick
  ) {
  'use strict';
  var hitch = lang.hitch;
  return declare([_WidgetBase], {
    postCreate: function() {
      this.set('delay', this.settings.delay || 500);
      this._symInner = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE, this.settings.innerSize, null, new Color(this.settings.innerColor));
      this._symOuter = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE, this.settings.outerSize, null, new Color(this.settings.outerColor));
      this.touchLayer = new GraphicsLayer();
    },
    startup: function() {
      if (!this.map) {
        this.destroy();
        throw new Error('Must provide a map object to use TouchWidget');
      }
      if (this.map.loaded) {
        this._init();
      } else {
        on.once(this.map, 'load', hitch(this, '_init'));
    },
    \/\/- widget methods
    _fxArgs: function(graphic) {
      return {
        node: graphic.getNode(),
        duration: this.delay,
        easing: easing.expoOut
      };
 &nbsp.& nbsp ;},
 & nbsp ;& nbsp ;_fxToCombine: function(graphicOuter , graphicInner) {
 & nbsp ;& nbsp ;& nbsp ;& nbsp ;return [
 & nbsp ;& nbsp ;& nbsp ;& nbsp ;& nbsp ;& nbsp ;coreFx.fadeOut(this._fxArgs(graphicOuter)),
 & nbsp ;& nbsp ;& nbsp ;& nbsp ;& nbsp ;& nbsp ;coreFx.fadeOut(this._fxArgs(graphicInner))
 & nbsp ;& nbsp ;& nbsp ;& nbsp ;];
 & nbsp ;& nbsp ;},
 & nbsp ;& nbsp ;_onAspectAfterEnd: function(graphicOuter , graphicInner) {
 & nbsp ;& nbsp ;& nbsp ;& nbsp ;return lang.hitch(this , function() {
 & nbsp ;& nbsp ;& nbsp ;& nbsp ;& nbsp ;& nbsp ;this.touchLayer.remove(graphicOuter);
 & nbsp ;& nbsp ;& nbsp ;& nbsp ;& nbsp ;& nbsp ;this.touchLayer.remove(graphicInner);
 & nbsp ;& nbsp ;& nbsp ;& nbsp ;});
 & nbsp ;& nbsp ;},
 & nbsp ;& nbsp ;_onTimeOut: function(graphicOuter , graphicInner) {
 & nbsp ;& nbsp ;& nbsp ;& nbsp ;return hitch(this , function() {
 & nbsp ;& nbsp ;& nb sp;; & nb sp;; var combined = this._fxToCombine(graphicOuter , graphicInner);
 & nb sp;; & nb sp;; & nb sp;; var f = fx.combine(combined);
 & nb sp;; & nb sp;; & nb sp;; this.own(aspect.after(f , 'onEnd' , hitch(this , this._onAspectAfterEnd(graphicOuter , graphicInner))));
 & nb sp;; & nb sp;; & nb sp;; f.play();
 & nb sp;; & nb sp;; });
 & nb sp;;},
 & nb sp;;_onTouchClick: function(e) {
 & nb sp;; & nb sp;; var graphicOuter = new Graphic(e.mapPoint , this._symOuter);
 & nb sp;; & nb sp;; var graphicInner = new Graphic(e.mapPoint , this._symInner);
 & nb sp;; & nb sp;; this.touchLayer.add(graphicOuter);
 & nb sp;; & nb sp;; this.touchLayer.add(graphicInner);
 & nb sp;; & nb sp;; setTimeout(hitch(this , this._onTimeOut(graphicOuter , graphicInner)) , this.delay);
 & nb sp;;},
 & nb sp;; \/\/- private methods
 & nb sp;;_init: function() {
 & nb sp;; & nb sp;; this.map.addLayer(this.touchLayer);
 & nb sp;; & nb sp;; this.set('loaded' , true);
 & nb sp;; & nb sp;; this.emit('load' , {});
 & nb sp;; & nb sp;; \/\/- set up touch handlers
 & nb sp;; & nb sp;; this.own(on(this.get('map') , a11yclick.click , hitch(this , '_onTouchClick')));
 & nb sp;;}
 });
});<\/PRE><\/P>Was dieses Widget macht, ist das Einrichten eines inneren und äußeren Grafiksymbols. Die Größe dieser Symbole kann über die an das Widget übergebenen Parameter definiert werden. Es fügt auch seine eigene Ebene hinzu, um diese Features anzuzeigen, sodass Sie sich keine Sorgen machen müssen über Konflikte mit dem Standard-GraphicsLayer der Karte.<\/P><\/P>

Knoten animieren<\/H2>Die dojo/fx-Bibliothek weiß nicht, was ein Graphic aus der Esri-Bibliothek ist, daher müssen Sie den tatsächlichen DOM-Knoten des Graphic erhalten, um damit zu interagieren. Dies können Sie über die graphic.getNode()<\/STRONG>-Methode tun. Nun können Sie eine Verzögerung mit setTimeout<\/STRONG> einrichten, um den Berührungsmarker sanft von der Karte zu entfernen. Sie müssen nur die Grafiken in dieser Methodenfolge weitergeben, damit sie ordnungsgemäß entsorgt werden.<\/P><\/P>Sie können sehen, wie dieses TouchWidget funktioniert in dieser Demo<\/A>.<\/P>

<\/P>

Also zögern Sie nicht Ihre Karten zu berühren und interaktiver zu machen. Schauen Sie sich

meinen Blog<\/A> für weitere Tipps und Tricks an!<\/P><\/BODY><\/HTML>