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 };
时间: 2024-10-06 03:49:21

arcgis api for js 4.4 绘图小工具的相关文章

ArcGIS API for JS的一般编码习惯

1.引用claro.css和esri.css <link rel="stylesheet" href="http://js.arcgis.com/3.10/js/dojo/dijit/themes/claro/claro.css"> <link rel="stylesheet" href="http://js.arcgis.com/3.10/js/esri/css/esri.css"> 2.页面布局 &

ArcGIS Api for Js基础

1.创建ArcGISDynamicMapServiceLayer var demographicsLayerURL = "http://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer"; var demographicsLayerOptions = { "id": "demographicsLayer", "opacity": 0.8,

arcgis api for js实现点击文字内容获取所对应的点高亮显示。

arcgis api for js 中经常会遇到想要点击文本就能获取所对应的点并高亮显示.其原理与搜索框内搜索属性值并高亮显示在地图中的原理是一样的.其核心的观念就是将所点击的文本值获取并替换给搜索框所要传入的值.即可得到我们的目的. 代码如下: var name;//声明name为全局变量后面代替搜索框要传入的值 $(function(){ $('.test2 a').click(function(){ $(this).parent().each(function () {//移除其余非点中状

arcgis api for js入门开发系列二不同地图服务展示(含源代码)

上一篇介绍了arcgis api离线部署,这篇开始正式介绍arcgis api for js开发:想要学习webgis开发,首先得熟悉了解前端技术,比如界面布局设计的html+css,核心的是javascript(js),arcgis api就是js写的,就是说想要开发gis功能前提下,你得熟悉了解js,不然你连源代码都看不懂.在这里,推荐esri官网的arcgis api for js:https://developers.arcgis.com/javascript/3/jsapi/:里面详细

arcgis api for js共享干货系列之二自定义Navigation控件样式风格

arcgis api for js默认的Navigation控件样式风格如下图: 这样的风格不能说不好,各有各的爱好,审美观,这里也不是重点,这里的重点是如何自定义一套自己喜欢的样式风格呢:自己自定义一个NavigationControl控件类,最终实现的效果如下图: 思路如下:其实就是在网上参照天地图或者谷歌地图的Navigation风格样式,下载它们的图片模版,然后自己创建div来实现图片的缩放平移.全图.左右上下平移等等地图导航功能: Navigation图片目录如下: 调用函数: //显

arcgis api for js之echarts开源js库实现地图统计图分析

前面写过一篇关于arcgis api for js实现地图统计图的,具体见:http://www.cnblogs.com/giserhome/p/6727593.html 那是基于dojo组件来实现图表统计的,实现的效果一般般:所以,本篇利用arcgis api for js结合echarts实现统计图效果,效果比之前好看,效果图如下: 实现的思路如下: 1.自定义气泡窗口ChartInfoWindow,继承InfoWindowBase,为了echarts统计图表展示在自定义的气泡窗口里面:自定

Arcgis API for JS——打印控件乱码

在通过Arcgis API for JS编写打印控件进行地图下载时,总发现地图字体乱码,如下图: 解决方法: 在装有ArcGIS Server,要调用服务的电脑或服务器上找到下图文件夹 原文地址:https://www.cnblogs.com/tangguobo/p/10045911.html

绘图小工具-工厂模式设计

工厂模式:不提供一个统一的工厂类来创建所有的对象,而是针对不同的对象提供不同的工厂,每个对象都有一个与之对应的工厂 . 绘图小工具类图: 使用工厂模式降低了类之间的耦合,可以方便地增删绘图的功能. 功能包括:画方.画圆.画折线.画曲线.绘制中和绘制后有颜色差异. 主框架: import JavaDraw.factory.*; import java.awt.*; import java.awt.event.ActionEvent; import java.awt.event.ActionList

vue-cli&amp;webpack&amp;arcgis API For JS的天坑之路(一)

写在前面的话(背景交代) 最近参加esri比赛,但是又想趁机接触前端最新的一些框架和技术,所以,毅然决然的踏上了这个天坑之路.我现在只是成功的把地图渲染出来了,所以,我也不知道会不会有天坑二的出现. gituhb项目地址 新建vue-cli工程 如何用vue-cli + webpack构建一个工程,网上一大堆的代码,我就不赘述了.比如这个就是很好地入门文章,先要做的还是要把vue-cli和webpack的模块划分好,框架搭建好,然后才是我要说的,地图部分. 如何在vue-cli,webpack中