ArcGIS API for JavaScript 4.2学习笔记[26] 缓冲区分析【基于geometryEngine工具类】

要说GIS空间分析最经典的例子，就是缓冲区分析了。

本例使用geometryEngine来绘制缓冲区环。因为官方给的例子有3D和2D场景，所以就会显得比较复杂。

当鼠标在视图上点击时，就会生成一个缓冲区环（以点击的点为中心）；

当鼠标拖拽时，若不是漫游状态，则缓冲区环也会跟着一起动。

我会把生成缓冲区的核心代码用大标题红色标出，各位可以直接跳到那里学缓冲区的生成。

首先了解一下，缓冲区是以什么样的东西存在的？

在桌面GIS里，缓冲区就是一个面要素，可以是要素类也可以是shp文件。

在AJS里，缓冲区是一个Polygon或Polygon[]，存在于GraphicsLayer图层对象中。

在正式看这个例子之前，需要了解一个极为重要的工具类：geometryEngine。它提供了数十种空间分析方法，如buffer()、clip()、intersect()等等等等。

在这里就只用到了geodesicBuffer()。//至于geodesicBuffer()和buffer()的区别是什么，暂时还不得知，待查。

好了，有了这些预备知识，我们就可以开始了！

ArcGIS API for JavaScript 4.2学习笔记[26] 缓冲区分析【基于geometryEngine工具类】

在Navigation Mode复选框没有点选之前，对当前地图框点击或者拖拽会生成一个以点击点为中心的缓冲区圆环。

给出引用

var chkMapView = false, chkSceneView = false;
require([
    "esri/Map", "esri/views/SceneView",  "esri/views/MapView",
    "esri/layers/GraphicsLayer", "esri/Graphic",
    "esri/symbols/SimpleMarkerSymbol","esri/symbols/SimpleFillSymbol",
    "esri/geometry/geometryEngine",
    "dojo/on",
    "dojo/dom",
    "dojo/domReady!"
  ],
  function(
    Map,SceneView,MapView,
    GraphicsLayer,Graphic,
    SimpleMarkerSymbol,SimpleFillSymbol,
    geometryEngine,
    on, dom
  ){...}
);

哇2D3D同时用好酷炫。

注意：注意：注意：require上方多了两个bool类型的变量，有什么用，下面会说。

关键就是geometryEngine了。

思路

因为这个例子的多余代码太多了，我就先讲讲思路吧，否则读者会被绕晕。

点击视图——获取点位——传入geometryEngine的geodesicBuffer()方法——返回Polygon到GraphicsLayer——刷新view的显示。

骨架

function(...)
{
    var map = new Map({...});
    var view3d = new SceneView({...});
    var view2d = new MapView({...});
    var polySym = new SimpleFillSymbol({...});
    var pointSym = new SimpleMarkSymbol({...});

    var bufferLayer = new GraphicsLayer();
    var pointLayer = new GraphicsLayer();

    map.addMany([bufferLayer, pointLayer]);

    view2d.on('drag', function(evt){...});
    view3d.on('drag', function(evt){...});
    view2d.on("click", function(evt){...});
    view3d.on('click', function(evt){...});
    
    function bufferPoint(point){...}
    function clearGraphics(){...}

    on(dom.byId("chkBoxMap"), "click", function(evt){...});
    on(dom.byId("chkBoxScene"), "click", function(evt){...});
}

除去6个事件方法体，和老生常谈的map、view，就只有polySym和pointSym这两个符号对象、两个几何图层、两个功能函数，并不是很难理解这个例子。

//题外话：老外估计写这个demo也是交叉混写的，双引号和单引号随便用，同一章不同例子的函数参数名有时候也是随便写，可能是js的语言特性吧。

在这里，polySym和pointSym两个对象的作用仅仅是显示鼠标点击点和生成缓冲区的圆区域，不作为重点，但是具体代码还是给有需要的人看看：

var polySym = new SimpleFillSymbol({
  color: [140, 140, 222, 0.5],
  outline: {
    color: [0, 0, 0, 0.5],
    width: 2
  }
});

var pointSym = new SimpleMarkerSymbol({
  color: [255, 0, 0],
  outline: {
    color: [255, 255, 255],
    width: 1
  },
  size: 7
});

两个符号对象