• 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];


    说明:总结仅供参考,有意见保留。

  • 相关阅读:
    进阶之路(基础篇)
    进阶之路(基础篇)
    进阶之路(基础篇)
    进阶之路(基础篇)
    进阶之路
    C语言连接MySQL数据库(转)
    Linux下mysql的远程连接(转)
    Linux 操作MySQL常用命令行(转)
    Linux(Ubuntu12.04)上玩儿STC单片机(转)
    信号量 Linux函数 semget();semctl();semop();(转)
  • 原文地址:https://www.cnblogs.com/telwanggs/p/7346966.html
Copyright © 2020-2023  润新知