GIS—框选

框选的功能是点击工具箱中的框选功能，在地图上框选任意区域，然后对所选区域筛选出需要的信息，效果如下

实现这个功能前我们需要用iDesktop中制作地图，再发布到iServer，然后将地图加载到自己的项目中进行操作,以下是功能代码

//矩形  框选
drawRectangle = new SuperMap.Control.DrawFeature(vectorLayer, SuperMap.Handler.Box);
drawRectangle.events.on({ "featureadded": drawRectangleCompleted })

//画矩形
function drawGeometry5() {
    clearFeatures();
    drawRectangle.activate();//这个drawRectangle是上面地图自己给的名字，没有var在上面实例化
}

//矩形
function drawRectangleCompleted(obj) {
    drawRectangle.deactivate();


    var feature = obj.feature;
    feature.style = style;
    vectorLayer.addFeatures(feature);//给它那个图层添加特征
    var queryBounds = feature.geometry.bounds;//geometry几何

    var queryParam, queryByBoundsParams, queryService;
    queryParam = new SuperMap.REST.FilterParameter({ name: "P25电讯服务[e-mail]" });//FilterParameter设置查询条件，name是必设的参数，（图层名称格式：数据集名称@数据源别名）
    queryByBoundsParams = new SuperMap.REST.QueryByBoundsParameters({ queryParams: [queryParam], bounds: queryBounds });//queryParams查询过滤条件参数数组。bounds查询范围
    queryService = new SuperMap.REST.QueryByBoundsService(url, {
        eventListeners: {
            "processCompleted": processCompleted,
            "processFailed": processFailed
        }
    });
    queryService.processAsync(queryByBoundsParams);//向服务端传递参数，然后服务端返回对象
}
//监听事件返回成功的方法
function processCompleted(queryEventArgs) {
    var i, j, result = queryEventArgs.result, marker;//queryEventArgs服务端返回的对象
    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("/Content/SuperMap/theme/images/marker.png", size, offset);
                    marker = new SuperMap.Marker(new SuperMap.LonLat(point.x, point.y), icon);
                    marker.sm_capital = f.data.NAME;//f.data.属性
                    marker.events.on({
                        "click": openInfoWin,
                        "touchstart": openInfoWin, //假如要在移动端的浏览器也实现点击弹框，则在注册touch类事件
                        "scope": marker
                    });
                    markerLayer.addMarker(marker);
                }
            }
        }
    }
}
function processFailed(e) {
    alert(e.error.errorMsg);
}

function clearFeatures() {
    vectorLayer.removeAllFeatures();
    markerLayer.clearMarkers();//清空图层上所有的markers。   markers标记图层类
    
}

function openInfoWin(obj) {//弹出的信息框
    closeInfoWin1();
    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("/Content/SuperMap/theme/images/marker.png", size, offset);
    var popup = new SuperMap.Popup.FramedCloud("popwin",
    new SuperMap.LonLat(lonlat.lon, lonlat.lat),
    null,
    contentHTML,
    icon,
    true);

    infowin1 = popup;
    map.addPopup(popup);
}
var infowin1 = null;
//关闭信息框，只能弹出一个，另外的就会关闭
function closeInfoWin1() {
    if (infowin1) {
        try {
            infowin1.hide();
            infowin1.destroy();
        }
        catch (e) { }
    }
}

实现这个功能需要用到iClient插件里的方法，刚刚接触的时候真是一头雾水，因为不了解插件中所规定的属性，感觉很抽象，然后请教了一位同学，然后他建议我把复杂的事物与生活中的事联系起来，比如把绘图控件和图层的关系联想成纸和笔的关系，这样理解起来就浅显很多了。