Arcgis for Js实现graphiclayer的空间查询(续)
上文中,实现了简单的针对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(); } } }
空间查询的逻辑非常easy,就是通过推断自己定义的区域内是否包括各点。