一、封装

给Point添加一个query方法，进行查询

  1. /* es6封装添加点 */
  2. const POINT_STYLE = {
  3.     Angle: 0,
  4.     Color: 2, //子图的颜色
  5.     Space: 0,
  6.     SymHeight: 5, //点的高度
  7.     SymID: 31,
  8.     SymWidth: 5 //点的宽度
  9. }
  10. const HOST = 'localhost';
  11. const PORT = 6163;
  12. /**
  13.  * @param {object} service  {name,layerId,host,port}
  14.  */
  15. class Point {
  16.     ...
  17.     /* 查询 */
  18.     static query({
  19.         position,
  20.         service
  21.     }){
  22.         //1、创建一个用于查询的点形状
  23.         var pointObj = new Zondy.Object.Point2D(position[0], position[1]);
  24.         //设置查询点的搜索半径
  25.         pointObj.nearDis = 1
  26.         //2、初始化查询结构对象，告诉服务端查询结果中应该包含哪些信息
  27.         var queryStruct = new Zondy.Service.QueryFeatureStruct()
  28.         //是否包含几何图形信息
  29.         queryStruct.IncludeGeometry = true;
  30.         //是否包含属性信息
  31.         queryStruct.IncludeAttribute = true;
  32.         //是否包含图形显示参数
  33.         queryStruct.IncludeWebGraphic = true;
  34.         //3、创建查询规则
  35.         var rule = new Zondy.Service.QueryFeatureRule({
  36.             //是否将要素的可见性计算在内
  37.             EnableDisplayCondition: false,
  38.             //是否完全包含
  39.             MustInside: false,
  40.             //是否仅比较要素的外包矩形
  41.             CompareRectOnly: false,
  42.             //是否相交
  43.             Intersect: true
  44.         })
  45.         //4、实例化查询参数对象
  46.         var queryParam = new Zondy.Service.QueryParameter({
  47.             geometry: pointObj,
  48.             resultFormat: 'json',
  49.             struct: queryStruct,
  50.             rule: rule
  51.         })
  52.         //5、实例化地图文档查询服务对象
  53.         var queryService = new Zondy.Service.QueryDocFeature(
  54.             queryParam,
  55.             service.name,
  56.             service.layerId, {
  57.                 ip: service.host || HOST,
  58.                 port: service.port || PORT //访问IGServer的端口号, .net为6163,Java为8089
  59.             }
  60.         )
  61.         queryService.query(this.querySuccess, this.queryError)
  62.     }
  63.     static querySuccess(result){
  64.         var format = new Zondy.Format.PolygonJSON();
  65.         //将MapGIS要素JSON反序列化为ol.Feature类型数组
  66.         var features =  format.read(result)
  67.         console.log(features)
  68.     }
  69.     static queryError(e){
  70.         console.log(e);
  71.     }
  72. }

二、例子

  1. <body>
  2.     <button onclick="addDraw()">添加画笔</button>
  3.     <button onclick="exit()">退出</button>
  4.     <div id="map_container">
  5.     </div>
  6.     <script>
  7.         var docLayer = new Zondy.Map.Doc('', 'smart_city', {
  8.             ip: "localhost",
  9.             port: 6163
  10.         })
  11.         var map = new ol.Map({
  12.             target: "map_container",
  13.             layers: [gaodeMapLayer, docLayer],
  14.             view: new ol.View({
  15.                 projection: 'EPSG:4326',
  16.                 center: [114.30, 30.50],
  17.                 zoom: 4
  18.             })
  19.         })
  20.         /* 1、添加交互式画笔,获取坐标 */
  21.         // 1-1、创建画布
  22.         var source = new ol.source.Vector({wrapX:false});
  23.         var layer = new ol.layer.Vector({source})
  24.         map.addLayer(layer);
  25.         let draw;
  26.         function addDraw(){
  27.             draw =createDraw({
  28.                 type:"Point",
  29.                 source,
  30.                 callback:handleDraw
  31.             })
  32.             map.addInteraction(draw);
  33.         }
  34.         function handleDraw(e){
  35.             var position = e.feature.getGeometry().getCoordinates();
  36.             Point.query({
  37.                 position,
  38.                 service:{
  39.                     name:"smart_city",
  40.                     layerId:0
  41.                 }
  42.             })
  43.         }
  44.         function exit(){
  45.             map.removeInteraction(draw);
  46.             draw = null;
  47.         }
  48.     </script>
  49. </body>
  51. </html>