ArcGIS API for js之绘制点、线、面

目录

前言

一、点

二、线

三、面

四、html配置

五、页面展示

---

前言

1. 在ArcGIS API 二次开发中经常用到绘制几何对象的功能，而官网也有直接提供封装好的控件，但是我觉得这样不太利于去了解到底如何产生一个几何对象，下面以ArcGIS API 4.X为例进行讲解。
2. 绘制点线面就是一个点击事件，当点击绘制点按钮时，在地图上绘制点，当点击绘制线按钮时，绘制线，面也同理。
3. 绘制每一个几何对象都要调用create()方法，并且激活action。
4. 调用on方法对节点事件进行监听。有vertex-add、vertex-remove、cursor-update、draw-complete事件。
5. 最后根据节点生成几何对象，进而创建graphic实例，然后将其添加到地图上。

一、点

function enableCreateMultipoint() {
    var pointAction = draw.create("multipoint", { mode: "click" });
    pointAction.on("cursor-update", function (evt) {
        createMultipointGraphic(evt.vertices)
    });
    pointAction.on("vertex-add", function (evt) {
        createMultipointGraphic(evt.vertices)
    });
    pointAction.on("vertex-remove", function (evt) {
        createMultipointGraphic(evt.vertices)
    });
    pointAction.on("draw-complete", function (evt) {
        createMultipointGraphic(evt.vertices)
    })
    function createMultipointGraphic(vertices) {
        view.graphics.removeAll();
        multipoint = new Multipoint({
            points: vertices,
            spatialReference: view.SpatialReference
        });
        var multipointFGraphic = new Graphic({
            geometry: multipoint,
            symbol: {
                type: "simple-marker",
                style: "circle",
                color: "red",
                size: "10px",
                outline: {
                    color: [255, 255, 5],
                    width: 1.5
                }
            }
        });
        view.graphics.add(multipointFGraphic);
    }
}

二、线

function enableCreatePolyline() {
    var lineAction = draw.create("polyline", { mode: "left-click" });
    lineAction.on("vertex-add", function (evt) {
        createPolylineGraphic(evt.vertices);
    });
    lineAction.on("vertex-remove", function (evt) {
        createPolylineGraphic(evt.vertices);
    })
    lineAction.on("cursor-update", function (evt) {
        createPolylineGraphic(evt.vertices);
    })
    lineAction.on("draw-complete", function (evt) {
        createPolylineGraphic(evt.vertices);
    })
    function createPolylineGraphic(vertices) {
        //先清除图形
        view.graphics.removeAll();
        polyline = {
            type: "polyline",
            paths: vertices,
            spatialReference: view.spatialReference
        };
        var graphic = new Graphic({
            geometry: polyline,
            symbol: {
                type: 'simple-line',
                color: [255, 69, 0],
                width: 3,
                cap: "round",
                join: "round"

            }
        })
        view.graphics.add(graphic);
    }
}

三、面

function enableCreatePlygon() {
    var rectangleAction = draw.create("polygon", { mode: "click" });
    rectangleAction.on("vertex-add", function (evt) {
        createRectangleGraphic(evt.vertices)
    })
    rectangleAction.on("vertex-remove", function (evt) {
        createRectangleGraphic(evt.vertices);
    })
    rectangleAction.on("cursor-update", function (evt) {
        createRectangleGraphic(evt.vertices);
    })
    rectangleAction.on("draw-complete", function (evt) {
        createRectangleGraphic(evt.vertices);
    })
    function createRectangleGraphic(vertices) {
        view.graphics.removeAll();
        polygon = {
            type: "polygon",
            rings: vertices,
            spatialReference: view.spatialReference
        }
        var graphic = new Graphic({
            geometry: polygon,
            symbol: {
                type: "simple-fill",
                color: [210, 105, 30, 0.8],
                style: "solid",
                outline: {
                    color: "white",
                    width: 2
                }
            }
        })
        view.graphics.add(graphic);
    }
}

四、html配置

<div class="draw-div">
     <input type="text" placeholder="请输入距离" id="ditance-input" class="layui-input-inline">
     <div class="layui-input-inline">
          <select name="缓冲单位" class="selected">
                 <option value="">请选择单位</option>
                 <option value="meters">米</option>
                 <option value="kilometers">千米</option>
                 <option value="miles">英里</option>
          </select>
      </div>
    <button id="createBuffer" class="buffer-btn layui-btn layui-btn-normal" type="button">缓冲区</button>
    <button id="overlayDetect" class="buffer-btn layui-btn layui-btn-normal" type="button">检测</button>
</div>

五、页面展示

欢迎大家关注我的公众号，我也会在公众号同步更新。

若大家对进阶打怪有兴趣的话，欢迎订阅以下专栏

地址：WebGIS入门和进阶实战https://xiaozhuanlan.com/webgis?rel=4873733295