ArcGIS API for JavaScript实现动态拖拽画圆

你的名字 2021-09-14 10:34 408阅读 0赞

### 需求 ###

需要动态的在web端选取不同范围的圆形区域

### 效果图 ###

![这里写图片描述][SouthEast]

代码：

<!DOCTYPE html>
    <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
        <title>simple</title>
        <link rel="stylesheet" href="https://js.arcgis.com/3.20/esri/css/esri.css">
        <script src="https://js.arcgis.com/3.20/"></script>
        <script src="js/DrawDragCircle.js"></script>
    </head>
    <body class="claro">
    <div id="map" style="height:600px;"></div>
        <script> var _map; require([ "esri/map", "esri/layers/ArcGISDynamicMapServiceLayer", "DrawDragCircle", "esri/geometry/Point", "esri/SpatialReference", "dojo/domReady!"], function(Map,ArcGISDynamicMapServiceLayer,DrawDragCircle,Point,SpatialReference) { _map = new Map("map", { center: [13600000, 3400000], zoom: 15, basemap: "osm" }); var spatial = spatialReference = new SpatialReference({wkid: 102100}); var point11 = new Point([13600000, 3400000], spatial); _map.centerAndZoom(point11,8); var DrawDragCircle11 = new DrawDragCircle({map:_map}); DrawDragCircle11.startDrawCircle(point11); }); </script>
    </body>
    
    </html>

define("DrawDragCircle", [
            "require",
            "dojo/dom",
            "dojo/query",
            "dojo/_base/declare",
            "dojo/_base/lang",
            "dojo/Evented",
            "dojo/on",
            "esri/graphic",
            "esri/layers/GraphicsLayer",
            "esri/Color",
            "esri/symbols/Font",
            "esri/geometry/Point",
            "esri/geometry/Circle",
            "esri/geometry/Polyline",
            "esri/symbols/SimpleMarkerSymbol",
            "esri/symbols/PictureMarkerSymbol",
            "esri/symbols/SimpleLineSymbol",
            "esri/symbols/SimpleFillSymbol",
            "esri/symbols/TextSymbol",
            "esri/geometry/geometryEngine"
        ],
        function (require, dom, query, declare, lang, Evented, on, Graphic, GraphicsLayer, Color, Font, Point, Circle, Polyline, MarkerSymbol, PictureMarkerSymbol, LineSymbol, FillSymbol, TextSymbol, geometryEngine) { 
            return declare(Evented, {
                defaults: {
                    map: null
                },
                maxRadius: 5000000,
                markerSymbol: new MarkerSymbol(MarkerSymbol.STYLE_SQUARE, 20,
                    new LineSymbol(LineSymbol.STYLE_SOLID,
                        new Color("#DC143C"), 2),
                    new Color("#FFA500")),
                dragButtonSymbol: new PictureMarkerSymbol({
                    "url": "./images/dragButton.png",
                    "height": 16,
                    "width": 16
                }),
                lineSymbol: new LineSymbol(
                    LineSymbol.STYLE_SOLID,
                    new Color("#FFA500"), 2),
                fillSymbol: new FillSymbol(FillSymbol.STYLE_SOLID,
                    new LineSymbol(LineSymbol.STYLE_SOLID,
                        new Color([0, 155, 255, 0.55]), 2), new Color([0, 155, 255, 0.55])),
                circleGraphic: null,
                circle: null,
                labelGraphic: null,
                dragGraphic: null,
                _measureLayer: null,
                _mapEvents: [],
    
                constructor: function (options) { 
                    lang.mixin(this.defaults, options);
                    this._measureLayer = new GraphicsLayer();
                    this.defaults.map.addLayer(this._measureLayer);
                    this._initialMeasureLayer();
    
                },
    
                //初始化测量图层事件
                _initialMeasureLayer: function () { 
                    //开始拖拽绘制圆
                    this._measureLayer.on("mouse-down", lang.hitch(this, function (evt) { 
                        var graphic = evt.graphic;
                        if (graphic.symbol.type == "picturemarkersymbol") {
                            this.dragGraphic = graphic;
                            this.dragGraphic.isMouseDown = true;
                            this.defaults.map.disableMapNavigation();
                            graphic.getDojoShape().moveToFront();
                            this.defaults.map.setMapCursor("pointer");
                        }
                    }));
    
                    //提示可以拖拽
                    this._measureLayer.on("mouse-over", lang.hitch(this, function (evt) { 
                        var graphic = evt.graphic;
                        if (graphic.symbol.type == "picturemarkersymbol") {
                            this.defaults.map.setMapCursor("pointer");
                        }
                    }));
    
                    //恢复鼠标状态
                    this._measureLayer.on("mouse-out", lang.hitch(this, function (evt) { 
                        this.defaults.map.setMapCursor("default");
                    }));
                },
    
                _initialMapEvents: function () { 
                    this._mapEvents = [];
                    //拖拽绘制圆
                    this._mapEvents.push(this.defaults.map.on("mouse-drag", lang.hitch(this, function (evt) { 
                        if (this.dragGraphic != null && this.dragGraphic.isMouseDown) {
                            var dragGraphic = this.dragGraphic;
                            var dragPoint = evt.mapPoint;
                            if (this.centerPoint.y != dragPoint.y) {
                                dragPoint.setY(this.centerPoint.y);
                            }
                            var radius = this._calDistance(this.centerPoint, dragPoint);
                            if (radius <= this.maxRadius) {
                                this._measureLayer.remove(this.circleGraphic);
                                this.circle = this._createCircle(this.centerPoint, radius);
                                this.circleGraphic = new Graphic(this.circle, this.fillSymbol);
                                dragGraphic.setGeometry(dragPoint);
    
                                this.labelGraphic.setGeometry(dragPoint).setSymbol(this._createDistanceSymbol(radius))
                                this._measureLayer.add(this.circleGraphic);
                                this.circleGraphic.getDojoShape().moveToBack();
                                dragGraphic.getDojoShape().moveToFront();
                            }
                        }
                    })));
    
                    //触发"mouse-drag-end，通知拖拽结束
                    this._mapEvents.push(this.defaults.map.on("mouse-drag-end", lang.hitch(this, function (evt) { 
                        if (this.dragGraphic && this.dragGraphic.isMouseDown) {
                            this.emit("drag-end", {circle: this.circle});
    
                            this.dragGraphic.isMouseDown = false;
                            this.defaults.map.enableMapNavigation();
                            this.defaults.map.setMapCursor("default");
                        }
                    })));
                },
    
                //取消上一次注册的map鼠标事件
                _unregistMapEvents: function () { 
                    for (var i = 0; i < this._mapEvents; i++) {
                        if (this._mapEvents[i]) {
                            this._mapEvents[i].remove();
                        }
                    }
                    this._mapEvents=[];
                },
    
                startDrawCircle: function (centerPoint) { 
                    this._unregistMapEvents();
                    this.centerPoint = centerPoint;
                    this.circle = this._createCircle(centerPoint, 50000);
                    var dragPoint = this._createDragBtnPoint(this.circle, centerPoint);
    
                    this.circleGraphic = new Graphic(this.circle, this.fillSymbol);
                    this.labelGraphic = new Graphic(dragPoint, this._createDistanceSymbol(50000));
                    var dragGraphic = new Graphic(dragPoint, this.dragButtonSymbol);
    
                    this._measureLayer.add(this.circleGraphic);
                    this._measureLayer.add(dragGraphic);
                    this._measureLayer.add(this.labelGraphic);
                    this._initialMapEvents();
                },
    
                removeCircle: function () { 
                    this.centerPoint = null;
                    this.circleGraphic = null;
                    this.labelGraphic = null;
                    this._measureLayer.clear();
                },
    
                _createCircle: function (point, distance) { 
                    return new Circle(point, {
                        "radius": distance
                    });
                },
    
                _createDragBtnPoint: function (geometry, center) { 
                    var extent = geometry.getExtent();
                    var xmax = extent.xmax;
                    return new Point([xmax, center.y], center.spatialReference)
                },
    
                _createDistanceSymbol: function (distance) { 
                    distance = distance.toFixed(0) + "m";
                    var fontColor = new Color("#696969");
                    var holoColor = new Color("#fff");
                    var font = new Font("10pt", Font.STYLE_ITALIC, Font.VARIANT_NORMAL, Font.WEIGHT_BOLD, "Courier");
                    var textSymbol = new TextSymbol(distance, font, fontColor);
                    textSymbol.setOffset(10, 20).setHaloColor(holoColor).setHaloSize(2);
                    textSymbol.setAlign(TextSymbol.ALIGN_MIDDLE);
                    return textSymbol;
                },
    
                _calDistance: function (point1, point2) { 
                    var line = new Polyline(this.defaults.map.spatialReference);
                    line.addPath([point1, point2]);
                    return geometryEngine.distance(point1, point2, "meters");
                },
            });
        })

[SouthEast]: /images/20210726/2dc2e8078f6a42f1b0d084d4af6b5e25.png