arcgis api 4.x for js 基礎工具篇之測距測面

前言

在搭建好WebGIS應用框架的時候，相信大家首先開發的都會是基礎功能，此篇文章我們主要講述的是“測距”、"測面"功能。

注* 在測量單位中常規都是基於"平面坐標系"而言，所以如果你的坐標系是"地理坐標系",則需要找到對應的坐標轉換參數來進行轉換。

效果圖

正文

此功能的流程為“圖形繪制”-> "距離計算"-> "要素標注"。

測距核心代碼如下

export default function measureDist(view) {
  //開啟繪制工具
  let draw = new Draw({
    view: view
  });
  view.graphics.removeAll();
  enableCreatePolyline(draw, view);
}
  /***
   * 繪制測距線
   */
  function updateVertices(event) {
    var vertices = event.vertices;
    view.graphics.removeAll();
    var graphic = createPolylineByVertices(vertices,view.spatialReference);
    view.graphics.add(graphic);
    let show_point;
    if (vertices.length >= 2) {
      let _totalDist = 0;
      for (let i = 1; i < vertices.length; i++) {
        let label;
        show_point = new Point({
          x: vertices[i][0],
          y: vertices[i][1],
          spatialReference: view.spatialReference
        });
        let everyGraphic = createPolylineByVertices([vertices[i],vertices[i-1]],view.spatialReference);
……

測面核心代碼如下

export default function measureArea(view) {
  //開啟繪制
  let draw = new Draw({
    view: view
  });
  view.graphics.removeAll();
  enableCreatePolygon(draw, view);
}

function enableCreatePolygon(draw, view) {
  let viewClickHandler;
  const _deg = 180 / Math.PI;
  const _rad = Math.PI / 180;
  let action = draw.create("polygon");
  view.focus();
  action.on("vertex-add", drawPolygon);
  action.on("cursor-update", drawPolygon);
  action.on("vertex-remove", drawPolygon);
  action.on("draw-complete", drawPolygon);

  /***
   * 繪制測面圖形
   * @param event
   */
  function drawPolygon(event) {
    let vertices = event.vertices;
    view.graphics.removeAll();

    let graphic = createPolygonByVertices(vertices,view.spatialReference);
    view.graphics.add(graphic);
    let areaValue;
    let label
……

更多的詳情見：GIS之家小專欄

對本專欄感興趣的話，可以關注一波