Arcgis for js開發之直線、圓、箭頭、多邊形、集結地等繪制方法

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

---

 

說明：總結僅供參考，有意見保留。

---