define([
"./Custom",
"../layers/GraphicsLayer",
"../geometry/Point",
"../geometry/Polyline",
"../geometry/Polygon",
"../geometry/Extent",
"../geometry/Circle",
"../Graphic",
"../symbols/SimpleMarkerSymbol",
"../symbols/SimpleLineSymbol",
"../symbols/SimpleFillSymbol",
"dojo/dom"], function (Custom, GraphicsLayer, Point,
Polyline, Polygon, Extent, Circle, Graphic, SimpleMarkerSymbol, SimpleLineSymbol,
SimpleFillSymbol, dom) {
var types = {
POLYGON: 'polygon',
POLYLINE: 'polyline',
POINT: 'point',
CIRCLE: 'circle',
FREE_POLYGON: 'free_polygon',
FREE_POLYLINE: 'free_polyline',
FREE_EXTENT: 'free_extent'
};
var Draw = Custom.createSubclass({
declaredClass: "esri.custom._Draw",
normalizeCtorArgs: function (view, options) {
options || (options = {});
this._mapView = view;
this._clickPoints = []; // 点击绘制时的点集合
this._tempGraphicLayer = new GraphicsLayer(); // 绘制过程中的要素图层
this._drawGraphicLayer = new GraphicsLayer(); // 绘制完成的要素图层
this._mapView.map.add(this._drawGraphicLayer);
this._mapView.map.add(this._tempGraphicLayer);
this._defaultSymbol = dojo.mixin({ // 默认样式
polygon: new SimpleFillSymbol({ // 默认绘制polygon的样式
color: [127, 127, 127, 0.9],
style: "solid",
outline: {
color: [0, 124, 247, 1],
width: 2
}
}),
tempPolygon: new SimpleFillSymbol({ // 绘制过程中的polygon样式
color: [0, 0, 0, 0],
style: "solid",
outline: {
color: [0, 124, 247, 1],
width: 2
}
}),
polyline: new SimpleLineSymbol({
color: [0, 124, 247, 1],
width: 2,
style: "solid"
}),
tempPolyline: new SimpleLineSymbol({
color: [0, 124, 247, 1],
width: 2,
style: "solid"
})
}, options.defaultSymbol);
dojo.query(view.container).addContent('<div id="fn-tooltip-div" style="position:absolute;border: 1px solid #999;padding: 4px;background:#fff0bb;"></div>');
this.tooltipMsg = dojo.mixin({
click: '点击开始绘制',
doubleClick: '双击结束绘制',
drag: '按下鼠标左键开始绘制',
dragStart: '移动鼠标进行绘制',
dragEnd: '松开鼠标左键结束绘制'
}, options.tooltipMsg);
this._tooltipNode = dom.byId('fn-tooltip-div');
},
_clickGeometryTypes: [types.POLYGON, types.POLYLINE, types.POINT, types.POINT], // 点击绘制的几何类型
_dragGeometryTypes: [types.FREE_POLYGON, types.FREE_POLYLINE, types.FREE_EXTENT], // 拖拽绘制的几何类型
properties: {
start: false,
end: null,
pointermove: null,
drag: null,
click: null
},
_setTooltipMsg: function (msg) {
if (msg) {
this._tooltipNode.style.display = "block";
} else {
this._tooltipNode.style.display = "none";
}
this._tooltipNode.innerHTML = msg;
},
registerEvents: function () {
var me = this;
this._handlers = [this._mapView.on('click', function (event) { //
if (dojo.indexOf(me._clickGeometryTypes, me._geometryType) > -1) {
if (!me.get('start')) {
me.set('start', true);
if (me._geometryType !== types.POINT)
me._setTooltipMsg(me.tooltipMsg.doubleClick);
}
//me._drawPoint(event.mapPoint);
me._clickPoints.push(event.mapPoint);
me._tempGraphicLayer.removeAll();
me._drawGraphicLayer.removeAll();
event.stopPropagation();
var graphic;
switch (me._geometryType) {
case types.POLYGON:
graphic = me._drawPolygon(me._clickPoints); break;
case types.POLYLINE:
graphic = me._drawPolyline(me._clickPoints); break;
case types.POINT:
graphic = me._drawPoint(event.mapPoint);
me._endDraw(graphic);
case types.CIRCLE:
graphic = me._drawCircle(me._clickPoints);
if (me._clickPoints.length === 2) {
me._endDraw(graphic);
}
}
if (graphic) {
graphic.mapPoint = event.mapPoint;
me.set('click', graphic);
} else {
me.set('click', { mapPoint: event.mapPoint });
}
}
}), this._mapView.on('pointer-move', this.debounce(function (event) {
var graphic = me._dragOrMoveHandler(event);
if (graphic) {
me.set('pointermove', graphic);
}
}, 0)), this._mapView.on('double-click', function (event) {
if (me.get('start')) {
event.stopPropagation();
me._clickPoints.push(event.mapPoint);
me._tempGraphicLayer.removeAll();
var graphic = me._generateGraphic();
graphic.mapPoint = event.mapPoint;
me._endDraw(graphic);
}
}), this._mapView.on('pointer-down', function (event) {
if (dojo.indexOf(me._dragGeometryTypes, me._geometryType) > -1) {
if (!me.get('start')) {
me.set('start', true);
me._setTooltipMsg(me.tooltipMsg.dragStart);
}
}
}), this._mapView.on('pointer-up', function (event) {
if (dojo.indexOf(me._dragGeometryTypes, me._geometryType) > -1) {
var graphic = me._generateGraphic();
me._endDraw(graphic);
}
}), this._mapView.on('drag', function (event) {
var graphic = me._dragOrMoveHandler(event);
if (graphic) {
me.set('drag', graphic);
}
})];
},
_generateGraphic: function () {
switch (this._geometryType) {
case types.POLYGON:
return this._drawPolygon(this._clickPoints);
case types.POLYLINE:
- 1
- 2
前往页