arcgis api for js入门开发系列五地图态势标绘(含源代码)

sinna

上一篇实现了demo的地图查询功能，本篇新增地图态势标绘模块，截图如下：

本篇核心的在于调用API的Draw工具：https://developers.arcgis.com/javascript/3/jsapi/draw-amd.html

1. require(["esri/toolbars/draw"], function(Draw) { /* code goes here */ });

复制代码

构造函数：

1. new Draw(map, options?)

复制代码

一般来说，传参map对象进来就行，其他参数可选的，用默认的就行，除非你想专门设置；

默认的可绘制图形类型常量Constants：

1. ARROW    Draws an arrow.箭头
   
2. CIRCLE    Draws a circle.圆形
   
3. DOWN_ARROW    Draws an arrow that points down.下箭头
   
4. ELLIPSE    Draws an ellipse.椭圆
   
5. EXTENT    Draws an extent box.矩形
   
6. FREEHAND_POLYGON    Draws a freehand polygon.手绘多边形
   
7. FREEHAND_POLYLINE    Draws a freehand polyline.手绘线
   
8. LEFT_ARROW    Draws an arrow that points left.左箭头
   
9. LINE    Draws a line.线
   
10. MULTI_POINT    Draws a Multipoint.多点
    
11. POINT    Draws a point.点
    
12. POLYGON    Draws a polygon.多边形
    
13. POLYLINE    Draws a polyline.折线
    
14. RECTANGLE    Draws a rectangle.矩形
    
15. RIGHT_ARROW    Draws an arrow that points right.右键头
    
16. TRIANGLE    Draws a triangle.三角形
    
17. UP_ARROW    Draws an arrow that points up.上箭头

复制代码

可以设置绘制的符号样式：

其中，activate函数可以激活触发绘制的行为，绘制结束之后在绘制结束事件里面获取geometry：

1. activate(geometryType, options?)

复制代码

地图态势标绘实现的思路：利用API的Draw工具实现普通的点线面绘制，但是对于燕尾箭头、集结地、弧线、曲线、简单箭头等特殊的军事态势需要自定义来绘制了，所以需要拓展Draw工具才能实现，也是本篇的精华所在。

一、下面谈谈怎么在项目引用拓展Draw类js文件：

1是继承拓展Draw的文件目录；2是实现态势标绘模块的js文件。

首先，需要在map.html页面引用进来：

1. <script type="text/javascript">
   
2.         //配置arcgis拓展解析天地图服务类引用的路径
   
3.         dojoConfig = {
   
4.             parseOnLoad: true,
   
5.             packages: [{
   
6.                 name: 'tdlib',
   
7.                 location: this.location.pathname.replace(/\/[^/]+$/, "") + "/js/tdlib"
   
8.             }],
   
9.             paths: {
   
10.                 Extension: location.pathname.replace(/\/[^/]+$/, "") + "/js/main/drawExtension/Extension",
    
11.                 ExtensionDraw: location.pathname.replace(/\/[^/]+$/, "") + "/js/main/drawExtension/plotDraw"
    
12.             }
    
13.         };
    
14.     </script>

复制代码

其中，paths代表需要引用的路径。

1. <script type="text/javascript" src="js/main/map.plot.js"></script>

复制代码

其次，在map.js文件的初始化里面引用拓展的js文件DrawEx以及DrawExt：

1. (function () {
   
2.     dojo.require("Extension.DrawEx");
   
3.     dojo.require("ExtensionDraw.DrawExt");
   
4. })();

复制代码

最后，在工具栏菜单的态势标绘菜单响应事件里面调用plot.js即可:

1. //态势标绘
   
2.         $("#bPlot").click(function () {
   
3.             //初始化军势标绘接口
   
4.             if (!DCI.Plot.isload)
   
5.                 DCI.Plot.Init(map);
   
6.             if (DCI.Plot.dialog)
   
7.                 DCI.Plot.dialog.close();
   
8.             DCI.Plot.dialog = jDialog.dialog({
   
9.                 title: '态势标绘',
   
10.                 width: 370,
    
11.                 height: 200,
    
12.                 left: 450,
    
13.                 top: 200,
    
14.                 modal: false, // 非模态，即不显示遮罩层
    
15.                 content: DCI.Plot.Html
    
16.             });
    
17.             DCI.Plot.InitEvent();
    
18. 
    
19.         });

复制代码

二、谈谈Draw工具调用的思路，不管调用arcgis api原生态的Draw，还是拓展Draw的，都是先创建一个Draw对象，然后监听Draw的draw-end绘制结束的回调函数，获取绘制的图形叠加在地图显示；Draw工具的activate函数会触发draw-end回调函数；

首先，初始化Draw工具对象以及默认的符号样式symbol：

1. //定义默认点 线  面符号
   
2. DCI.Plot.markerSymbol = new esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_CIRCLE, 8, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255, 69, 0]), 2), new dojo.Color([255, 255, 255, 1]));
   
3.             DCI.Plot.lineSymbol = new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255, 160, 122]), 2);
   
4.             DCI.Plot.fillSymbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255, 160, 122]), 2), new dojo.Color([255, 255, 255, 0.5]));
   
5.             //初始化拓展Draw
   
6.             DCI.Plot.toolbar = new Extension.DrawEx(map);
   
7.             DCI.Plot.toolbar.on("draw-end", DCI.Plot.addToMap);
   
8.             DCI.Plot.toolbar1 = new ExtensionDraw.DrawExt(map);
   
9.             DCI.Plot.toolbar1.on("draw-end", DCI.Plot.addToMap);
   
10.             //arcgis api自带的Draw
    
11.             DCI.Plot.drawToolbar = new esri.toolbars.Draw(map);
    
12.             DCI.Plot.drawToolbar.markerSymbol = DCI.Plot.markerSymbol;
    
13.             DCI.Plot.drawToolbar.lineSymbol = DCI.Plot.lineSymbol;
    
14.             DCI.Plot.drawToolbar.fillSymbol = DCI.Plot.fillSymbol;
    
15.             DCI.Plot.drawToolbar.on("draw-end", DCI.Plot.drawEnd);

复制代码

其次，触发调用Draw绘制：

1. case 0://plot_freehandline
   
2.                         DCI.Plot.drawFreeHandPolyline(null, function (geometry) {
   
3.                             symbol = DCI.Plot.lineSymbol;
   
4.                             DCI.Plot.drawEndPlot(geometry, symbol);
   
5.                         });
   
6.                         break;
   
7.                     case 1://plot_line
   
8.                         DCI.Plot.drawPolyline(null, function (geometry) {
   
9.                             symbol = DCI.Plot.lineSymbol;
   
10.                             DCI.Plot.drawEndPlot(geometry, symbol);
    
11.                         });
    
12.                         break;
    
13.                     case 2://emergency_freehand
    
14.                         DCI.Plot.drawFreeHandPolygon(null, function (geometry) {
    
15.                             symbol = DCI.Plot.fillSymbol;
    
16.                             DCI.Plot.drawEndPlot(geometry, symbol);
    
17.                         });
    
18.                         break;
    
19.                     case 3://plot_polygon
    
20.                         DCI.Plot.drawPolygon(null, function (geometry) {
    
21.                             symbol = DCI.Plot.fillSymbol;
    
22.                             DCI.Plot.drawEndPlot(geometry, symbol);
    
23.                         });
    
24.                         break;
    
25.                     case 4://plot_extent
    
26.                         DCI.Plot.drawExtent(null, function (geometry) {
    
27.                             symbol = DCI.Plot.fillSymbol;
    
28.                             DCI.Plot.drawEndPlot(geometry, symbol);
    
29.                         });
    
30.                         break;
    
31.                     case 5://emergency_freehand
    
32.                         DCI.Plot.drawCircle(null, function (geometry) {
    
33.                             symbol = DCI.Plot.fillSymbol;
    
34.                             DCI.Plot.drawEndPlot(geometry, symbol);
    
35.                         });
    
36.                         break;
    
37.                     case 6://直角箭头
    
38.                         DCI.Plot.drawStraightArrow(null, function (geometry) {
    
39.                             symbol = DCI.Plot.fillSymbol;
    
40.                             DCI.Plot.drawEndPlot(geometry, symbol);
    
41.                         });
    
42.                         break;
    
43.                     case 7://简单箭头
    
44.                         DCI.Plot.toolbar.activate(Extension.DrawEx.FREEHAND_ARROW);
    
45.                       break;
    
46.                     case 8://燕尾箭头
    
47.                         DCI.Plot.toolbar1.fillSymbol = DCI.Plot.fillSymbol;
    
48.                         DCI.Plot.toolbar1.activate("tailedsquadcombat");
    
49.                         break;  
    
50.                     case 9://集结地
    
51.                         DCI.Plot.toolbar.activate(Extension.DrawEx.BEZIER_POLYGON);
    
52.                       break;
    
53.                     case 10://弧线
    
54.                         DCI.Plot.toolbar.activate(Extension.DrawEx.CURVE);
    
55.                       break;  
    
56.                     case 11://曲线
    
57.                         DCI.Plot.toolbar.activate(Extension.DrawEx.BEZIER_CURVE);
    
58.                       break;

复制代码

1. //画点
   
2.         drawPoint: function (symbol, onDrawEnd) {
   
3.             DCI.Plot.onDrawEnd = onDrawEnd;
   
4.             if (symbol) {
   
5.                 DCI.Plot.drawToolbar.markerSymbol = symbol;
   
6.             }
   
7.             DCI.Plot.drawToolbar.activate(esri.toolbars.Draw.POINT);
   
8.             DCI.Plot.disablePan();
   
9.         },
   
10.         //画折线
    
11.         drawPolyline: function (symbol, onDrawEnd) {
    
12.             this.onDrawEnd = onDrawEnd;
    
13.             if (symbol) {
    
14.                 this.drawToolbar.lineSymbol = symbol;
    
15.             }
    
16.             this.drawToolbar.activate(esri.toolbars.Draw.POLYLINE);
    
17.             this.disablePan();
    
18.         },
    
19.         //自由线
    
20.         drawFreeHandPolyline: function (symbol, onDrawEnd) {
    
21.             this.onDrawEnd = onDrawEnd;
    
22.             if (symbol) {
    
23.                 this.drawToolbar.lineSymbol = symbol;
    
24.             }
    
25.             this.drawToolbar.activate(esri.toolbars.Draw.FREEHAND_POLYLINE);
    
26.             this.disablePan();
    
27.         },
    
28.         //画多边形
    
29.         drawPolygon: function (symbol, onDrawEnd) {
    
30.             this.onDrawEnd = onDrawEnd;
    
31.             if (symbol) {
    
32.                 this.drawToolbar.fillSymbol = symbol;
    
33.             }
    
34.             this.drawToolbar.activate(esri.toolbars.Draw.POLYGON);
    
35.             this.disablePan();
    
36.         },
    
37.         //手绘多边形
    
38.         drawFreeHandPolygon: function (symbol, onDrawEnd) {
    
39.             this.onDrawEnd = onDrawEnd;
    
40.             if (symbol) {
    
41.                 this.drawToolbar.fillSymbol = symbol;
    
42.             }
    
43.             this.drawToolbar.activate(esri.toolbars.Draw.FREEHAND_POLYGON);
    
44.             this.disablePan();
    
45.         },
    
46.         //画圆形
    
47.         drawCircle: function (symbol, onDrawEnd) {
    
48.             this.onDrawEnd = onDrawEnd;
    
49.             if (symbol) {
    
50.                 this.drawToolbar.fillSymbol = symbol;
    
51.             }
    
52.             this.drawToolbar.activate(esri.toolbars.Draw.CIRCLE);
    
53.             this.disablePan();
    
54.         },
    
55.         //画矩形
    
56.         drawExtent: function (symbol, onDrawEnd) {
    
57.             this.onDrawEnd = onDrawEnd;
    
58.             if (symbol) {
    
59.                 this.drawToolbar.fillSymbol = symbol;
    
60.             }
    
61.             this.drawToolbar.activate(esri.toolbars.Draw.EXTENT);
    
62.             this.disablePan();
    
63.         },
    
64.         //直角箭头
    
65.         drawStraightArrow: function (symbol, onDrawEnd) {
    
66.             this.onDrawEnd = onDrawEnd;
    
67.             if (symbol) {
    
68.                 this.drawToolbar.fillSymbol = symbol;
    
69.             }
    
70.             this.drawToolbar.activate(esri.toolbars.Draw.ARROW);
    
71.             this.disablePan();
    
72.         },

复制代码

最后，添加绘制图形在地图上展示：

1. /**
   
2.          * 绘制完毕调用的函数
   
3.         */
   
4.         drawEndPlot: function (geometry,symbol) {
   
5.             var title = "标题";
   
6.             var htmlCon = "测试内容测试内容";
   
7.             var attr = { "title": title, "content": htmlCon};
   
8.             var graphic = new esri.Graphic(geometry, symbol, attr);
   
9.             DCI.Plot.graphicslayer.add(graphic);
   
10.             DCI.Plot.deactivateDraw();
    
11.             DCI.Plot.map.setMapCursor('auto');//设置鼠标的光标         
    
12.         },

复制代码

1. /**
   
2.          * 拓展Draw绘制完毕调用的函数
   
3.         */
   
4.         addToMap: function (evt) {
   
5.             DCI.Plot.map.setMapCursor('auto');//设置鼠标的光标      
   
6.             var symbol;
   
7.             DCI.Plot.toolbar.deactivate();
   
8.             DCI.Plot.toolbar1.deactivate();
   
9.             switch (evt.geometry.type)
   
10.             {
    
11.                 case "point":
    
12.                 case "multipoint":
    
13.                     symbol = DCI.Plot.markerSymbol;
    
14.                     break;
    
15.                 case "polyline":
    
16.                     symbol = DCI.Plot.lineSymbol;
    
17.                     break;
    
18.                 default:
    
19.                     symbol = DCI.Plot.fillSymbol;
    
20.                     break;
    
21.             }
    
22.             var title = "标题";
    
23.             var htmlCon = "测试内容测试内容";
    
24.             var attr = { "title": title, "content": htmlCon};
    
25.             var graphic = new esri.Graphic(evt.geometry, symbol, attr);
    
26.             DCI.Plot.graphicslayer.add(graphic);
    
27.         },

复制代码

最后，提供源代码下载：http://pan.baidu.com/s/1gfQat4B

GIS作品：百度搜索：GIS之家(https://shop116521643.taobao.com/shop/view_shop.htm)
QQ兴趣部落GIS技术交流：gis之家(http://buluo.qq.com/p/barindex.html?bid=327395)
GIS毕业设计&项目承接群：238339408
GIS技术交流群：432512093

zrc59718

回复只为顶楼主

sinna

zrc59718 发表于 2016-11-24 21:02
回复只为顶楼主

谢谢:bq

Laary

回复一下能不能给个源码呀,免费的

sinna

Laary 发表于 2017-5-31 10:03
回复一下能不能给个源码呀,免费的

现在不共享源代码了，不过具体实现的思路，文章已经写了的，需要源代码的话，可以私聊

閒雲

楼主好像没有实现军用钳击箭头（双箭头）的标绘是不是？