提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  IT要闻

当前栏目

测距还在用尺子吗？快来学习ArcGis中如何测距

学习
2023-04-18 14:51:59 时间

一、前言

ArcGis具有丰富的地图绘制功能，今天我们就来一起学习探讨如何在ArcGis中实现测距功能

二、效果图

三、LengthsParameters

引入ArcGis长度参数模块LengthsParameters

"esri/tasks/support/LengthsParameters",  // 为GeometryService.lengths(几何服务)操作设置长度单位和其他参数
复制代码

Polyline绘制前实例化长度参数LengthsParameters

// 实例化长度单位
let params = new this.gisGz.LengthsParameters();
复制代码

四、GeometryService.UNIT_KILOMETER

引入GeometryService几何服务模块

"esri/tasks/GeometryService"
复制代码

定义几何服务模块长度单位

params.lengthUnit = this.gisGz.GeometryService.UNIT_KILOMETER;
复制代码

可定义的类型：feet(英尺) | kilometers(公里) | meters(米) | miles(英里) | nautical-miles(海里) | yards(码)

定义计算类型

官方解释：计算地球表面上几何体的面积或长度（对于在投影坐标系或地理坐标系中定义的几何体）。此方法将几何图形的形状保留在其坐标系中，这意味着将计算地图上显示的几何图形的真实面积或长度。

params.calculationType = "preserveShape";
复制代码

五、new Polyline

在 new Polyline之前需要先绘制两个点位，拿到这两个点位的x、y的坐标信息，如何绘制点位可以看我的这篇文章# ArcGis中Point方法应用

let one = 第一个点信息
let two = 第二个点信息
let polyline = new Polyline(               // 线信息，起始点，空间参照物
    [
      [one.x, one.y],
      [two.x, two.y],
    ],
    this.mapView.spatialReference          // 空间参照物
)
复制代码

六、获得ArcGis几何服务支持

引入ArcGis几何服务模块

"esri/tasks/GeometryService",            // 几何服务  表示由 ArcGIS REST API 公开的几何服务资源
复制代码

创建几何服务实例

// 几何服务控制器
const geometry = new GeometryService("https://utility.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");
复制代码

七、计算长度

计算两点距离，将第二个点绘制在图层上并将测算出的距离文字信息绘制在点位下

let polyline = new Polyline(               // 线信息，起始点，空间参照物
    [
      [one.x, one.y],
      [two.x, two.y],
    ],
    this.mapView.spatialReference
)
...

// 要计算其长度的折线数组
params.polylines = [polyline];

this.geometry.lengths(params).then((distance) => {
  let les = distance.lengths[0] * 1;
  let dis = 0;
  // 小于一公里单位为米
  if (les < 1) {
    dis = Math.round(les * 1000) + "米";
  } else {
    dis = les.toFixed(2) + "千米";
  }
  // 点图形
  let spot = new Graphic({                   // 图形是现实世界地理现象的矢量表示。它可以包含几何图形、符号和属性
    attributes: `自定义属性`,
    geometry: two,                                      // 第二个点的点位信息
    symbol: {                                           // 自定义样式
      type: "simple-marker",
      color: [255, 255, 255, 0.8],
      size: 15,
      text: point_id,
      outline: {color: [255, 255, 255, 0]},
    },
  })
  this.sketchViewModel.add(spot);         // 绘制层添加当前第二个点

  // 距离文字样式
  let textSymbol = {
    type: "text",
    geometry: two,
    color: [50, 50, 50, 1],
    font: { size: 10, },
    text: dis,          // 距离
    xoffset: 0,
    yoffset: -20,
    haloColor: [255, 255, 255, 1],
    haloSize: 1,
  };
  let curPos = new Point(two.x, two.y, this.mapView.spatialReference)
  let g = new Graphic(curPos, textSymbol);
  this.rangingTextLayer.add(g);           // 测距文字层
});

复制代码

写在最后

如有不足之处请指出，一起学习交流。

相关文章