上文中,实现了简单的针对graphiclayer的空间查询工作,在本节,将更加详细的介绍针对graphiclayer的空间查询。首先,空间查询的方式:提供多种类型的空间查询,包括点周边、线周边、面内等多种方式;其次,图形绘制完成后状态的展示;再次,结果的显示。实现后的结果如下:
点周边——输入缓冲区距离
点周边——查询结果
线周边——输入缓冲区距离
线周边——查询结果
面内——矩形
面内——圆形
面内——多边形
首先,绘制图形。
var drawToolbar = new esri.toolbars.Draw(map);
drawToolbar.on("draw-end",showDrawResults);
on(dom.byId("point"), "click", function(){
restoreMap();
drawToolbar.activate(esri.toolbars.Draw.POINT);
});
on(dom.byId("polyline"), "click", function(){
restoreMap();
drawToolbar.activate(esri.toolbars.Draw.POLYLINE);
});
on(dom.byId("extent"), "click", function(){
restoreMap();
drawToolbar.activate(esri.toolbars.Draw.EXTENT);
});
on(dom.byId("circle"), "click", function(){
restoreMap();
drawToolbar.activate(esri.toolbars.Draw.CIRCLE);
});
on(dom.byId("polygon"), "click", function(){
restoreMap();
drawToolbar.activate(esri.toolbars.Draw.POLYGON);
});
/**
* 显示绘制结果
*/
function showDrawResults(evt){
drawToolbar.deactivate();
map.setMapCursor("default");
var geometry = evt.geometry;
if(geometry.type==="point" || geometry.type==="polyline"){
$('#map').modalInfowindow({
width:175,
height:75,
title:"请输入缓冲区距离",
content:"<input type='text' id='distance' />"
});
$("#distance").focus();
$("#distance").keydown(function (e){
// 回车键事件
if(e.which == 13) {
$("#close").click();
}
});
on(dom.byId("close"), "click", function(){
distance = dom.byId("distance").value;
$("#modal").remove();
doBuffer(geometry);
});
}
else{
queryGraphicByPolygon(geometry);
}
};
当为点或者线的时候,得首先进行缓冲区分析,获取缓冲区的geometry,缓冲区分析的代码如下:
/**
* 执行buffer
* @param geometry
*/
function doBuffer(geometry) {
var symbol = null;
switch (geometry.type) {
case "point":
symbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE,
7,
new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
new Color([0,0,255]),
1
),
new Color([0,0,255])
);
break;
case "polyline":
symbol = new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
new Color([0,0,255]),
2
);
break;
case "polygon":
symbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_NONE,
new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
new Color([0,0,255]),
2
),
new Color([0,0,255,0.25]));
break;
}
var graphic = new Graphic(geometry, symbol);
map.graphics.add(graphic);
//setup the buffer parameters
var params = new BufferParameters();
params.distances = [distance];
params.bufferSpatialReference = map.spatialReference;
params.outSpatialReference = map.spatialReference;
params.unit = GeometryService["UNIT_KILOMETER"];
if (geometry.type === "polygon") {
//if geometry is a polygon then simplify polygon. This will make the user drawn polygon topologically correct.
gsvc.simplify([geometry], function(geometries) {
params.geometries = geometries;
gsvc.buffer(params, function(bfGeometry){
queryGraphicByPolygon(bfGeometry[0]);
});
});
}
else {
params.geometries = [geometry];
gsvc.buffer(params, function(bfGeometry){
queryGraphicByPolygon(bfGeometry[0]);
});
}
}
在执行缓冲区分析的时候,会用到geometryservice。代码如下:
var gsvc = new GeometryService("http://localhost:6080/arcgis/rest/services/Utilities/Geometry/GeometryServer");
当缓冲区分析完成或者面要素绘制完成以后的geometry都为polygon,此时,执行空间查询:
/**
* 根据多边形进行查询
* @param geometry
*/
function queryGraphicByPolygon(geometry){
var graphics = chartLayer.graphics;
var sfs = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,
new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASHDOT,
new Color([255,0,0]), 2),
new Color([255,255,0,0.25])
);
var graphic = new Graphic(geometry,sfs);
map.graphics.add(graphic);
for(var i= 0, total=graphics.length;i<total;i++){
if(geometry.contains(graphics[i].geometry)){
selectedGraphics.push(graphics[i]);
graphics[i].symbol = createSymbol(iconPath,"#0ff");
chartLayer.redraw();
}
}
}
空间查询的逻辑很简单,就是通过判断自定义的区域内是否包含各点。