Arcgis for Js實現graphiclayer的空間查詢(續)
阿新 • • 發佈:2019-02-02
上文中,實現了簡單的針對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(); } } }
空間查詢的邏輯很簡單,就是通過判斷自定義的區域內是否包含各點。