18 ArcGIS API for JavaScript 4.18绘制线段和面要素之后获取长度及面积

写在前面

上一文中我们介绍了一下如何通过鼠标点击的形式绘制点、线、面要素，大家看了代码之后应该感觉其实很简单，就是使用了"esri/widgets/Sketch/SketchViewModel"这个API模块来实现的。

大致实现流程如下：

• 实例化SketchViewModel
• 设置点、线、面三种符号的样式
• 激活SketchViewModel相应的绘制工具
• 绘制

以上就是通过鼠标点击的形式绘制点、线、面要素的整体流程，我们可以通过下面绘制一个点要素的代码来看一下这个流程，代码如下：

// 绘制之前先实例化一个Graphic图层，用于存放绘制的点、线、面要素
const graphicsLayer = new GraphicsLayer({
	id: 'pointGraphicLayer',
	elevationInfo: {
		mode: 'on-the-ground',
	},
});
mainView.map.add(graphicsLayer);

// 2、设置点要素的符号
const pointSymbol = {
	type: 'simple-marker',
	style: 'diamond',
	color: '#d81e06',
	size: '32px',
	outline: {
		color: [255, 255, 255],
		width: 3,
	},
};

// 1、实例化SketchViewModel实例
var sketchViewModel = new SketchViewModel({
	updateOnGraphicClick: false,
	view: mainView,
	layer: graphicsLayer,
	pointSymbol,
});

// 3、激活点要素绘制工具
sketchViewModel.create('point');

// 4、绘制，并且监听绘制结束的事件
sketchViewModel.on('create-complete', function (event) {
	const graphic = new Graphic({
		geometry: event.geometry,
		symbol: sketchViewModel.graphic.symbol,
	});
	graphicsLayer.add(graphic);
});
sketchViewModel.on('create', function (event) {
	if (event.state === 'complete') {
		console.log(graphicsLayer);
		console.log(event);
	}
});

以上就是我们上文介绍的“ArcGIS API for JavaScript 4.18通过鼠标绘制点、线、面”文章的全部内容。这篇文章我们介绍下如何获取绘制后的线要素长度、面要素的面积、周长这些信息。

 

具体步骤

1、通过上文我们了解了一个要素(点、线、面)绘制的整体流程，最后我们通过代码也看到我们在代码里监听了要素绘制完成的事件，并在事件中将绘制后的要素信息进行了打印，以下是打印出的要素信息：

通过上图我们可以看到，要素信息中有"geometry"这个属性，那接下来的操作就跟这个属性紧密相关。

2、通过查阅ArcGIS API for JavaScript 4.18的官网文档我们可以知道，要想获取一条线段或者一个面要素的长度、面积等信息，需要用到"esri/tasks/GeometryService"这个API模块，因为在这个API模块里面提供了长度和面积获取的方法。

3、既然知道了需要什么API模块，那我们接下来就编写代码来实现如何获取长度和面积。首先是获取线段长度的代码，如下：

//获取线段长度
const geometryService = new GeometryService({
	url:
		'http://sampleserver6.arcgisonline.com/arcgis/rest/services/Utilities/Geometry/GeometryServer',
});

const lengthsParameters = new LengthsParameters();
lengthsParameters.polylines = event.graphic.geometry;
lengthsParameters.lengthUnit = 9097;
lengthsParameters.geodesic = true;

geometryService.lengths(lengthsParameters).then(function (result) {
	console.log(result);
});

然后我们再来看一下获取面要素周长和面积的代码：

//获取周长和面积
const geometryService = new GeometryService({
	url:
		'http://sampleserver6.arcgisonline.com/arcgis/rest/services/Utilities/Geometry/GeometryServer',
});

const areasAndLengthsParameters = new AreasAndLengthsParameters();
areasAndLengthsParameters.polygons = event.graphic.geometry;
areasAndLengthsParameters.areaUnit = 'square-kilometers';
areasAndLengthsParameters.lengthUnit = 'kilometers';

geometryService
	.areasAndLengths(areasAndLengthsParameters)
	.then(function (result) {
		console.log(result);
	});

4、上述两段代码其实就是写在了监听绘制事件结束的代码后面。两段代码里都用到了GeometryService，因为GeometryService里面提供了长度和面积获取的方法，其实就是代码里看到的"lengths()"和"areasAndLengths()"方法，分别是获取线段的长度和面要素的周长与面积的方法。只不过这两个方法调用的时候需要分别传入线段和面要素的一些属性参数而已，以上就是全部的关于获取线段、面要素的长度和面积的方法描述了。

 

附：

全部代码：

	
		
		
		
		
		
	
	
		

			

				绘制点
				绘制线
				绘制面
				清屏