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

Web端动态绘制圆形区域

最新推荐文章于 2021-02-25 22:39:12 发布

原创最新推荐文章于 2021-02-25 22:39:12 发布 · 2.6k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #arcgis #api

ArcGIS JS 开发实例专栏收录该内容

21 篇文章

订阅专栏

本文介绍了一种在Web端动态选择不同范围圆形区域的方法，通过使用ArcGIS API实现交互式绘制与调整圆的大小。具体包括如何创建圆形图元、设置拖动按钮以及响应鼠标事件来更新圆的半径。

需求

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

效果图

这里写图片描述

代码：

<!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");
            },
        });
    })