地信网论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

免费视频|新人指南|答学员问|投诉删帖

禁止上传涉密资料|赚取铜板|附件下载

查看: 1385|回复: 5
收起左侧

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

[复制链接]
发表于 2016-11-21 16:01 | 显示全部楼层 |阅读模式
土地论坛 三农有趣味

马上注册地信网,享受更多功能,学习更多知识,成就人生精彩!

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
上一篇实现了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.         });
复制代码
二、谈谈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


发表于 2016-11-24 21:02 | 显示全部楼层
回复只为顶楼主
回复 支持 反对

使用道具 举报

 楼主| 发表于 2016-11-30 08:50 | 显示全部楼层
地信网论坛版规和新人指南

谢谢:bq
回复 支持 反对

使用道具 举报

发表于 2017-5-31 10:03 | 显示全部楼层
回复一下能不能给个源码呀,免费的
回复 支持 反对

使用道具 举报

 楼主| 发表于 2017-5-31 15:50 | 显示全部楼层
地信网论坛发帖规范—规范发帖,方便你我他!
Laary 发表于 2017-5-31 10:03
回复一下能不能给个源码呀,免费的

现在不共享源代码了,不过具体实现的思路,文章已经写了的,需要源代码的话,可以私聊
回复 支持 反对

使用道具 举报

发表于 2017-6-15 11:11 | 显示全部楼层
《涉密地质资料管理细则》必读
楼主好像没有实现军用钳击箭头(双箭头)的标绘是不是?
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关闭

论坛推荐话题上一条 /1 下一条

土流网招商加盟广告
在线客服

手机版|新人指南|地信论坛 ( 湘ICP备14003170号-5 湖南土流信息有限公司 版权所有 关于地信 联系方式 邮箱登陆

湘公网安备 43010302000511号

Powered by Discuz! X3.2

快速回复 返回顶部 返回列表