ArcGIS 4.11 学习笔记之实现自定义测量工具

使用ArcGIS 4.11有一段时间了。有时候官方的许多API的开箱即用的部件还是不太能够满足需求。最近还发现官方的测量面积工具在IE内核下不能正常运行。那么自定义实现是必不可少的了。实现自定义测量并不难，网上也有许多成熟的例子可以参考和借鉴。自己的实现供各位参考参考，也是做一个笔记记录。

实现的效果图:

​

​

我的实现思路如下:

1.使用Draw绘制图形。测距使用polyline类型，测面积使用polygon类型。

2.绘制过程中，使用geometryEngine下的方法计算测量值。geodesicLength()测量线总长，geodesicArea()测量面积。

3.显示测量信息。测量时保持显示的是最新的测量值。

4.添加编辑节点，实现拖拽编辑图形。通过绘制过程中可以获取到的顶点数组然后构建graphic添加上去。

5.drag拖拽事件监听编辑节点，拖拽时保持图形同步更新

下面是按照以上思路实现的部分代码。

document.getElementById("sketch_polyline_btn").addEventListener("click", function() {
    graphicsLayer.removeAll();
    txtLayer.removeAll();
    editLayer.removeAll();
    var action = draw.create("polyline", {
        mode: "click"
    })
    // 获取焦点
    view.focus();

    // 顶点添加事件
    action.on("vertex-add", createPolyline);

    //顶点移除事件
    action.on("vertex-remove", createPolyline);

    // 鼠标移动事件
    action.on("cursor-update", createPolyline);

    // 绘制完成事件
    action.on("draw-complete", createPolyline);
})

function createPolyline(event) {
    var graphic = null;
    var editGps = [];
    var vertices = event.vertices;
    graphicsLayer.removeAll()
    //还未按下鼠标选定起点，鼠标移动的时候
    if(vertices.length == 1) {
        addEditPt(graphicsLayer, event.vertices[0], 0)
    }
    //大于两个点，显示线
    if(vertices.length >= 2) {
        //线
        var line = new Polyline({
            paths: vertices,
            spatialReference: view.spatialReference
        })
        // 生成绘制的图形
        graphic = new Graphic({
            geometry: line,
            symbol: {
                type: "simple-line", // autocasts as new SimpleFillSymbol
                color: "#ff5502",
                width: 2,
                cap: "round",
                join: "round"
            }
        });
        graphicsLayer.add(graphic)
        calLength(line.paths, view)
    }
    //每次单击添加顶点时添加一个可移动的编辑节点
    if(event.type == "vertex-add") {
        var addGp = addEditPt(editLayer, vertices[event.vertexIndex], event.vertexIndex)
        editGps.push(addGp)
        console.log(editGps)
    }
    if(event.type == "cursor-update") {

    }
    if(event.type == "draw-complete") {
        graphic.attributes = {
            "drawId": "draw"
        }
        console.log(graphic)
    }
}

//计算距离
function calLength(verties, view) {
    var polyline = new Polyline({
        paths: verties,
        spatialReference: view.spatialReference
    })
    if(view.spatialReference.isWebMercator) {
        polyline = webMercatorUtils.webMercatorToGeographic(polyline);
    }
    var length = geometryEngine.geodesicLength(polyline, "meters");
    var content = "距离:" + length + "米";
    var txtPt = new Point({
        x: verties[0][0][0],
        y: verties[0][0][1],
        spatialReference: view.spatialReference
    })
    createTextGraphic(content, txtPt);
}
//计算面积
function calArea(geom, view) {
    if(view.spatialReference.isWebMercator) {
        geom = webMercatorUtils.webMercatorToGeographic(geom);
    }
    var area = geometryEngine.geodesicArea(geom, "square-kilometers");
    if(area < 0) {
        // simplify the polygon if needed and calculate the area again
        var simplifiedPolygon = geometryEngine.simplify(geom);
        if(simplifiedPolygon) {
            area = geometryEngine.geodesicArea(simplifiedPolygon, "square-meters");
        }
    }
    var content = "面积:" + area.toFixed(4) + "平方千米";
    createTextGraphic(content, geom.centroid);
}
//生成显示文本图形
function createTextGraphic(content, point) {
    txtLayer.removeAll();
    var txtSym = {
        type: "text",
        text: content,
        color: [255, 0, 0],
        font: {
            size: 16,
        }
    }
    var txtGp = new Graphic({
        geometry: point,
        symbol: txtSym
    })
    txtLayer.add(txtGp);
}

这样便实现了一个基本的测量工具。功能比较简单点，有需要可以做得更加丰富点。像百度那样每一段都有距离提示，可删除节点等

demo地址：https://download.csdn.net/download/lf5566fl/11665092