CoffeeScriptu<\/A>, takže kód nemusí být nejjednodušší na čtení.<\/P><\/P>
Jak byste tedy mohli něco takového dosáhnout? Podívejme se na jedno řešení.<\/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; \/\/- pro případ, že mapa nezabírá celou stránku
var y = e.clientY - position.y;// pro případ, že mapa nezabírá celou stránku
 .& nbsp.& nbsp.& nbsp.& nbsp.& nbsp.& nbsp.& nbsp.& nbsp.& nbsp.& nbsp.& nbsp.& nbsp.& nbsp.& nbsp.& nbsp.& nbsp.& nbsp.; self.emit('itemdrop', {
. & nbsp.& nbsp.& nbsp.& nbsp.& nbsp.& nbsp.& nbsp.& nbsp;bubbles: true,
& nbsp;. & nbsp.& nbsp.& nbsp.& nbsp.& nbsp.& nbsp.& nbsp.& nbsp;cancelable: true,
& nbsp;. & nbsp.& nbsp.& nbsp.& nbsp.& nbsp.& nbsp.& nbsp.& nbsp;dragsource: src,
& nbsp;. & nbsp.& nbsp.& nbsp.& nbsp.& nb sp.; x:x,
& nbsp;. & nb sp.; y:y
& nb sp.; });
& nb sp.; }));
& nb sp.; }));
& nb sp.; }
});
var handler = new DragDropHandler();
var map = new Map("mapView", {
cente r: [-118, 34.5],
zoo m: 8,
basemap: "topo"
});
f unction addPoint(data) {
v ar mp = screenUtils.toMapGeometry(map.extent, map.width, map.height, data.pt);
v ar pms = new PictureMarkerSymbol(data.url, 24, 24);
v ar graphic = new Graphic(mp, pms);
m ap.graphics.add(graphic);
}
on(query('.drag-icon'), 'mousedown', function(e) {
v ar srcName = domAttr.get(e.currentTarget, 'id');
handler.dragdrop(srcName, 'mapView');
});
on(handler, 'itemdrop', function(e) {
v ar data = {
p t: new ScreenPoint(e.x, e.y),
u rl: domAttr.get(e.dragsource, 'src')
};
a ddPoint(data);
});
});< /PRE>< P >< / P >< P > To není opravdu moc kódu. Hlavním tahounem je skutečně DragDropHandler< /STRONG>. Tento DragDropHandler< /STRONG> má metodu dragdrop< /EM>, která bude naslouchat událostem přetažení na obrázku a zjistí, kdy je obrázek upuštěný na mapu. Když je tento obrázek upuštěný na mapu, stačí vyvolat událost s obrazovými souřadnicemi a informací o přetahovaném prvku. ArcGIS JS API vám poskytuje nástroje pro převod obrazových souřadnic na mapové geometrie a voila< /STRONG>< /EM>, můžete rychle přidávat grafiku do mapy a dokonce zkopírovat zdroj obrázku pro jeho zobrazení na mapě!< /P >< P >< / P >< P >< A href="http://jsbin.com/muwaga/1/edit?js,output" rel="nofollow noopener noreferrer" target="_blank">Zde je příklad na jsbin< /A >.< /P >< P >< / P >< P > Tento příklad pouze přidává grafiku do mapy, ale není důvod, proč by nemohl být použit pro úpravy tak, abyste mohli přetahovat prvky a přidávat je do FeatureService. Takže to zkuste a přidejte trochu pazazz< /EM> do svých aplikací!< /P >< P >< / P >< P > Pro více tipů a triků z geodev navštivte
