Wees een drag

ReneRubalcava

<\/HEAD>

<\/P>

<\/P>

Ontwikkel je webapps die bewerken vereisen? Misschien heb je een functie waarmee gebruikers graphics aan de kaart kunnen toevoegen? Gebruik je de TemplatePicker <\/A>om je bewerkingen uit te voeren? <\/P>

<\/P>

Waarom probeer je het niet wat spannender te maken<\/EM>. We leven in een wereld waar we voor alles op onze apparaten swipen en slepen. Je veegt misschien zelfs voor je volgende date<\/EM>. Maar het idee is dat gebruikers steeds verfijnder worden in hun interacties met applicaties. Ze willen iets intuïtievers.<\/P><\/P>Een tijd geleden schreef ik een

artikel over dit onderwerp<\/A>, maar ik heb niet echt gecontroleerd of de code zou werken in de huidige versie van de ArcGIS JavaScript API. Ik was destijds helemaal verdiept in CoffeeScript<\/A>, dus de code is misschien niet het gemakkelijkst te lezen.<\/P>

<\/P>

Hoe zou je zoiets kunnen bereiken? Laten we een oplossing bekijken.<\/P>

require([\n  "dojo\/_base\/_declare",\n  "esri\/map",\n  "dojo\/_Evented",\n  "dojo\/_dom",\n  "dojo\/_dom-geometry",\n  "dojo\/_dom-attr",\n  "dojo\/_on",\n  "dojo\/_query",\n  "esri\/geometry\/ScreenPoint",\n  "esri\/geometry\/screenUtils",\n  "esri\/symbols\/PictureMarkerSymbol",\n  "esri\/graphic"\n], function(declare, Map, Evented, dom, domGeom, domAttr, on, query, ScreenPoint, screenUtils, PictureMarkerSymbol, Graphic) { \n  var cleanup = function(targets) {\n    targets.map(function(x) {\n      x.remove();\n    });\n  };\n  var DragDropHandler = declare([Evented], {\n    dragdrop: function(srcName, targetName) {\n      var src = dom.byId(srcName);\n      var target = dom.byId(targetName);\n      var handlers = [];\n      var self = this;\n      handlers.push(on(target, 'dragenter', function(e) {e.preventDefault();}));\n      handlers.push(on(target, 'dragover', function(e) {e.preventDefault();}));\n      handlers.push(on(target, 'dragend', function(e) {cleanup(handlers);}));\n      handlers.push(on(src, 'dragstart', function() {\n        handlers.push(on(target, 'drop', function(e) {\n          e.preventDefault();\n          cleanup(handlers);\n          var position = domGeom.position(e.currentTarget);\n          var x = e.clientX - position.x; \/\/ voor het geval de kaart niet de hele pagina beslaat\n          var y = e.clientY - position.y;// voor het geval de kaart niet de hele pagina beslaat\n     &nbsp.& nbsp.& nbsp.& nbsp.& nbsp.& nbsp.& nbsp.& nbsp.& nbsp.& nbsp.& nbsp.& nbsp.& nbsp.; self.emit('itemdrop', { \n & nbsp.& nbsp.& nbsp.& nbsp.& nbsp.& nbsp.& nbsp.& nbsp;bubbles: true, \n & nbsp.& nbsp.& nbsp.& nbsp.& nbsp.& nbsp.& nbsp.& nbsp;cancelable: true, \n & nbsp.& nbsp.& nbsp.& nbsp.& nbsp.& nbsp.& nbsp.& nbsp;dragsource: src, \n & nbsp.& nbsp.& nbsp.& nbsp.& nbsp.& nbsp.& nbsp.& nbsp;x:x, \n & nbsp.& nbsp.& nbsp.& nbsp.& nbsp.& nbsp.& nbsp.& nbsp;y:y \n & nbsp.; }); \n & nb sp .& nb sp .& nb sp .& nb sp .& nb sp .& nb sp .& nb sp .& nb sp .& nb sp .& nb sp .& nb sp .& nb sp ; }); \n & nb sp .& nb sp ; }); \n & nb sp ; } \n }); \n & nb sp ; var handler = new DragDropHandler(); \n & nb sp ; var map = new Map("mapView", { \n & nb sp .& nb sp ; center: [-118, 34.5], \n & nb sp .& nb sp ; zoom: 8, \n & nb sp .& nb sp ; basemap: "topo" \n }); \n & nb sp ; function addPoint(data) { \n & nb sp .& nb sp ; var mp = screenUtils.toMapGeometry(map.extent, map.width, map.height, data.pt); \n & nb sp .& nb sp ; var pms = new PictureMarkerSymbol(data.url, 24, 24); \n & nb sp .& nb sp ; var graphic = new Graphic(mp, pms); \n & nb sp .& nb sp ; map.graphics.add(graphic); \n } \ n & n b s p ; on(query('.drag-icon'), 'mousedown', function(e) { \ n & n b s p ; v a r s r c N a m e = d o m A t t r g e t ( e c u r r e n t T a r g e t , ' i d ' ) ; \ n & n b s p ; h a n d l e r d r a g d r o p ( s r c N a m e , ' m a p V i e w ' ) ; \ n } ) ; \ n & n b s p ; o n ( h a n d l e r , ' i t e m d r o p ' , f u n c t i o n ( e ) { \ n & n b s p ; v a r d a t a = { \ n & n b s p .& n b s p ; p t : n e w S c r e e n P o i n t ( e . x , e . y ) , \ n & n b s p .& n b s p ; u r l : d o m A t t r g e t ( e . d r a g s o u r c e , ' s r c ' ) \ n & n b s p ; } ; \ n & n b s p ; a d d P o i n t ( d a t a ) ; \ n } ) ; \ n } ) ;<\/PRE><\/P>Dat is eigenlijk niet veel code. De krachtpatser is echt de DragDropHandler<\/STRONG>. Deze DragDropHandler<\/STRONG> heeft een dragdrop<\/EM>-methode die luistert naar sleepgebeurtenissen op een afbeelding en ziet wanneer de afbeelding op de kaart wordt losgelaten. Wanneer deze afbeelding op de kaart wordt losgelaten, hoef je alleen maar een gebeurtenis uit te zenden met schermcoördinaten en wat het gesleepte item was. De ArcGIS JS API biedt enkele hulpmiddelen om schermcoördinaten om te zetten in kaartgeometrieën en voila<\/STRONG><\/EM>, je kunt snel graphics aan de kaart toevoegen en zelfs de afbeeldingsbron kopiëren om deze op de kaart weer te geven!<\/P><\/P>

Hier is een voorbeeld op jsbin<\/A>.<\/P>

<\/P>

Deze sample voegt alleen graphics toe aan de kaart, maar er is geen reden waarom het niet toegepast zou kunnen worden op bewerken, zodat je features kunt slepen en neerzetten om ze toe te voegen aan een FeatureService. Dus probeer het eens en voeg wat pazazz<\/EM> toe aan je apps!<\/P><\/P>Voor meer geodev tips en trucs kun je mijn

blog<\/A> bekijken.<\/P><\/BODY><\/HTML>