arcgis js - 空间查询应用示例

arcgis js-空间查询应用示例

一、预备知识：

• 1.一个很重要的类：Query

• (1)类的描述以及构造器
• 
  
• 
  

• （2）类的一些重要属性

•   outFields
• Attribute fields to include in the FeatureSet. Fields must exist in the map layer. You must list the actual field names rather than the alias names. Returned fields are also the actual field names. However, you      are able to use the alias names when you display the results. You can set field alias names in the map document.
  When you specify the output fields, you should limit the fields to only those you expect to use in the query or the results. The fewer fields you include, the faster the response will be.
  当指定输出字段时，仅能够用此字段去查询或者结果的返回。包含的字段越少，响应就越快。
  Each query must have access to the Shape and ObjectId fields for a layer, but your list of fields does not need to include these two fields.
  每次查询时必须用到图层的Shape和ObjectId两个字段，但是列出的字段不需要一定包括这两个字段
  .geometry  设置空间查询的范围
  
• 
  

• 2.一个很重要的类：FeatureLayer
• (1)类的描述以及构造器     可以通过地图服务或者要素服务展现要素类。
• 
  
• 
  

（2）类的重要方法！：selectFeatures 在指定范围的图层上查询要素类

3.map的click事件   只有当鼠标单击时才会触发单击事件（事件处理函数），单击事件触发回调函数（回调函数注册事件），函调函数里的参数即为单击事件的对象

二、示例代码：

<! DOCTYPE  html>

< html >

  < head >

    < meta  http-equiv = "Content-Type"  content = "text/html; charset=utf-8" >

   

    < meta  name = "viewport"  content = "initial-scale=1, maximum-scale=1,user-scalable=no" >

    < title >Select with feature layer</ title >

    < link  rel = "stylesheet"  href = "/3.15/dijit/themes/tundra/tundra.css" >

    < link  rel = "stylesheet"  href = "/3.15/esri/css/esri.css" >

    < style >

      // 地图样式，方式为通过css的divid选择器设置样式

       html ,   body ,   #mapDiv   {

         padding :   0 ;

          margin :   0 ;

         height :   100 % ;

       }

      // 提示栏样式

       #messages {

         background-color :   #fff ;

         box-shadow :   0   0   5 px   #888 ;

         font-size :   1.1 em ;

         max-width :   15 em ;

         padding :   0.5 em ;

         position :   absolute ;

         right :   20 px ;

         top :   20 px ;

         z-index :   40 ;

        }

     </ style >

    < script  src = "/3.15/init.js" ></ script >

    < script >

        var  map ;

       require([  

         // AMD规范，加载所需要的模块

         "esri/map" ,  "esri/layers/FeatureLayer" ,

         "esri/tasks/query" ,  "esri/geometry/Circle" ,

         "esri/graphic" ,  "esri/symbols/SimpleMarkerSymbol" ,

         "esri/symbols/SimpleLineSymbol" ,  "esri/symbols/SimpleFillSymbol" ,  "esri/renderers/SimpleRenderer" ,

         "esri/config" ,  "esri/Color" , "dojo/dom" , "dojo/domReady!"

        ],  function (

         Map ,  FeatureLayer ,

         Query ,  Circle ,

         Graphic ,  SimpleMarkerSymbol ,

         SimpleLineSymbol ,  SimpleFillSymbol ,  SimpleRenderer ,

        esriConfig, Color,dom

      ) {

         // Use a proxy page if a URL generated by this page is greater than 2000 characters

         //

         // This should not be needed as nearly all query & select functions are performed on the client

         esriConfig.defaults.io.proxyUrl  =  "/proxy/" ;

          map  = new  Map( "mapDiv" , {

          basemap :  "streets" ,

          center :  [ - 95.249 ,  38.954 ],

          zoom :  14 ,

          slider :  false

          });

       

         // Add the census block points in on demand mode. An outfield is specified since it is used when calculating   the total population falling within the one mile radius.

         var  featureLayer  = new  FeatureLayer( "https://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/0"; ,{

          outFields :  [ "POP2000" ]   // 返回结果的矢量图层上的字段

          });

         //  Selection symbol used to draw the selected census block points within the buffer polygon

         var  symbol  = new  SimpleMarkerSymbol(

          SimpleMarkerSymbol. STYLE_CIRCLE ,

           15 ,

           new  SimpleLineSymbol(

              SimpleLineSymbol. STYLE_NULL ,

             new  Color([ 247 ,  34 ,  101 ,  0.9 ]),

             1

           ),

           new  Color([ 207 ,  34 ,  171 ,  0.5 ])

        );

        featureLayer.setSelectionSymbol( symbol );  // Sets the selection symbol for the feature layer. If no symbol is specified, features are drawn using the layer's renderer.

       

          // 对矢量图层的要素点进行渲染为不可见。

         var  nullSymbol  = new  SimpleMarkerSymbol().setSize( 0 );

        featureLayer.setRenderer( new  SimpleRenderer(nullSymbol));

       

         map .addLayer(featureLayer);

         // 设置地图单击事件时生成圆的样式

         var  circleSymb  = new  SimpleFillSymbol(

          SimpleFillSymbol. STYLE_NULL ,

            new  SimpleLineSymbol(

            SimpleLineSymbol. STYLE_SHORTDASHDOTDOT ,

             new  Color([ 105 ,  105 ,  105 ]),

             2

           ),  new  Color([ 255 ,  255 ,  0 ,  0.25 ])

        );

         var  circle;

         // When the map is clicked create a buffer around the click point of the specified distance

         map .on( "click" ,  function ( evt ){    // 通过dojo的on style方式来绑定事件监听函数，evt是事件对象。on方法包括三个参数  需要绑定events的元素，event名称，处理event的方法体，方法体只有一个参数，为事件对象。

           circle  = new  Circle({

            center :  evt.mapPoint,

            geodesic :  true ,

            radius :  1 ,

            radiusUnit :  "esriMiles"

           });

          map .graphics.clear();

           var  graphic  = new  Graphic(circle, circleSymb);

           map .graphics.add(graphic); //将圆加载到地图容器里展示出来。

           var  query  = new  Query();

          query.geometry  =  circle.getExtent();  // 设置查询的范围为以圆心为中心的正方形区域。

           // Use a fast bounding box query. It will only go to the server if bounding box is outside of the visible map.

           featureLayer.queryFeatures(query, selectInBuffer);   // 进行要素类查询，调用回调函数selectInBuffer

         });

  

       function  selectInBuffer ( response ){     // response返回queryfeatures方法查询出在正方形区域内的对象。

           var  feature;

           var  features  =  response.features;

           console .log(response);

           var  inBuffer  =  []; 

           //  Filter out features that are not actually in buffer, since we got all points in the buffer's bounding box

         for  ( var  i  =  0 ; i  <  features.length; i ++ ) {

            feature  =  features[i];

             // 筛选圆圈内的要素点，存入inBuffer数组中。

             if (circle.contains(feature.geometry)){   // Checks on the client if the specified point is inside the polygon. A point on the polygon line is considered in.

               inBuffer.push(feature.attributes[featureLayer.objectIdField]);   // 矢量图层的objectid字段

             }

          }

         

          var  query  = new  Query();

        

        query.objectIds  =  inBuffer;

           //  Use an objectIds selection query (should not need to go to the server)

           featureLayer. selectFeatures (query, FeatureLayer. SELECTION_NEW , function ( results ){   //SELECTION_NEW为查询方法，只显示当前的查询内容

            var  totalPopulation  =  sumPopulation(results); // 调用sumPopulation函数， 显示栏进行totalPopulation的动态展示

             var  r  =  "" ;

            r  =  "<b>The total Census Block population within the buffer is <i>"   +  totalPopulation  +  "</i>.</b>" ;

            dom.byId( "messages" ).innerHTML  =  r;

           

          });

         

        }

             

       

         function  sumPopulation ( features ) {    // 统计查询范围内要素类的总人口数

           var  popTotal  =  0 ;

           for  ( var  x  =  0 ; x  <  features.length; x ++ ) {

            popTotal  =  popTotal  +  features[x].attributes[ "POP2000" ];

          }

           return  popTotal;

        }

      });

     </ script >

  </ head >

  < body >

    < span  id = "messages" >Click on the map to select census block points within 1 mile.</ span >

    < div  id = "mapDiv" ></ div >

  </ body >

</ html >