Arcgis for Js實現graphiclayer的空間查詢（續）

轉自原文 Arcgis for Js實現graphiclayer的空間查詢（續）

 

上文中，實現了簡單的針對graphiclayer的空間查詢工作，在本節，將更加詳細的介紹針對graphiclayer的空間查詢。首先，空間查詢的方式：提供多種類型的空間查詢，包括點周邊、線周邊、面內等多種方式；其次，圖形繪制完成后狀態的展示；再次，結果的顯示。實現后的結果如下：

點周邊——輸入緩沖區距離<喎�"/kf/ware/vc/" target="_blank" class="keylink">vcD4KPHA+PGltZyBzcmM9"/uploadfile/Collfiles/20141028/20141028091440197.png" alt="\">

點周邊——查詢結果

線周邊——輸入緩沖區距離

線周邊——查詢結果

面內——矩形

面內——圓形

面內——多邊形

首先，繪制圖形。

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 id="'distance'" type="'text'">"
        });
        $("#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();
　　　　　　　　　　}
　　　　　　　　　}

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