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 5px #888;
font-size: 1.1em;
max-width: 15em;
padding: 0.5em;
position: absolute;
right: 20px;
top: 20px;
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>