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

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

    实现的效果图:

  

  

    我的实现思路如下:

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

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

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

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

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

    下面是按照以上思路实现的部分代码。完整demo代码可以在文章末尾处获取

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