CoffeeScript<\/A>に夢中だったので、コードは読みやすいとは言えないかもしれません。<\/P><\/P>
では、どうやってこれを実現できるでしょうか？一つの解決策を見てみましょう。<\/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; \/\/- ページ全体を地図が占めていない場合
var y = e.clientY - position.y;// ページ全体を地図が占めていない場合
self.emit('itemdrop', {
bubbles: true,
cancelable: true,
dragsource: src,
x:x,
y:y
});
}));
}));
}
});
var handler = new DragDropHandler();
var map = new Map("mapView", {
center: [-118, 34.5],
zoom: 8,
basemap: "topo"
});
function addPoint(data) {
var mp = screenUtils.toMapGeometry(map.extent, map.width, map.height, data.pt);
var pms = new PictureMarkerSymbol(data.url, 24, 24);
var graphic = new Graphic(mp, pms);
map.graphics.add(graphic);
}
on(query('.drag-icon'), 'mousedown', function(e) {
var srcName = domAttr.get(e.currentTarget, 'id');
handler.dragdrop(srcName, 'mapView');
});
on(handler, 'itemdrop', function(e) {
var data = {
pt: new ScreenPoint(e.x, e.y),
url: domAttr.get(e.dragsource, 'src')
};
addPoint(data);
});
});<\/PRE><\/P>これはそれほど多くのコードではありません。本当の主役はDragDropHandler<\/strong>です。このDragDropHandler<\/strong>には、画像のドラッグイベントを監視し、その画像が地図上にドロップされたときに反応するdragdrop<\/em>メソッドがあります。この画像が地図上にドロップされると、画面座標とドラッグされたアイテムの情報を含むイベントを発行するだけです。ArcGIS JS APIは画面座標を地図ジオメトリに変換するためのユーティリティを提供しており、voila<\/strong><\/em>、すぐに地図にグラフィックを追加したり、画像のsrcをコピーして地図上に表示したりできます！<\/P><\/P>
