基於arcgis js 3.x實現在前端頁面動態拖拽圓的功能

參考文獻：https://www.cnblogs.com/deliciousExtra/p/5503929.html

思路：

1. 監聽mouse-down事件，獲取拖拽點；
2. 監聽mouse-drag事件， 獲取實時拖拽點並計算拖拽點與圓心的距離（半徑），重新生成新圓，新的半徑樣式，新的半徑文本樣式；
3. 監聽mouse-up事件；

   <script type="text/javascript">
           require([
               "esri/map",
               "esri/layers/ArcGISTiledMapServiceLayer",
               "esri/layers/GraphicsLayer",
               "esri/geometry/Point",
               "esri/geometry/Polyline",
               "esri/geometry/Circle",
               "esri/SpatialReference",
               "esri/geometry/geometryEngine",
               "esri/symbols/SimpleMarkerSymbol",
               "esri/symbols/PictureMarkerSymbol",
               "esri/symbols/SimpleLineSymbol",
               "esri/symbols/SimpleFillSymbol",
               "esri/symbols/TextSymbol",
               "esri/symbols/Font",
               "esri/graphic",
               "dojo/_base/Color"
           ],
               function (Map, ArcGISTiledMapServiceLayer,  GraphicsLayer, Point, Polyline, Circle, SpatialReference, geometryEngine,
                   SimpleMarkerSymbol, PictureMarkerSymbol, SimpleLineSymbol, SimpleFillSymbol, TextSymbol, Font,Graphic,Color) {
   
                   var map = new Map("map", {
                       center: [116.38, 39.90], //long, lat
                       zoom: 12
                   });
                   var basemap = new ArcGISTiledMapServiceLayer("http://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetGray/MapServer");
                   map.addLayer(basemap);
                   var glayer = new GraphicsLayer();
                   map.addLayer(glayer);
                   /**********樣式************/
                   var fillsybol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,
                       new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
                           new Color([255, 0, 0]), 2), new Color([255, 255, 0, 0.25])
                   );
                   var polylinesybol = new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASHDOT,
                       new Color([0, 0, 255, 0.25]), 1.5);
                   var dragButtonSymbol = new PictureMarkerSymbol({
                       "url": require.toUrl("./imgs/左右.png"),
                       "height": 12,
                       "width": 12
                   });
                   /**********樣式************/
                   //初始圓
                   var circle = new Circle(new Point(12957457.175868401, 4852952.74397267, new SpatialReference({ wkid: 3857 })), { radius: 12000 });
                   var graphic = new Graphic(circle, fillsybol);          
                   //拖拽點
                   var dragPoint = createDragBtnPoint(circle, circle.center);
                   var dragGraphic = new Graphic(dragPoint, dragButtonSymbol);
                   //標註距離要素
                   var labelGraphic = new Graphic(dragPoint, createDistanceSymbol(12000));
                   glayer.add(graphic);
                   glayer.add(dragGraphic);
                   glayer.add(labelGraphic);
                   //拖拽點與中心點生成的線
                   var polyline = new Polyline(new SpatialReference({ wkid: 3857 }));
                   polyline.addPath([circle.center, dragPoint]);
                   var lineGraphic = new Graphic(polyline, polylinesybol);
                   glayer.add(lineGraphic);
                   //鼠標點擊事件
                   glayer.on("mouse-down", function (evt) {
                       var graphic1 = evt.graphic; 
                       if (graphic1.symbol.type == "picturemarkersymbol") {
                           dragGraphic = graphic1;
                           dragGraphic.isMouseDown = true;
                           //禁止地圖移動
                           map.disableMapNavigation();
                           map.setMapCursor("pointer");
                       }
                   });
                   //拖拽事件
                   map.on("mouse-drag", function (evt) {
                       if (dragGraphic != null && dragGraphic.isMouseDown) {
                           dragPoint = evt.mapPoint;
                           if (circle.center.y != dragPoint.y) {
                               dragPoint.setY(circle.center.y);
                           }
                           var radius = calDistance(dragPoint, circle.center)
                           console.log(radius)
                           glayer.remove(graphic);
                           console.log(circle.center)
                           var newcircle = new Circle(circle.center, { radius: radius });
                           graphic = new Graphic(newcircle, fillsybol);
                           dragGraphic.setGeometry(dragPoint);
                           glayer.add(graphic);
                           labelGraphic.setGeometry(dragPoint).setSymbol(createDistanceSymbol(radius))
                           polyline.removePath(0);
                           //添加新的線
                           polyline.addPath([circle.center, dragPoint]);
                           glayer.refresh();
                       }
                   });
                   //拖拽結束
                   map.on("mouse-up", function (evt) {
                       map.enableMapNavigation();
                       dragGraphic.isMouseDown = false;
                       map.setMapCursor("default");
                   });
   
                   function calDistance(point1, point2) {
                       return geometryEngine.distance(point1, point2, "meters");
                   }
                   function createDragBtnPoint(geometry, center) {
                       var extent = geometry.getExtent();
                       var xmax = extent.xmax;
                       return new Point([xmax, center.y], center.spatialReference)
                   }
                   function createDistanceSymbol (distance) {
                       var 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;
                   }
   
               });
       </script>

   效果圖：