EsriJS mit ReactJS (aktualisiert)

ReneRubalcava

<\/HEAD>

<\/P>

Vor nicht allzu langer Zeit habe ich einen Blogbeitrag<\/A> über die Verwendung der ArcGIS JavaScript API mit ReactJS<\/A> für Widgets geschrieben. In letzter Zeit habe ich mit einigen Leuten über React gesprochen, daher dachte ich, ich könnte das Thema hier noch einmal aufgreifen. Die größte Frage, die man sich stellen könnte, ist warum React verwenden<\/A>? Persönlich finde ich, dass React eine wirklich elegante API hat. Wenn man anfängt, es zu benutzen und entdeckt, wie einfach es ist, die Komponenten zusammenzusetzen, die die Benutzeroberfläche bilden, denke ich, dann zeigt React wirklich seine Stärken<\/EM>. Ein nettes Feature von React ist die Verwendung eines virtuellen DOM<\/A>. Grundsätzlich wird beim Aktualisieren des Zustands Ihrer Anwendung an der Wurzel der gesamte DOM der Anwendung neu gerendert. Das klingt so, als wäre es langsam, aber das ist es wirklich nicht. Es kann sein<\/EM>, wenn man etwas Dummes macht, wie zum Beispiel einen sehr großen<\/STRONG> JSON-Editor zu erstellen **hust**<\/EM>. Mehr darüber, wie die Updates ablaufen, können Sie hier<\/A> lesen.<\/P>

<\/P>

Es ist alles nur DOM<\/H2>Wenn Sie mit Dijits und dem Dijit-Lebenszyklus<\/A> vertraut sind, haben React-Komponenten einen ähnlichen Lebenszyklus<\/A>. In beiden Fällen ist es vorteilhaft, sie kennenzulernen. React verwendet eine optionale Syntax namens JSX<\/A>. Es ist wichtig zu beachten, dass JSX völlig optional<\/EM> ist. Einige Leute regen sich sehr darüber auf, DOM mit JavaScript zu mischen, aber das ist nicht der Fall. JSX wird einfach verwendet, um Ihnen zu helfen, Ihre DOM-Struktur zu definieren. Es muss dennoch in reines JavaScript kompiliert werden, um im Browser ausgeführt zu werden, und es gibt Werkzeuge<\/A> dafür.<\/P>

<\/P>

Widgets für die Massen<\/H2>Der Quellcode der Beispielanwendung ist hier verfügbar<\/A>. Ich werde nicht die gesamte Anwendung im Detail durchgehen, möchte aber die Widgets hervorheben.<\/P>

<\/P>

Zuerst gibt es ein Widget namens Locator, das einfach die Kartenkoordinaten des Cursors anzeigt.<\/P>

\/** @jsx React.DOM *\/
define([\n  'react',\n  'dojo/topic',\n  'helpers/NumFormatter'\n], function(\n  React,\n  topic,\n  format\n) {\n  var fixed = format(3);\n  var LocatorWidget = React.createClass({\n    getInitialState: function() {\n      return {\n        x: 0,\n        y: 0\n      };\n    },\n    componentDidMount: function() {\n      this.handler = this.props.map.on('mouse-move', function(e) {\n        this.update(e.mapPoint);\n      }.bind(this));\n    },\n    componentWillUnMount: function() {\n      this.handler.remove();\n    },\n    update: function(data) {\n      this.setState(data);\n      topic.publish('map-mouse-move', data);\n    },\n    render: function() {\n      return (\n        <div className='well'>\n          <label>x: {fixed(this.state.x)}</label>\n&nbsp:& nbsp:& nbsp:& nbsp:& nbsp:& nbsp:& nbsp:& nbsp:& nbsp:& nbsp:& nbsp:& nbsp:& nbsp:& nbsp:& nbsp:& nbsp:& nbsp:& nbsp:& nbsp:& nbsp:& nbsp:& nbsp:& nbsp:& nbsp:& nbsp:& nbsp:& nbsp:& nbsp:& nbsp:& nbsp:& nbsp:
 \n 								< P > Diese Komponente ist ziemlich einfach. Sie zeigt nur Koordinaten an und verwendet < A href = "http://dojotoolkit.org/reference-guide/1.10/dojo/topic.html " rel = "nofollow noopener noreferrer" target = "_blank" > dojo/topic < /A > , um diese Koordinaten an die Anwendung zu veröffentlichen. < A _jive_internal = "true" href = "https://community.esri.com/people/odoe/blog/2014/12/02/stay-on-topic" target = "_blank" > Ich habe schon einmal über dojo/topic gesprochen < /A > . Die nächste Komponente ist etwas interessanter. Sie hat eine Schaltfläche, die ein < A href = "https://developers.arcgis.com/javascript/jsapi/draw-amd.html" rel = "nofollow noopener noreferrer" target = "_blank" > Zeichentool < /A > aktiviert und ein Label, das die gezeichnete Entfernung anzeigt.< /P >< P >< /P >< PRE class = "lia-code-sample line-numbers language-none" > \/** @jsx React.DOM * \/
define([
 'react',
 'esri/toolbars/draw',
 'esri/geometry/geometryEngine',
 'dojo/topic',
 'dojo/on',
 'helpers/NumFormatter'
], function(
 React,
 Draw, geomEngine,
 topic, on,
 format
) {
 var fixed = format(3);
 var DrawToolWidget = React.createClass({
 getInitialState: function() {
 return {
 startPoint: null,
 btnText: 'Linie zeichnen',

istance: 0,
x: 0,y: 0
};},componentDidMount:function(){this.draw=new Draw(this.props.map);this.handler=this.draw.on('draw-end', this.onDrawEnd);this.subscriber=topic.subscribe('map-mouse-move', this.mapCoordsUpdate);},componentWillUnMount:function(){this.handler.remove();this.subscriber.remove();},onDrawEnd:function(e){this.draw.deactivate();this.setState({startPoint:null,btnText:'Linie zeichnen'});},mapCoordsUpdate:function(data){this.setState(data);// bin mir nicht sicher ob ich diese Bedingungsprüfung mag
if (this.state.startPoint) {this.updateDistance(data);}},updateDistance:function(endPoint){var distance=geomEngine.distance(this.state.startPoint,endPoint);this.setState({distance:distance});},drawLine:unction(){this.setState({btnText:'Zeichne...'});this.draw.activate(Draw.POLYLINE);on.once(this.props.map,'click',function(e){this.setState({startPoint:e.mapPoint});// sehr hacky aber Draw.LINE Interaktion ist seltsam zu benutzen
on.once(this.props.map,'click',function(){this.onDrawEnd();}.bind(this));}.bind(this))},unction(){
return (


{this.state.btnText}

Entfernung: {fixed(this.state.distance)}


);
}
});
return DrawToolWidget;
});Diese Komponente ist etwas komplexer, aber sie verwendet den geometryEngine um die Entfernung zwischen dem Startpunkt und dem Endpunkt in einer geraden Linie zu berechnen. Ich mache einige hässliche hacky-ness, um die Zeicheninteraktion nach einem einzelnen Liniensegment zu stoppen, weil das einzelne Zeichnen mit dem Draw tool ein etwas merkwürdiges Verhalten ist (meiner Meinung nach). Wenn Sie die Gesamtdistanz der Polyliniensegmente während des Zeichnens verfolgen möchten, ist das etwas komplizierter und Sie müssten den Startpunkt mit dem letzten Endpunkt aktualisieren und die Entfernungen währenddessen aufsummieren. Klingt nach einer netten reduce-Funktion. Ich überlasse diese Übung Ihnen. Wenn ich mehr Zeit dafür aufwenden würde, könnte ich einen Teil der hier ablaufenden Logik in Hilfsmethoden auslagern und vielleicht einige Listener bereinigen, aber so wie es jetzt ist, funktioniert es ziemlich gut.<\/P><\/P>Das Letzte, was Sie tun müssen, ist, diese Komponenten tatsächlich auf der Seite zu rendern.<\/P><\/P>\/\*\* @jsx React.DOM *\/\ndefine([\n  'react',\n  'dojo/query',\n  'dojo/dom',\n  'dojo/dom-construct',\n  '.\/components\/Locator',\n  '.\/components\/DrawTools'\n], function(\n  React,\n  query, dom, domConstruct,\n  Locator, DrawTools\n) {\n  var createContainer = function() {\n    var c = query('.widget-container');\n    if (c.length) {\n      return c.shift();\n    }\n    var container = domConstruct.create('div', {\n      className: 'widget-container'\n    }, dom.byId('map_root'), 'first');\n    return container;\n  };\n  var addContainer = function(map) {\n    React.render(\n      <div>\n        <Locator map={map} />\n        <DrawTools map={map} />\n      </div>,\n      createContainer());\n  };\n  return {\n    addContainer: addContainer\n  };\n});<\/PRE>Hier wird React die Komponenten im definierten DOM-Element auf der Seite rendern und ich kann die map als Eigenschaften an meine Widgets übergeben. Ich habe props oder propTypes nicht wirklich besprochen, aber Sie können hier mehr darüber lesen, wie sie funktionieren hier. Außerdem gibt es hier eine schöne Erklärung zu Properties vs State.<\/P><\/P>Los geht's mit Hacken<\/H2>Sie können eine Demo dieser Anwendung in Aktion hier sehen. Falls Sie es verpasst haben: Der Quellcode ist hier.<\/P>Wie Sie sehen können, ist dies nur ein weiteres Beispiel dafür, wie man jede beliebige Bibliothek oder jedes Framework seiner Wahl in seine ArcGIS API for JavaScript-Anwendungen integrieren kann. Es gibt bestimmte Teile von Dojo, die man verwenden muss (und einige sind sehr praktisch, wie dojo/topic), aber darüber hinaus ist es nicht allzu schwer, seine JavaScript-Bibliotheken zu mischen und anzupassen. React ist kein vollständiges Framework, und die FB-Entwickler werden Ihnen das als Erste sagen, aber es macht das V in MVC sehr gut. Also hackt drauf los Leute und vor allem viel Spaß dabei!<\/P><\/P>Für weitere geodev Tipps und Tricks besuchen Sie meinen Blog.<\/P><\/BODY><\/HTML>