Query by Bounds


Query by bounds finds spatial feature information within the specified Bounds (rectangle) in one or multiple specified layers of the map.

This examples takes World map as an example. According to the bounds drawn by the user, this example queries all feature within the drawn bounds in the Cpatials@World.1 layer and adds the results to the map.

var map, local, layer, vectorLayer, control, queryBounds, markerLayer,drawFeature,
        style = {
            strokeColor: "#304DBE",
            strokeWidth: 1,
            pointerEvents: "visiblePainted",
            fillColor: "#304DBE",
            fillOpacity: 0.3
        },
        url = "http://www.supermapol.com/iserver/services/vm3sbiax/rest/maps/World";
var value = "VZ88xbrMEMpGv4yiisTojgVq",
        name = "ak";
SuperMap.Credential.CREDENTIAL = new SuperMap.Credential(value, "ak");
function init(){
    map = new SuperMap.Map("map",{controls: [
        new SuperMap.Control.LayerSwitcher(),
        new SuperMap.Control.ScaleLine(),
        new SuperMap.Control.Zoom(),
        new SuperMap.Control.Navigation({
            dragPanOptions: {
                enableKinetic: true
            }
        })]
                                                             });
    layer = new SuperMap.Layer.TiledDynamicRESTLayer("World", url, {transparent: true, cacheEnabled: true},{maxResolution:"auto"});
    layer.events.on({"layerInitialized":addLayer});
    vectorLayer = new SuperMap.Layer.Vector("Vector Layer");//Create a new vector layer
    markerLayer = new SuperMap.Layer.Markers("Markers");//Create a marker layer

    //Get the rectangle bounds drawn by user
    drawFeature = new SuperMap.Control.DrawFeature(vectorLayer, SuperMap.Handler.Box,{"handlerOptions":{"cursorCSS":"crosshair"}});
    drawFeature.events.on({"featureadded": drawCompleted});
    map.addControl(drawFeature);
}

//Add rectangle bounds and query results to the map
function addLayer() {
    map.addLayers([layer, vectorLayer, markerLayer]);
    map.setCenter(new SuperMap.LonLat(0, 0), 0);
}
function drawGeometry() {
    //Clear the previous results
    clearFeatures();

    drawFeature.activate();
}

function drawCompleted(obj){
    drawFeature.deactivate();
    var feature = obj.feature;
    feature.style = style;
    vectorLayer.addFeatures(feature);
    var queryBounds = feature.geometry.bounds;
    //Query all features within the drawn bounds in the Capitals@World.1 layer
    var queryParam, queryByBoundsParams, queryService;
    queryParam = new SuperMap.REST.FilterParameter({name: "Capitals@World.1"});//Set parameters with FilterParameter, where name is a required parameter, (layer name format datasetname@datasourcename)
    queryByBoundsParams = new SuperMap.REST.QueryByBoundsParameters({queryParams: [queryParam], bounds: queryBounds});
    //Implement bounds query. Send parameters to server
    queryService = new SuperMap.REST.QueryByBoundsService(url, {
        eventListeners: {
            "processCompleted": processCompleted,
            "processFailed": processFailed
        }
    });
    queryService.processAsync(queryByBoundsParams);
}
//Return query results and add results to map as markers
function processCompleted(queryEventArgs) {
    var i, j, result = queryEventArgs.result,marker;
    if (result && result.recordsets) {
        for (i=0, recordsets=result.recordsets, len=recordsets.length; i<len; i++) {
            if (recordsets[i].features) {
                for (j=0; j<recordsets[i].features.length; j++) {
                    var f = recordsets[i].features[j];
                    var point = f.geometry,
                            size = new SuperMap.Size(44, 33),
                            offset = new SuperMap.Pixel(-(size.w/2), -size.h),
                            icon = new SuperMap.Icon("http://www.supermapol.com/static/portal/images/markers/mark_blue.png", size, offset);
                    marker = new SuperMap.Marker(new SuperMap.LonLat(point.x, point.y), icon);
                    marker.sm_capital = f.attributes.CAPITAL;
                    marker.events.on({
                        "click":openInfoWin,
                        "touchstart":openInfoWin,
                        "scope": marker
                    });
                    markerLayer.addMarker(marker);
                }
            }
        }
    }
}
function processFailed(e) {
    alert(e.error.errorMsg);
}
function clearFeatures() {
    vectorLayer.removeAllFeatures();
    markerLayer.clearMarkers();
    closeInfoWin();
}
var infowin = null;
//After clicking Marker, present captial name through the message box
function openInfoWin(){
    closeInfoWin();
    var marker = this;
    var lonlat = marker.getLonLat();
    var contentHTML = "<div style='font-size:.8em; opacity: 0.8; overflow-y:hidden;'>";
    contentHTML += "<div>"+marker.sm_capital+"</div></div>";
    var size = new SuperMap.Size(0, 33);
    var offset = new SuperMap.Pixel(0, -size.h);
    var icon = new SuperMap.Icon("http://www.supermapol.com/static/portal/images/markers/mark_blue.png", size, offset);
    var popup = new SuperMap.Popup.FramedCloud("popwin",
                     new SuperMap.LonLat(lonlat.lon,lonlat.lat),
                     null,
                     contentHTML,
                     icon,
                     true);

    infowin = popup;
    map.addPopup(popup);
}
function closeInfoWin(){
    if(infowin){
        try{
            infowin.hide();
            infowin.destroy();
        }
        catch(e){}
    }
}

Online Demo and Code Editing

You can access complete source code, experience results, and edit source code to see results in real time.