Query by Distance

Query by Distance finds features within a certain distance to the specified geometric object. For a point geometric object, all features within the circle with the point as center and distance as radius will be returned. For a line or region object, all features within a certain distance to the bounds of the object will be returned.

This example takes World map as an example. All capitals within 30 map units (degrees) to the center in Captials@World.1 will be drawn on map as Markers.

var local, map, layer, markerLayer1, markerLayer2,
        centerPoint = new SuperMap.Geometry.Point(121, 31),//Specified query center
        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"});
    markerLayer1 = new SuperMap.Layer.Markers("Markers");
    markerLayer2 = new SuperMap.Layer.Markers("Markers");

    //Draw a graphic on map
    var point = centerPoint,
            size = new SuperMap.Size(44, 40), //The size of the icon for the query point
            offset = new SuperMap.Pixel(-(size.w/2), -size.h), 
            icon = new SuperMap.Icon("http://www.supermapol.com/static/portal/images/markers/mark_purple.png", size, offset);  
    markerLayer1.addMarker(new SuperMap.Marker(new SuperMap.LonLat(point.x, point.y), icon)); //Add query point as Marker to map and specify icon

function addLayer() {
    map.addLayers([layer, markerLayer1, markerLayer2]);
    map.setCenter(new SuperMap.LonLat(0, 0), 0);
function queryByDistance() {

    //Query all capitals within 30 map units (degrees) to the center point in the Captials@World.1 layer
    var queryByDistanceParams = new SuperMap.REST.QueryByDistanceParameters({
        queryParams: new Array(new SuperMap.REST.FilterParameter({name: "Capitals@World.1"})),
        returnContent: true,
        distance: 30,
        geometry: centerPoint
    //Use the QueryByDistanceService interface to implement distance query
    var queryByDistanceService = new SuperMap.REST.QueryByDistanceService(url);
        "processCompleted": processCompleted,
        "processFailed": processFailed
//Return query results and add features in the query results to map as Markers
function processCompleted(queryEventArgs) {
    var i, j, result = queryEventArgs.result;
    for(i = 0;i < result.recordsets.length; i++) {
        for(j = 0; j < result.recordsets[i].features.length; j++) {
            var point = result.recordsets[i].features[j].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);
            markerLayer2.addMarker(new SuperMap.Marker(new SuperMap.LonLat(point.x, point.y), icon));
function processFailed(e) {
function clearFeatures() {
    //Clear the previous results

Online Demo and Code Editing

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