一、draw.js

  1. /**
  2.  * 根据类型创建画笔
  3.  * @param {object} source ol.source 数据源对象
  4.  * @param {string} type 画笔的类型 ['Point', 'LineString', 'Circle', 'Polygon', 'Square', 'Box']
  5.  * @param {function} callback 绘制完成的回调函数
  6.  * @returns {ol.interaction.Draw} draw
  7.  */
  8.  function createDraw({source, type="Point", callback}) {
  9.     let draw = null
  10.     let geometryFunction = null
  11.     let maxPoints = 0
  12.     if (type == 'Square') {
  13.       type = 'Circle'
  14.       geometryFunction = ol.interaction.Draw.createRegularPolygon(4)
  15.     } else if (type == 'Box') {
  16.       type = 'LineString'
  17.       geometryFunction = function (coordinates, geometry) {
  18.         if (!geometry) {
  19.           //多边形
  20.           geometry = new ol.geom.Polygon(null)
  21.         }
  22.         var start = coordinates[0]
  23.         var end = coordinates[1]
  24.         geometry.setCoordinates([
  25.           [
  26.             [start[0], start[1]],
  27.             [start[0], end[1]],
  28.             end,
  29.             [end[0], start[1]],
  30.             start,
  31.           ],
  32.         ])
  33.         return geometry
  34.       }
  35.       maxPoints = 2
  36.     }
  38.     draw = new ol.interaction.Draw({
  39.       source: source,
  40.       type: type,
  41.       geometryFunction: geometryFunction,
  42.       maxPoints: maxPoints,
  43.     })
  45.     // callback && draw.on('drawend', callback)
  47.     if (callback) {
  48.       draw.on('drawend', callback)
  49.     }
  51.     return draw
  52.   }

二、例子

2-1、拉框查询点

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <script src="./dist/include-openlayers-local.js"></script>
  9.     <script src="./js/TIAN.js"></script>
  10.     <script src="./js/Draw.js"></script>
  11. </head>
  13. <body>
  14.     <button onclick="active()">激活</button>
  15.     <button onclick="exit()">退出</button>
  16.     <div id="map_container">
  17.     </div>
  18.     <script>
  19.         var docLayer = new Zondy.Map.Doc('', 'smart_city', {
  20.             ip: "localhost",
  21.             port: 6163
  22.         })
  23.         var map = new ol.Map({
  24.             target: "map_container",
  25.             layers: [gaodeMapLayer, docLayer],
  26.             view: new ol.View({
  27.                 projection: 'EPSG:4326',
  28.                 center: [114.30, 30.50],
  29.                 zoom: 4
  30.             })
  31.         })
  32.         /* 1、创建画布 */
  33.         var source = new ol.source.Vector({
  34.             wrapX: false
  35.         });
  36.         var layer = new ol.layer.Vector({
  37.             source
  38.         })
  39.         map.addLayer(layer);
  40.         /* 2、激活画笔 */
  41.         let draw = null;
  43.         function active() {
  44.             draw = createDraw({
  45.                 type: "Rectangle",
  46.                 source,
  47.                 callback: handleDraw
  48.             })
  49.             map.addInteraction(draw);
  50.         }
  52.         function handleDraw(e) {
  53.             /* 3、实现查询服务 */
  54.             //创建一个用于查询的区
  55.             /* 3.1 创建查询的几何图形 */
  56.             source.clear();
  57.             const geomObj = new Zondy.Object.Polygon();
  58.             //将ol的几何图形转换为中地的几何图形
  59.             geomObj.setByOL(e.feature.getGeometry())
  60.             /* 3.2 设置查询结构 */
  61.             const queryStruct = new Zondy.Service.QueryFeatureStruct({
  62.                 IncludeGeometry: true,
  63.                 IncludeAttribute: true,
  64.                 IncludeWebGraphic: true
  65.             });
  66.             /* 3.3 设置查询的规则 */
  67.             const rule = new Zondy.Service.QueryFeatureRule({
  68.                 //是否相交
  69.                 Intersect: true
  70.             });
  71.             //3.4 实例化查询参数对象
  72.             const queryParam = new Zondy.Service.QueryParameter({
  73.                 geometry: geomObj,
  74.                 struct: queryStruct,
  75.                 rule: rule
  76.             });
  77.             //3.5 实例化地图文档查询服务对象
  78.             const queryService = new Zondy.Service.QueryDocFeature(queryParam, "smart_city", 0, {
  79.                 ip: "localhost",
  80.                 port: "6163" //访问IGServer的端口号，.net版为6163，Java版为8089
  81.             });
  82.             //执行查询操作，querySuccess为查询回调函数
  83.             queryService.query(querySuccess, queryError);
  84.         }
  86.         function querySuccess(result) {
  87.             var format = new Zondy.Format.PolygonJSON()
  88.             //将MapGIS要素JSON反序列化 ol.Feature类型数组
  89.             var features = format.read(result)
  90.             console.log(features)
  91.         }
  93.         function queryError(e) {
  94.             console.log(e)
  95.         }
  96.         function exit(){
  97.             map.removeInteraction(draw);
  98.             draw = null;
  99.             source.clear();
  100.         }
  101.          /* 
  102.         3、交互式查询
  103.         - 3.1 创建查询的几何图形
  104.         - 3.2 设置查询的结构
  105.         - 3.3 设置查询规则
  106.         - 3.4 创建查询参数
  107.         - 3.5 调用查询的接口
  108.          */
  109.     </script>
  110. </body>
  112. </html>

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

通过几何图形查

  1. class Query {
  2.     static queryByGeom({
  3.         geometry,
  4.         service,
  5.         callback
  6.     }) {
  7.         var queryStruct = new Zondy.Service.QueryFeatureStruct();
  8.         //是否包含几何图形信息
  9.         queryStruct.IncludeGeometry = true;
  10.         //是否包含属性信息
  11.         queryStruct.IncludeAttribute = true;
  12.         //是否包含图形显示参数
  13.         queryStruct.IncludeWebGraphic = false;
  14.         //创建一个用于查询的区
  15.         var geomObj = new Zondy.Object.Polygon();
  16.         //将ol转化为mapgis的查询对象
  17.         geomObj.setByOL(geometry);
  18.         //指定查询规则
  19.         var rule = new Zondy.Service.QueryFeatureRule({
  20.             //是否将要素的可见性计算在内
  21.             EnableDisplayCondition: false,
  22.             //是否完全包含
  23.             MustInside: false,
  24.             //是否仅比较要素的外包矩形
  25.             CompareRectOnly: false,
  26.             //是否相交
  27.             Intersect: true
  28.         });
  29.         //实例化查询参数对象
  30.         var queryParam = new Zondy.Service.QueryParameter({
  31.             geometry: geomObj,
  32.             resultFormat: "json",
  33.             struct: queryStruct,
  34.             rule: rule
  35.         });
  36.         //实例化地图文档查询服务对象
  37.         var queryService = new Zondy.Service.QueryDocFeature(queryParam, service.name, service.layerId, {
  38.             ip: "localhost",
  39.             port: "6163" //访问IGServer的端口号，.net版为6163，Java版为8089
  40.         });
  41.         //执行查询操作，querySuccess为查询回调函数
  42.         queryService.query(callback);
  43.     }
  44. }

2-3、使用

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <script src="./dist/include-openlayers-local.js"></script>
  9.     <script src="./libs/gaode.js"></script>
  10.     <script src="./utils/Draw.js"></script>
  11.     <script src="./libs/Query.js"></script>
  12. </head>
  14. <body>
  15.     <button onclick="activeDraw()">拉框查询</button>
  16.     <div id="map_container">
  17.     </div>
  18.     <script>
  19.         var docLayer = new Zondy.Map.Doc('', 'xzd_city', {
  20.             ip: 'localhost',
  21.             port: 6163
  22.         })
  23.         var map = new ol.Map({
  24.             target: "map_container",
  25.             layers: [gaode],
  26.             view: new ol.View({
  27.                 projection: 'EPSG:4326',
  28.                 center: [114.30, 30.50],
  29.                 zoom: 4
  30.             })
  31.         })
  32.         map.addLayer(docLayer)
  33.         var source = new ol.source.Vector({
  34.             wrapX: false
  35.         });
  36.         var layer = new ol.layer.Vector({
  37.             source
  38.         })
  39.         map.addLayer(layer);
  40.         let draw = null;
  42.         function activeDraw() {
  43.             draw = createDraw({
  44.                 type: "Rectangle",
  45.                 source,
  46.                 callback: handleDraw
  47.             })
  48.             map.addInteraction(draw)
  50.         }
  52.         function handleDraw(e) {
  53.             source.clear();
  54.             var geometry = e.feature.getGeometry();
  55.             Query.queryByGeom({
  56.                 geometry,
  57.                 service:{
  58.                     name:"xzd_city",
  59.                     layerId:2
  60.                 },
  61.                 callback:querySuccess
  62.             })
  63.         }
  64.         //查询成功回调
  65.         function querySuccess(result) {
  66.             var format = new Zondy.Format.PolygonJSON();
  67.             //将MapGIS要素JSON反序列化为ol.Feature类型数组
  68.             var features = format.read(result);
  69.             console.log(features)
  70.         }
  71.     </script>
  72. </body>
  74. </html>