arcgis js - 空间查询应用示例

最新推荐文章于 2026-04-17 09:09:39 发布

原创最新推荐文章于 2026-04-17 09:09:39 发布 · 2.1k 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

arcgis-js 专栏收录该内容

42 篇文章

订阅专栏

本文介绍如何使用 ArcGIS JavaScript API 实现空间查询功能，具体演示了通过单击地图创建缓冲区并查询缓冲区内的人口统计数据。

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
   >