第六章 🥈地图查询 - 4、交互式拉框(矩形)查询 - 《WebGIS 开发》

一、draw.js
二、例子

一、draw.js

/**
 * 根据类型创建画笔
 * @param {object} source ol.source 数据源对象
 * @param {string} type 画笔的类型 ['Point', 'LineString', 'Circle', 'Polygon', 'Square', 'Box']
 * @param {function} callback 绘制完成的回调函数
 * @returns {ol.interaction.Draw} draw
 */
 function createDraw({source, type="Point", callback}) {
    let draw = null
    let geometryFunction = null
    let maxPoints = 0
    if (type == 'Square') {
      type = 'Circle'
      geometryFunction = ol.interaction.Draw.createRegularPolygon(4)
    } else if (type == 'Box') {
      type = 'LineString'
      geometryFunction = function (coordinates, geometry) {
        if (!geometry) {
          //多边形
          geometry = new ol.geom.Polygon(null)
        }
        var start = coordinates[0]
        var end = coordinates[1]
        geometry.setCoordinates([
          [
            [start[0], start[1]],
            [start[0], end[1]],
            end,
            [end[0], start[1]],
            start,
          ],
        ])
        return geometry
      }
      maxPoints = 2
    }
    draw = new ol.interaction.Draw({
      source: source,
      type: type,
      geometryFunction: geometryFunction,
      maxPoints: maxPoints,
    })
    // callback && draw.on('drawend', callback)
    if (callback) {
      draw.on('drawend', callback)
    }
    return draw
  }

二、例子

2-1、拉框查询点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./dist/include-openlayers-local.js"></script>
    <script src="./js/TIAN.js"></script>
    <script src="./js/Draw.js"></script>
</head>
<body>
    <button onclick="active()">激活</button>
    <button onclick="exit()">退出</button>
    <div id="map_container">
    </div>
    <script>
        var docLayer = new Zondy.Map.Doc('', 'smart_city', {
            ip: "localhost",
            port: 6163
        })
        var map = new ol.Map({
            target: "map_container",
            layers: [gaodeMapLayer, docLayer],
            view: new ol.View({
                projection: 'EPSG:4326',
                center: [114.30, 30.50],
                zoom: 4
            })
        })
        /* 1、创建画布 */
        var source = new ol.source.Vector({
            wrapX: false
        });
        var layer = new ol.layer.Vector({
            source
        })
        map.addLayer(layer);
        /* 2、激活画笔 */
        let draw = null;
        function active() {
            draw = createDraw({
                type: "Rectangle",
                source,
                callback: handleDraw
            })
            map.addInteraction(draw);
        }
        function handleDraw(e) {
            /* 3、实现查询服务 */
            //创建一个用于查询的区
            /* 3.1 创建查询的几何图形 */
            source.clear();
            const geomObj = new Zondy.Object.Polygon();
            //将ol的几何图形转换为中地的几何图形
            geomObj.setByOL(e.feature.getGeometry())
            /* 3.2 设置查询结构 */
            const queryStruct = new Zondy.Service.QueryFeatureStruct({
                IncludeGeometry: true,
                IncludeAttribute: true,
                IncludeWebGraphic: true
            });
            /* 3.3 设置查询的规则 */
            const rule = new Zondy.Service.QueryFeatureRule({
                //是否相交
                Intersect: true
            });
            //3.4 实例化查询参数对象
            const queryParam = new Zondy.Service.QueryParameter({
                geometry: geomObj,
                struct: queryStruct,
                rule: rule
            });
            //3.5 实例化地图文档查询服务对象
            const queryService = new Zondy.Service.QueryDocFeature(queryParam, "smart_city", 0, {
                ip: "localhost",
                port: "6163" //访问IGServer的端口号，.net版为6163，Java版为8089
            });
            //执行查询操作，querySuccess为查询回调函数
            queryService.query(querySuccess, queryError);
        }
        function querySuccess(result) {
            var format = new Zondy.Format.PolygonJSON()
            //将MapGIS要素JSON反序列化 ol.Feature类型数组
            var features = format.read(result)
            console.log(features)
        }
        function queryError(e) {
            console.log(e)
        }
        function exit(){
            map.removeInteraction(draw);
            draw = null;
            source.clear();
        }
         /* 
        3、交互式查询
        - 3.1 创建查询的几何图形
        - 3.2 设置查询的结构
        - 3.3 设置查询规则
        - 3.4 创建查询参数
        - 3.5 调用查询的接口
         */
    </script>
</body>
</html>

2-2、封装拉框查询 Query.js

通过几何图形查

class Query {
    static queryByGeom({
        geometry,
        service,
        callback
    }) {
        var queryStruct = new Zondy.Service.QueryFeatureStruct();
        //是否包含几何图形信息
        queryStruct.IncludeGeometry = true;
        //是否包含属性信息
        queryStruct.IncludeAttribute = true;
        //是否包含图形显示参数
        queryStruct.IncludeWebGraphic = false;
        //创建一个用于查询的区
        var geomObj = new Zondy.Object.Polygon();
        //将ol转化为mapgis的查询对象
        geomObj.setByOL(geometry);
        //指定查询规则
        var rule = new Zondy.Service.QueryFeatureRule({
            //是否将要素的可见性计算在内
            EnableDisplayCondition: false,
            //是否完全包含
            MustInside: false,
            //是否仅比较要素的外包矩形
            CompareRectOnly: false,
            //是否相交
            Intersect: true
        });
        //实例化查询参数对象
        var queryParam = new Zondy.Service.QueryParameter({
            geometry: geomObj,
            resultFormat: "json",
            struct: queryStruct,
            rule: rule
        });
        //实例化地图文档查询服务对象
        var queryService = new Zondy.Service.QueryDocFeature(queryParam, service.name, service.layerId, {
            ip: "localhost",
            port: "6163" //访问IGServer的端口号，.net版为6163，Java版为8089
        });
        //执行查询操作，querySuccess为查询回调函数
        queryService.query(callback);
    }
}

2-3、使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./dist/include-openlayers-local.js"></script>
    <script src="./libs/gaode.js"></script>
    <script src="./utils/Draw.js"></script>
    <script src="./libs/Query.js"></script>
</head>
<body>
    <button onclick="activeDraw()">拉框查询</button>
    <div id="map_container">
    </div>
    <script>
        var docLayer = new Zondy.Map.Doc('', 'xzd_city', {
            ip: 'localhost',
            port: 6163
        })
        var map = new ol.Map({
            target: "map_container",
            layers: [gaode],
            view: new ol.View({
                projection: 'EPSG:4326',
                center: [114.30, 30.50],
                zoom: 4
            })
        })
        map.addLayer(docLayer)
        var source = new ol.source.Vector({
            wrapX: false
        });
        var layer = new ol.layer.Vector({
            source
        })
        map.addLayer(layer);
        let draw = null;
        function activeDraw() {
            draw = createDraw({
                type: "Rectangle",
                source,
                callback: handleDraw
            })
            map.addInteraction(draw)
        }
        function handleDraw(e) {
            source.clear();
            var geometry = e.feature.getGeometry();
            Query.queryByGeom({
                geometry,
                service:{
                    name:"xzd_city",
                    layerId:2
                },
                callback:querySuccess
            })
        }
        //查询成功回调
        function querySuccess(result) {
            var format = new Zondy.Format.PolygonJSON();
            //将MapGIS要素JSON反序列化为ol.Feature类型数组
            var features = format.read(result);
            console.log(features)
        }
    </script>
</body>
</html>