范围查询

地图的范围查询，是对地图的一个或多个指定的图层，查询指定Bounds（矩形）范围内的空间地物信息。

本例将以World地图为例，根据用户绘制的范围，查询[email protected]图层中，落在该范围内的要素，并把查询得到的点要素作为Marker添加到地图上。

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");//新建一个vectorLayer的矢量图层
    markerLayer = new SuperMap.Layer.Markers("Markers");//创建一个有标签的图层

    //获取用户绘制的矩形范围
    drawFeature = new SuperMap.Control.DrawFeature(vectorLayer, SuperMap.Handler.Box,{"handlerOptions":{"cursorCSS":"crosshair"}});
    drawFeature.events.on({"featureadded": drawCompleted});
    map.addControl(drawFeature);
}

//把用户绘制的矩形范围、查询结果都叠加到地图上
function addLayer() {
    map.addLayers([layer, vectorLayer, markerLayer]);
    map.setCenter(new SuperMap.LonLat(0, 0), 0);
}
function drawGeometry() {
    //先清除上次的显示结果
    clearFeatures();

    drawFeature.activate();
}

function drawCompleted(obj){
    drawFeature.deactivate();
    var feature = obj.feature;
    feature.style = style;
    vectorLayer.addFeatures(feature);
    var queryBounds = feature.geometry.bounds;
    //根据用户绘制的范围，查询[email protected]图层中，落在该范围内的要素
    var queryParam, queryByBoundsParams, queryService;
    queryParam = new SuperMap.REST.FilterParameter({name: "[email protected]"});//FilterParameter设置查询条件，name是必设的参数，（图层名称格式：数据集名称@数据源别名）
    queryByBoundsParams = new SuperMap.REST.QueryByBoundsParameters({queryParams: [queryParam], bounds: queryBounds});
    //执行范围查询，向服务端传递参数
    queryService = new SuperMap.REST.QueryByBoundsService(url, {
        eventListeners: {
            "processCompleted": processCompleted,
            "processFailed": processFailed
        }
    });
    queryService.processAsync(queryByBoundsParams);
}
//返回查询结果，并把查询结果中的要素，作为Marker添加到地图上
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;
//点击Marker后，通过信息框展示所选要素的sm_capital属性值，即首都的名字
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){}
    }
}

在线演示与源码编辑

您可以在线访问完整代码、体验演示效果，也可以直接在线编辑源码并实时查看效果。

• 在线演示
• 源码编辑