CoffeeScript<\/A>, así que el código puede no ser el más fácil de leer.<\/P><\/P>
Entonces, ¿cómo podrías lograr algo así? Veamos una solución.<\/P>
require([
"dojo\/_base\/_declare",
"esri\/map",
"dojo\/_Evented",
"dojo\/_dom",
"dojo\/_dom-geometry",
"dojo\/_dom-attr",
"dojo\/_on",
"dojo\/_query",
"esri\/geometry\/ScreenPoint",
"esri\/geometry\/screenUtils",
"esri\/symbols\/PictureMarkerSymbol",
"esri\/graphic"
], function(declare, Map, Evented, dom, domGeom, domAttr, on, query, ScreenPoint, screenUtils, PictureMarkerSymbol, Graphic) {
var cleanup = function(targets) {
targets.map(function(x) {
x.remove();
});
};
var DragDropHandler = declare([Evented], {
dragdrop: function(srcName, targetName) {
var src = dom.byId(srcName);
var target = dom.byId(targetName);
var handlers = [];
var self = this;
handlers.push(on(target, 'dragenter', function(e) {e.preventDefault();}));
handlers.push(on(target, 'dragover', function(e) {e.preventDefault();}));
handlers.push(on(target, 'dragend', function(e) {cleanup(handlers);}));
handlers.push(on(src, 'dragstart', function() {
handlers.push(on(target, 'drop', function(e) {
e.preventDefault();
cleanup(handlers);
var position = domGeom.position(e.currentTarget);
var x = e.clientX - position.x; \/\/- en caso de que el mapa no ocupe toda la página
var y = e.clientY - position.y;// en caso de que el mapa no ocupe toda la página
self.emit('itemdrop', {
 :& nbsp:& nbsp:& nbsp:& nbsp:& nbsp:& nbsp:& nbsp:& nbsp: bubbles: true,
 :& nbsp:& nbsp:& nbsp:& nbsp:& nbsp:& nbsp:& nbsp:& nbsp: cancelable: true,
 :& nbsp:& nbsp:& nbsp:& nbsp:& nbsp:& nbsp:& nbsp:& nbsp: dragsource: src,
 :& nbsp:& nbsp:& nbsp:& nbsp:& nbsp:& nbsp:& nbsp:& nbsp: x:x,
 :& nbsp:& nbsp:& nbsp:& nbsp:& nbsp:& nbsp:& nbsp:& nbsp: y:y
} );
& nb sp ; & nb sp ; & nb sp ; & nb sp ; } ) ) ;
& nb sp ; & nb sp ; } ) ) ;
& nb sp ; }
} ) ;
& nb sp ; var handler = new DragDropHandler();
& nb sp ; var map = new Map("mapView", {
& nb sp ; & nb sp ; center: [-118, 34.5],
& nb sp ; & nb sp ; zoom: 8,
& nb sp ; & nb sp ; basemap: "topo"
} ) ;
& nb sp ; function addPoint(data) {
& nb sp ; & nb sp ; var mp = screenUtils.toMapGeometry(map.extent, map.width, map.height, data.pt);
& nb sp ; & nb sp ; var pms = new PictureMarkerSymbol(data.url, 24, 24);
& nb sp ; & nb sp ; var graphic = new Graphic(mp, pms);
& nb sp ; & nb sp ; map.graphics.add(graphic);
}
& nb sp ; on(query('.drag-icon'), 'mousedown', function(e) {
& nb sp ; & nb sp ; var srcName = domAttr.get(e.currentTarget, 'id');
& nb sp ; & nb sp ; handler.dragdrop(srcName, 'mapView');
} ) ;
& nb sp ; on(handler, 'itemdrop', function(e) {
& nb sp ; & nb sp ; var data = {
& nb sp :& nb sp : pt: new ScreenPoint(e.x, e.y),
& nb sp :& nb sp : url: domAttr.get(e.dragsource, 'src')
};
addPoint(data);
on});});< / PRE >< P >< / P >< P > Eso no es realmente mucho código. El caballo de batalla es realmente el DragDropHandler< / STRONG>. Este DragDropHandler< / STRONG> tiene un método dragdrop< / EM> que escuchará eventos de arrastre en una imagen y detecta cuando la imagen se suelta en el mapa. Cuando esta imagen se suelta en el mapa, solo necesitas emitir un evento con las coordenadas de pantalla y cuál fue el elemento arrastrado. El ArcGIS JS API proporciona algunas utilidades para convertir coordenadas de pantalla en geometrías del mapa y voila< / STRONG>< / EM>, ¡puedes agregar gráficos rápidamente al mapa e incluso copiar la src de la imagen para mostrarla en el mapa!< / P >< P >< / P >< P >< A href="http://jsbin.com/muwaga/1/edit?js,output" rel="nofollow noopener noreferrer" target="_blank">Aquí hay un ejemplo en jsbin< / A >.< / P >< P >< / P >< P > Esta muestra solo agrega gráficos al mapa, pero no hay razón para que no pueda aplicarse a la edición, por lo que podrías arrastrar y soltar características para agregarlas a un FeatureService. ¡Así que inténtalo y agrega algo de pazazz< / EM> a tus aplicaciones!< / P >< P >< / P >< P > Para más consejos y trucos geodev, visita
