加以地震级别,第多少个参数是地震级别


先讲简单的吧,事件体。

在UI上,提供了一个下拉框、多个滑动杆,以确定三个参数,使用那多少个参数举办空间查询。这些例子就颇带空间查询的情致了。

函数参数骨架

用到了二种Layer,FeatureLayer是数量图层,GraphicsLayer是缓冲区图层和结果突显图层。

交付引用

空中查询中央

在意到了吧?空间查询是亟需某个Layer的query对象的。

在wellsLayer中,使用createQuery()方法就能重临一个query对象,query对象涵盖了具有用于空间查询(搜索)用的音讯,通过它,才能选取queryFeatures等方法对急需开展空间查询(搜索)的图层举行空中查询(搜索)。

所以图中的类其他then对应的方法体就已经表明完成了。(呼呼~不明了诸位能不可能细水长流到那,也不知情诸位能不可能看懂…)

还剩多个方法体,createBuffer()、queryEarthQuakes()和displayResults()方法体。

先来看望createBuffer():

function createBuffer(wellPoints) {
  var bufferDistance = parseInt(distanceSlider.value);
  var wellBuffers = geometryEngine.geodesicBuffer(wellPoints, [
      bufferDistance
    ], "meters",
    true);
  wellBuffer = wellBuffers[0];
  var bufferGraphic = new Graphic({
    geometry: wellBuffer,
    symbol: new SimpleFillSymbol({
      outline: {
        width: 1.5,
        color: [255, 128, 0, 0.5]
      },
      style: "none"
    })
 });

  view.graphics.removeAll();
  view.graphics.add(bufferGraphic);
}

从DOM元素中获取缓冲区半径,然后用geometryEngine这几个工具集(或者叫类,还没到空间分析章节就不说那么多了)中的geodesicBuffer方法发生缓冲区,数据是传播的参数wellPoints,即上面addToSelect()方法中最后一层重返的几何体集合(油井点集合)。

下一场实例化Graphic实例,设置颜色、线宽,然后添加到view中的graphics容器内即可。

再看queryEarthQuakes()和displayResults():

function queryEarthquakes() {
  var query = quakesLayer.createQuery();
  query.where = "mag >= " + magSlider.value;
  query.geometry = wellBuffer;
  query.spatialRelationship = "intersects";

  return quakesLayer.queryFeatures(query);
}
function displayResults(results) {
  resultsLayer.removeAll();
  var features = results.features.map(function(graphic) {
    graphic.symbol = new SimpleMarkerSymbol({
      style: "diamond",
      size: 6.5,
      color: "darkorange"
    });
    return graphic;
  });
  var numQuakes = features.length;
  dom.byId("results").innerHTML = numQuakes + " earthquakes found";
  resultsLayer.addMany(features);
}

前一个设置query(又是query!)的新闻,重临quakesLayer搜索的结果(看下一个艺术,应该是FeatureSet类型的),结果传递给displayResults(在按钮的click事件中通过then异步传递),名为results。

在后一个方法体中,使用map方法遍历要素中负有几何体,设置线宽和色彩等标志样式,最终在DOM元素上刷新突显搜索获得了有点个地震点“numQuakes
earthquakes found”,并在结果图层中添加这个因素,刷新突显。

说到底八个实在就是因而下面扭转的缓冲区举办空间查询(搜索),得到结果并刷新突显的进程。


 

由来,本例就总体表明完结了,至于有些变量是何许,看new的门类就了然啊,一路看我的稿子理所应当都懂的。

————

感言:一个月了,好拖啊…4.3都出了这么久了,才把那么些例子攻克。嗯,接下去的例证就不会那么又臭又长了…

以此例子格外复杂。我先简单说说那么些事例是干啥的。

分成两块,一块是事件体,另一块是函数体。

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(...){...}
);

 

第四个参数是油井项目,第四个参数是油井的缓冲半径,第二个参数是地震级别。

其一例子是干嘛的吧?

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

在UI上,提供了一个下拉框、多个滑动杆,以确定多少个参数,使用那两个参数进行空中查询。这些例子就颇带空间查询的趣味了。

透过自身一个月的细读,我算是把那么些流程差不多弄懂了,如下图:

多少地点发挥可能不太对。

函数体

有多少个函数体是不毫不相关系反应的,而且是在MapView的then中进行相关异步操作的。

在此间我又不得不提一下异步操作和那几个then的用法了。

then的意义就是,等then前面的操作在服务器上做完后,再实施then里面的始末。

因为js是 style=”text-decoration: underline”>单线程的解释型语言,不会编译,只会 style=”text-decoration: underline; color: #ff0000″>从头到尾三回读下来,所以举行到then前边的代码时,是 style=”color: #ff0000″>不容许停在那里的

then前面的代码执行完肯定有一个好像回执的东西(可以明白为返回值),但是浏览器无法间接等候这么些回执啊?

于是就在then里面写一个 style=”color: #ff0000″>回调函数,丢给服务器,在服务器端等待then前的操作落成后,再 style=”color: #ff0000″>把“重临值”返还给回调函数做,即可。

then()里的事物不会立时在本土执行,在本土等待前一步的操作结果只会让浏览器卡死。

实际上,我标红的主要词,就是异步操作的商量了。

复习完异步操作和then,我们再看看view的那一串then:

view.then(function() {
    return wellsLayer.then(function() {
      var query = wellsLayer.createQuery();
      return wellsLayer.queryFeatures(query);
    });
  })
  .then(getValues)
  .then(getUniqueValues)
  .then(addToSelect)
  .then(createBuffer);

我从来提交我的解读:首先,view加载完后,执行第二个then,第二个then再次回到wellsLayer的长空搜索(queryFeatures()这一个方法)结果,那个结果是FeatureSet类型的,名为response。那response在哪用吧?它传递给了getValues()那个方法体:

function getValues(response) {
  var features = response.features;
  var values = features.map(function(feature) {
    return feature.attributes.STATUS2;
  });
  return values;
}

经查,response确实就是FeatureSet类的实例,通过getValues获取其内存有features的持有STATUS2字段的值,名为values,类型为AJS中的Collection类型。

values又传递给getUniqueValues()方法体:

function getUniqueValues(values) {
  var uniqueValues = [];
  values.forEach(function(item, i) {
    if ((uniqueValues.length < 1 || uniqueValues.indexOf(item)===-1) && (item !== "")) {
      uniqueValues.push(item);
    }
  });
  return uniqueValues;
}

依照某些规则(if语句)遍历values,使用Collection类的forEach方法,然后把遍历结果作为JS的数组重临,名为uniqueValues,传递给

addToSelect()方法体,完结选拔列表那么些DOM元素上冒出油井项目(option):

function addToSelect(values) {
  values.sort();//排序
  values.forEach(function(value) {
    var option = domConstruct.create("option");
    option.text = value;
    wellTypeSelect.add(option);//给下拉列表添加选项
  return setWellsDefinitionExpression(wellTypeSelect.value);
});

无法光添加呀!所以它就return了,方法set韦尔斯DefinitionExpression()的结果。

set韦尔斯DefinitionExpression()那个办法是设置wellsLayer的SQL查询语句的,不过没完,set韦尔斯DefinitionExpression()那一个主意内还有一层return:

function setWellsDefinitionExpression(newValue) {
  wellsLayer.definitionExpression = "STATUS2 = '" + newValue + "'";
  if (!wellsLayer.visible) {
    wellsLayer.visible = true;
  }
  return queryForWellGeometries();
}

function queryForWellGeometries() {
  var wellsQuery = wellsLayer.createQuery();
  return wellsLayer.queryFeatures(wellsQuery)
    .then(function(response) {
      wellsGeometries = response.features.map(function(feature) {
        return feature.geometry;//返回某个要素的几何体
      });
      return wellsGeometries;//返回所有的几何体(作为集合)
    });
}

queryForWellGeometries()这么些格局是set韦尔斯DefinitionExpression()这一个方法必定会触发的方法体,它用来搜索wellsLayer中的几何体。

给定油井的连串,给定油井的缓冲半径(缓冲区分析变化),给定地震级别,就能在油井附近以那一个缓冲半径为圆搜索出适合给定地震级其他地震点。

可吓坏我了,这么巨大的骨子(script标签就有200+行)。

事件体

wellTypeSelect和distanceSlider那多少个dom元素的change事件体都会单独触发createBuffer()函数体,wellTypeSelect事件则会先触发set韦尔斯DefinitionExpression()函数体举行遍历搜索几何体,然后把重回值(地震点的几何体集合wellsGeometries)交给createBuffer()函数体,生成缓冲区。

意思是一旦油井项目(下拉列表的系列变更)和离开滑块改变,缓冲区就要拓展重绘。

distanceSlider的input事件会转移DOM上的数值,为缓冲区半径的数值。

magSlider的input事件会转移DOM上的数值,为地震级其他数值。

queryQuakes按钮的click事件会透过已经转移的缓冲区举办叠置分析,搜索缓冲区内的地震点。

对大量的变量要是或不是很懂,那里可以先放缓,上面的函数体会更详细介绍,事件体主要领悟DOM的风云能干啥就行了。

首先个参数是油井项目,第三个参数是油井的缓冲半径,第五个参数是地震级别。


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(...){...}
);

 

为了协助结果展现,用到了SimpleFillSymbol模块和Simple马克erSymbol模块。

为了援救结果展现,用到了SimpleFillSymbol模块和Simple马克erSymbol模块。

探访搜索结果(随便选的参数):

看望搜索结果(随便选的参数):

事件体

wellTypeSelect和distanceSlider那七个dom元素的change事件体都会独自触发createBuffer()函数体,wellTypeSelect事件则会先触发setWellsDefinitionExpression()函数体进行遍历搜索几何体,然后把重临值(地震点的几何体集合wellsGeometries)交给createBuffer()函数体,生成缓冲区。

情趣是如果油井项目(下拉列表的种类转移)和离开滑块改变,缓冲区就要进行重绘。

distanceSlider的input事件会转移DOM上的数值,为缓冲区半径的数值。

magSlider的input事件会转移DOM上的数值,为地震级其余数值。

queryQuakes按钮的click事件会因而已经成形的缓冲区进行叠置分析,搜索缓冲区内的地震点。

对大气的变量即使不是很懂,这里可以先放缓,上面的函数体会更详细介绍,事件体紧要精通DOM的风云能干啥就行了。

为了扶助GraphicsLayer的缓冲区,需求用到geometryEngine模块和Graphics模块。

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){...}
)

蓝色点即为搜索结果(地震点)。

本条例子至极复杂。我先简单说说这么些例子是干啥的。

空间查询中央

瞩目到了呢?空间查询是急需某个Layer的query对象的。

在wellsLayer中,使用createQuery()方法就能回到一个query对象,query对象涵盖了独具用于空间查询(搜索)用的音讯,通过它,才能拔取queryFeatures等办法对急需开展空中查询(搜索)的图层进行空间查询(搜索)。

从而图中的种类的then对应的方法体就已经表达达成了。(呼呼~不明白诸位能或不能够百折不回到那,也不知晓诸位能不可能看懂…)

还剩多少个方法体,createBuffer()、queryEarthQuakes()和displayResults()方法体。

先来探望createBuffer():

function createBuffer(wellPoints) {
  var bufferDistance = parseInt(distanceSlider.value);
  var wellBuffers = geometryEngine.geodesicBuffer(wellPoints, [
      bufferDistance
    ], "meters",
    true);
  wellBuffer = wellBuffers[0];
  var bufferGraphic = new Graphic({
    geometry: wellBuffer,
    symbol: new SimpleFillSymbol({
      outline: {
        width: 1.5,
        color: [255, 128, 0, 0.5]
      },
      style: "none"
    })
 });

  view.graphics.removeAll();
  view.graphics.add(bufferGraphic);
}

从DOM元素中获得缓冲区半径,然后用geometryEngine这一个工具集(或者叫类,还没到空间分析章节就不说那么多了)中的geodesicBuffer方法爆发缓冲区,数据是流传的参数wellPoints,即上边addToSelect()方法中最终一层重返的几何体集合(油井点集合)。

下一场实例化Graphic实例,设置颜色、线宽,然后添加到view中的graphics容器内即可。

再看queryEarthQuakes()和displayResults():

function queryEarthquakes() {
  var query = quakesLayer.createQuery();
  query.where = "mag >= " + magSlider.value;
  query.geometry = wellBuffer;
  query.spatialRelationship = "intersects";

  return quakesLayer.queryFeatures(query);
}
function displayResults(results) {
  resultsLayer.removeAll();
  var features = results.features.map(function(graphic) {
    graphic.symbol = new SimpleMarkerSymbol({
      style: "diamond",
      size: 6.5,
      color: "darkorange"
    });
    return graphic;
  });
  var numQuakes = features.length;
  dom.byId("results").innerHTML = numQuakes + " earthquakes found";
  resultsLayer.addMany(features);
}

前一个设置query(又是query!)的音讯,重回quakesLayer搜索的结果(看下一个办法,应该是FeatureSet类型的),结果传递给displayResults(在按钮的click事件中经过then异步传递),名为results。

在后一个方法体中,使用map方法遍历要素中所有几何体,设置线宽和色彩等标志样式,最后在DOM元素上刷新突显搜索得到了不怎么个地震点“numQuakes
earthquakes found”,并在结果图层中加上那些因素,刷新显示。

最后五个实在就是透过上面扭转的缓冲区进行空间查询(搜索),获得结果并刷新突显的进度。


 

迄今,本例就满门诠释完结了,至于有些变量是哪些,看new的档次就清楚呀,一路看自己的文章理所应当都懂的。

————

感言:一个月了,好拖啊…4.3都出了这么久了,才把这么些事例攻克。嗯,接下去的例证就不会那么又臭又长了…

给定油井的体系,给定油井的缓冲半径(缓冲区分析变化),给定地震级别,就能在油井附近以这一个缓冲半径为圆搜索出符合给定地震级其他地震点。

总计一下

本例通过对图层的query对象的使用,以及结合空中分析中的缓冲区(使用geometryEngine),进一步加深了异步操作和遍历的代码领悟。

要说能符合本章空间查询(搜索)的着力代码,也可是是wellsLayer.createQuery()这一句代码和query对象的品质设置了,Graphics的操作(遍历、属性设置)和结果的互动传递都不是本章的主要,所以造成了那些例子阅读困难。

大体流程为:从featureLayer中获取字段值,并加到下拉摘取列表中——接纳某个油井项目,设置缓冲半径,后台获取油井的点几何体集合,生成缓冲区——使用缓冲区,和安装好的地震级别,举办空中查询,得到地震点的追寻结果,刷新突显。

over!

小结一下

本例通过对图层的query对象的运用,以及重组空中分析中的缓冲区(使用geometryEngine),进一步加剧了异步操作和遍历的代码了解。

要说能契合本章空间查询(搜索)的宗旨代码,也可是是wellsLayer.createQuery()这一句代码和query对象的属性设置了,Graphics的操作(遍历、属性设置)和结果的竞相传送都不是本章的基本点,所以导致了那一个例子阅读困难。

大体流程为:从featureLayer中收获字段值,并加到下拉选拔列表中——选拔某个油井项目,设置缓冲半径,后台获取油井的点几何体集合,生成缓冲区——使用缓冲区,和设置好的地震级别,举办空间查询,得到地震点的探寻结果,刷新展现。

over!

话不多说,看看那几个例子的引用有稍许:

稍许地点发挥可能不太对。

可吓坏我了,这么庞大的骨子(script标签就有200+行)。

图片 1

图片 2

函数参数骨架

这么些事例是干嘛的呢?

“因为开采油田会造成地下空间坍塌,而吸引地震。”

付出引用

图片 3图片 4


分为两块,一块是事件体,另一块是函数体。

为了接济GraphicsLayer的缓冲区,需求用到geometryEngine模块和Graphics模块。


灰色点即为搜索结果(地震点)。

因此我一个月的细读,我终于把那么些流程几乎弄懂了,如下图:

图片 5

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){...}
)

图片 6图片 7

函数体

有几个函数体是巢毁卵破反应的,而且是在MapView的then中开展有关异步操作的。

在此地自己又不得不提一下异步操作和那个then的用法了。

then的意思就是,等then后面的操作在服务器上做完后,再举行then里面的内容。

因为js是 style=”text-decoration: underline”>单线程的解释型语言,不会编译,只会 style=”text-decoration: underline; color: #ff0000″>从头到尾一遍读下去,所以进行到then前边的代码时,是 style=”color: #ff0000″>不容许停在这里的

then前边的代码执行完肯定有一个类似回执的东西(可以清楚为返回值),不过浏览器不可以直接等候这一个回执啊?

因此就在then里面写一个 style=”color: #ff0000″>回调函数,丢给服务器,在劳动器端等待then前的操作完毕后,再 style=”color: #ff0000″>把“再次回到值”返还给回调函数做,即可。

then()里的事物不会立即在地头执行,在本地等待前一步的操作结果只会让浏览器卡死。

其实,我标红的显要词,就是异步操作的思辨了。

复习完异步操作和then,我们再看看view的那一串then:

view.then(function() {
    return wellsLayer.then(function() {
      var query = wellsLayer.createQuery();
      return wellsLayer.queryFeatures(query);
    });
  })
  .then(getValues)
  .then(getUniqueValues)
  .then(addToSelect)
  .then(createBuffer);

本人一直付出我的解读:首先,view加载完后,执行第三个then,首个then重返wellsLayer的半空中搜索(queryFeatures()这些点子)结果,那个结果是FeatureSet类型的,名为response。那response在哪用呢?它传递给了getValues()这几个方法体:

function getValues(response) {
  var features = response.features;
  var values = features.map(function(feature) {
    return feature.attributes.STATUS2;
  });
  return values;
}

经查,response确实就是FeatureSet类的实例,通过getValues获取其内享有features的具有STATUS2字段的值,名为values,类型为AJS中的Collection类型。

values又传递给getUniqueValues()方法体:

function getUniqueValues(values) {
  var uniqueValues = [];
  values.forEach(function(item, i) {
    if ((uniqueValues.length < 1 || uniqueValues.indexOf(item)===-1) && (item !== "")) {
      uniqueValues.push(item);
    }
  });
  return uniqueValues;
}

按照某些规则(if语句)遍历values,使用Collection类的forEach方法,然后把遍历结果作为JS的数组重临,名为uniqueValues,传递给

addToSelect()方法体,落成采取列表那些DOM元素上出现油井项目(option):

function addToSelect(values) {
  values.sort();//排序
  values.forEach(function(value) {
    var option = domConstruct.create("option");
    option.text = value;
    wellTypeSelect.add(option);//给下拉列表添加选项
  return setWellsDefinitionExpression(wellTypeSelect.value);
});

不可以光添加呀!所以它就return了,方法setWellsDefinitionExpression()的结果。

set韦尔斯DefinitionExpression()那个措施是设置wellsLayer的SQL查询语句的,然则没完,set韦尔斯DefinitionExpression()那几个形式内还有一层return:

function setWellsDefinitionExpression(newValue) {
  wellsLayer.definitionExpression = "STATUS2 = '" + newValue + "'";
  if (!wellsLayer.visible) {
    wellsLayer.visible = true;
  }
  return queryForWellGeometries();
}

function queryForWellGeometries() {
  var wellsQuery = wellsLayer.createQuery();
  return wellsLayer.queryFeatures(wellsQuery)
    .then(function(response) {
      wellsGeometries = response.features.map(function(feature) {
        return feature.geometry;//返回某个要素的几何体
      });
      return wellsGeometries;//返回所有的几何体(作为集合)
    });
}

queryForWellGeometries()这几个办法是set韦尔斯DefinitionExpression()那几个办法必定会触发的方法体,它用来搜索wellsLayer中的几何体。

函数参数骨架

函数参数骨架

先讲简单的吗,事件体。

用到了三种Layer,FeatureLayer是多少图层,GraphicsLayer是缓冲区图层和结果突显图层。

话不多说,看看这几个例子的引用有微微:

图片 8