ArcGIS API for JavaScript 4.2学习笔记[20] 使用缓冲区结合Query对象进行地震点查询【重温异步操作思想】

这个例子相当复杂。我先简单说说这个例子是干啥的。

在UI上，提供了一个下拉框、两个滑动杆，以确定三个参数，使用这三个参数进行空间查询。这个例子就颇带空间查询的意思了。

第一个参数是油井类型，第二个参数是油井的缓冲半径，第三个参数是地震级别。

给定油井的类型，给定油井的缓冲半径（缓冲区分析生成），给定地震级别，就能在油井附近以这个缓冲半径为圆搜索出符合给定地震级别的地震点。

这个例子是干嘛的呢？

“因为开采油田会导致地下空间坍塌，而引发地震。”

---

看看搜索结果（随便选的参数）：

橙色点即为搜索结果（地震点）。

---

 

给出引用

话不多说，看看这个例子的引用有多少：

require(
    [ 
        "esri/Map",
        "esri/views/MapView",
        "esri/layers/FeatureLayer",
        "esri/layers/GraphicsLayer",
        "esri/geometry/geometryEngine",
        "esri/Graphic",
        "esri/symbols/SimpleFillSymbol",
        "esri/symbols/SimpleMarkerSymbol",

        "dojo/on",
        "dojo/dom",
        "dojo/dom-construct",
        "dojo/domReady!"
    ],
    function(...){...}
);

用到了两种Layer，FeatureLayer是数据图层，GraphicsLayer是缓冲区图层和结果显示图层。

为了支持GraphicsLayer的缓冲区，需要用到geometryEngine模块和Graphics模块。

为了支持结果显示，用到了SimpleFillSymbol模块和SimpleMarkerSymbol模块。

函数参数骨架

function(Map, MapView, FeatureLayer, GraphicsLayer, Graphics, SimpleFillSymbol, SimpleMarkerSymbol)
{
    var quakesUrl = "...";
    var wellBuffer,wellsGeometries,magnitude;

    //获取dom元素
    var wellTypeSelect = dom.byId("well-type");
    var magSlider = dom.byId("mag");
    var distanceSlider = dom.byId("distance");
    
    //FeatureLayer&GraphicsLayer定义
    var wellsLayer = new FeatureLayer({...});
    var quakesLayer = new FeatureLayer({...});
    var resultsLayer = new GraphicsLayer({...});
    
    var map = new Map({...});
    var view = new MapView({...});
    view.ui.add("infoDiv", "top-right");
    view.then(function(){...});

    //功能方法
    function getValues(response){...}
    function getUniqueValues(values){...}
    function addToSelect(values){...}
    function setWellsDefinitionExpression(newValue){...}
    function queryForWellGeometries(){...}
    function createBuffer(wellPoints){...}
    
    //事件
    on(magSlider, "input", function(){...});
    on(distanceSlider, "input", function(){...});
    on(distanceSlider, "change", function(){...});
    on(wellTypeSelect, "change", function(evt){...});
    on(dom.byId("query-quakes"), "click", function(){...});

    //其余方法
    function queryEarthquakes(){...}
    function displayResults(results){...}
)

函数参数骨架