使用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);
}
这样便实现了一个基本的测量工具。功能比较简单点，有需要可以做得更加丰富点。像百度那样每一段都有距离提示，可删除节点等
