Arcgis for js开发之直线、圆、箭头、多边形、集结地等绘制方法

将ARCGIS for Js API中绘制各种图形的方法进行封装，方便调用。用时只需要传入参数既可。（在js文件中进行封装定义）；

1、新建js文件，新建空对象用于函数的定义

if (!this["gisTool"]) { gisTool= {}; }
if (!this["gisTool.Map"]) { gisTool.Map = {}; }

定义一个空对象，用于存储各类方法：

//地图交互事件
gisTool.Map.MapTool = {

在mapTool对中进行新建函数，方便不同功能中的调用。

一、获取当前点击的地图坐标

 //地图拾取点坐标getMapPoint: function (callBack) {map.setMapCursor("crosshair");var mapHandler = dojo.connect(map, "onClick", function (event) {clearLayer(map, "PointLayer");try {map.setMapCursor("default");callBack(event.mapPoint);dojo.disconnect(mapHandler);//事件值执行一次} catch (err) { }});},

二、绘制圆形(传入对应的参数既可)

  drawCircle: function (x, y, R, symbol, graphicLayer, isFly, callBack) {var ptStart = Geometry.drawPoint(parseFloat(x), parseFloat(y), { wkid: 4832});var circleGeometry = new esri.geometry.Circle(ptStart, {"radius": R,});if (isFly) {CenterAt(map, circleGeometry);}var graphic = new esri.Graphic(circleGeometry, symbol);if (callBack != null) {callBack(circleGeometry);}        graphicLayer.add(graphic);},

三、图形定位（单击进行坐标或者geometry定位）

 flayCirle: function (map, geometry) {var extent = geometry.getExtent();if (geometry.type == "point") {extent = new esri.geometry.Extent(geometry.x - 0.0000001, geometry.y - 0.0000001, geometry.x - 0 + 0.0000001, geometry.y - 0 + 0.0000001, map.spatialReference);extent = extent.expand(1.5);}if (extent != null) {var point = new esri.geometry.Point(extent.xmin + (extent.xmax - extent.xmin) / 2, extent.ymin + (extent.ymax - extent.ymin) / 2, map.spatialReference);var newExtent = new esri.geometry.Extent(point.x, point.y, point.x, point.y, point.spatialReference);//如果当前视图包含要缩放视图if (Extent(map.extent, extent)) {// extent = extent.expand(2);map.setExtent(extent);} else {var firstEx = UnionExtent(newExtent, map.extent);map.setExtent(firstEx, true);setTimeout(function () {map.centerAt(point)}, 700);setTimeout(function () {extent = extent.expand(1.5);map.setExtent(extent);}, 1400);}}},

四、绘制多线段PloygonLine

 drawPolyLine: function (callback) {var toolbar = new esri.toolbars.Draw(map, { showTooltips: true });toolbar.activate(esri.toolbars.Draw.POLYLINE);dojo.connect(toolbar, "onDrawEnd", function (geometry) {callback(geometry);toolbar.deactivate();});},

五、将绘制的多线段添加到地图上

 addPolyLine: function (points,symbol,graphicLayerName) {var map = map;require(["esri/geometry/Polygon", "esri/SpatialReference"], function (Polygon, SpatialReference) {var polygonLine = new Polygon(new esri.SpatialReference({ wkid: wkid }));polygonLine.addRing(points);var graphicsLayer = GrapchicLayer(map, graphicLayerName);var graphic = new esri.Graphic(polygonLine, symbol);graphicsLayer.add(graphic);});},

六、绘制多边形

drawPolygon:function(callback){var toolbar = new esri.toolbars.Draw(map, {showTooltips: true});toolbar.activate(esri.toolbars.Draw.POLYGON);dojo.connect(toolbar, "onDrawEnd", function (geometry) {callback(geometry);toolbar.deactivate();});},

七、绘制箭头的方法

 drawArrow: function (callback) {var toolbar = new esri.toolbars.Draw(map, { showTooltips: true });toolbar.activate(esri.toolbars.Draw.ARROW);dojo.connect(toolbar, "onDrawEnd", function (geometry) {callback(geometry);toolbar.deactivate();});},

八、将多边形添加到地图上

 addPolygon: function (points, symbol, graphicLayerName) {var map = map;require(["esri/geometry/Polygon", "esri/SpatialReference"], function (Polygon, SpatialReference) {var polygon = new Polygon(new esri.SpatialReference({ wkid: 4832}));polygon.addRing(points);var graphic = new esri.Graphic(polygon, symbol);var graphicsLayer = GraphicLayer(map, graphicLayerName);graphicsLayer.add(graphic);});},

九、画线的方法

drawLine: function (callback) {var toolbar = new esri.toolbars.Draw(map, { showTooltips: true });toolbar.activate(esri.toolbars.Draw.LINE);dojo.connect(toolbar, "onDrawEnd", function (geometry) {callback(geometry);toolbar.deactivate();});},

十、绘制集结地（需要英语第三方的API）

  drawGathering_Place: function (pnts,symbol,graphicLayerName) {this.t = 0.4;var mid = P.PlotUtils.mid(pnts[0], pnts[1]);var d = P.PlotUtils.distance(pnts[0], mid) / 0.9;var pnt = P.PlotUtils.getThirdPoint(pnts[0], mid, P.Constants.HALF_PI, d, true);pnts = [pnts[0], pnt, pnts[1]];var mid = P.PlotUtils.mid(pnts[0], pnts[2]);pnts.push(mid, pnts[0], pnts[1]);var normals = [];for (var i = 0; i < pnts.length - 2; i++) {var pnt1 = pnts[i];var pnt2 = pnts[i + 1];var pnt3 = pnts[i + 2];var normalPoints = P.PlotUtils.getBisectorNormals(this.t, pnt1, pnt2, pnt3);normals = normals.concat(normalPoints);}var count = normals.length;normals = [normals[count - 1]].concat(normals.slice(0, count - 1));var pList = [];for (i = 0; i < pnts.length - 2; i++) {pnt1 = pnts[i];pnt2 = pnts[i + 1];pList.push(pnt1);for (var t = 0; t <= P.Constants.FITTING_COUNT; t++) {var pnt = P.PlotUtils.getCubicValue(t / P.Constants.FITTING_COUNT, pnt1, normals[i * 2], normals[i * 2 + 1], pnt2);pList.push(pnt);}pList.push(pnt2);}gisTool.MapTool.addPolygon(pList, symbol,graphicLayerName);},

十一、绘制自由线

 drawFreehandLine: function (callback) {var toolbars = new esri.toolbars.Draw(map, { showTooltips: true });toolbars.activate(esri.toolbars.Draw.FREEHAND_POLYLINE);dojo.connect(toolbars, "onDrawEnd", function (geometry) {callback(geometry);toolbars.deactivate();});},

十二、手绘多边形

 drawFreePolygon: function (callback) {var toolbars = new esri.toolbars.Draw(map, { showTooltips: true });toolbars.activate(esri.toolbars.Draw.FREEHAND_POLYGON);dojo.connect(toolbars, "onDrawEnd", function (geometry) {callback(geometry);toolbars.deactivate();});},

十三、绘制文字

 drawText: function (symbol,graphicLayerName) {var toolbar = new esri.toolbars.Draw(map, { showTooltips: true });toolbar.activate(esri.toolbars.Draw.POINT);map.setMapCursor("crosshair");toolbar.on("draw-complete", function (evt) {var point = evt.geometry;           var graphicLayer = GraphicLayer(map, graphicLayerName);var graphic = esri.Graphic(point, symbol);graphicLayer.add(graphic);map.setMapCursor("default");toolbar.deactivate();});},

十四、删除图层上的单一要素的方法

 deleteOneGraphic: function (graphicLayerName) {var map = map, oneEvent;map.setMapCursor("crosshair");var graphicLayer = new GraphicLayer(map, graphicLayerName);if (graphicLayer) {oneEvent = dojo.connect(graphicLayer, "onClick", function (evt) {map.setMapCursor("default");graphicLayer.remove(evt.graphic);dojo.disconnect(oneEvent);});}},

十五、缩放到指定范围

zoomToGeometry: function (xMin, xMax, yMin, yMax) {var wkid = Robin.Setting.GlobalSetting.wkid;//起点、终点var extent = new esri.geometry.Extent(xMin, yMin, xMax, yMax, new esri.SpatialReference({ wkid: wkid }));Extent(map, extent.expand(3));}

关于传入的参数进行说明：

graphicLayerName:为指定的需要操作的图层名称，根据具体的图层名称方便后期的管理。

symbol:线或者面的填充样式，一般的定义样式如下：

var symbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID,new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID,new dojo.Color([255, 0, 0, 0.6]), 4),new dojo.Color([0, 255,0 , 0.6]));

传入的point的值是callback中返回的geometry中解析出的： var point = geometry.rings[0];

说明：总结仅供参考，有意见保留。

转载于:https://www.cnblogs.com/telwanggs/p/7346966.html

Arcgis for js开发之直线、圆、箭头、多边形、集结地等绘制方法相关推荐

arcgis for js开发之路径分析
//方法封装 function routeplan(x1, x2, y1, y2, barrierPathArray, isDraw, callback) { require([ "esri ...
Qt+OpenCV联合开发（十八）--多边形填充与绘制
一.知识点 API 知识点: 1.polylines&fillPoly 2.drawContours 二.函数原型 1.polylines polylines的c++原型: 参数一:img ...
openlayers6 踩坑系列（三）绘制和编辑（矩形，圆，多边形，点，线）
重要:博客内使用地图全替换为WMap,想使用的请参考我这篇博客(WMap) 最近在做矢量图形这一块,发现圆形和多边形,都可以使用openlayers自带的Modify类进行编辑,然后随意放大缩小旋转, ...
关于google地图api3的离线和在线开发（画带箭头的直线，指定范围，搜索，计算距离）
最近因为开发的需要,要做一个离线的google地图.并且能够加载google地图的一些特效.例如:地图的标记,计算距离,获取标记的经纬度,画带有箭头的直线,获取指定范围的数据等等.在这里我总结了很多开 ...
ArcGIS Maritime Server 开发教程（四）Maritime Service 开发实践
ArcGIS Maritime Server 开发教程(四)Maritime Service 开发实践本章导读:Maritime Service 属于 MapService 的一个扩展,大部分功能继 ...
《Three.js 开发指南》源码示例说明以及在线demo（原书第二版）附第三版的代码下载
<Three.js 开发指南>基于原书第二版源码来自华章出版社官网随书源码,修改替换了其中不能跑的示例,保证每个demo都可以运行. 源码以及示例说明下载: git下载地址 huazha ...
React.js开发生态系统概览 [译-转]
React.js 开发生态系统概览 [译] JavaScript领域发展速度很快,甚至有人认为这已经引起了负效应.一个前端库从早期开发的小玩具,到流行,再到过时,可能也就几个月时间.判断一个工具能否在 ...
Node.js 开发技能图谱
# Node.js 开发技能图谱 ## Node.js 语言环境搭建 - Node.js 安装(3m大法:nvm.npm.nrm) - Node.js 命令 - Node.js开发工具(推荐vscod ...
手把手教你学node之搭建node.js开发环境
搭建node.js开发环境本文只针对在Linux或者Mac下面.至于使用 Windows 并坚持玩新技术的同学,我坚信他们一定有着过人的.甚至是不可告人的兼容性 bug 处理能力,所以这部分同学麻烦 ...

Arcgis for js开发之直线、圆、箭头、多边形、集结地等绘制方法

Arcgis for js开发之直线、圆、箭头、多边形、集结地等绘制方法相关推荐

最新文章

热门文章