范围查询

《GIS地理信息——范围查询》

开发工具：VS 2015, SuperMap iDesktop 9D, SuperMap iserver
相关插件：SuperMap.Include.js
完成模块功能：范围查询

一、功能实现

初始界面

1. 范围查询

点击范围查询按钮，并在地图中画好区域即可

二、经典代码

先进行一些基本的准备工作，对地图进行初始化等等。

  //初始化变量
        var map, local, layer, vectorLayer, control, queryBounds, markerLayer, drawFeature,
            //地图样式
        style = {
            strokeColor: "#304DBE",
            strokeWidth: 1,
            pointerEvents: "visiblePainted",
            fillColor: "#304DBE",
            fillOpacity: 0.3
        }
        //路径
        var url = "http://localhost:8090/iserver/services/map-NanShaWorkSpace/rest/maps/南沙@NanSha";
        function init() {
            map = new SuperMap.Map("map", {
                controls: [
                new SuperMap.Control.LayerSwitcher(),
                //LayerSwitcher： 地图图层切换控件，可以查看图层信息和控制图层显示，默认位于地图右上角
                new SuperMap.Control.ScaleLine(),
                //ScaleLine： 比例尺控件，显示地图的比例关系，默认位于地图左下角
                new SuperMap.Control.Zoom(),
                //Zoom：地图缩放控件
                new SuperMap.Control.Navigation({
                //Navigation:处理伴随鼠标事件（拖拽，双击、鼠标滚轮缩放）的地图浏览
                    dragPanOptions: {
                        enableKinetic: true
                    }
                })]
            });
            layer = new SuperMap.Layer.TiledDynamicRESTLayer("NanSha", 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(113.599540797591, 22.7024130356021), 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;
            var queryParam, queryByBoundsParams, queryService;

            
            queryParam = new SuperMap.REST.FilterParameter({ name: "P15医疗服务_point_1@NanSha" });
            //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/theme/images/marker.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, //假如要在移动端的浏览器也实现点击弹框，则在注册touch类事件
                                "scope": marker
                            });
                            markerLayer.addMarker(marker);
                        }
                    }
                }
            }
        };
           //函数
        function processFailed(e) {
            alert(e.error.errorMsg);
        };
           //函数
        function clearFeatures() {
            vectorLayer.removeAllFeatures();
            markerLayer.clearMarkers();
            closeInfoWin();
        };
        var infowin = null;
           //函数
        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("/Content/theme/images/marker.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) { }
            }
        };

三、开发总结

范围查询的作用：范围查询主要是查询某个区域内的某些已知信息！