1. 程式人生 > >Arcgis for Js實現graphiclayer的空間查詢(續)

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();
                    }
                }
            }

空間查詢的邏輯很簡單,就是通過判斷自定義的區域內是否包含各點。