arcgis api for js 4.4 绘图小工具
目前在4.x API中还未有官方的绘图工具，而实际项目中又需要这样的绘图工具，所以自己写了一个。 奉上代码。
使用方法:
1.将引入的API模块传入构造函数 var drawTools = new DrawTools(view, Graphic, Point, Polyline, Polygon, Circle);
2.定义好相应的symbol后 调用draw方法开始绘制
drawTools.draw("polygon",polygonSymbol,function(graphic){
//write your code
})
1 /*由于4.X版本目前没有画图工具 因此自定义此画图工具 2 *1.调用构造函数，并传入相应参数: 3 *Polyline=>Polyline模块;view=>当前的MapView; Graphic=>Graphic模块; 4 *Point=>Point模块; Polygon=>Polygon模块; Circle=>模块; 5 *2.调用该类的的draw方方法，并传入相应参数: 6 *geometryType=>要绘制的几何类型(string): point|polyline|polygon|rectangle|circle 7 *symbol=>对应的geometry的symbol 8 *callback=>绘制完成时执行的回掉函数，回掉函数带有一个参数graphic=>所绘制的graphic 9 * 10 *可能出bug的操作:在绘制过程中拖拽地图 11 * 12 *degined by yumubai ^-^ 13 */ 14 DrawTools = function (view, Graphic, Point, Polyline, Polygon, Circle) { 15 this.isDrawActive = false; 16 this.pointerDownListener = null; 17 this.pointerMoveListener = null; 18 this.pointerUpListener = null; 19 this.doubleClickListener = null; 20 this.dragListener = null; 21 this.curGraphic = null; 22 this.view = view; 23 this.Graphic = Graphic; 24 this.Point = Point; 25 this.Polyline = Polyline; 26 this.Polygon = Polygon; 27 this.Circle = Circle; 28 this.draging = false;//判断用户是否在拖动地图 29 }; 30 31 DrawTools.prototype.draw = function (geometryType,symbol, callback) { 32 this.geometryType = geometryType; 33 this.symbol = symbol; 34 this.setFunc (); 35 if (this.drawEndCallback) this.drawEndCallback = null; 36 this.drawEndCallback = callback; 37 this.activeDraw(); 38 }; 39 40 DrawTools.prototype.setFunc = function () { 41 switch (this.geometryType) { 42 case "point": this.drawFunction = this.drawPoint; 43 break; 44 case "polyline": this.drawFunction = this.drawLine; 45 break; 46 case "polygon": this.drawFunction = this.drawPolygon; 47 break; 48 case "rectangle": this.drawFunction = this.drawRectangle; 49 break; 50 case "circle": this.drawFunction = this.drawCircle; 51 break; 52 }; 53 } 54 55 DrawTools.prototype.activeDraw = function () { 56 this.isDrawActive = true; 57 this.clearGraphic(); 58 this.deactiveDraw(); 59 try { 60 this.drawFunction(); 61 } catch (err) { 62 63 } 64 }; 65 66 DrawTools.prototype.deactiveDraw = function () { 67 this.isDrawActive = false; 68 if (this.pointerDownListener) this.pointerDownListener.remove(); this.pointerDownListener = null; 69 if (this.pointerMoveListener) this.pointerMoveListener.remove(); this.pointerMoveListener = null; 70 if (this.pointerUpListener) this.pointerUpListener.remove(); this.pointerUpListener = null; 71 if (this.doubleClickListener) this.doubleClickListener.remove(); this.doubleClickListener = null; 72 if (this.dragListener) this.dragListener.remove(); this.dragListener = null; 73 this.clearGraphic(); 74 }; 75 76 DrawTools.prototype.clearGraphic = function () { 77 if (this.curGraphic) this.view.graphics.remove(this.curGraphic); 78 if (this.moveLine) this.view.graphics.remove(this.moveLine); 79 this.curGraphic = null; 80 this.moveLine = null; 81 }; 82 83 DrawTools.prototype.createGraphic = function (graphic) { 84 this.view.graphics.add(graphic); 85 this.curGraphic = graphic; 86 }; 87 88 DrawTools.prototype.createPoint = function (event) { 89 return this.view.toMap(event); 90 }; 91 92 DrawTools.prototype.endDraw = function (event) { 93 event.stopPropagation(); 94 var graphic = this.curGraphic.clone(); 95 this.deactiveDraw(); 96 this.drawEndCallback(graphic); 97 }; 98 99 DrawTools.prototype.drawPoint = function () { 100 var self = this; 101 self.pointerUpListener = self.view.on("pointer-up", function (event) { 102 if (self.draging) { 103 self.draging = !self.draging; 104 return; 105 }; 106 self.clearGraphic(); 107 event.stopPropagation(); 108 var graphic = new self.Graphic(self.createPoint(event), self.symbol); 109 self.createGraphic(graphic); 110 self.endDraw(event); 111 }); 112 self.dragListener = self.view.on("drag", function (event) { 113 if (event.action == "start") self.draging = true; 114 }); 115 }; 116 117 DrawTools.prototype.drawLine = function () { 118 var self = this; 119 self.pointerDownListener = self.view.on("pointer-down", function (event) { 120 event.stopPropagation(); 121 var line = self.curGraphic; 122 var point = self.createPoint(event); 123 if (!line) { 124 var polyline = new self.Polyline({ 125 spatialReference: self.view.spatialReference, 126 paths: [[point.x, point.y]] 127 }); 128 var graphic = new self.Graphic(polyline, self.symbol); 129 self.createGraphic(graphic); 130 } else { 131 var line = self.curGraphic.clone(); 132 self.clearGraphic(); 133 var pathLength = line.geometry.paths[0].length; 134 line.geometry.insertPoint(0, pathLength, point); 135 self.createGraphic(line); 136 }; 137 }); 138 139 self.pointerMoveListener = self.view.on("pointer-move", function (event) { 140 if (!self.curGraphic) return; 141 event.stopPropagation(); 142 var point = self.createPoint(event); 143 var line = self.curGraphic.clone(); 144 var lastPoint = line.geometry.paths[0][line.geometry.paths[0].length - 1]; 145 if (!lastPoint) return; 146 if (self.moveLine) { 147 self.view.graphics.remove(self.moveLine); 148 self.moveLine = null; 149 }; 150 self.moveLine = new self.Graphic(new self.Polyline({ 151 paths: [[lastPoint[0], lastPoint[1]], [point.x, point.y]], 152 spatialReference: self.view.spatialReference 153 }), self.symbol); 154 self.view.graphics.add(self.moveLine); 155 156 }); 157 158 self.doubleClickListener = self.view.on("double-click", function (event) { 159 self.endDraw(event); 160 }); 161 162 self.dragListener = self.view.on("drag", function (event) { 163 if (event.action == "start") self.draging = !self.draging; 164 if (event.action == "end") { 165 self.draging = !self.draging; 166 if (!self.curGraphic) return; 167 var line = self.curGraphic.clone(); 168 self.clearGraphic(); 169 var pathLength = line.geometry.paths[0].length; 170 if (!pathLength) return; 171 line.geometry.removePoint(0, pathLength - 1); 172 self.createGraphic(line); 173 }; 174 }); 175 }; 176 177 178 DrawTools.prototype.drawPolygon = function () { 179 var self = this; 180 self.pointerDownListener = self.view.on("pointer-down", function (event) { 181 event.stopPropagation(); 182 var polygon = self.curGraphic; 183 var point = self.createPoint(event); 184 if (!polygon) { 185 var polygon = new self.Polygon({ 186 spatialReference: self.view.spatialReference, 187 rings: [[point.x, point.y], [point.x, point.y]] 188 }); 189 var graphic = new self.Graphic(polygon, self.symbol); 190 self.createGraphic(graphic); 191 } else { 192 var polygon = self.curGraphic.clone(); 193 self.clearGraphic(); 194 var ringLength = polygon.geometry.rings[0].length; 195 polygon.geometry.insertPoint(0, ringLength - 1, point); 196 self.createGraphic(polygon); 197 } 198 }); 199 200 self.pointerMoveListener = self.view.on("pointer-move", function (event) { 201 if (!self.curGraphic) return; 202 event.stopPropagation(); 203 var polygon = self.curGraphic.clone(); 204 self.clearGraphic(); 205 var ringLength = polygon.geometry.rings[0].length; 206 var point = self.createPoint(event); 207 polygon.geometry.setPoint(0, ringLength - 1, point); 208 self.createGraphic(polygon); 209 }); 210 211 self.doubleClickListener = self.view.on("double-click", function (event) { 212 self.endDraw(event); 213 }); 214 215 self.dragListener = self.view.on("drag", function (event) { 216 if (event.action == "start") self.draging = !self.draging; 217 if (event.action == "end") { 218 self.draging = !self.draging; 219 if (!self.curGraphic) return; 220 var polygon = self.curGraphic.clone(); 221 self.clearGraphic(); 222 var ringLength = polygon.geometry.rings[0].length; 223 if (!ringLength) return; 224 polygon.geometry.removePoint(0, ringLength - 2); 225 self.createGraphic(polygon); 226 }; 227 }); 228 }; 229 230 DrawTools.prototype.drawRectangle = function () { 231 var self = this; 232 self.dragListener = self.view.on("drag", function (event) { 233 event.stopPropagation(); 234 var point = self.createPoint(event); 235 var rectangle = self.curGraphic; 236 if (event.action == "start") { 237 if (!rectangle) { 238 var rectangle = new self.Polygon({ 239 spatialReference: self.view.spatialReference, 240 rings: [[point.x, point.y], [point.x, point.y], [point.x, point.y], [point.x, point.y]] 241 }); 242 var graphic = new self.Graphic(rectangle, self.symbol); 243 self.createGraphic(graphic); 244 } 245 }; 246 if (event.action == "update") { 247 if (!rectangle) return; 248 var rectangle = self.curGraphic.clone(); 249 self.clearGraphic(); 250 var point = self.createPoint(event); 251 var originPoint = rectangle.geometry.rings[0][0]; 252 var pointScreen = self.view.toScreen(new self.Point({ x: point.x, y: point.y, spatialReference: self.view.spatialReference })); 253 var originPointScreen = self.view.toScreen(new self.Point({ x: originPoint[0], y: originPoint[1], spatialReference: self.view.spatialReference })); 254 var screenRings = [[originPointScreen.x, originPointScreen.y], [pointScreen.x, originPointScreen.y], [pointScreen.x, pointScreen.y], [originPointScreen.x, pointScreen.y]]; 255 var mapRings = screenRings.map(function (point, index) { 256 var mapPoint = self.view.toMap({ x: point[0], y: point[1] }); 257 return [mapPoint.x, mapPoint.y]; 258 }); 259 260 var newRectangle = new self.Polygon({ 261 spatialReference: self.view.spatialReference, 262 rings: mapRings 263 }); 264 var graphic = new self.Graphic(newRectangle, self.symbol); 265 self.createGraphic(graphic); 266 }; 267 if (event.action == "end") { 268 self.endDraw(event); 269 }; 270 }); 271 }; 272 273 DrawTools.prototype.drawCircle = function () { 274 var self = this; 275 self.dragListener = self.view.on("drag", function (event) { 276 event.stopPropagation(); 277 var circle = self.curGraphic; 278 var point = self.createPoint(event); 279 if (event.action == "start") { 280 if (!circle) { 281 var circle = new self.Circle({ 282 center: point, 283 radius: 0, 284 spatialReference: self.view.spatialReference 285 }); 286 var graphic = new self.Graphic(circle, self.symbol); 287 self.createGraphic(graphic); 288 } 289 }; 290 if (event.action == "update") { 291 if (!circle) return; 292 self.clearGraphic(); 293 var center = circle.geometry.center; 294 var radius = Math.pow((Math.pow((point.x - center.x), 2) + Math.pow((point.y - center.y), 2)), 0.5); 295 var newCircle = new self.Circle({ 296 center: center, 297 radius: radius, 298 spatialReference: self.view.spatialReference 299 }); 300 var graphic = new self.Graphic(newCircle, self.symbol); 301 self.createGraphic(graphic); 302 }; 303 if (event.action == "end") { 304 self.endDraw(event); 305 }; 306 }); 307 };
